jueves, 14 de mayo de 2015

Usability guidelines & heuristics

Design guidelines are specific principles helpful for taking design decisions. There are guidelines for particular products (sure for all of the market), but general guidelines "rules of thumb" for interaction design when used for evaluation purposes are called "heuristics". The most famous and influential heuristics are the Nielsen's heuristics. In 1990 Jakob Nielsen and Rolf Molich developed these heuristics written in the paper "Heuristic Evaluation of User Interfaces", afterwards the revised final version of Nielsen was released in 1994. 

A heuristic evaluation (analytic technique) is a process where an expert (someone trained in usability or Human Computer Interaction) reviews a software application and compares it against a set of principles (heuristics) in order to make more usable applications. The expert supplements the evaluation with real users, but does not replace it. Because different people find different problems, it is advisable to have multiple evaluators, not just one, to find many problems as possible.

Let's see the Nielsen's 10 usability heuristics with examples of each one...

1) Visibility of system status

Gmail - Attaching a file
Facebook - Login













Both systems are giving feedback to the user about what is going on, in the Gmail case when a user wants to attach a file to the message a progress bar appears, suppose that you want to attach a heavy file and the user is waiting, waiting,... and finally gets desperate if he doesn't see how it will progress. The Facebook case is similar to the last one, to know that the login is in process it shows an iOS Activity Indicator (loading spinner).

2) Match between system and the real world

iTunes - Library navigation
Maps - Location and itinerary















iTunes uses the Library as a methaphor. The system speaks the user's language to differentiate and organize the elements the library contains concepts familiar to the user, including Music, Movies, TV Shows, etc. In the other case, the Google Maps application shows where you are with a pointer, the name of your location at the bottom and, if you want to find an itinerary, at the top it shows "FROM: x TO: y" the info appears in a natural and logical order following the real-world conventions .

3) User control and freedom

Excel - Entering equation
Facebook - Timeline














Since users don't like to feel trapped by the computer, as I said they only want to get on with his work, imagine that you are working with Excel, introducing an equation, and suddenly you noticed that you made a mistake...don't worry, you can return to previous state. Also Facebook is able to go back screens after going to someone else’s timeline or another post. Further it gives options to hide, delete or edit a post that you wrote on your timeline .

4) Consistency and standards

Gmail
Office














Users don't have to wonder whether different words, situations, or actions mean the same thing, for that reason Gmail used the same words/concepts that every user of a traditional mail application knew (Inbox, Drafts,...). Office suite is composed of applications that follow a series of platform conventions to give it consistency.

5) Error prevention

Introducing username
LinkedIn - New session














Careful design avoids many problems, it is better to prevent a failed user input than to send error messages after. For instance at the time of introducing username in an application to create a new account will be better a pattern in the textbox which guides the user instead of a message. As LinkedIn does, preventing the logon until the user and password are introduced, by disabling the button.

6) Recognition rather than recall

Browser - Looking for something
KeyNote - Font options













Computers are better in memory than us, in order not to remember information if you are looking for information in the browser, with the first characters introduced the immediate action is the emergence of previously visited URLs or searches, just in case you want to visit then again. Another example in KeyNote, instead just font names when you are selecting fonts it shows the preview of the font.

7) Flexibility and efficiency of use

Twitter - shortcuts
Matlab - Command completion










Through some strategies can be made advanced users more efficient. One strategy is the keyboards accelerators such as the Twitter keyboard shortcuts or the command completion that MatLab has or integrated development environments. The goal of all these strategies is to speed up the user interaction.

8) Aesthetic and minimalist design


Google account
Chrome - Browser













Google is a good example of minimalist design, the previous browsers were a mess with all mixed, they should not contain info which is irrelevant in a search. Every extra unit of information, in a browser in this case, diminishes the relative visibility, that not happen in Chrome. In the Google page for login in your account there is exactly what is necesary with no distractions. It maximizes its use making things simpler, whitin a few time you have registered.

9) Help users recognize, diagnose, and recover from errors


Starting a new account
OS - Adding new hardware










Error messages should be expressed in understandable language, an error message like "ErrorCode 0xa056e12d", as we often see while debugging a program, says nothing to a normal user (only at developer level). It is better the way OS explains in clear terms how to solve a hardware problem. or when creating a new account, highlight the specific fields that the user forgot to fill out indicating specific instructions.

10) Help and documentation

Justinmind - Video tutorials
Help button














This heuristic perhaps looks least important in comparison with the others which focused in ease to use a system, anyway he have to provide documentation on how to use the system or help on how to solve a possible problem. Embeded videos, as kind of documentation, can be used to showcase features as well as get people started using a product, as the ones you can find with the tool Justinmind. In every app should be easy to search info as through a help button.
--------------------------------------------------------

Actually there are more guidelines & heuristics than the popular Nielsen's. Susan Weinschenk and Dean Barker researched usability guidelines and heuristics from many sources and created a categorization into 20 in their book.

lunes, 11 de mayo de 2015

Prototyping

A prototype is NOT a demo!

A prototype is a representation of all or part of a system that, although constrained in some way such as user confusion between the prototype and the final system, can be used for evaluation in the iterative development which is largely based on this tool.
Let's remember the step where we are [Evaluate the designs] within the iterative process watching the graph below:



Prototypes can help designers refine their ideas (implementation, "look and feel" and so on) and discover previously unknown issues. Also they can build empathy for users and they communicate to clients, users and designers.
This tool is really good in the process for design human-computer interfaces serving user needs. "One of the most productive uses of rapid prototyping to date has been as a tool for iterative user requirements engineering and human-computer interface design." [1]
We can distinguish between two types of prototypes:
  • Low fidelity prototypes, how can it be the Paper prototypes. These kind of prototypes are very cheap, easy and quick to make; and comply perfectly with the objectives of the task to be tested with the user. 
 
The one we did during the course

To simulate the interaction can be used what is known as chauffeured prototype, that implies to use a paper prototype in a given scenario and the designer manually demonstrates how the interface would respond to user actions.

  • High fidelity prototypes, how can it be Mock-ups (throw-away) and Software prototypes (not throw-away). There are different mock-ups tools availables depending on your target: Mobile [Justinmind, FLuidUI]; Web [Dreamweaver, Photoshop]; Multiplatform [Balsamiq]; Multipurpose [Powerpoint, Visio].
  • As our project is a mobile application, it is used Justinmind. It is a nice and easy to use tool (drag&drop tool) which allows to display a running prototype in a simulator or on the device itself.

Getting started with the tool :)


On the other hand, Software prototypes are not thrown away, they serve as a base container that gets extended with real content. They are done in an IDE such as Eclipse, Xcode, Visual Studio... 




[1] S. P. Overmyer: Revolutionary vs. Evolutionary Rapid Prototyping: Balancing Software Productivity and HCI Design Concerns. Center of Excellence in Command, Control, Communications and Intelligence (C3I), George Mason University, 4400 University Drive, Fairfax, Virginia.