Website Information Architecture

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.

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.

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.

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.

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.

To develop useful metadata, you have to determine what people care about. For coffee grinders, do people search by blade size? Knowing the parameters and variables to store in your system is crucial for excellent search results. Make sure visitors know what their options are (links like “See also” or “Related products”). Each section of your website should be stored its own folder, like the example below. Using this method makes navigating and maintaining the web site much easier.

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.

Tools To Use To Create Your Sites Information Architecture

Have not seen that before, but there’s always a first time for anything, right? Thanks for fixing it. If you do use vertical menus, make sure they’re aligned left. Right-aligned menus impede scannability.

If your information architecture is bad , most visitors won’t find what they’re looking for, leaving your site before entering the sales funnel. People buy only what they can find. Studies show that websites are losing money because their navigation systems fail, and users can’t find the product they’re interested in. A great, fast wireframing tool. There’s almost zero learning to get going, and I love that it focuses on the big picture, not little design elements.

  • Have not seen that before, but there’s always a first time for anything, right?
  • For coffee grinders, do people search by blade size?
  • Yeah, I expected that too.
  • Provide answers to booking-related questions on the page where users book stuff.
  • But, sitemaps may also be constrained by the need to visually design a menu that can fit within the appropriate space.

There will be different intents and use cases among your users. That’s to be expected. In-person interviews and phone calls are best, but online surveys are also great. Needs to review the security of your connection before proceeding. Well-structured content allows more efficient navigation and processing.

Planning A Simple Website

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

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.

Site Hierarchy And Navigation

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 https://globalcloudteam.com/ 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.

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.

Create user flows to map users’ progression through your site. When you’re designing the site, making sure the user accomplishes each task is vital. However, achieving that objective usually consists of a series of smaller tasks. The relationship between tasks defines experience.

Website structure example

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.

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.

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 website structure 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.

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

Local navigation links should be closest to where the user needs them. 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. Tullis and Wood recommend testing 20–30 users for card sorting. However, based on his research, Jakob Nielsen recommends testing only 15 users .

Invest 5 Minutes A Week & Learn From The Very Best

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.

Gather Data About Your Site Users Before Working On Your Site Architecture

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.

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.

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 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.

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.

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.

Please Login to Comment.