What I Learned from a 20-year-old Book on Web Design
A Quick Background
At my school (yes, I am a teenager), there's a school library, which I go to often. One particular day I decided to see if they had any books on web design and development. I've been building websites for a while, but, just for fun, I wanted to see what my school's library had to offer.
I wasn't expecting much, but, to my surprise, there was one book available, called "Don't Make Me Think" by Steve Krug. The cover said on the bottom "A Common Sense Approach to Web Usability". I picked it up, and as I flipped to the front cover, I noticed the copyright statement. "© 2000 Steve Krug".
Wait. This book was published before I was even born. Before the web had even existed for more than a decade. Before HTML5 and CSS3 were the standard and before Google Chrome even existed.
This raised a few red flags in my brain, but I reluctantly continued reading. At this point, I really wasn't expecting much from this book.
But I can say now that after reading it, it was worth it. Because a lot of the general principles and user behaviors that were present 20 years ago on the web are even more prevalent now, and the lessons of web design the book teaches are still very applicable today.
Lesson 1: Everything on a Web Page Should be Self-Explanatory
Krug starts off with a "simple fact of life": We don't read pages. We scan them.
Users are generally in a rush, and most definitely will not read everything on a webpage. If your page has long blocks of text or lots of things going on, users will definitely not read everything.
As Krug explains, users figure things out as they go along, looking for things to click on, reading big headers and looking at images.
What does this mean for designers?
Since users only scan pages, pages have to be organized and self-explanatory.
A great way to do this, as Krug explains, is by using web conventions. Web conventions are sets of components in websites that are used everywhere and have really caught on with users.
Examples of common web conventions include:
- The Main Navbar
- The Shopping Cart Icon
- The Footer
As Krug writes, it is important to use existing conventions rather than trying to come up with your own. If you use a convention that your users have never seen before, then they won't know how to use it, and it's much less likely to be effective.
As for making a site organized, Krug gives a few conventions and tips, which include.
- Use headers, subheaders, and smaller headers to indicate hierarchy
- Separate a webpage into clearly defined areas
- Use nested sections for subsets of things
- Make it obvious what's clickable
In general, Krug says, things that are related logically should be related visually.
Lesson 2: Remove Useless Content
Krug gives another rule in Don't Make Me Think, which is "Remove half of the words on a webpage. And then remove half of what's left."
This rule relates to the previous section, because users won't read everything. And the less content there is on a webpage, the more likely a user is going to see and look at what is actually important.
Krug gives the huge example of "happy talk". Happy talk is the introductory text and instructions on a webpage. Unfortunately, as Krug says, most users will only glance at that text. And that's why, in Krug's words, "Happy Talk Must Die".
Removing useless content on a page, especially text, will likely improve user engagement, and make your site more usable and elegant.
Lesson 3: Make the Homepage Straightforward
The homepage is undeniably the one the most, if not the single most important page on any site.
The homepage of a site has two purposes:
- Tell the user what the site is about
- Show the user where to start
Any clutter that isn't there directly to influence one of those purposes should probably be omitted.
Lesson 4: Testing is Key
Usability testing is much easier these days than it was back when Don't Make Me Think was written. Sites like HotJar make it really easy to get sample users testing your site, really quickly.
As Krug points out, usability testing will help you find the biggest problems in your site with just a few tests. Why spend hours thinking about how users will use your site when you can test your site on real users?
Written almost 2 decades ago in a world in so many ways different than today, Don't Make Me Think proves that while the technologies and sites behind the web have changed so much, the essence of how users use the web is still the same. The book demonstrates how to best design sites with usability and the users in mind.
I would really recommend reading Don't Make Me Think for yourself, and I hope you enjoyed this post. As I wrote earlier, there is a new, revisited version which I recommend you read rather than the original. Since finishing Don't Make Me Think, I've found out that the book is still extremely popular today. I was not surprised. In my eyes, it is the single guidebook of the fundamentals of web design and usability.
Of course, everything written in this post is my opinion, and I encourage you to do your own research on this topic. Some of the quotes from the book have been slightly paraphrased for context, and special thanks to my school library for having this book on their shelves!
— Gabriel Romualdo, October 24, 2019