Interaction design and user experience: essential concepts

Using research from UX studies and known principles of user interface design, and maintaining best practices for device-agnostic development, here’s some tips and clarification for working on appearance and behavior for sites.

One of the cardinal rules of web design is remembering that people spend 99% of their time doing something other than being on your website.


Keeping track of the buzzwords

A great primer on these concepts comes from an older but still highly relevant book, The Elements of User Experience, by Jesse James Garrett. One of the books’s premises is that the web has two facets: a platform for functionality that is concerned with tasks and problem-solving, and medium for information delivery that users can search and absorb. We will use that book’s definitions for our terms:

User needs

Product objectives

Functional specifications

Content Requirements

Interaction design

Information architecture (IA)

Information design

Interface design


User Testing

Our web application can become our baby or our embarrassment, but however we see it, we will be unable to see it without knowing how it came to be, and the motivations that created it. We need other people to look at it.

How many users should we test in a qualitative study? 3 to 5

So small? The essential thing here diminishing returns. Assuming you’ve found representative test subjects (e.g. recruiting actual cyclists to test a helmet-fitting app), the first user will provide a lot of insight; the second user will not provide as much, as much of his/her insight will overlap with the first user. By the time you get to the 5th user, you will have identified most of your problems. Each addition user is more likely to repeat the same concerns we’ve already heard and there is no need to waste time or money on hearing the same thing multiple times.

Instead of having lots of users in a study, have a few users in multiple studies, as it would be a better use of budget distribution. Considering that we are have an agile development cycle, we have the opportunity to confirm fixes across each round or iteration of testing with just a few users to validate our changes.

Obviously, this small number does have exceptions. If we are doing a statistical sampling, we’ll need a great deal more than 5, aka, people actually taking the survey to collect data. More people may have to be tested if there are demographic issues, but only if the distinct groups are expected to behave in completely different ways, e.g., enrolled undergraduates vs. prospective highschool seniors visiting a college website. “Experienced computer users” vs. “novices” is not enough of a qualifier as they would still use the site to perform the same task.


Checklist to improve Usability

Good Feedback Loops

There should be some status change or visual cue to inform users that their actions actually did something, e.g., clicking on buttons. Status changes and visual cues should be consistent and appropriately timed.

Language for Users

We often make the mistake of taking our database structure and turning that into a form. Additionally, we sometimes organize our websites like the way we organize the internal structure of the company or its hierarchy, instead of the users think and navigate.

Preserve Browser Navigation

Users should be able to go backwards and forwards, as these actions typically serve as a proxy for “undo” and “redo.”

Consistency

If we have a menus and and navigation on the page, they should all work the same way. If we decide links are blue, then all links should be blue.

Error Prevention

Focus on design and layouts that aren’t error-prone by not being ambiguous or confusing, so users will be less likely to make mistakes

Error Recovery

When the user does mess up e.g., an typing letters into a input field for phone numbers, inform and provide a way for the use to handle the problem.

Minimize Memory Load

Keep the user’s memory load at a low level by not forcing him/her to recall instructions or having to remember information from previous states or pages.

Flexible for different user competencies

Novice users should be able to move at a slower pace while experienced users should have access to shortcuts.

Avoid Information Overload

Every addition of information onto a page becomes another piece to compete for the user’s attention. Fewer points of information means the user will have an easier time to make decisions

Application Documentation

Usually nobody wants to read the manual, but it’s good to have one as a reference anyway. Some sort of “Help” section whose content is focused towards completing tasks instead of describing features.


The Language of Interaction & Design

You know all those intuitive things you feel about user interfaces and just assume everyone should do? Most of those “things” have names and have been thoroughly studied. Here are some….

Everything else is secondary and maybe even unnecessary. Things having nothing to do with the call to action should not be competing for attention. For example, having big giant “Follow Us!” social media graphics will make the call to action about visiting Twitter.

A great example of minimizing barrier to entry came in E-Commerce a few years ago. Before the shift, users had to register for membership and create an account before shopping. Additionally, registration process would probably involve opening up your email app and clicking on a validation link. Nowadays, you can go to most e-commerce sites, put the thing you want into your shopping cart, and checkout as a guest without even having to register if you don’t feel like it.

How many clicks, how many TOS to check, how much legalese to read, how much personal information must delivered before starting the call to action? However, we can’t remove all barriers to entry; they are often necessary, such a mechanism to check for age restrictions.

For example, Apple recommends that buttons on iOS apps or webpages made for Mobile Safari should be no less than 44X44 pixels to prevent “fat fingering.” The other thing to consider is proximity - if the button or menu item or link is too close to another button, etc., the likelihood of clicking on the wrong thing increases.

You can choose between the white Apple earbuds that rest in your ear, or the white ones that go inside your ear canal. If you go to the Sony Store, you have a choice of 25 earbud models, and each option is available in multiple colors. Good luck.

The consequence of too many choices is that the user will feel overwhelmed and give up. Hick’s Law does not apply to complicated tasks or problem solving, however.

There is an inverse relationship between empty spaces and perceived value. For example, window displays of high-end department stores typically have one or two dresses on simple racks, while discount stores crowd their displays with lots of bargains and SALE! SALE! SALE!

In terms of page design, one of the most effective ways to promote or feature an element of significance or importance is not to use lots of arresting visual cues to capture the user’s attention, but just to leave it alone and keep it simple.

This concept comes from “optimal foraging theory,” an explanation of how animals hunt for food. For example, to make links and navigation successful, use plain language that explicitly describe what users will find when clicking. Another key aspect is when a user arrives where he or she wants, the information is easy to consume.

It’s something to consider when designing complex applications, in the context of delivering positive outcomes for users when they do what we want them to do. Also, they won’t be doing the things they find annoying.

We can minimize performance load by eliminating unnecessary information from displays, chunking information (group related bits together), and reduce the number of task steps by combining or automating them.

We have to consider how much information to deliver at any moment to prevent overwhelming our users. Think clean and uncluttered versus disorienting and frustration.

In our designs and applications, remember that one the strongest things to help users associate one element to another, or understand that two things aren’t related, is just distance. Where is the submit button located in relation to the form? How are sliders and check boxes and radio buttons aligned to the options?