Mar 26, 2014

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)

Mar 3, 2014

About Design

We live surrounded by tons of products that are no longer ordinary or inactives. Most of them are interactive and because we are so used to them, we are not conscious in what manner they contribute to our daily live. Those devices I'm talking about are mobile phones, personal computers, coffee machines, printers, videogames, just to list a few of them.
The important question here is: How many are easy to use and enjoyable without making a huge effort?
Of course, this is pretty easy to answer and the list will be quite small!
Sometimes we end up hammering our heads against the wall because we are not able to complete the desired task with this product.
Why this happens?
The answer is because some products were not designed with the user in mind.
The aim of interaction design is to solve these kind of issues bringing usability to the design process. That is, developing products that are easy, effective, and enjoyable to use from the user perspective.

Good Design vs Poor Design 

A good way to start thinking when a product has a good or bad interactive design is explore some examples that reflect the concept we are looking for.
Hitting the radio
Why I cannot use the radio while carrying my beverages?

Coffee Machine
In this coffee machine after inserting the coins in the slot you have to select your coffee bean. So, you press the rectangular labels to select your coffee but...they are not buttons! Probably you might think this because of Coke Can Machines work that way but...these ones not. Mmm...this is really working? Lets press the + or - sign that supposedly controls the amount of sugar...Wait WHAT? they are not buttons! After 10 minutes standing at the machine you can distinguish BLACK rounded buttons with BLACK background. Clearly a bad design!

Keyboard Layout
The guy who came up with this amazing design should be in prison right now. In fact, a friend used to have this keyboard. I never was able to use it. Every time I wrote something, suddenly the computer shut down unexpectedly...My friend always said to me "you probably has pressed the shut down key".  Nice...thanks for the two hours I have sent to the trash. Terrible design!

Thinking in What, Why and How

Suppose you have to design a new software product what would you do?
Start coding in a frenzy way until you are done with? Studying the characteristics of a well known similar software? Asking your end users about their experience, their problems, studying their tools and based on this start thinking about the what, why and how to design it? Probably the best approach would be the latter one. One of the main advantages is that you will definitely save money, time and effort.   

Conceptual Models

A good way to better understanding the problem domain is to develop conceptual models. By conceptual models we mean a description of the proposed system in terms of ideas and concepts about what it should do and look like also being understandable by the users. 
Developing conceptual models helps to envision the future product based on the user's needs and other requirements identified. As the product is being developed it is highly advisable to do iterative testing to ensure that it is designed to be understandable in the way that was planned. A key aspect in the design process is to identify what tasks the user will be doing when using the product. As with any aspect of interaction design, the process of filtering or cleaning the conceptual models should be done iteratively, using different methods such as sketching ideas, storyboards, brainstorming sessions (or visual brainstorming), describing scenarios (like "stories")  and prototyping aspects of how the system works.

Norman's Framework (1988)

One of the most important activities while developing a conceptual model is to determine if the users will understand the system in the manner intended. Norman presented a framework to make the relationship between the design of a conceptual model and the user's understanding be clearer.
Norman Framework
In this framework we can distinguish three different components:
  • the Design Model represents how the system should work, 
  • the System Image represents how the system actually works
  • the User's Model represents how he thinks the system works.
The point is that even though everybody should have the same idea or (metal model) of the system, real world doesn't work that way. Users, in most of the cases, are not able to complete their tasks effectively and error-free because their mental model is quite different from the Design Model and the System Image.
Jacob Nielsen wrote a blogpost explains a little bit what Mental Models are. In it, he says that mental models are "based on belief, not facts: that is, it's a model of what users know (or think they know) about a system such as your website". This definition brings to the light the discrepancies that Norman's Framework want to iron out. Also, "Metal Models" by Indi Young states that "metal models give you a deep understanding of people’s motivations and thought-processes, along with the emotional and philosophical landscape in which they are operating". Moreover, the author highlight the importance that these kind of models have. She summary this idea in the "three C's":

  • Confidence - guide the decision of the solution, 
  • Clarity - make good user and business decisions,
  • Continuity - ensure longevity of vision and opportunity.
Furthermore, Don Norman affirmed previously the idea that "the designer has an obligation to provide an appropriate conceptual model for the way that the device works. It doesn't have to be completely accurate, but it has to be sufficiently accurate that it will help in both the learning of the operation and also dealing with novel situations".

The Process of Design

Pabini Gabriel-Petit, a professional with more than 20 years of experience in User Experience and Design, in an article at wrote that in the goal for achieving optimal design solutions, designers need an effective process that provides a framework to work with to deliver high quality work.
This should be a user-centered design (UCD) process, but also being a flexible process.  She came up with UC3D Lifecycle that comprises three phases: Discovery, Design, and Development Support.
UC3D Lifecycle - from
The UC3D can be summarised in the following steps:
Discovery Phase:
  • Learning about your users 
Try to gain all the understanding possible of your users. Use your intuition to put yourself in your user's place. Once you truly understand your users, this understanding provides a basis for modelling your users. 
  • Modelling your users (like using model personas)
Once you are armed with all the information your group can develop profiles (or "personas" which are fictional user archetypes that are representative of your end users). Based on your information, you can develop a set of clearly differentiated user profiles whose goals and needs you intend your product to serve.
  • Analysing your user's tasks
This step comprise the identification of the tasks (task domain) that the user follow while using the future system and will be the basis for designing its workflows. Task analysis is an activity that can help you to understand much in depth the tasks.
  • Eliciting and Defining Clear Product Requirements
During this step requirements are clearly identified and prioritised. The working team will design and define what capabilities, features, and qualities your product must have. 

Design Phase:
  • Developing Conceptual Models
Conceptual modelling is an activity that helps your working group see your product's concepts, workflows, features, and language from your users's viewpoint and envision, define, and design products that are simpler, more consistent, and easier for users to understand.
  • Solving Key Design Problems Through Ideation
During ideation everyone on your working group has an opportunity to communicate requirements and constraints and contribute design ideas. Ideation involves rapidly generating many different possible workflows and user interface design solutions and capturing them by sketching designs on easel pads or whiteboards or in notebooks. As an example this can be seen in the video How Google fixed its design process and started making beautiful apps and also being part of the next step.
  • Doing Detailed Design
Once your working group has agreed on some basic design approaches during previous step, you will continue working on them during this step, continually refining your interaction design solutions by optimising workflows and interaction models, and creating design artifacts that communicate them effectively (like flowcharts and wireframes). All the feedback from the working group is taking into account to make more refinements on the design solutions. After all team is satisfied all stakeholders will approve design artifacts for implementation.

Development Support:
  • Providing Development Support
Your iterative process of design refinement should continue throughout product development as developers discover they need additional design details. All doubts that may arise should be answered by the working team to the people in charge of the development, and clarify design artifacts as necessary.
Also at this stage, if the testing reveals usability problems or usability issues you will need to do recheck your design solutions and artifacts. However, most of the usability issues you discover at this step are not addressed until the next product release. The Development Support Phase ends with the delivery of the (supposedly) high quality product that meets user's needs and is easy to learn and use.


Finally, if we can separate the less possible the Design Model and the User's Model making good conceptual models we will come up with understandable, enjoyable and easy to use products. In addition to have good conceptual models, expertise in the domain can help substantially. But, the implementation of an efficient design process such as UC3D will play a central role in the deliver of a high quality product.