A Brief Introduction Of UI And UX Prototyping

UI & UX Prototyping

In the development of any application whether mobile, desktop, or web-based, prototyping of the application is the most crucial and neglected portion. Those organizations or individuals who realize the potential of early stage prototyping of the application idea tend to benefit from it it in the long run and those organizations or individuals who prefer direct development of the application idea, without any prototyping, will surely lack the human interaction feel in their application.

My post today  is a non-technical one, which will highlight UI vs UX, Good vs Bad design, UI responsiveness and some prototyping tools.



UI vs UX

UI & UX are two interlinked terms which are mixed with each other quite often. However, there is a quite significant difference between them.

UI

UI (User Interface) is focused more on how an application's elements are structured together; i.e., which button will display where, images will take how much space on page, where to display text, how to align spaces among different elements, which feature to place where on screen etc. UI also focuses on development of visual assets of the application that involve images, banners, ads, color scheme and consistent design of the application etc.



UX

UX (User Experience) is focused on human-computer interaction elements and overall functional flow of the application; i.e., whether to display a popup or a new page when user clicks a certain link or button, which page application will navigate to when a link or button is clicked etc.



Good vs Bad Design

Apart from how an application looks, there are certain parameters to be measured, in order to mark any website good or bad. It's not necessary that all of these parameters are met but if meeting most of these measures, the parameter will mark a design to be good.

Good Design



Purpose

Purpose of a website should be clear; i.e., whether the website is a social network, administrative panel, or an e-commerce portal.

Clarity

Visitors should easily understand what to do on your website and what your website is about, i.e. - the blogging websites should clearly depict what kind of blogs are being posted.

Usability

Usability of a website should be appropriate based on the purpose of the website e.g. for e-commerce based website, the usability factor is search, categorization of product, and shopping cart.

Accessibility

Website should be cross browser supported, responsive; i.e., work across different screen sizes.

Navigation

Website navigation should be appropriate, not too complex or not too simple.

Appearance

Appearance should be professional. The color scheme and visual assets should be appropriate. They should neither be flashy nor too dull, but, vibrant, creative, and professional.

Following are examples of some good designs.



The Dropbox's main page has utilized the empty space quite beautifully. The design is simple yet fulfills the majority of measures of a good design.



Fresh Books, also, is quite clear about what they are offering to their target users. The design is simple and justifies most of the good design measures.

Bad Design



Outdated Content

Provided content is not up to date; i.e., expired copy rights, expired contact details.

Improper Alignment

Text is not properly aligned, visuals are not properly aligned, space is used unevenly.

Improper Organization

Features are not properly organized; i.e.,  one page shows something and another page shows something else.

Limited Accessibility

Supported by limited browsers, not responsive.

Bad Navigation

Website navigation should be appropriate -- not too complex, not too simple.

Bad Appearance

Meaningless visuals, improper color scheme, no consistency in appearance.

Following are some examples of bad designs.



The above image is of a day care website. This example is taken just for learning & educational purposes, not to hurt the feelings of the target entity or to degrade its reputation.



The above image is of Yale University Art Club website. This example is taken just for learning & educational purposes, not to hurt the feelings of the target entity or to degrade its reputation.

UI Responsiveness

UI responsiveness means that the application is supported across multiple screens i.e. desktop, mobile, tab and laptop, especially web applications.



Prototyping Tools

The simplest prototyping tool is a plain paper pencil with the sketch of your application idea. However, there are may modern tools that have been introduced that not only simplify prototyping of the application but also provide very rich demonstration of an application at its early state. Some of them are listed below.

1. Just In Mind
2. Pencil
3. Proto.io
4. Marvel Testing

Conclusion

This article highlighted some of the aspects which are needed to be considered while designing & prototyping a web application. Importance of UI & UX has also been highlighted, some of good and bad design measures are highlighted and lastly, some of the widely used prototyping tools have been listed.

Disclaimer

Apart from flow chart images, all other images have been taken from the internet. I do not own any image used above, except from the flow chart images. Also, the examples used in this article are only for learning & educational purposes and not to hurt the feelings of the target entity or to degrade its reputation.