The 10 usability heuristics for user-interface design were created by Jakob Nielsen and Rolf Molich 26 years ago and still ring true today. In 2020, we set out to update the presentation of the heuristics, adding explanation, examples, and related links. This update included the creation of a set of visual posters.

In this article, we discuss how we used methods that are usually employed for UI design, like wireframing, iterative design, and user testing, to create and improve static artifacts: the posters for the 10 heuristics.  

Defining Our Design Goals 

We had one main project goal in designing this set of posters — to improve the readability of the heuristic language and add relatable examples and tips. The combination of these two design improvements was intended to make the usability heuristics easier to understand and apply.

In addition to this goal, we created 3 additional requirements:

  1. Design appealing posters that people can display and reference. Just as important as the content is the posters’ visual design. If the posters looked good, people would enjoy them and, in return, be more likely to reference and display them (which, again, helps with spreading the word and evangelizing the heuristics).
  2. Ensure that the posters are relevant to a wide range of UX expertise. We wanted to make sure that the posters would benefit not only students and entry-level professionals, but also experienced UXers.   
  3. Design the posters to be a cohesive set, rather than individual artifacts. Since the heuristics are principles that are meant to be used together, we wanted the posters to also feel like a set.

These design goals and requirements became a reference in making decisions throughout the project. When faced with any dilemmas and decisions, we reviewed the goals. Our recommendation is that you always set aside time to define design goals before jumping into the actual design work: they will keep you on track later on. There are always design tradeoffs in any UX project, from the biggest application to a set of posters, and defined goals help resolve these tradeoffs.

Phase 1: Low-Fidelity Wireframing 

Before starting any wireframing, we worked on refreshing the heuristics by updating outdated language and removing jargon. We also brainstormed for relatable examples and quick tips for each heuristic. We captured these edits in simple cloud-based spreadsheets — useful for our team because we all already had access to the service which allowed live, collaborative editing. 

Once the content was mostly nailed down, we started with rudimentary and very low-fidelity, hand-drawn posters. We then created digital, still very low-fidelity versions of the hand-drawn mockups, all while working with real content. Next, we iterated on the posters’ structure (i.e., layout, numbering or labeling system, and how each poster might relate with the others) and created multiple visual versions.

Hand-drawn, low-fidelity wireframes
In the 1st stage, the key is to get ideas out without investing lots of time. These rudimentary hand-drawn wireframes accomplish this goal without the pressure of being pixel-perfect or dealing with real content. Use a thick Sharpie to prevent getting lost in detail.
Digitized low-fidelity wireframes
During the first phase of low-fidelity wireframing, we drew a couple of different layout variations. Keeping it low-fidelity, but working with real content allowed us to focus on creating a strong visual hierarchy. Without using real content, you can easily fall into the trap of pushing pixels around instead of adjusting your layout for the real length of your content.

For example, in the initial iterations (the first poster above), captions were close to their corresponding pictures (following the principle of proximity). However, this placement implied that the poster layout will vary across heuristics and thus contradict one of our requirements (that the design be cohesive). We chose the second layout above because it allowed us to be consistent across heuristics; it included a name, definition, a physical example, a mobile example, and a tablet/desktop example.  

This step was very similar to creating a wireframe for a webpage. Iteratively wireframing at a low-fidelity allowed us to easily consider multiple alternatives and pick the one which best aligned to our established goals and user needs. 

Phase 2: High-Fidelity Iteration 

Once we settled on a poster structure, we shifted to high-fidelity prototyping. 

1. We iterated on the visual hierarchy. To achieve a strong hierarchy, we played with typeface sizes for the title and body copy, elements’ scale, and color. To make sure that the attention was drawn to the right poster elements, we relied on the squint test: we stood back and squinted at the design to see what stood out.  If our eyes were not drawn to the elements that we had hoped, we reworked the visual hierarchy until it was right.

High-fidelity poster iterations
We used details of scale, color, and typographic posture (bold, roman, italic) to change the hierarchy and make the posters easily scannable.

 2. We iterated on example illustrations. Illustrations can be tricky to get right because their surroundings (or a lack thereof) can affect how people interpret them. For example, one poster showed a natural mapping between the layout of stovetop controls and that of heating elements. The original illustration was a top view of two contrasting cooktop layouts. However, by itself, outside of a kitchen context, this illustration was hard to understand. We changed it to a 3D drawing of a single range. During testing, this new image was easily identifiable by almost all participants.

Stove illustration iterations
At a glance, you can immediately tell that the illustration on the right is a stove. The illustration on the left requires more thinking and context to quickly figure out.

3. We iterated on the color palette. To limit visual clutter, we stuck to the general rule of using no more than 3 colors in one poster: one color for the content of heuristic’s text, one for examples, and other text such as explanations or tips.  To avoid making the posters feel monotonous, each poster was assigned its own color palette. In addition to iterating on the color combinations for each poster, we also worked to make sure the colors provided enough contrast in a variety of light conditions and satisfied accessibility guidelines.

4. We printed the poster on a home printer. We realized most people won’t be able to print the poster on a large enough sheet of paper and, instead, they will tile-print it (i.e., print it on multiple pieces of paper). So, we printed the poster on a home printer, as a cheap way to understand of how the physical artifact ultimately will live. Hanging up the tiled print also brought clarity to the poster’s visual dynamics. It was at this in-person scale that we finetuned any remaining visual details. 

We repeated steps 2–4 in this process for all the remaining posters. We did not have to do step 1 again since the visual hierarchy (and layout) was the same across posters. 

Phase 3: Testing Content and Visual Design

We conducted 2 rounds of testing — one for poster illustrations and the other for general poster content and visual design. 

1. Illustration test. To test each individual illustration, we created a Google survey and recruited 15 general-population users using Mechanical Turk. We asked people to tell us what they thought each illustration (with no surrounding context or text) represented. This step identified several illustrations that needed to be more comprehensible. For example, we discovered that a mall-map illustration used in the poster for the first heuristic needed more context in order for people to understand what it was. 

We used the results of this test to improve the posters before testing with UX participants. 

Mall map illustration iterations
To make the illustration on the left more recognizable, we added several extra context clues: we made the mall map 3D, enlarged the “You are here” mark, and added a person. 

2. Content and visual-design test. For this round, we recruited 5 UX professionals participants (all ranging in cultural backgrounds and experience levels) and asked them to think-aloud as they viewed each poster. We categorized feedback into 2 themes: visual style and content. Depending on the feedback we tweaked or completely redesigned aspects of the posters. 

This round resulted in even more changes to the poster design. For example, many participants read the definition and the illustration at its right as one unit, when, in fact, the illustration was associated with the example text below it. We mocked up different alterations to the design, showed them to participants, and ultimately changed the color of the illustration so that it matched the color of its corresponding blurb.

Key Takeaways from Our Process 

User-centered methods, like iterative visual design, wireframing, and user testing, can be applied to a number of different artifacts, ranging from static posters to interactive UIs.

An iterative approach to the posters’ visual design allowed us to: 

  • Explore different visual options and layouts without the pressure of getting the design right the first time. We continuously changed the design throughout the entire process and didn’t make the posters pixel-perfect until the very end, after testing our design numerous times.
  • Catch small problems and loose ends. These visual details do impact the overall experience and the users’ first reaction.

You can see our final posters for yourself at the download link below.