Steve Kruger's "Don't Make Me Think, Revisited"
Robin Kim
—January 15, 2021
I recently read Steve Kruger's book about web and mobile usability and wanted to jot down some takeaways that I'll be able to reference again in the future.
For context...
- I've already read Refactoring UI.
- I've completed the majority of Jon Kuperman's Frontend Master's accessibility course.
- I've learned that, in general, recreating HTML elements (like
<button>
and<input>
) from scratch is hard to do well, so I generally avoid doing so. - I'm currently working on a web app that's meant to be used via both computers and mobile devices; I'm currently not interested in learning how to better create a web site/app with a traditional home page.
And now.. here are some of my main takeaways from Don't Make Me Think, Revisited:
- "Don't make me think!" Steve's first principle is that everything should be as obvious and expected as possible.
- "We don't read pages. We scan them." Bullet points and smaller blocks of text are the way to go.
- "We don't figure out how things work. We muddle through." Nobody reads instructions the first time. If they're necessary, keep them to the bare minimum.
- "[Navigation] gives us confidence in the people who built it." A good, persistent navigation helps a user understand:
- They're on the same web site.
- Where they are on the web site. (Teleportation is disorienting!)
- "All web use is basically idiosyncratic." I'm going to need to repeat this to myself on an hourly basis. How I use the web is NOT the same as others.
- "It's not productive to ask questions like 'Do most people like pull-down menus?' The right kind of question is to ask 'Does this pull-down, with these items and this wording in this context on this page create a good experience for most people who are likely to use this site?" The best way to answer this question is through usabilibility tests (NOT focus groups):
- Do it once a month
- Recruit 3 users and grade them on a curve as needed
- Get as many people watch as possible
- Have each observer note the top 3 problems they noticed
- Collectively, figure out a ranked top 10 list of problems to solve (and figure out how many to solve in the next month)
- Avoid new feature requests, and don't worry about moments where the user does something wrong IF they quickly get back on track
- For mobile usability testing, prefer recording the physical device rather than a screen recording so that you can see all of the misclicks as well. You can create an inexpensive, lightweight, portable rig by attaching a webcam to a book light so that the webcam is always pointing at the mobile device!
- "No cursor = no hover = no clue." Since touch-based devices don't have cursors, users need additional indicators to know which UI elements are interactable.
- Here are some low-hanging fruit when it comes to accessibility:
- "Add appropriate alt text to every image." Screen readers don't read images with empty alt texts.
- "Use headings correctly." Using the macOS Voice Over screenreader has created a newfound appreciation for thoughtfully placed headers!
- "Put a 'Skip to Main Content' link at the beginning of each page." I learned this from Jon Kuperman's course as well. The New York Times does this very well.