Sunday, December 4, 2011

5 Principles of User-​​Centered Interface Design

Thankfully, we live in a world where subjects like user-​​experience
design and user-​​interface design are established enough disciplines
that we feel inclined to shorten them to UX/​UI design and people still
know what we are talking about. Yet it’s amazing how many times I still
find myself on a website and feel my frustration level rising because I
can’t figure out how to do what seems to me should be a simple task.
Sometimes I really do want to go to New Mexico, but all I’m given is
directions to the corner store.
I’ve outlined below 5 principles
of user-​​centered interface design, principles to help our websites and
applications keep us on track. I am most familiar with website and
mobile interfaces, but really these principles can be applied to any
interface, or anytime someone has a point of contact with a digital or
mechanical system. An interface can be a navigation menu, a search
field, a dialog box, a selection pointer, a tools palette, a
drag-​​and-​​drop feature, a web form, a simple button, and so much
more. An interface is also the power button on your computer, and the
volume knob on your stereo. And the touchscreen of your iPad. Interfaces
are the layers through which we humans interact with our machines. In
my world of web design, interfaces are so important because regardless
of a website’s content, if someone can’t navigate easily around your
site, that great content may never be found. And the world may never
know about the video of your seriously… cutest… kitten… ever.
Now
at first glance the principles below may seem rather obvious. Even so,
it never hurts to re-​​emphasize the obvious when it comes to web design
best practices. How many times have you needed to just get a website
out the door and been tempted to skip over providing alt attributes for
those last couple of images you’re using? Resist the temptation! And
sometimes even things that seem to be obvious turn out to have been not
so obvious at first. If this wasn’t true then all the interfaces out
there would be easy to use and there wouldn’t be any need for people
like me to write an article stating the obvious. Okay, you’ve waited
long enough, on to the principles…

Principle #1: Understand Your Users and Support Their Goals

Mitchell Kapor wrote a Software Design Manifesto back in 2002, and there is a quote from this paper that I still like to use:
“If
a user interface is designed ‘after the fact’ it is like designing an
automobile dashboard after the engine, chassis, and all other components
and functions are specified.”
Now at first glance you might be
thinking no big deal, a car’s dashboard or website’s interface can be
designed once you have all your core components and functionality built.
But this will usually get you into trouble. Why? Because your users
aren’t interacting directly with your core components — they are
experiencing your system, and all that it can do for them, through the
interfaces that you provide. And if these interfaces are designed after
the fact, it’s almost impossible for them to be able to meet all your
users’ goals. In other words, you need to first understand your
users — their needs and objectives — in order to create an interface
that allows them to effectively access your system’s functionality.
The
important questions to ask then in creating a user-​​centered interface
are: Who are the users? What are the main functions that the user will
need? Why is the user using this particular piece of software/​hardware
and what are their goals? Is the software/​hardware accessible by users
of different experience levels? What is the most intuitive way that the
user could interact with the software/​hardware?

Principle #2: Make Your Interface Easy to Learn and Enjoyable to Use

For
the typical iPhone owner, they don’t care about the brilliance of the
software and hardware engineering that went into creating their device,
they just know that it is easy and enjoyable to use. Finger swipe, tap,
two-​​finger pinch, slingshot an angry bird. You can bet that Apple
never creates anything without first considering how people will
interface with their products, and I would guess that a prevailing
philosophy of user-​​centered design at all levels of their product
development lifecycle is a big reason for Apple’s success.
For
websites, creating an interface that is enjoyable to use may seem less
obvious, unless you are creating a complex interface for a Flash game,
but being enjoyable can be as simple as a navigation structure that is
straight-​​forward and intuitive. Even so, with more and more
applications moving to the cloud and our browser becoming our operating
system, creating effective, easy and enjoyable interfaces for our web
products has never been more important. I recently switched from desktop
based wireframing software (Axure, Omnigraffle) to an online
application called Lucid Chart, and the transition was seamless because
the authors made sure to create a web interface that is easy to use and
familiar to those migrating from desktop programs.

Principle #3: Remain Consistent

An
important concept to help the user maintain a sense of spatial
orientation, and sanity, is to remain consistent. From the user’s
perspective, this means not only a consistent look and feel to a
system’s interfaces, but also that actions performed on the interface
result in expected outcomes. If the same action is repeated, the system
needs to respond in a consistent manner.
I still occasionally come
across the odd website that actually changes the order of its nav bar
or sub-​​nav links depending on what page you are on on their site. To
me this is the equivalent of switching your car’s gas and brake pedals
depending on whether you are driving on the highway or a side road.
Interfaces need to remain consistent so that they can fade into the
background and not require any higher level of concentration to use.

Principle #4: Form a Dialog with Your Users

I
like an interface that speaks to me. Not literally speak to me
(although that might be nice too), but an interface that uses terms that
make sense and gives me feedback when I need it.
In order to
ensure that we don’t get lost and can always find what we are looking
for, it’s important for an interface to be labeled properly. Everyone
understands what a “home” button should do in a nav bar, but not every
menu label is always this obvious. For example, let’s say you have a
multi-​​user game on your website that allows people to compete against
each other, move up and down leaderboards, chat, form groups, etc. Do
you put this game under the “Multimedia” or “Community” category in your
nav if those are your only two options? This is when techniques like
card sorting can help you figure out the best navigational structure.
A
feedback mechanism is also crucial for effective interface design: the
user needs to feel that their actions have meaning. We are all familiar
with filling out and submitting an online form, for example, but have
you ever clicked the submit button and just had the page refresh and be
presented with the empty form again? Then you are forced to ask if your
information went through, was there an error, should I fill out the form
again to make sure? Don’t leave any doubt in your user’s mind — give
them feedback for their actions. Thank you for your inquiry, someone will get back to you just as soon as we get back from our Starbucks run.

Principle #5: Be Problem Free

The
quickest way to inhibit enjoyment is to create frustration over simple
interface and navigation issues. If you’re like me, testing is never the
most fun part of the process, but it is vitally important. It’s a
competitive marketplace out there, and if your system’s interface has
noticeable bugs you risk losing your users, perhaps forever, no matter
how good your content is. Interface problems can be more than just
software bugs, however, as a poorly designed interface is still a major
issue. A good way to test your interface is by watching people use your
system in a real-​​world scenario. Are they able to navigate around and
achieve their objectives with relative easy? Is your interface intuitive
to both experienced and less experienced computer users?
I will
forgive a website for having small interface problems that may make me
shake my head a little, but time is a limited resource, and if too many
problems are interfering with the tasks I am trying to accomplish,
sorry, but I’m moving on.

Conclusion

I have a secret to
share. I’m a sucker for a beautiful looking website. But the truth is,
at the end of the day, a site’s visual aesthetics will more than likely
have nothing to do with it’s success or failure. If a site looks good,
my attention is captured and I can take pleasure in the design, but then
it quickly boils down to whether the site can do for me what I want it
to. Key factors for determining a website’s success are its usability
and utility. Content is king, of course, but content needs to be found
and accessed.
So I hope that you will consider these 5 principles
of user-​​centered interface design on your current and future projects.
There are, of course, many more principles than just these five, but
that’s what books on UX design are for. I’m just hoping to give you some
food for thought, or to re-​​emphasize what you already know, so we can
all work towards building a world with better interfaces!
The
great thing about user-​​centered interface design is that it never sits
still. It incorporates so many different disciplines — hardware and
software engineering, ergonomics, psychology, sociology, linguistics,
computer science, etc. — that it is an evolving and ever-​​growing
subject, and to fully grasp the intricacies involved means that we can
never stop researching and learning about it.
Now, about how to get to that corner store in your city...