Gather data about your site users before working on your site architecture. Strategies, standards, and supporting resources to make the Web accessible to people with disabilities. At this point, you should have a better idea about how to structure a web page/site. In the last article of this module, we’ll learn how to debug HTML. Now, brainstorm all the other content you want to have on your website — write a big list down.

  • Answering FAQs on your checkout page, when done right, can help reduce uncertainty at the point of purchase.4.
  • Content is first, but once the user is done reading the content, they’re going to reach for the local navigation before looking at the global navigation.
  • People may want to go back to things they’ve discovered in the past.
  • But some prefer navigation, so it has to work with a search to get people where they know they want to go.
  • Tree testing is where you create a menu structure (either yourself or based on other card-sorting outcomes), then let people find items from the menu.

Tree testing is where you create a menu structure (either yourself or based on other card-sorting outcomes), then let people find items from the menu. The goal of tree testing is to prove that your site structure will work – before you get into actual user interface design. This article looks into how to plan a basic website structure, and write the HTML to represent this structure. They feel that each level of navigation helps users zero in on their goals. Most websites have enough content for only two levels of navigation—the global navigation and one level of local navigation. Sitemap design is driven by a site’s organizational scheme and labeling.

Take a look at the navigation menu I have up there. I’ve done a good amount of testing to find the perfect good-enough wording for those. (If some of those aren’t clear, let me know). It is done on a simplified text version of your site structure—without the influence of navigation aids and visual design.

Document And Website Structure

I suspect the level of detail is beyond some of us but I recognise you’ve got a wide range of readers. I think the card sorting method is particularly helpful, something I’ve seen used in other non-website contexts (I’ve used it for classifying company values). If it’s at least 2-level menu with a bunch of links in sub-category, I’d use open card sorting.

Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list wai-eo- or via GitHub. Next, draw a rough sketch of what you might want the structure of each page to look like . Note what each block is going to be.

Website structure example

What should the menu links be called? This post gives you answers. Menus are how a user becomes aware of a site’s hierarchy. Menus can also provide shortcuts to frequently-accessed pages that are otherwise buried deep within a sitemap. Getting menus correct so that a site can be navigated is one of the most important aspects of usability.

In This Article

Test subjects (representatives of your ideal customer whom you’ve recruited for this purpose) get a set of index cards with terms already written on them. Card sorting is a flexible, pen-and-paper method to organize your website content into categories. You can use sketches, diagrams, sitemaps, or wireframes to communicate your findings and proposals to move forward. Don’t know what I need to know. Sometimes people don’t know what they need to know. Somebody looking to buy gemstone jewelry has to figure out precious metals, treatments, gemstone clarity, hardness, and many other things.

Website structure example

Each page on your site needs to help build this chain of tasks. Before you start thinking about actual design, you need to have the content in place. Let’s say you want to buy a coffee grinder, so you go to a website that sells them. If you browse around and can’t find one, it’s a sign of bad metadata. If you get your metadata right, you’ve already cleared the first hurdle of effective site design. The goal is to understand what your users want and why they want it.

If the site hierarchy makes sense, this process should be easy. If not, the desired page may never be found. You don’t have to conduct card sorting in person. Doing it online is cheaper, doesn’t require logistics website structure planning, and can be done without geographical limitations. Participants are provided with a predetermined set of category names. Their goal is to assign the index cards to these fixed categories.

Our example seen above is represented by the following code . We’d like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual. Yeah, I expected that too. The audience is a mix between agency people, freelancers and “client side” folk.

Site Hierarchy And Navigation

In most websites, a primary menu will be at the top of a desktop version of a site, and a local menu will be in the left or right sidebar. In mobile websites, menus are often hidden behind icons or located within dropdown lists. Footers and headers often contain additional menus for utility links. The term “sitemap” refers to two things. First, it means the hierarchical arrangement of pages on a website. A visitor may start on a home page and go deeper through a series of menus to drill down to a particular page they are looking for.

This is where the test participants create their own names for the categories. It gives you insight into how your customers think and mentally classify items. You have a bunch of pages on your website that need to be categorized. What should go where? Card sorting lets you figure out where people would want to find something. It’s an awesome (and reliable!) method for finding patterns in how users expect to find content or functionality.

You don’t know how to build it until you know whom you’re building it for. Personas are fact-based but fictional representations of your users. They represent the goals, motivations, characteristics, and behaviors of the most important groups of people who come to your site.

Website structure example

It should determine the big picture, organizing the content on the site to support the tasks that users want to perform. Information architecture should also include little things, like deciding that products on a search page should be ordered by price not name. If you already have tens of pages on your site, you should do a proper information architecture analysis.

Mobile web users often have access to a so-called “reader” or “reading” mode that will only show the main content of the page if it is correctly marked up. The simple example shown above isn’t pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. Gettting the information architecture of your site right ensures a great user experience, which in turn leads to higher retention and more conversions.

Make it easy for visitors to find what they’re looking for (clear navigation, search, etc.). People using screen readers can skip to the main content directly and navigate to sections that are important to them. Now try to sketch a rough sitemap — have a bubble for each page on your site, and draw lines to show the typical workflow between pages. You might also want to include notes about how things might be presented. Peep, this article is exactly what I was looking for.

Information architecture works hand-in-hand with usability and conversions. Do I just use the results as my site architecture? You should use card-sorting results as a guide to organization and labeling. Don’t blindly use the results as your actual site structure. Your card-sort results can supplemented with additional user research and task analysis. Often, when people know exactly what they’re looking for and what it’s called, they’ll mostly use search.

Otherwise, users have to press the tab key multiple times to navigate through all links in each section. In this case, the editor’s note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used https://globalcloudteam.com/ to distance the note slightly from the main text. Hi, I am not an IT professional but am interested in website design as we are re-doing our website. I found your article to be very, very helpful and it is written in simple, layman’s language where any non-technical person, such as myself, can understand.

But, sitemaps may also be constrained by the need to visually design a menu that can fit within the appropriate space. Intuitive navigation doesn’t happen by chance. It’s about organizing the content and flow of a website based on research and planning. The goal of information architects is to come up with a structure and design that balances users’ desires with business needs.

Create Customer Personas And Write User Stories To Design Your Site For Real People

(Change the color of visited links, use permanent shopping carts, etc.). Each type of page is optimized for a different kind of user task. Understanding the type of page you need helps you tailor the interface design. Scenarios work with personas. They’re the story behind why a particular persona would come to your website.

But some prefer navigation, so it has to work with a search to get people where they know they want to go. When you draw a sitemap or map user flows, note whether a page is a navigation page, consumption page or interaction page. These help users determine where to find what they want, and give them access to it. Their goal is to send users “somewhere else.” Typically it’s a homepage or search results page. Create customer personas and write user stories to design your site for real people.

Html For Structuring Content

All of it should be based on actual research and data—not much room for opinions here. There are multiple ways to get website information architecture right. Here’s the method that’s worked for me over the years.

Planning A Simple Website

You’ve put a lot of work into it, and I’ll be returning to re-read and absorb and follow all the links. A diagramming application that allows you to create diagrams of all kinds, such as flowcharts, sitemaps, wireframes and more. In good navigation design, links look clickable. They have clear labels that set expectations of what lies beneath. Unclear menu links cause click fear.

The Modified-Delphi method of card sorting lets participants change others’ choices. The process continues until there’s consensus. Second, “sitemap” refers to an actual page that lists other pages on a site.

Website Information Architecture: How To Optimize For Ux

Hopefully skipping stuff that’s less relevant is easy enough. The tool of choice for a lot of UX professionals. Diagrams, process charts, quick page layouts, website mock-ups, and more . What if half the people want to find Page X in Category Y, but the other half prefer Category Z? It’s okay to have the same link under two categories! If that helps people find the content they want, that’s the way to go.