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.
Learn PHP for free!
Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.
RRP $11.95 Yours absolutely free
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…
Adrian has a strong passion for all things new media, and has been known to dream of electric sheep. The words “usability”, “user-centered design”, and “user-experience design” make him smile. Adrian was recently the web developer for the Vancouver Canucks NHL hockey team, and now works as an Information Architect for Appnovation Technologies in Vancouver, BC. When not immersed in new media you can usually find him running around an Ultimate (Frisbee) field. No, it's not just a sport for hippies!
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers