Introduction to UX Design Through Steve Krug’s Don’t Make Me Think
Don’t Make Me Think by Steve Krug is a cornerstone reading in the field of user experience (UX) oriented web design. It was originally written in 2006 and while some of the designs in the examples are a little out of date, the core concepts remain foundational as ever. I read this book earlier this year and I think a primer on UX thought would be beneficial to share with other budding developers.
What is UX?
In our projects and code challenges at Flatiron, we begin with user stories: “As a user, I should be able to…” UX may seem nebulous, but really it’s the same concept — making a project with focus on the end user. Or, as Marieke McCloskey, Research Director at UserTesting puts it: “UX design is a commitment to building products with the customer in mind.” Many organizations want to conceptualize their website as a conduit for their brand, weighing it down with whizz-bang features and forgetting the ways in which the user will really want to engage with their website. To boil it down even further, UX is about empathy.
Steve Krug’s guidelines for user-focused may seem like common sense at first, and indeed most of them are. But if you want your website to have a high level of engagement it may be best to use these principles as a guide rather than an afterthought.
Embrace Users On A Mission
Before I delve into what good UX is, I want to share a few examples of what good UX isn’t.
…and not all bad UX is as much of an aesthetic offense. In fact, designers are notorious for introducing visually stunning and creative features that are UX nightmares:
Because users are goal-oriented when they reach your site, they don’t digest a website as they might a novel, reading every sentence and looking for a deeper meaning in the subtext. Rather, they scan and choose the first/best option they see. Similarly, they don’t read instructions to figure out how things on your site work beforehand (and still probably won’t even if your site explicitly tells them to). Instead, they dive in and keep going until they reach their goal or encounter an obstacle. If they don’t find what they need on your site, they’ll move on to another and you have lost that engagement, which is why it’s crucial for your site to deliver its core functionality to the end user quickly and clearly.
Design “Billboards” That Grab Attention
Effective visual cues on your website are the key to helping your users find information. There are many ways to do this, but some of the main ones include:
- Use conventions and affordances
- Create effective visual hierarchies
- Break pages into clearly defined areas
- Make it obvious what’s clickable
- Eliminate distractions
- Format content to support scanning
Give Them Mindless Choices
Users don’t mind clicking around on a site with good “information scent,” meaning a site that instills a strong feeling that the hierarchy of the site is good and gives the user confidence that they’re on the right track towards reaching their goal. Information on your site should be brief, timely, and unavoidable. Don’t bury the lead!
Omit Needless Words
Users don’t want to read pages of “cute” or “fun” marketing copy on a restaurant’s website just to find out what time it opens. A good rule of thumb is to get rid of half of the words on a page, then get rid of half of what’s left. This reduces noise on the page and helps to bring the core content of your page into focus while allowing the use to see more of the page because it’s shorter with less text. As mentioned above, users don’t read instructions so you can do away with them entirely by adopting good design practices and making everything on your site self-explanatory.
Design Thoughtful Navigation Components
The user is always on an information quest and will either search or browse to get there. A prominent search bar is best for the former method and a link-based navigation structure for the latter. Which one of these components to choose to highlight on your site may depend on the type of information you have to present, but it is often a good idea to have both methods on your site to suit different user needs.
Browsing online is less physical than browsing in a store and much more abstract, which is why it’s important that your site keeps a user grounded with good navigation. Not only does navigation tell a user what’s on your site and how to use it, but good navigation gives the user confidence in the people who built the site itself, which translates to a positive image of your brand. A navigation bar should follow design conventions and be on every subpage of your domain. After all, you never know how people will be directed to your site and want them to have full navigation capabilities.
On that note, every page should have a prominent and well-positioned name that matches the link a user clicked to get there. Pages should include “you are here” indicators (eg. color changes, highlights, bold text) that aren’t so subtle that users can’t distinguish them. Breadcrumbs are especially helpful to the user because they allow a user to see their full path on the search hierarchy and easily go backwards if they need to.
Stick The Landing (Page)
The landing page / home page is the banner for your business or app and needs to have immediate appeal for everyone who visits. We’ve already discussed users’ short attention spans. On the web, as in real life person-to-person interactions, first impression is critical! A user should know what your site is for in the first few seconds of interaction. Get your message across like this:
- Tagline: concise, informative, differentiated
- Welcome blurb: short and sweet
- “Learn more”: Call to action that could be a short video
An example of a website that puts these principles into practice is Mint.com. Their landing page has a simple tagline with introductory text that is short and makes it obvious what the site is for. There is a clear entry point that’s also a call to action for a user to sign up or learn more. Mint is a website that is handling sensitive information from users, so it’s imperative that they garner user trust with orderly design but also by delivering information to the user in a straightforward manner.
Krug also flags the following elements as part of a powerful home page UX experience. This list is a good jump off point when formulating your site’s landing page:
- Site identity/mission
- Site hierarchy
- Search feature
- Timely content
- Shortcuts
- Registration
- Obvious place for the user to “start”
And after all of this time discussing “the user,” I would be remiss if I didn’t mention …
There Is No Average User
Steve Krug points out that most of the time when we paint a picture of “the user,” we’re more likely projecting our own preferences. In reality, all users are unique and their ways of interacting with your site are idiosyncratic. At the end of the day, it’s impossible to assert what “most users” are like. The only effective way to get a more robust picture of the type of people who use your site specifically is through focus groups and user testing, which I’ll explore in more detail in a future blog post.
Suggested Reading
Don’t Make Me Think Revisited: A Common Sense Approach to Web Usability (3rd Edition) (Amazon)
The Design of Everyday Things: Revised and Expanded Edition (Amazon)
Lean UX: Applying Lean Principles to Improve User Experience (Amazon)