Heuristic Evaluation and Identifying Usability Problems in Web Design

The word “heuristic” simply describes a process where someone can learn something for themselves. In this case, heuristic techniques take on a slightly different meaning by defining practical approaches to problem-solving.

This is the cornerstone of heuristic evaluations and how they can be applied to web design.

After staring at a design long enough you start to lose sight of smaller troubles with the interface. This is where a fresh set of eyes can come in handy – but what if you don’t have any fresh eyes available?

Heuristic evaluations are the next best thing, and in this post, I’ll explain how they work so you can start incorporating them into your own design projects.

Origins and Basic Testing

The idea of heuristic evaluation was invented by Jakob Nielsen and Rolf Molich in the 90s. Intended originally for software, the idea has grown to include websites and mobile apps which are all built for user interaction.

The idea is to use heuristic structures to define a course of action and stick to methods that help you pinpoint problems. This evaluation is an objective look at an interface forcing you to look for very specific issues.

Based on Smashing Magazine’s fantastic post on this subject, heuristics are simply “measurements of something that can’t readily be quantified”. Metrics do not always tell success. Just because a website has rising sales numbers doesn’t mean the interface is perfect from a usability perspective.

If you have the time it’s worth giving it a shot. Heuristics aren’t perfect but they’re much better than going into usability testing blind.

Using Heuristic Structures

Since everyone may test for different ideas, heuristics keep a consistent pattern of quality assurance. The Usability.gov article weights the pros & cons along with offering some basic examples.

Just keep in mind that a heuristic evaluation cannot replace quality usability testing. Users will react differently and it’ll be impossible to get the same results when testing an interface for yourself.

That being said, a list of notes will help you organize ideas much better and stay on track. Notes also streamline the process with specific goals to make testing quicker and to derive better results.

Check out Jakob Nielsen’s list of heuristics to get an idea of what you might be looking for.

It’s worth looking at individual features of a website to study how they behave in accordance with the whole. Here are some examples:

• Content navigation
• Mobile accessibility
• Website search
• Signup fields with interactive elements
• Typographic style & content consumption
• Contact form & communication methods

Practice Evaluations to Understand

To get started try analyzing existing websites like Yahoo, Facebook, or whatever interests you.

Take notes from Nielsen’s list and consider adding your own test objectives to suit modern usability problems that are more specific to web interfaces.

You want to think about issues like error handling, reducing user memorization, and enhancing the flow of interaction by reducing steps. These heuristics can be somewhat vague or incredibly detailed based on whatever you need to test.

By applying them to other websites you’ll become less biased and more prepared to apply them to your own projects.

There’s even a free Chrome plugin called UX Check which helps you through the process of heuristic evaluations right from your web browser.

Install it for free and open up any webpage. You’ll see a list of Nielsen’s 10 heuristics along with annotation tools. UX Check can interact with the website to leave annotated notes right on the page, and you can even export the final result for posterity’s sake.

Basic Tenets of Great Usability

There are many things that UI designers would agree are fundamental to a quality interface. Keeping the navigation menu in the same place on each page is one example.

With heuristic evaluation tests you’ll come to realize usability is less about design and more about common sense. The more you can objectively view an interaction, the easier it’ll be to reproduce that same interaction on future websites.

The key is to think like the user and really place yourself in their shoes. You won’t be able to make yourself have that fresh pair of eyes, but you can try to empathize with someone who does and consider which interface elements might appear confusing to them – and ultimately how to fix that.

There are dozens of articles covering heuristic evaluation with handy resources and real-world examples. It’s a fairly detailed subject and the best way to learn is by researching and practicing.

Bonus Tips: Communicating UX Goals Through Interface Design

Modern websites are expected to be much more interactive than in previous decades. Website design isn’t just about content anymore. It’s about clean user interactivity for reading and browsing through content. Web designers have to consider the behavior of visitors and how design can affect that behavior.

This post catalogs a few clarification methods which can be employed during the interface design process. It’s wise to formulate a plan before even starting a design mockup. This way you’ll have a finely-tuned direction for the website and its interactive elements. Once you understand more about design clarification you’ll have an easier time focusing on the bigger picture of user experience.

Identifying Specific Goals

Each new project goes through an incipient phase of idea generation. This is the best time to outline specific goals for each page. What should visitors be doing on the homepage? Try listing a few goals in a hierarchical system (primary, secondary, tertiary).

What is the ultimate purpose or end goal of the website? Reflect upon this question because it should have one general answer. There will be other smaller goals, but ultimately each website’s purpose can be broken down into archetypes.

Is the site meant to share information like a blog? Is it a landing page for new software or a mobile app? What about an online shop for WordPress themes?

The answers may be surprisingly effortless and so plainly obvious that it won’t take more than 3 minutes to reach a conclusion. At this point, it becomes easier to determine the expected goals of each user. For example, a blog’s goal may be to attract more loyal readers. This can be accomplished in many ways such as newsletter subscribers, Twitter followers, or perhaps just driving people onto multiple articles.

Once you can identify specific goals it’ll be much easier to design around them. If the website’s newsletter is important then you’ll want to design a subscription box with seductive qualities. If post content is the main attraction then increase text size and add links to related posts.

User experience design is the process of crafting an interface with a cognitive focus on interactivity. Consider each page element and its place in the overall design. For example the above PayPal redesign expresses a very clean and usable design. It’s easy on the eyes and looks like it would be easy on the mouse, too.

While identifying goals it’s best to start at the very top and work down. Continue breaking larger ideas down into specifics until you reach a clear-cut idea. These goals could be related to interactivity(user registration, profile updates, in-page downloads) or consumption(video views, reduced bounce rates, higher pageviews).

If you start with the big ideas you’ll stick to the right path which makes brainstorming a lot more fun.

Differentiating Traits

Once pre-defined goals have been laid out the next step is crafting a noticeable design. A website’s style should match the content but you also want to throw UX design into the mix. How can you differentiate important elements so they stand out against others on the page?

There are many different techniques and no single catch-all approach will work every time. Consider using a mix of design elements based on the situation. Navigation menus and buttons can be spruced up with some added color, icons, or animation effects. Especially if you have many links placed together and one of them needs to stand out.

The design style on Creativity For Sale is wonderfully captivating. The navigation menu is animated but also hidden from sight until needed. What really draws attention is the website’s consistent hand-drawn artistic style. The buttons, graphics, typography, and backgrounds match throughout the whole layout.

While this matching style seems to repudiate the idea of differentiation, it actually validates the idea in a broader view. Not many websites use a hand-drawn style. Creativity For Sale stands out against other websites on this merit alone.

It’s useful to have important elements on the page stand out. But it’s just as useful to have the page itself stand out among an ocean of homogeneous web design styles.

Bright Noticeable Elements

Getting down into the nitty-gritty of each element requires finesse and subtlety. There’s no doubt that vibrant elements will stand out against others that appear to sink into the background. However, there is a difference between vibrant-attractive and vibrant-dissuasive.

Call to action elements are the most common goal-oriented items. These CTAs take the shape of forms, buttons, links, or even dynamic widgets. Anything that drives a user to perform a specific goal would be considered a call to action. So when designing a bright button or large signup box just remember to keep it within reason of the overall design.

Color theory is a big part of creating pleasurable vibrancy. The process of color selection goes deeper than just putting blue and red together. There are so many different levels of saturation and picking the ideal shade of any color requires practice and careful attention to detail.

Take for example the design of Authentic Jobs. Their “Post a Job” button is blue and relatively simple. But it stands out against the other elements because blue isn’t overused in the design.

This is also why recent jobs are marked with a bright orange “new” tag. Since the overall layout is generally a white/black contrast, these colorful elements should grab your attention almost immediately.

For a slightly different example take a peek at Pomodrone. This is an iPhone app landing page using the ever-so-popular flat design style. At the very top is a flat graphic along with some introductory text. The graphic and download button stand out against the darker background through brightness alone.

When attempting to make an element stand out you can use brightness and vibrancy to your advantage. Just make sure it stands out for reasons of delectation instead of dissonance.

Focus & Minimalism

Not every website should be styled with a minimalist layout. But through design principles like symmetry and spacing, it’s possible to increase focus on certain areas of a website. Minimalism does this naturally by reducing the number of elements on a page.

One strategy to draw people into certain parts of a website is through deliberately focused elements. Remove other distractions on that area of the page and keep it light. Use only 1-2 buttons, or just a small batch of text which relates to the goal. It’s easier for people to decide when given fewer options to choose from.

Fewer distractions can often produce greater results. This technique works better on sites that have a very specific goal(or set of goals). Branch aims to draw more people into the site with sign up buttons connected to Twitter. Clean, straightforward, and glaringly simple.

Well-Designed Content Sections

For some actions, you may want to devote entire sections of the page. These can be large header areas or even smaller sidebar widgets. The purpose would be to design part of the layout so that it stands out against the rest of the design.

Take a look at the heading on Chartbeat to see an example. The site uses large oversized backgrounds and detailed buttons to capture attention immediately. Top navigation links blend with lower opacity but are still readable and easily noticeable.

Overall the Chartbeat heading area feels very definitive. It matches nicely with other areas on the page but still captures attention right when the page finishes loading.

Get your message across in the clearest possible way. Web users enjoy flashy graphics when appropriate. But the vast majority would prefer a usable interface with graphical elements sprinkled throughout. Find a way to balance this equation with more weight leaning towards interactivity.

Alluring Interfaces

The concept of an alluring interface seems rather ambiguous. But the idea can be simplified to merely creating interfaces that feel alive.

Interactive elements should be instinctively noticeable based on design and location. Designers often use visuals like icons or background colors to distinguish between interface elements. jQuery animation is another great tool for adding life into a website layout.

Wrap Up

Remember that usability testing is an ongoing battle and requires careful attention to detail. Heuristic evaluations are great because they can be run early in the design process to catch silly issues. But always try to run usability tests with real users during the later testing stages.

The best way to learn about heuristic evaluation is to put it to the test(yes, pun intended). Try out a quick evaluation on your favorite website or one of your side projects. If you get lost just reference some of the great resources listed in this article.

All of the techniques in this post can be independent or integrated as needed. When starting a new web project it’s crucial to spend time analyzing goals. Design techniques are then applied onto page elements that can fulfill these goals. Bring these overarching ideas with you onto each new project and don’t be afraid to try something new when the opportunity presents itself.