Book review: Don't Make Me Think
This post is a work in progress. As Paul Graham says: ‘Ship early’!
Don’t Make Me Think is a great book for anyone trying to 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:
- Guidelines for building a specific page
- Guidelines for specific elements
“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.
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 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 to show what is part of what.
For example, here’s the nesting for Facebook comments:
Comments don’t appear until a user has navigated through the nesting hierarchy.
This section includes UI guidelines for common elements that exist on a page.
Buttons should be clearly clickable, something that has disappeared in the trend of flat design.
A label should use words that the user will understand.
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
As we’ve already said, “We don’t read pages. We scan them”.
Given this, it’s important that we optimize text for scanning.
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
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
This is one I don’t utilize as much, but Steve utilizes it frequently in his book to aid scanning.
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.
// Include example
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.
// Include example
For best practices on how to design other elements, I’ve found MDN is a useful resource.
To summarise my top tips for designing UI:
- Have a clear visual hierarchy.
- Group related elements in separate sections.
- Use nesting within sections.
- Clearly signify buttons are clickable.
- Use simple wording on labels to reduce cognitive load.
- Ensure headings match the text a user clicked on.
- For text, use headings frequently, have short paragraphs and remove 50% of words.
- 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.
- 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).
Enjoyed this post? ❤️
Subscribe by email or RSS.