User Experience Design – The importance of wireframe

by Esmund Koh.

Do you remember what websites used to look like? I do, plain boring tables and a link dump for your navigation needs.

tI9Ww

Src : http://i.stack.imgur.com/tI9Ww.jpg

As technology evolves, complex design became possible and the industry looked towards providing pleasing user interfaces to attract customers. Nowadays when we surf the web, we are greeted by a visually pleasing layout with organised and intuitive navigation. Moving beyond simply providing attractive visual design, there is a greater emphasis in user interaction and experience. The term user experience design (UXD) is used to define this design field.

So, how does designer build great user experience designs?

One critical step of the design process is the wireframe.

Wireframe is a pivotal component of the design process. It serves as a visual framework that depicts the general layout of a webpage allowing designers to brainstorm and experiment concepts for the page.

wireframe-example-large-1

Src: http://blog.skipper18.com/wp-content/uploads/2014/01/wireframe-example-large-1.png

An example of wireframe of Facebook’s timeline page.

Wireframe can range from being a rough sketch or low fidelity to realistic or high fidelity

Low-vs-High-Fidelity-UX-RossPW

Src : http://rosspw.com/wp-content/uploads/2012/11/Low-vs-High-Fidelity-UX-RossPW.jpg

As shown above, low fidelity wireframes are more abstract and contain only the basic layout of elements in a page. This is preferred during brain storming or experimenting before a design is finalised. High fidelity wireframes, on the other hand, is a representative of the actual webpage with detailed content and styling.

This begs the question, how much detail should be included?

It depends.

When designing a webpage, it is often the case where requirement or plans change over time- resulting in frequent edits to the web design. Therefore, a rule of thumb by designers is to build a concrete concept and slowly build from it. However keep in mind that there is no “right” way as different teams and project may affect the design process depending on the complexity or time constrains.

UX-Fidelity-Design-Chart

Src : http://rosspw.com/wp-content/uploads/2012/11/UX-Fidelity-Design-Chart.jpg

A guideline to follow when balancing fidelity and concept.

A website or application usually contents multiple pages or screen layout. Multiple wireframes are often placed together to represent how the website will flow.

wireframes-2

Src : http://heroesandguises.com/blog/wp-content/uploads/2013/11/wireframes-2.jpg

This example shows how different wireframes are integrated to form a cohesive navigation experience for the final product.

Wireframes can also be used in usability testing before the concept is developed further. This can save the agony; not to mention time and resources, of developing a potentially bad designed wireframe into a full-fledged website before realising.

As mentioned in this week’s lecture on usability testing, there are certain experimental biases skew the test results.

bi_graphics_20-cognitive-biases-that-screw-up-your-decisions

Src : https://static-ssl.businessinsider.com/image/55ddd6f7bd86ef1e008b6051-1200-2247/bi_graphics_20-cognitive-biases-that-screw-up-your-decisions.png

Some of the biases we must take note of when making decision, including deciding the choices of changes to design based on user feedback.

As the saying goes “Well begun is half done”, building a great user experience begins with a solid design.

Reference :

http://heroesandguises.com/blog/2013/11/12/an-insight-into-wireframing-heroes-and-guises/

http://rosspw.com/the-design-process-and-artifact-fidelity/

https://www.usertesting.com/blog/2012/10/23/wireframing-tools-and-testing/

http://www.businessinsider.sg/cognitive-biases-that-affect-decisions-2015-8

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s