Components of Good UX

A look at the high level tools at your disposal to make sure your users have a good experience

Scroll down...

Content

Resources

Comments

The Components of Good UX

Engineering Thoughts

We've talked a lot about UX as the user flowing towards his goal, but what are the tools at your disposal to make this process as easy, efficient, and satisfying as possible?

We'll focus on the few high level things that are most important to you as a developer who is starting from scratch. You've likely dealt with the following components intuitively before but the whole point of this lesson is to get you thinking in a more structured and user-driven way about how you approach them:

  1. Information architecture -- how many pages are there and how are they arranged?
  2. Navigation -- how does the user flow through pages?
  3. Interface and Interaction -- what elements are on the page and how does the user actually interact with them?

1. Information Architecture (IA)

Once you've figured out who your user is and what her critical goals are, you can sketch out all the pages necessary to accomplish them and what information needs to be present on each. For example, a very simple e-commerce site will probably need a landing page, one or more product pages, and checkout pages that are arranged in a linear fashion. The landing page might only contain brief summaries of the products while the product pages contain detailed information.

If this is your first exposure to IA, take a quick hop over to Lynda and watch the video What is Information Architecture.

Getting Started With Your IA

When you've got a lot of pages, how do you organize them? Again, as long as you single-mindedly think about what your user's goal is, it should help you clarify this organization. A few questions will help you organize your thinking:

  • What information do we need to deliver? For example, product descriptions for e-commerce, user profiles for social networking, or content for blogging/news.
  • How can we group that information into pages? For example, do we need a list of products? Can we use a search function instead? Should products be grouped by category, price range, average reviews, alphabetical ordering or recommendation level?
  • For elements displayed on multiple pages, what information do we need to include on each page? For example, we can get away with just a brief snippet of a person's profile when it's listed in the search results of our dating site but we'll need to include much more information when our user clicks through to learn more.
  • Which pages should be nested beneath others? For example, should we include all our products in one giant list or require the user to click into the "Gardening" category to look at the rakes?

In the end, it's a question of what organizational scheme causes the least friction while still providing the users with the information they need to make good decisions.

You'll still have a lot of tough questions leftover... how do you know the answers? If you've been reading so far, you can probably guess -- talk to your users and have them show you what works best!

For your first few sites, you will probably be the user so it's a lot easier. When you begin working with external users, there are some established techniques for testing your information architecture that you might want to try out.

Visualizing IA

Because UX is all about flows, we usually represent our sites using sitemap diagrams that capture these flows. For small sites, that's pretty simple -- just a couple of boxes or post-it notes with navigation arrows pointing from one to another:

simple information architecture

Source: Six Revisions

For more complex sites, it can get a whole lot messier but the idea is the same:

complex information architecture

Source: SquareSpace

Further Learning

See the Resources tab for more in-depth readings but first check out these articles:

Read Information Architecture 101: Techniques and Best Practices by Cameron Chapman for a more detailed overview of IA.

Read 9 Information Architecture Patterns by Donna Spencer for examples of different IA patterns like "linear", "hub-and-spoke" or "strict hierarchical".

Quick IA Tips

As a useful rule, it's typically better to use a shallow "page depth" than a deep one. This basically means you should link to more pages from each one so the user has to click fewer times to access information.

But everything is a balance -- too many links stuffed onto a page or in a navigation bar and you've got the opposite problem -- information overload:

mega menu rei

For a more formal look at creating your site's information architecture, read Website Information Architecture for Optimal User Experience from ConversionXL.com.

It will cover things more from the perspective of an established business than a scrappy startup or freelancer, but should be helpful to show you some of the tools at the disposal of a "real" UX team to figure this stuff out (like user personas and card sorting). The only limit on adapting these techniques for rapid prototyping on a shoestring budget is your own creativity. Again, the goal here isn't to memorize or replicate all these techniques -- just observe how established teams think about IA and how important it is for overall UX.

Your IA Takeaways

  • Design your sites to have the simplest possible information architecture that allows the user to accomplish her goal(s).
  • When in doubt, opt for a shallower architecture.
  • Get your users to actually "use" the site (even if it's just a very rough layout of the pages) to see if the organization makes sense to them.
  • Simpler is better. Simpler is better. Simpler is better.

2. Navigation

Your information architecture and navigation are heavily dependent on each other. As we saw above, a very "simple" (flat) architecture can lead to a messy navigation. You'll need to strike the balance between the two.

It's worth noting that when we say "navigation", we don't just mean the little navbar across the top of most pages. We mean all elements on the page which direct your users' flow. And since we don't want our users to get lost on their way, we need to make it abundantly clear where they need to go. Is that all there is to good navigation?

Actually, research shows that our user needs the following navigation-related questions answered at all times:

  1. Where am I and how did I get here?
  2. Where should I go next and how do I get there?

The first question, "where am I", is important because users may enter any page directly from a search engine, a mis-clicked link, or a misunderstood link. Without navigational cues, they will be frustrated and lost.

That first question can be answered in a few different ways. You might put a breadcrumb navigation to show the user where in the page depth they are:

breadcrumb menu

...or you might nest the elements of your sidebar categories:

nested sidebar menu

Knowing where he is gives the user the comfort of being able to go back if necessary and the context to continue on with his flow.

The second question, "Where should I go next and how do I get there?" can be answered in several ways but it should be abundantly clear to the user what their next step is on the way to their goal. This is usually called a "Call to Action", or just CTA.

In many cases, the CTA is a big bold text that leads to a button:

CTA button

Quickie Case Study

As an example of missing navigation, when you're finished reading a blog or news article online, what happens? If there's nothing waiting for you at the bottom, you sort of think for a second and usually either go back or close the window. That's probably not what the site owner was hoping!

Many websites have figured this out and instead offer you a list of similar articles to keep you reading:

End of article CTA

Assignment

However you design the navigation of your site, make sure it orients the user properly and points them toward the next step in their goal.

Check out Designing for the Next Step by Joshua Porter for a more in-depth look at this. Again, don't get lost in the details, just absorb what's out there so you can start thinking more critically about the navigation on the sites you use and ultimately the sites you will build.

See the Resources tab for more articles on the specifics of designing navigation elements.

Your Navigation Takeaways

  • Make sure the user always knows where she is, how she got there, where she should go and how she should get there.
  • Stick to established patterns of navigation until you know what you're doing.

3. Interfaces and Interaction

Human computer interaction

How your users actually interact with your page is a major determinant to their overall success and satisfaction. The navigation elements used as examples above all require interactions and are therefore a form of "interface" between your users and your site.

While navigation is a very important area of user interaction and one worth focusing on, it's certainly not the only one on your page. Anywhere you need your user to click or hover or type represents an interaction interface. That could mean menus or forms or links or even just scrolling through content.

Some methods of interaction are more effective than others. There's actually a whole field of study called "Human Computer Interaction" and a class of people called "Interaction Designers" who spend their time studying the most effective ways for users to interact with pages. They look at things like how long users spend focusing on specific areas of the page, where they click, and so on.

You don't need a PHD in HCI to accomplish our goals here -- you just need to open your eyes and start thinking about how your users will interact with the pages you design and what the most successful methods of interaction are for them. Follow these basic principles and you'll do just fine:

10 Principles of Good Interface and Interaction Design

  1. Use established patterns! It's not your job to reinvent the wheel. You need to follow the Principle of Least Surprise, which basically means give your user what she expects. If your users are likely spending their time on sites with established patterns for things as broad as navigation or as narrow as putting little bubble icons to symbolize notifications, you should strongly consider doing the same until you've got a good reason not to.
  2. Be consistent. If the navigation is across the top on one page, KEEP IT THERE on all other pages. Don't change anything from where the user expects it to be, especially if you've already given them a good reason to expect it in a certain place. This also applies to interaction -- if the user expects your menus to open just by hovering over them, make sure they ALL do or you'll be dealing with frustrated users.
  3. Draw the user's eye. Your page should be laid out such that the user's eye is drawn exactly where you want it. We'll cover this more in the design section when we talk about Visual Hierarchy.
  4. Provide feedback for interactions. Whenever the user does an action on the page, there should be some sort of visual cue which tells them that something happened. If they click on a button, it should depress or change color. If they submit something, there should be a message which tells them it was successful or not. Every single action should have some reaction from the page.
  5. Provide an "undo" for all actions. The user should NEVER be able to destroy something permanently without having the "oh shit" option of undoing it. Your users WILL screw up and they will also blame you if you don't put in a safety net.
  6. Help users diagnose and recover from errors. We'll say it again -- your users will screw up. Even if it's just entering the wrong password confirmation on a login form, make sure they can clearly see what they did wrong and how to fix it. Ever tried submitting a form that fails without a clear message? Exactly.
  7. Empower your experienced users. Power users will not need all the same hand-holding that newbies do -- identify them and give them shortcuts for common tasks.
  8. Speak the users' language. Don't use overly technical jargon for actions -- keep it conversational.
  9. Keep It Simple Stupid (KISS). This is one of our favorite engineering sayings and it applies to interfaces and interactions as well -- just because it's cool and flashy doesn't mean you should do it. The best interfaces are as minimal as possible to get the job done.
  10. Identify that next step. Seriously, give your users a path forward or they'll have nothing better to do but get out the torches and pitchforks.

For another look at first principles of interaction and interface design, check out 11 Principles of Interaction Design Explained from Paul Trenchard-Seys.

A final note on error messages -- make them actionable and not accusatory. Most sites get this wrong. For instance, instead of "Your password is too long", go for "Please enter a password less than 20 characters". That might be too obvious... instead of "Your photo failed to upload", try "Make sure you've selected a file with the extension .jpg and try again". See the Definitive Guide to Sensible Form Validations from html-form-guide.com for more information if you're curious.

We'll dive a bit deeper into some of these when we cover visual design a bit later in the mini-course. Most of them should seem obvious in hindsight but I bet you never considered a couple of them before. Now you have no excuse!

Your Interface / Interaction Takeaways

  • Don't reinvent the wheel for your interfaces -- do exactly what the user is expecting.
  • Be consistent across your site
  • Forgive errors and allow the user to recover from mistakes
  • Simpler is better. Simpler is better. Simpler is better.


Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

Getting Started

Measuring and Improving UX

These articles go in much more depth than you really need right now but consider them a good reference for when you revisit this stuff in the future.

Information Architecture

Designing Navigation Elements

You shouldn't need to memorize any of this, but it can be useful (and fun) to learn more about what navigation patterns are most effective.

Interaction and Interface Design

Sorry, comments aren't active just yet!

Next Lesson: Our Approach to UX