Don’t Make Me Think is is great foring understand how to build more intuitive products. “Don’t reinvent the wheel” and “It’s not rocket surgery” are key sayings, this book takes a pragmatic approach on how to quickly improve the usability of your web and mobile sites.

Steve Krug practices what he preaches, the book is beautifully laid out. Large title pages, clear section headers and plenty of images to illustrate points on design.

Here’s the top tips I follow when designing UI:

1. Guidelines for building a specific page
2. Guidelines for specific elements

Have a clear visual hierarchy

“We don’t read pages. We scan them.” - Steve Krug

When we design webpages, we can spend hours on low and high fidelity prototypes, and so pay attention to every element on the page.

In the real world, users don’t see every element. They enter the page with a specific task in mind, and ignore anything that doesn’t appear related to that task.

Given that users scan pages, it’s important to design them to be friendly to scan.

Clear layout of sections

Begin by splitting the page up into sections for each of the key actions users need to achieve.

// image of blocks

Categorise what type of website you are building, e.g. e-commerce, blog, news site, and visit competitors websites to understand common design conventions. Don’t make your users think, use follow these conventions unless you have a strong reason not to.

Group related items together

Group related items together and put them into separate sections of the page

Mark aside: A nice way to validate that the sections are still clearly separate is with a squint test, a concept I heard of from Naughty Dog. They use this when testing level design in their videogames by squinting and making sure that the path to follow is still the clearest object. You should similarly be able to squint and distinguish which sections you’d go to for which task. // include image of naughty dog squint test

Use nesting

Use nesting to show what is part of what.

For example, here’s the nesting for Facebook comments:

• Facebook homepage
• Newsfeed
• News post
• Comments section
• Comment

Comments don’t appear until a user has navigated through the nesting hierarchy.

Guidelines for specific elements

This section includes UI guidelines for common elements that exist on a page.

Buttons

Buttons should be clearly clickable, something that has disappeared in the trend of flat design.

Labels

A label should use words that the user will understand.

Headings

A heading should match the label which was clicked to visit this page

If a user clicked on Jobs but lands on a page called Employment opportunities, there’s a bit of a disconnect

// Good

// Bad

Text

As we’ve already said, “We don’t read pages. We scan them”.

Given this, it’s important that we optimize text for scanning.

Have frequent headings

Allow users to jump through irrelevant sections by having frequent headings

// Need better image

Headings should be located close to the paragraph they relate to.

// Include image of headings close to paragraphs

Keep paragraphs short

Try to keep paragraphs around 3/4 lines of text.

It’s easier to comprehend multiple short paragraphs than one long paragraph. This trend is true even for news sites where the majority of content is text, and intended to be read word by word and not scanned.

// Include example

Bold key terms

This is one I don’t utilize as much, but Steve utilizes it frequently in his book to aid scanning.

//Include example

Remove 50% of words

Most words are redundant. It’s often possible to remove 50% of copy on a page and not only keep the existing meaning but improve the legibility through reducing the number of words.

Input

Use descriptive text and not an example for label inputs. This is so that users don’t mistake the example for a field that has already been completed.

Other elements

For best practices on how to design other elements, I’ve found MDN is a useful resource.

Conclusion

To summarise my top tips for designing UI:

1. Have a clear visual hierarchy.
2. Group related elements in separate sections.
3. Use nesting within sections.
4. Clearly signify buttons are clickable.
5. Use simple wording on labels to reduce cognitive load.
6. Ensure headings match the text a user clicked on.
7. For text, use headings frequently, have short paragraphs and remove 50% of words.
8. Use descriptive text, not sample input for input fields.

Thanks for reading. Let me know if you have other useful rules of thumb for designing good UI.

Resources

• Steve Krug’s Don’t Make Me Think upon which most of the content in this blog post is based. It’s a quick read, maybe 2-3 hours, and has lots of great advice that’s instantly applicable to any UI you’re designing. I find myself going back to it regularly to remind myself of common best practices.
• Baymard for examples and analysis of common webpage design, focused on e-commerce.
• Nielsen Norman Group for articles on UX patterns.
• Check out type-scale.com for font ramps (setting the size of headings).