Rating: 7.6/10.
Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability by Steve Krug
Book published in 2014 about web usability and design. It’s fairly short, covering the basics and addressing many of the most common problems and issues with design, as well as the fundamentals of usability testing.
The goal of good UI/UX design is to make things obvious and self-explanatory whenever possible, so that users don’t have to think about why something is the way it is at all. Generally, users tend to skim rather than read carefully, looking for the first plausible thing that might do what they want. Once they find a path that works well enough, they tend to stick to it rather than seek the optimal way.
Some design guidelines: adhere to established conventions whenever possible, even if they are a bit boring. Use visual hierarchies to group related items and emphasize what is important. It’s a mistake to make everything important because that will just appear cluttered. For text, use a lot of headings, short paragraphs, and lists to make it easy to skim. Optimize to reduce the number of non-obvious choices, because a single non-obvious choice is worse than several obvious choices. In cases where the choice is sometimes non-obvious, give a hint in a convenient place like a tooltip. Reduce words to avoid verbose instructions; ideally, instructions should not be necessary at all, and when they are, be as concise as possible.
Users generally fall into two categories: some first try the search box, while some will try navigating. Navigation should be easy to find, allowing users to locate the section and then the subsection in a hierarchy. Every page should have a consistent navigation UI with a site logo that takes you to the home page. The most important colors and content are for sections that open up subsections, and a few utilities can go in secondary colors, like sign-in and contact information (anything that is not content), everything else should go in the footer. The page should have a name that is prominently visible and matches the link you clicked to get there. Always show where in the hierarchy you are with visually distinctive colors, including breadcrumbs for indicating your current location in the hierarchy.
The home page is important real estate, so avoid putting too much on it. Keep only the most essential starting points that the user should do next, and always communicate what you do with a logo and a simple tagline that clearly defines your product without being too generic. Do not assume the user already knows anything; even if your product is designed for experts, they might not know everything, and it’s best to design something that even non-experts will be able to use and figure out.
Usability testing: can be done without too much expense. It’s best to start early, and you do not need to perfectly match the target demographic. It’s good enough to just do one-hour sessions with three people at a time about once a month which will uncover most of the serious issues. Plan of a testing session: start by understanding the user a bit, let them look at the home screen to understand what the site does, then get them to do a task and take notes on when the user is confused or misunderstands something.
Mobile design vs desktop: main difference is the fact that screens are smaller, so it tends to have deeper navigation hierarchies to compensate. The lack of a cursor means there are no hover hints, so greater care is needed to ensure that affordances like buttons are still visible and indicated as such. Usability testing is recommended as well, but some extra equipment is required; the author recommends to use a camera attached to a phone so that users’ hand movements can be seen when reviewing the footage.
Usability is important because when the user visits the site, they have some amount of goodwill that is dependent on the user. Things like confusing elements or making things unnecessarily difficult deplete their goodwill, while making things easy to find and obvious increases it. Also, take care to be accessible to blind users with screen readers, like adding alt text and proper headings.
