Is your website user-friendly? Do you want to learn how to structure a website that keeps visitors engaged and coming back?
Steve Krug’s insights on website design offer valuable guidance for creating an intuitive online experience. His approach focuses on making navigation effortless and ensuring users can quickly find what they’re looking for.
Read more to learn how to build a website that truly serves your audience.
How to Structure a Website
In his book Don’t Make Me Think, Revisited, Steve Krug contends that users want to find what they’re looking for as quickly and effortlessly as possible. He goes on to explain how to structure a website to accomplish this. We’ll discuss how to keep users oriented as they navigate your site and then cover how to design an effective homepage.
Keep Users Oriented
Users want to accomplish their tasks as quickly and effortlessly as possible. Krug argues that, to do this, they need to always know two things: 1) What services or information your site contains, and 2) how to find what they’re looking for. Krug recommends structuring your website so these two things are always obvious to users.
(Shortform note: Once your site meets these two basic expectations, you can give your users joy by adding some unexpected elements. For example, one UX designer describes reading a page explaining how to build a raised garden bed. They expected to simply read an article, and they were pleasantly surprised by a calculator at the bottom of the page that told them exactly what supplies they needed to build a bed of a particular size. Moments of unexpected value like this leave a lasting positive impression on users.)
Tip #1: Use a Global Navigation Interface
One way you can keep your users oriented is with a global navigation interface: design elements that appear across every page on your website. These include links to your site’s major sections, a logo that reminds the user what site they’re on, a home button, and any other essential tools for using the site (like search, help, or login). When users scan these elements, they’ll see the main content your site has to offer, and they’ll know that they can get to the content they want by clicking these global elements. Since this interface looks the same on every page, users become familiar with it and can use it no matter what page they’re on.
(Shortform note: Some designers choose to hide their site’s global navigation interface instead of having it constantly visible on every page. For instance, they may include a subtle button on the side of every page that opens a menu with these major navigational elements. This saves space and allows users to digest the page’s content with fewer distractions. However, according to some usability tests, hidden navigation menus consistently lead to a worse user experience: Users struggle to find desired content, perceive tasks as more difficult, and require more time to complete their objectives when global navigation is hidden.)
Tip #2: Use Levels to Structure Your Site
Krug recommends structuring your site as a multilevel hierarchy: The major sections linked in your global navigation interface will contain more specific subsections that clearly organize the content your users are looking for. Detailed navigation like this shows users what content is on your site and provides a route to get there. For example, on a news website, the global navigation could have links to major article categories like “World News,” “Business,” “Sports,” and “Entertainment.” Clicking on “Business” might bring the user to a page with further subsections like “Leadership,” “Economy,” “Technology,” and so on.
(Shortform note: Think carefully about how you divide and name the major sections in your global navigation interface and their specific subsections. If your category labels fail to clearly communicate the content within, it forces users to resort to frustrating exploration to find what they’re looking for. For example, on an old version of Apple’s website in the Netherlands, information about the iPod was unexpectedly listed under “Music” instead of its own separate category in the global navigation interface like iPad and iPhone. Consequently, some users were likely confused about how to buy a new iPod.)
Tip #3: Use Breadcrumbs to Tell Users Where They Are
To keep users oriented throughout this multilevel structure, Krug suggests using “breadcrumbs.” Breadcrumbs are a visual depiction of the chain of pages the user has taken to get from the homepage to the current page. This helps users understand at a glance their position in your website’s hierarchy and easily backtrack to previous pages. For instance, if a user is reading an article about a recent corporate merger, there might be breadcrumb text under the headline that reads “Business > Leadership > BlueCorp Acquires RedCorp.”
The term “breadcrumbs” references the fairy tale of Hansel and Gretel, in which the children venture into the woods and leave a trail of crumbs to find their way home.
(Shortform note: Although the vast majority of English-speaking designers refer to this navigational convention as “breadcrumbs,” French-speaking designers typically call it a fil d’Ariane, or Ariadne’s thread. This name references the Greek myth in which the hero Theseus uses a thread from the goddess Ariadne to navigate his way backward out of a labyrinth after he kills the Minotaur inside.)
| Should You Include the Current Page in Your Breadcrumbs? Experts note that in some cases, including the title of the current page in your breadcrumbs can be confusing. Since most breadcrumbs serve as links for backtracking to previous pages, users might click on the current page’s breadcrumb and fail to understand why it doesn’t take them anywhere. To prevent this confusion, you might omit the last breadcrumb. For example, the previously mentioned news site might limit their breadcrumbs to “Business > Leadership” because the headline “BlueCorp Acquires RedCorp” clearly indicates the current page. However, this solution sometimes creates further confusion: If the breadcrumbs are too far away from the heading, leaving out the current page might fool readers into thinking that the breadcrumb for the previous page is the page they’re on. Thus, only omit the final breadcrumb if the breadcrumbs are adjacent to the page title, so it’s obvious what the current page is. |
How to Design an Effective Homepage
The most important page on your website to design well is your homepage, writes Krug. Typically, the homepage is the first thing new users see. If it fails to quickly and clearly convey what the site is about and why a user should stick around, users will get confused and leave.
Krug argues that the biggest mistake designers make regarding homepage design is failing to convey the site’s core purpose clearly and concisely. To avoid this mistake, Krug recommends utilizing three key elements:
- A slogan: a catchy phrase next to your site’s logo that sums up what your site or organization does. Users will typically see this first, so a good slogan is the best way to communicate your site’s purpose quickly and effortlessly.
- A brief site description: one or two sentences that communicate your site’s core purpose in more detail—in case users want further clarification after reading your slogan.
- A comprehensive explanation: a video or extended section of text that gives users everything they need to know about your website if they want to understand more.
For example, if your website is a marketplace where users can buy and sell rare plants, you could use the slogan “Cultivate the Uncommon,” and write a site description that says “The best place to share and discover rare plants.” Finally, you could insert a comprehensive explanation video that explains your site’s mission, what kinds of plants users can find on your site, and the perks of being a paid member.
