davesaah | Building Human Interfaces

I am trying to answer this question: “How do you build user interfaces (UI) for humans?”

Simple answer: Think about the humans who will use it.

The World of Design

I used to think design was for people who were naturally some sort of artist or people who like visuals. However, during my research I noticed it is just another engineering discipline. Some people may be naturally good at it but it can be learnt even if one may not have the artistic touch. Why? Because I understood that designing user interfaces had nothing to do with how good something looked, but how it allows a user to achieve some goal.

A practical example. I used to think a font was great because it was beautiful. Now, I know a font is good because it makes information visible. It doesn’t mean there is anything wrong with being an artist. Real artists do this instinctively; I think. It is the ones who try to copy them who over compensate and cause chaos. That was why I run from anything UI related. I won’t run again. This is how I am going to build user interfaces for humans.

Steve Jobs quote about design

I prefer stating my processes in clear concise points rather than essays. You will find all the reference material in the References section.

The Process For Designing User Interfaces

Understand my users: I ought to remove any assumption of what a user may want something to look like. Always use real data from real users.
Understand the environment: Where the UI will be implemented affects the design. Examples of environments are mobile phone, laptop, virtual reality, etc.
Create a design: The actual UI.
Test and iterate: Get real users to try the user interfaces designed to understand what I may need to change. This way, changes and improvements are not assumed.

Understand my Users

Understanding my users means I need to see the UI through their eyes.

What are their frustrations?
What are their hopes?
What is limiting them?

That is more important that building a UI to impress shareholders or fulfil their assumptions. How can we get this information? From the real world through:

User interviews: Asking open-ended questions and listening.
Build personas: “What would Sam or John expect from this feature?” Personas will keep me aligned and grounded in real user needs.
Surveys: Gathering trends and quantitative feedback.
Usability testing: Watch users struggle or succeed with the design.
Behavior analysis: Observe analytics and heat maps to see where users actually go and where they get stuck.

Not every user interface design needs all these ways of understanding users. For instance, Material Design by Google and Human Interface Guidelines by Apple have done enough research on user behaviors, trends and lots of feedback based on years of experience. They are good building blocks to get started in designing user interfaces.

In addition, the user interface should not stop at the average user. There are users who

use screen readers.
have low-bandwidth connections.
understand different languages.

Based on the customer segment, it is important to design inclusively, lest, you reduce the number of customers you can attain and sustain.

Create a Design: Key Principles

1. Consistency

The UI should allow users to predict how future interactions will work based on their current interactions with the UI.

2. Simplicity

The UI should be straightforward and easy to understand.
The UI should make things easy to find.
The UI should reveal all complexities progressively.

3. Stick to common standards

Humans are creatures of habit. Don’t try to reinvent an established interaction. E.g. Changing how to close a dialog box.

4. Provide feedback

Consistently give feedback on what the user does. E.g. A page is loading? Show a spinner; Wrong input? Show an error message.
Provide feedback for both correct and incorrect actions.
Allow users to make mistakes. Use the UI to fix an incorrect action by the user. E.g. Google search feedback on typing errors.

Google feedback example

5. Use familiar conventions

E.g. Material Design by Google and Human Interface guidelines by Apple. They have done extensive research to determine what works and what doesn’t.

6. Use affordances

An affordance is a visual cue about how an element should be used by a user.
It leverages its visual and structural attributes to communicate its function instantly and intuitively.

affordance example

7. Think about accessibility

Customers, regardless of disabilities must be able to use the user interface. Based on the use case, features such as

the product working with screen readers,
having high-contrast modes,
and voice control;

becomes non-negotiable.

8. Goal-oriented designs

All UI screens must serve a clear purpose: Ask yourself: “what does the user need to do here?”
Use call-to-actions intentionally: Don’t overwhelm the user with every option, and spotlight the key one.
Remove frictions: Every extra button, sentence, or graphic adds mental effort for users. High cognitive load leads to frustration and drop-offs. You want the design to get out of the way of your users, not in their way.
Navigation should make sense: Navigations should define a path from intent to success.

9. Microcopy matters

In UI design, microcopy means to guide users with words.

Generic microcopy example: Generic Mircocopy Example

Adobe microcopy example:

Basecamp microcopy example:

Gusto microcopy example:

Mailchimp microcopy example:

Why Designing User Interfaces Like This Matters

Users will be able to automatically know how to interact with the interfaces.
A UI designed for humans is the difference between a user coming back to your product or not.
Users will be able to build a mental model of how your UI works and navigate through it.
Users are allowed to make mistakes because continuous feedback will guide them.
Goal aligned screens feel intuitive, because they help users do what they came to do.
Human differences are respected.

Etymology

Affordance

Affordance is what the environment offers the individual. It refers to the possible actions that the individual can readily perceive.

For instance, a set of steps which rises 1 meter high provides the following afforances:

It does not afford climbing to the crawling infant
It may provide rest to a tired adult
It provides an adult the opportunity to move to another floor.

From the example above, it can be noted how the same aspect of the environment can provide different affordances to different people, and even to the same individual at another point in time.

Credits to James J. Gibson for coining and defining the word.

Donald Norman brought the term, affordance, in the context of Human–Computer Interaction to refer to just those action possibilities that are readily perceivable by an actor. It makes the concept dependent not only on the physical capabilities of an actor, but also on their goals, beliefs, and experiences. If an actor steps into a room containing an armchair and a softball, Gibson’s original definition of affordances allows that the actor may throw the chair and sit on the ball, because this is objectively possible. Norman’s definition of (perceived) affordances captures the likelihood that the actor will sit on the armchair and throw the softball.

For more information, read the references below.