UI & UX Prototyping

 In development of any application whether mobile, desktop or web base, 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 will surely to benefit out of it in a long period of time and those organizations or individuals who prefer direct development of the application idea without any prototyping will surely lack human interaction feel in their application.

My today post 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 focus on development of visual assets of the application that involve, images, banners, ads, color scheme and consistence design of the application etc.

UX

UX (User Experience) is focused on human computer interaction element and over all functional flow of the application i.e. whether to display popup or new page when user click certain link or button, which page application will be navigated to when a link or button is click etc.

Good vs Bad Design

Apart of how an application looks, there are certain parameters which are measured in order to mark any website good or bad. Its not necessary that all of these parameters are met but, meeting most of these measure parameter will mark a design to be good.

Good Design

Purpose

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

Clarity

Visitors should easily understands what to do on your website and what is your website about e.g. blogging websites should clearly depict what kind of blog are being blogged about.

Usability

Usability of a website should be appropriate base on the purpose of the website e.g. for e-commerce base 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 not too simple.

Appearance

Appearance should be professional, color scheme and visual assets used should be appropriate, not too flashy and not too dull, but, vibrant, creative and professional.

Following are examples of some good designs

Dropbox main page has utilized empty space quite beautifully, the design is simple and fulfill majority of measures of a good design.

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

Bad Design

Outdate Content

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

Improper Alignment

Text is not properly aligned, visual are not properly aligned, space is use unevenly.

Improper Organization

Features are not properly organized e.g. 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 examples of some bad design

Above image is of a day care website (Pennyjuice.com). This example is taken just for learning & educational purpose, not to hurt the sentiments of the target entity or to degrade its reputation.

Above image is of Yale University Art Club website (http://art.yale.edu/)). This example is taken just for learning & educational purpose, not to hurt the sentiments 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 application.

 

Prototyping Tools

The simplest prototyping tool is a plain paper pencil with the sketch of your application idea. However, there are may modern tools has been introduced that not only ease out 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 (https://www.justinmind.com/)

2) Pencil (http://pencil.evolus.vn/)

3) Proto.io (https://proto.io/ )

4) Marvel Testing (https://marvelapp.com/user-testing/)

 

Conclusion

This article highlights some of the aspects which need 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 widely used prototyping tools has 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 here except from flow chart images. Also, the example used in this article are only for learning & educational purpose and not to hurt the sentiments of the target entity or to degrade its reputation.