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.

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.

Visual Design

We communicate using verbal communication (that can be read or heard) as well as non-verbal (that can be seen). In our world the second one could be called visual communication, a good visual design makes a difference, this mean create a good "visual" communication with the viewer.
For example if you want to buy a magazine, when you come in the newsstand, would you rather buy a magazine that looks nice with an organized content cover, layout colors, etc or would you buy the one that has a simple white cover with an impossible to read typography?
The answer to this question is easy,  the human eye is all around the visual appeal that leaves the audience an impact in their mind, so the one which looks nice. 

'Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements.  A successful visual design does not take away from the content on the page or function.  Instead, it enhances it by engaging users and helping to build trust and interest in the brand' [1].

After reading the above definition from Visual Design Basics (usability.gov), I can say visual design offers a way to utilize every possible visual means to communicate effectively with the intended audience. It relies on the aesthetic values to pass a clear message to the viewer.

As any designer should know, the design doesn't have rules or recipes, you have to think about it a lot depending on each system. Each case require the use of creative thinking to solve visual communication problems, potential points to take into account are: Simplicity, visual consistency, visual metaphors, organization, colour and typography.

SIMPLICITY
"Everything should be as simple as it is, but not simpler." - Albert Einstein

There’s something inherent in human beings that prefers the simple to the complex, something free from complexity or division into parts, subtracting the obvious and adding the meaningful. This point of view is about making something easier to understand.

There is a book which uses a remote control to illustrate four strategies to simplify a product [2].

Remove: Get rid of anything that isn’t essential to the remote.

Organize: Arrange the elements of the remote so that they fit into logical parts based on the person’s mental model.

Hide: Place the most important elements within reach, and hide the others, making them accessible through a cover.

Displace: Pushing some of the functionality to another device, so that the remote isn’t responsible for displaying every possibility.

Also you can see John Maeda's ten laws to test and create an idea of simplicity.

VISUAL CONSISTENCY

From a broader perspective of the visual design of something it is important to maintain consistency and common style among all pages. To ensure that this consistency is met, it is useful to develop a style guide book or to serve as a reference document for the entire development team.

VISUAL METAPHORS

A visual metaphor is the representation of something by way of a visual image that suggests a particular association for a human beign. Humans understand metaphors by intuition, for instance... 

the action of throwing something to the trash is associated by this icon suggesting the trash itself and the action of remove an item from your hard drive.

There is a very widespread questioned issue related with this concept. This issue is the difference between skeuomorph and visual metaphor, What does this strange word means? definition  A classical example of skeuomorphism: Apple’s iCal mimicks texture and layout of a paper calendar, including torn edges, which do not have any function or interactivity. [3] check it in the image below:

Skeuomorphism means an aesthetic overload becoming cheesy and non-functional, that is exactly the opposite of visual metaphors which are useful regarding the mental model of the user.

The skeuomorph paradigm started by Apple has already been abandoned by the major companies over the years.

ORGANIZATION

In order to avoid information overload, the design of each interface should consider user behavior in the visual sweep of the page, distributing information and navigation elements according to their importance in areas of varying visual hierarchy - for example, the upper regions of an interface have more visual hierarchy than the lower ones.

COLOUR / TYPOGRAPHY

Besides the position of each element in the interface, there are other techniques to prioritize information such as: use of size and space occupied by each element to give importance to the visual hierarchy, use of color contrast to discriminate and distribute information, use of typographic effects to emphasize content and use of relief/depth effects to highlight items, etc.

Another important visual aspect of the design is accessibility. In the use of colors, concerning to the last point, must offer sufficient contrast between text and background not difficult to read, and also select color combinations taking into account the visually impaired color perception which might present our users. Another example, by using images in the design for accessibility and comprehensibility, it should take care of their resolution and size in order not to lose context, for instance by minimizing an image excessively.

[1] http://www.usability.gov/what-and-why/visual-design.html
[2] Giles Colborne, Simple and Usable.
[3] Thomas Zhaler, The Truth about Skeuomorphism vs. Flat Design.

Detailed Interaction Design

Dariel Fitzkee, the famous magician’s magician once stated, “Magic is both in the details and in the performance”. Interaction design is just like that. It is in reality creating a user illusion out of many tiny nuanced, interesting moments. [1]
Today I begin the post with this quote about the book Microinteractions. A recommended book for designers of user experiences which focuses on the little things that turn a good software product into a great one (into a great "user illusion" in the words of Bill).

Once seen the usability requirements, in this step "Produce design solutions to meet user requirements" we have to design interactive products which support a sustainable communication/interaction between people and their daily tasks. This approach focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks. To do this, you need to understand how the pieces fit together...and for the best placement of these pieces in the system we can use any of these techniques/tools:

Menu trees: Represent the menu navigation structure, the navigation between dialogue boxes or the information architecture of a website. Information architects typically visualize the results of their efforts in a site map diagram (another way to call it).

Navigation Maps: More or less the same concept as in the last case, but this time it is simply used to represent the structure of the different screens (interaction contexts) that an application has. These maps show the potential navigation paths between screens, do not include all possible paths, they are confined to logical and expected paths.  Below an example of a navigation map I did for an iOS app.

Screen Layouts diagrams: Definition of the elements that compose an interaction context and their distribution in the screen, this allocation follows a logical distribution in areas. These diagrams are useful if a platform is strict, as it can be iOS. The figure below shows the interaction contexts of the iOS app.

Card sorting: Technique useful for understanding how users organize the information in their minds (related with the mental model of the user). It works by asking representative users to rank a list of terms in order to know how items relate to each other within the system.
There are two common card sorting techniques: the open and the close card sort. Although card sorting is a very simple and cheap technique you can use, it has some pros and cons, explained here.

Product style guide: Document compiling all the information concerning a software product UI. Detailed design should adhere to a product (GUI or web) style guide.

I can say the more centered detailed UI, the more useful these techniques. You choose which one to use! :-)

[1] Bill Scott, Sr.Director, Paypal 

Usability Requirements

Within the iterative process, in this post is discussed the step "Specify the user requirements". The user requirements analysis, is the stage where failure occurs most commonly, get right requirements is crucial. Unfortunately, usability requirements are rarely identified by organizations purchasing or developing software. The purpose of this step is to establish usability requirements which can be tested later in the development process. With this goal in mind these requirements can be defined in sufficient detail following different specifications available, such as CISU-R (Common Industry Specification for Usability - Requirements) developed by the USA National Institute of Standards and Technology. (NIST), the PDF version of the specification can be found here.

Talking about quality, there is a concept called "Quality in use", this type of quality is measurable during the effective use of the software product by its users. It is defined as the capability of the software to allow meeting specific goals with effectiveness, efficiency and satisfaction.

With usability specifications can be provided concrete objectives for usability plus usability criteria that can be tested. More information on setting criteria for effectiveness, efficiency and satisfaction can be found in ISO 9241-11: Guidance on usability, and ISO/IEC 9126-4: Quality in use metrics ("Quality in use" is defined in a similar way to "usability" in ISO 9241-11).

Human-Centred Design

Continuing with usability in software systems, the current post will cover the iterative process which must be follow to deal with this topic. This iterative process was quoted in the previous entry as User-centred design process, it can also be called as Human-centred, whose definition and graphical representation are:

"Human-centred design is an approach to interactive system development that focuses specifically on making systems usable." [1]

After planning a human-centred design process (step1), the next step in the process is to understand and specify the context of use.

Remember we talked something about the context of use in the previous post, did you remember?

The context of use is the actual conditions under the software product is used, or will be used in a normal day to day working situation. This context must be studied in order to know their characteristics insofar as they are likely to influence the usability of the final software product. The context of use is composed by three elements (users, tasks and environment).

We have to analyze:

1. Characteristics of users.
2. Tasks that users are going to perform.
3. Environment where the system is going to be used.

This type of design requires active involvement of users throughout the development process, plus an appropriate allocation of function between users and technology. At this point, it is going to reflect on some available methods for the observation of the context of use:

[USERS]
Questionnaries: After preparing a questionnaire about relevant issues, you can choose to conduct a series of personal interviews or distribute it  to a sample of users. In my opinion the second option is better because the user will feel more free and you probably will receive more feedback.
User representation: This can be done with Personas technique, defines fictitious personas based on information gathered from many real users and focuses on these personas throughout the software development process (advantage: it helps to think on the real end user); or User profiles, collects and organizes information about users viewing them as roles.
[TASKS]
Observation: Made by the observer himself following the technique of Ethnographic observation, in which the viewer is immersed in the "culture" to study, understanding the motivations and needs of the user and their use of technology (aka fieldwork); or Contextual Inquiry, technique based on elicitation requirements in the user workplace, in this case the observer occasionally interrupts the user to ask why a particular action has been performed in order to find the logic behind. This technique could be seen a little bit intrusive/aggressive ( :-o I prefer not to use it!).
Self-observation: The observer does not have to act, at least initially, is the user who performs his tasks and we can study him, bothering him, writing a diary, or using a tool such as Google Analytics (automatically, undisturbed).
[ENVIRONMENT]
Competitor analysis: This method is an important part of the strategic taken, it is a strategic technique used to identify weakness and strengths that a company's competitor may have, and then use that information to improve our own product. Some might wonder Why bother to analyse competitors? On the one hand some companies think it is best to get on with their own plans and ignore the competition, but on the other hand there are others who become obsessed with tracking the actions of competitors (even using illegal methods). In summary the best goal we can achieve with this method is to generate understanding of competitors strategies to react to changes, templates on how to write can be seen here.

Besides specifying the context of use, it is necessary to produce design solutions that meet user requirements. And...what is design? Design is create something from scratch, in software market, this something is abstract, complicating the job. Therefore, designers should have in mind a product concept (design model), that's a high-level description of how a system is organized and works.
Another question arises at this point How designers can generate and discuss design ideas? let's answering this question explaining different techniques:
Brainstorming: That is useful to generate a diversity of ideas, however it is not good if there is tension in the group or there are fights over the ownership of ideas.
Parallel design: To explore different alternatives several different designers work out preliminary designs before settling on a single approach.
Scenarios: Specific case of the use of the product, they are fictional stories written as a narrative.
Storyboards: Also an specific case of the use, but this time the story is a comic-strip-like set of drawings.
Scenarios and storyboards are a good way to increase the fidelity of the project without overly focusing the functionality of the UI. They concern themselves with situated conditions, user motivations and environments without addressing functional details of the UI. Both design artifacts can offer visual ideas of users’ interaction with the product and can force design decisions, if you are not good at drawing, your choice are the scenarios, but as "a picture is worth a thousand words" I recommend using storyboards. To do storyboards check out Guide to storyboarding [2], a very good guide that considers three main points (setting, sequence, satisfaction) when making them.

Setting:  People involved? Environment? Task being accomplished?
Sequence: What steps are involved? What heads someone to use the app? What task is being illustrated?
Satisfaction: What's the motivation for the user? What's the end result? What need are you satisfying?

Applying these three points, this is part of the storyboard of our project

The big problem that exists nowadays is that enough iterations are not performed in the development process of a software system, perhaps caused by budget problems, time, etc. Often, only the first user requirements are taken in account and without continuous iterations it is hard to keep the project updated and at the end you have a different product than the user wanted. The reaction of users to the system can not know in advance 100%, no matter how has been studied the problem and potential users (humans are unpredictable by nature), so you need to refine or redefine the design. Consequently the iterative approach is required because the better understanding of the problem is only reached when the solution is finished.

[1] ISO 9241-210
[2] Dar Aziz, Amal. Amal's Guide to Storyboarding. Stanford University.

HCI and Software Engineering basics

Let's start answering these question: What does HCI stand? What's Interaction Design about?

HCI stands for "Human Computer Interaction", the HCI discipline is concerned with the design of computer systems that help people to perform their activities productively and safely [1].
Interaction Design is about designing interactive products to support the way people communicate and interact in their everyday and working lives. This approach considers user experience (UX) [1]. To learn more about user experience, check out Usability.gov the leading resource site for UX best practices and guidelines, from this site I strongly recommend starting with Interaction Design Basics.

HCI and Interaction Design are multidisciplinary, within the wide range of disciplines we will focus on Software Engineering. In the Software Engineering market, usability is a pending issue, when we talk about usability the term denotes the ease with which people employ a tool in order to achieve a particular goal.

As we can see in the picture above, Garfield is really messed with his computer :-? but Garfield, like everyone, doesn't want a computer friend, he wants to get on with his work, so we must say NOT USABLE instead of "not user friendly" because the user can not accomplish his goal. 

When someone wants to buy a software product, you want quality and quality includes usability (a basic software feature). Thinking about usability, people tend to think about the user interface (UI) of the software product but these two concepts are not synonymous. The UI is just the visible part of the system.

And what about the User Experience?

According to Tom Stewart: we define it as "all aspects of the user's experience when interacting with the product, service, environment or facility" and we point out that "it is a consequence of the presentation, functionality, system performance, interactive behaviour, and assistive capabilities of the interactive system" [2]. This essentially means that UX includes many aspects such as human factors, design, ergonomics, HCI, accessibility, marketing as well as usability. Of course, Apple is particularly good at this field, the group of UX conditions can be sorted by representing them as concentric circles from the most basic to the least, as shown in the diagram below:

Usability is not properly addressed in most developments, on spite of its importance. Take into account usability at the begining of the development process is more profitable since later becomes more expensive and harder to lead.
The way to deal with usability is to assume a User-centred design process in which the design is based upon an explicit understanding of users, tasks and environments; knowing that the system is not isolated, it is surrounded by the context of use.

Focusing on interaction design, design usable software needs the integration of the skills and techniques of the HCI community (it has techniques to develop usable software) and the Software Engineering community (it  has the knowledge about software systems development).

[1] Ferré, X., 2015. Human-computer Interaction basics slides as part of the subject 'Interaction Design'. Msc EMSE, Universidad Politécnica de Madrid.

[2] Stewart, T., 2008. Usability or user experience, what’s the difference? - accessed on March 1, 2015