Detailed Interaction Design

The information that a website or application can exhibit to an user can be organised in different ways. A user navigates looking for information with a specific objective. The easier and faster he finds the information, the greater the satisfaction and productivity will be. For this reason is that we should facilitate tools that aid the user to achieve his goals. Navigation menus is one of the tools that facilitates the user to navigate inside the information architecture of website using dialog boxes, "boxes" (can be of any shape), images or even also simply text. Lets illustrate an hypothetical situation where a customer wants a to buy a product from a company A. This company has one of the best products in the market. Their website contains lot of information regarding the products offered and the company itself but the data is unstructured and it is presented into single page. On the other side of the river, the competence B, has a well organised site with a simple top menu for navigating the information concentrating the main services, products and company information. This menu helps the user to access directly the information with a single click. So, the customer visits A's website looking for a product  but disoriented with such a huge amount of information and unnatural navigation style; he finally desists. Next, the customer go to the competence's website and with just a couple of clicks using the top menu, he finds and buys the desired product. Most of the time, users are not patient and in fact, they lose it really easily. Currently, there are lot of websites that despite of having menus still have navigation problems. Moreover, having a good navigation design is not an easy task and should be tackled properly. 
Menu Tree -
Three distinct goals must be obtained to have a pretty decent navigation.
  • Provide means to go from a place to another without overcomplicating the connections.
  • Communicate the relationship between the elements it contains.
  • Communicate the relationship between its contents and the page the user is currently viewing. 
There are different types of navigation designs with different characteristics.

Global Navigation

This type of navigation design provides access to the main areas or key points of a site. Every place where the user wants to go, eventually, will arrive there.
Global Navigation
Local Navigation
In this kind of navigation design, the user moves through the parent, siblings and children. Moreover, this style provides access to nearby elements in the architecture.
Local Navigation
Supplementary Navigation
This navigation design provides shortcuts to different parts of the architecture that are not easily reachable by global navigation or local navigation but at the same time maintaining a hierarchical structure.
Supplementary Navigation
Contextual or Inline Navigation
Sometimes while navigating content, the user need extra information. Instead of scanning through the content or outside the site, it adds hyperlinks embedded to the extra data. Not understanding the user needs and using this type of navigation design can lead to confusion.
Contextual Navigation
Courtesy Navigation 
It's useful to provide elements that are not needed on a regular basis but they are provided because of convenience. Typical examples are feedback forms, contact information and policies and principles.
Courtesy Navigation
Remove Navigation
In this design, the navigational device is not embedded in the structure and it's independent from the content or the functionality. For instance, site maps and index (also called "web site A-Z indexes") are clear examples of this type. When a user can't find what he wants using the other kind of navigational styles he lean toward to this type. The site map is a outline of the architecture of the site with links in a hierarchical order. Site maps usually provide two levels of depth at maximum. The most common way of generating index navigation is with a list of links of important elements alphabetically ordered.
Site Index

Screen Layout Diagram
These are all the elements that forms the interaction context and how they are placed into a window or page.  The layout defines the size, spacing, emphasis the GUI elements and location of the elements. Good layouts helps users to find what they are looking without forgetting the visual appearance. Nowadays is a highly searched characteristic in the market for products of any kind. Google's Play Store and Apple's App Store have basic guidelines that each app can follow concerning design, screens layout and also internal programming structures and details. Sometimes the process starts drawing the layout in paper with the elements placed to see how well they suit. There are also tools like inVision and balsamiq which facilitates designing layout prototypes with predefined drag-and-drop elements. 
Balsamiq App


Although how we access the information is important also it is how the user consume it. Users unconsciously use different patterns while reading the content of a website depending if attracts or repulses the attention.

Reading Pattern
Users reads from the left to the right and from the top to the bottom following the layout or visual structure of the page. During the reading, most of the words are read but the content that seems unimportant or requires a lot of effort is skipped. This pattern is assimilated to the pattern used while reading a book  

F-Shaped Pattern For Reading Web Content
In a study conducted by Jakob Nielsen, he recorded how 232 users look at thousands of website pages. Their findings indicate that the dominant reading pattern looks like an F shape and has three components: 
  • At the top area of the sites, users read in an horizontal movement. 
  • After that, users read a little more in the content of the page going down and the start reading horizontally again.
  • Lastly, users scan what is left of content in a vertical movement.
Using heatmaps for tracking eye movements he distinguishes an F pattern.
F-shaped pattern

Arching Pattern
In this pattern, the user scans the page starting in the upper left corner and ends in the lower right. The upper right corner, strong fallow area, sometimes is being notice and the lower left corner is called weak fallow area. This way of scanning path is also known as Guttenberg Path. 
Guttenberg Path

Small Screen Pattern
In devices where the screen size is limited like smartphones and some tables, the scanning pattern is different. The path starts in the upper left corner and goes down until the end of the screen following a straight line. Once the device is turned right, the screen width is expanded and the pattern converts to something similar to the reading pattern.  

Conversation Pattern
"Monologue conversations" explain to the user everything.  They answer every question that he could have without involving the user. Sometimes it is a good approach but the user doesn't have a voice in deciding what to read or what to omit.

Sign Up with Long License 
Pyramid inverted style conversations display a summary with the important or essential information first and continues progressively disclosing details of content. This approach let the user decides when to stop reading because he finds sooner the useful information and if he think it is necessary he can continue reading for extra data.

Inverted Pyramid Style
They are documents that compile and explain all the information regarding a software product (or suite of products) user interfaces. In general companies include templates, design control and rules, logos, colours, typographies, illustrations and photographies. The main purpose is to have centralised storage for consistency developed in an iterative process and to communicate user experience standards across an organisation.
Some important concepts should be kept in mind while creating or updating a styleguide.
  • Keep the audience in mind - Different people inside a company such as developer, designers and business analysts can use these elements.
  • Plan for success - Think in advance what can make your styleguide successful in your organisation.
  • Keep it alive - Styleguides become soon outdate, for that reason they should be produced in way that they can be easily maintained and supported.
  • Define a review process - Define a specific process for reviewing and modifying the styleguide.
  • Think of the platform differences - The different platforms available in the market make us to choose if we support a specific platform or be neutral. If it is neutral in reference to the platforms, will be harder to maintain and bigger the spreading.
  • Socialize the document in your organisation - Promote the use of it throughout all the levels of the organisation. This ensures that everybody knows the existence, understanding and actively use of it. The more, the better.
  • Clearly define mandatory and flexible standards - Ensure supporting new platforms and new creative ideas setting mandatory standards that are also flexible. 
  • Make the styleguide as scannable and searchable as possible - Facilitate searching and browsing capabilities that will make easier to find what they are looking for. Visual examples are desired always if possible.
  • Provide real world example - Illustrate with examples from real applications to demonstrate your point. Try to cover as many applications if it is a large organisation with different applications.

Everything counts at the moment of enhance the user interaction, so better focus effort on it.
"Interaction design is about behaviour, how things work. [...]Defining what happens when a person uses a product or service is what interaction designers do.[...]The reason we do it is to enable connections interactions between people.[...]All of these things and many, many more are about connecting people and helping them communicate better between themselves and the world." (by Dan Saffer)


Anonymous said…
Wow that was strange. I just wrote an really long comment but
after I clicked submit my comment didn't appear.
Grrrr... well I'm not writing all that over again.
Anyways, just wanted to say superb blog!

Feel free to surf to my page :: フィットネス 通販

Popular posts from this blog

Como configurar el control de directv para que funcione con el Tv

Show all values in Numpy array

Converting unicode date to datetime object.