Tuesday, 10 May 2016

Wireframing Basics - Part 2

In Wireframing Basics - Part 1 we have seen, wireframes, types of wireframes, 5 Planes of UX etc.In this article we will look at some important Principles before starting wireframing work.

1. F-Shape pattern

How people read on Web; they don’t. – Jacob Nielsen
  • People SCAN web pages
  • The F-Pattern describes the most common user eye-scanning patterns when it comes to blocks of content.


Note points:
  • Make webpage text easy for users to scan.
  • Use bold headings and subheadings.
  • Use bullet lists when you can to break up content. Bullets are also easy to scan.
  • Priorities & place the content in hierarchy

2. Call to Action

‘Call to action’ are buttons or actions for most important or primary tasks on website.

‘Call to action’ helps in understanding that
  • End user is able to understand what next he/she can do
  • Where each click will lead them


Make Call to Action effective by:
  • Choosing end user familiar words 
  • rather than business jargons
  • Placement
  • Color
  • Size
  • Minimizing counts

Examples:



3. Affordance

  • According to Norman (1988) an affordance is the design aspect of an object which suggest how the object should be used; a visual clue to its function and use. 
  • Good designs are intuitive and good affordance helps in making design intuitive.


Example:

Affordance in Physical world

Affordance in digital, ex.  Buttons, Text fields



In next article we will be looking at 'Creating Low & Mid Fidelity Wireframes'.


<< Wireframing Basics - Part 1                          Wireframing Basics - Part 3 >>

About Author:

Abhishek Jain


0 comments :

Post a Comment