5 Principles of User-Centered Interface Design

Oh Google Maps… where would I be without thee?

Probably still driving down a back road half way to New Mexico by now. And all I wanted was to go to the corner store.

But this isn’t an article on my lack of navigational skills. It’s about how we all like to know how to get around without getting lost. And when I’m using a website, computer program, video game, or anything else that requires me to interface with a piece of software, I also like to know how to get around without getting lost.

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 New Mexico…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://twitter.com/astray0924 astray0924

    Great article! thx :)

  • Chech

    Just  a comment on the design of this blog. I like the clouds, however having them move during a scroll is distracting. Making background ‘fixed’ would have a nice affect.

  • mansky

    Maybe #2 is KISS in disguise. Example: here in SoCal, Trader Joe’s, a great specialty grocery store, has an awkward point-of-sale card swipe. Among its many problems is that, at least for debit card users, one must negotiate a six-screen interaction to choose card type, enter security code, accept or pass on getting cash, accept or pass on the sales amount. The terminal is a capacitive-touch system that requires a stylus, but half the customers use their fingers, to greater or lesser success (and the security code requires a keypad entry). Go to any Target (almost as numerous as TJs), and you’ll answer only one question – do you want to pay this amount?

    Fewer steps, simple (single mode) interface – Keep It Simple, Stupid.

  • Mani Sheriar

    I have to say I found it a bit amusing that an article on user-centered interface design started with five paragraphs of text (a few of them quite big) before getting into anything that I could scan or take in bit-sized, as we users are keen to do.  ;)

    • Adrian Jones

      Haha perhaps that is a valid comment. Although I would argue that an article isn’t really an interface, it’s content. What you are referring to is more the psychology on how we consume written information… do we read from start to finish, or rather scan everything at a higher level to find the bits of information that most interest us? A bit of both, I suspect. Perhaps an index at the beginning of the article would help with this, but I don’t think it’s really long enough to warrant it. Thoughts?

  • Gordon Currie

    Great Article Adrian! Excellent points. Greetings from Dawson Creek, in Northern BC. Go Canucks!

  • Anonymous

    I really like this post because I’ve been on the receiving end of bad inconsistent UX design, and I had the feeling the app or website owner didn’t care that they put out a crappy product.  I’m a founder of startup and my background and orientation is as information architect and developer, not as a “user experience” guru.  These principles I can take to heart even if I’m not a UX designer.

  • Yoctoinc

    Excellent post for aspiring web designers. I tried finding something helpful like this on http://www.yocto-web-development.com

  • Henry Postulart

    I connected to this article via Design View #92. I almost didn’t bother, as the other article I read from the same issue was slower than molasses on my MacBook Pro, using Chrome. I have not experienced a site this unresponsive to basic user input (mouse scroll and keyboard) in the 20+ years I’ve been a web developer.

    I’m a regular visitor to this site and this behaviour is new. PLEASE bring this issue to the attention of your QA folks, it makes the site impossible to use.

  • linda mentzer

    This information has really been helpful for most of the
    readers. I really appreciate the way you have written about this. I will really
    like to read more on this from you. 

  • Estevez Halivud

    Some example and antiexample would be good. This general tip things relly suckx.

  • Me

    Excellent piece. Too much of this is too often overlooked. But you should revisit the use of “seemless” …I think you want “seamless.”

  • David Burgess

    Thanks for the article and tips.I almost always seriously doubt that anyone who ever designed a piece of software or web site had to actually use it…. and no one seems to even care that their wonderful all singing all dancing web site looks horrible on a mobile device and is impossible to use. – There I said it.

  • Glen

    nice point, but the blog background (vertical stripes) is really disturbing … 

  • http://pulse.yahoo.com/_6GG7CEFACSCBVP2LFIJ23KVSYQ Emma Pope

    i cant believe this!! me and my sister just got two i-pads for $42.77 each and a $50 amazon card for $9. the stores want to keep this a secret and they dont tell you.
    go here, pluscent.com

  • Anjum Mudassar

    nice article has been shared.it is quite helpful
    superb website design

  • Pingback: site planning - eyelearn

  • Pingback: 5 Principles of User-​​Centered Interface Design » User Experience » Design Festival » Web Design