Mark Johnson

    Book review: Don't Make Me Think

    Tuesday 7th May, 2019 - 8 min read

    This post is a work in progress. As Paul Graham says: ‘Ship early’!

    Don't Make Me Think

    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:

    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.

    Scanning

    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 and put them into separate sections of the page

    Grouping

    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.

    Nesting

    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.

    Clickable buttons

    Labels

    A label should use words that the user will understand.

    Labelling

    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”.

    Scanning

    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 Scan reading 2

    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.

    // Include example

    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.

    // Include example

    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).

    Enjoyed this post? ❤️

    Subscribe by email or RSS.



    Contact