Ultimate Guide To The User-Centered Design Process

The concept of user-centered design is nothing new to websites. User experience is a rapidly growing area of interface design and it’s becoming extremely popular among web and mobile app designers.

But how exactly do you go through a user-centered design process? I’d like to cover some tips on user-centered design that you can apply to every new project. By placing the user first and considering usability it becomes much easier to design interfaces that catch attention and keep people on the page.

What Is User-Centered Design?

The idea of user-centered design has been around in software development for decades. Designers work to consider user behavior for every single step in the creative process. If you’re focusing on the user then you want to think about how a user might behave and what their typical actions would be.

Here’s a quote clipped from the Wikipedia entry for user-centered design.

User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product, but also to test the validity of their assumptions with regard to user behavior in real world tests.

The best way to design an interface for the user is to put yourself into their mindset. What are their goals? What functions do they need to perform to complete those goals? Is it obvious what actions are available just by looking at an interface?

On a website like PayPal, the goal could be to send money, send an invoice, transfer money to/from a bank account, or many other similar actions. Each goal will have a different series of steps in the process.

Designing a multifaceted interface requires clear direction. I find it’s best to list all the basic features of a site and organize them by priority. This way it’ll be easier to design an interface that focuses on the most important tasks.

The goal is to create an experience that users intuitively pick up quickly. Or if this isn’t possible, at least create an interface that’s learnable and easy to pick up with some guidance.

User-centered design oscillates between two different stages: designing and testing. You first plan out the interface based on assumptions of user behaviors. Then you can test the interface on real users and see if your assumptions are correct.

Some may be correct, others not so much. From there you tweak and test again.

This strategy forces designers to create interfaces that are natural to user behaviors rather than forcing users to learn new behaviors solely for your interface.

Take for example Adobe Photoshop or Maya. These programs are incredibly complex and there’s no way to make these naturally intuitive for beginners. However once you learn Photoshop it’s a lot easier to learn other Adobe programs like Illustrator, Flash, or InDesign.

Desktop software follows certain design standards just like websites. If you learn how users typically behave on a page it’ll be easier to design a natural website UI from scratch.

Usable Interface Tips

It’s important to remember that how you think something works may be completely different than how users think something works. Your goal as a user-centered designer is to merge everything together so that interfaces work very similar to how users think they should work.

A good example is the Feedly interface. It has many quirks and features, some that work better than others. I believe the Feedly designers could learn a lot by studying user-centered design principles.

Let’s say you find an RSS feed and copy the URL to add into your Feedly account. This is a very common action so it should be one click away.

However this is what my screen looks like when I log into Feedly. Do you see any obvious “add feed” link? A plus sign icon? Anything at all to add new feeds?

This is a glaring issue I constantly face when using Feedly. What you have to do is click the “Discover and Follow” link in the sidebar, paste in the feed URL, then wait for it to autosuggest the feed to add it.

Feedly is literally made to collect and organize feeds. Adding a new feed is a primary function of such a program, yet it’s buried behind a link that nobody would guess at first glance. This is the opposite of user-centered design.

There’s a lot you can learn from this design faux pas. The biggest lesson is to test your interface against common user behaviors. Don’t pick up a pencil or create a new document until you’ve thought about how users typically behave.

Start by listing all the common features your site needs and organize them by priority. Also consider how priorities may change on different pages.

For example in Feedly I might want to add a feed directly into a folder. So when I’m browsing my “web dev news” folder there should be a plus icon for quickly adding a feed into that category.

Let’s go back to the PayPal example and say we’re on the invoice page. Here are a few common actions that users might need to perform:

Creating a new invoice
Creating an invoice template
Browsing past invoices
Checking current outstanding invoices

All of these things are quick and easy with PayPal’s current site.

If you organize your assumptions for user behaviors it’ll be easier to create interfaces that conform to these behaviors.

Designing User-Centered Websites

There are a number of different techniques for user-centered websites and they all come back to the idea of common sense design.

Everyone on the web recognizes fundamental design patterns. Headers often include navigation links. The content area is usually the widest block on the page. The footer often has links that aren’t prominent in the top nav menu.

By following these conventions you’re following user assumptions. It’s rarely worth going against the tide when so many people are conditioned to interact with websites in a very specific way.

For example Apple’s Mac website has links in the sub-nav for every different type of iMac or MacBook. This is typically what every user is looking for when visiting this page.

Web users are not very different from software users. Different mediums have their own interface design patterns, but user behaviors generally follow a linear course of action.

If you’re building user-centered websites then you’re primarily concerned with behaviors on the page. Most websites hold information that people need. But other sites are more dynamic like social networks and forums.

Craft the interface based on user needs and behaviors. This is the key to a user-centered website and you’ll learn a lot by testing the site on real users.

User Testing Tools

The foundation of user-centered design is to create interfaces for users and run tests to gauge reactions. The first part is easy if you know a little about usability.

The latter is much more difficult but still a very important piece of the puzzle. You never really know if a concept will work until you test it on a live audience.

Thankfully there are tons of tools and web apps you can use to gather real user feedback. These are my top suggestions but new tools pop up every so often and the landscape is always changing.

User Testing

The most well-known and trusted service is UserTesting.com. Not only can you test basic user behaviors, you can also test interactivity and track campaigns like downloads or video views.

They have a free service called Peek which is perfect for getting started in user-centered design. You get a free 5-minute video of a user interacting with your website. This is completely free and it’s a way to gauge the quality of UserTesting’s services.

You can’t go wrong with Peek and while the sample size is small, you can pick up some ideas from just one user test.

Lookback

The Lookback service is geared more towards software and mobile apps, but the functionality can be applied to web interfaces too. You get a live video for each person in your user testing pool.

This includes a video of the screen along with the user’s reactions to the interface. Everything can be watched and shared via Skype to make the process easier.

Lookback is fantastic for collaboration and sharing ideas with other members of a team. It’s one of the simplest tools for user testing and offers plenty of premium features.

UsabilityHub

Another really popular brand is UsabilityHub which offers a number of different usability tests. You can run a click test to watch user behaviors, or you can run a question test where users are asked questions about their experience. Other options include a five-second test and a preference test where the user chooses their favorite design between two options(like a logo or interface).

The tests are very specific and super easy to run. I also think UsabilityHub is one of the best deals for the price. You get access to all of their tests and you can pay for them individually with their unique point system. Check out the pricing page to learn more about how this works.

TryMyUI

I haven’t toyed around with TryMyUI but most feedback seems to be very positive. You setup a specific test and choose from a wide demographic of users.

The test runs and records everything on the screen. You can then play back the entire process and watch the user try to solve a problem with your interface. Each test allows 4 unique questions per user that can be provide further info.

TryMyUI has a decent free account where you only pay for each test you run. The features are comparable to other tools and this is perfect for a UI/UX designer working specifically on websites.

These 4 tools would likely offer the best starting point for user-centered design testing. But there are many other options available, a handful of which I’ve listed below:

All of these tools are great options for web designers. No matter what you choose you’ll get decent results that can be acted upon to improve an interface.

When you first practice user-centered design it may feel a bit strange. But in time it’ll grow into part of your natural rhythm. It’s undeniably the best way to design interfaces that function properly and have the greatest learnability for new users.

The best way to learn is to just dig in and practice on your next project. Whenever you start a new web design project think about typical user behaviors, actions, and expectations. And this post can help guide you all the way through a user-centered design process.

If you want to learn more about general user experience design check out our related posts.