How to Optimize Website Architecture for UX

Website architecture refers to how your website is structured. More specifically, how easy it is for your visitors to navigate your site and find what they’re looking for. Website architecture, and its close cousin information architecture, can affect your site’s user experience and even more concrete metrics like your conversion rates and engagement.

If your website architecture and information architecture aren’t well thought out, your visitors might leave your site rather than continue struggling to find the relevant content. Whether you’re running a blog, eCommerce store, or any other type of website, that will hurt your site.

In this post, you’ll discover some actionable tips and tactics that you can use to improve your website architecture.

For example, one tactic is to create a table view of your content or products to help visitors find what they’re looking for:

Before we get to those tips, though, let’s define what website architecture means in more detail.

What are website architecture and information architecture? Defined

In this post, we’ll focus on two key terms:

1. Information architecture
2. Website architecture

Information architecture is a broad topic that refers to organizing any type of content in a way to help people use that content to accomplish tasks.

According to Usability.gov:

Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks. To do this, you need to understand how the pieces fit together to create the larger picture, how items relate to each other within the system.

Information architecture refers to any system, not just websites. For example, a textbook or an offline file organizing system.

Web architecture takes the same goals from information architecture and applies them specifically to websites, web design, and web development.

You want to make it easy for your website’s visitors to find content that they’re interested in and perform relevant actions.

For example, if you have a blog, you want to make it easy for visitors to find the posts that they’re most interested in.

Or, if you have an eCommerce store, you want to make it easy for visitors to find and purchase products.

Is website architecture the same as website navigation?

When you hear that website architecture helps your visitors find things, it’s easy to think that website architecture is synonymous with website navigation.

However, such a view is overly limiting and misses the full scope of website architecture.

Your website architecture includes your navigation structure, but it is not limited to just your navigation menus. It also includes other elements like user interface design, website design, and more:

• Content strategy — how is all of your content organized?
• Design elements — e.g. should a button be green or red?
• Usability — is it hard for users to perform desired interactions?
• Internal links — how connected is your content?
• Processes — e.g. a checkout process or a signup form.
• Filters/search options — how logically can visitors search or filter your content?

Why it’s important to optimize your website architecture

Put simply, optimizing your website architecture helps you achieve your business goals.

For example, if you have an eCommerce store, your goal is to sell more products and increase revenue. By optimizing your eCommerce information architecture, you help visitors find and purchase products more easily, which increases your revenue.

If you have a blog, improving your information architecture helps visitors find the content they’re interested in, which increases the chances that they’ll become a repeat visitor and/or join your email list and follow your social media accounts.

While the main focus of website architecture is on your human visitors, a nice benefit of optimizing your web architecture is that it also helps search engines like Google crawl and understand your site, which can boost your SEO and online marketing efforts.

Conversely, if you fail to optimize your web page architecture, you’re missing out on people who could be your customers or fans. For example, if you sell the exact product a user is looking for, but they can’t find that product on your site, you just lost a potential sale because of poor website architecture.

Sitewide best practices for website architecture

Now for the next question — how can you improve your website architecture?

Let’s start with some sitewide best practices for content and site structure to help you improve your information architecture know how.

Nail your navigation menus

You know that website architecture is not just navigation, but navigation still plays a huge role in the effectiveness of your website architecture, so it’s important to get it right.

Here are some general tips for improving website navigation:

• Be descriptive Use clear, specific names for each menu item. For example, instead of “Reach Out”, use “Contact” for better clarity.
• Avoid drop-downsMake sure you list your main categories as top-level navigation items. If you must list several subcategories, consider a mega menu instead of a traditional drop-down.
• Limit menu itemsTry to keep the number of menu items under ~7 or so.

Organize your content logically

While you want your main pages to be accessible from your navigation menu, you’ll likely have a lot of smaller content items that shouldn’t be included in the navigation menu. For example, individual blog posts or eCommerce products.

To make this content accessible, you need to organize it with a logical content structure. For example, descriptive categories and tags to help visitors quickly locate relevant content.

To help organize your content, you can use a tactic called open card sorting. Add each product or piece of content as a new card. Then, let your team members or a group of test users organize the cards into categories. This way, you can understand the logical process of your users.

To help visitors filter your content by its tags/categories, you can use a table layout, which we’ll discuss in more detail later on.

Follow web-wide trends

Cognitive fluency is the ease at which humans process information. Basically, humans find it easier to process information that matches existing mental models.

For example, if you see a green button and a red button, you naturally assume that the green button confirms an action and the red button negates an action.

When you create your website architecture, you want to model it in large part on the popular players in your niche so that people will feel at home when they land on your site.

For example, if you model your eCommerce store after Amazon, people will know exactly what to do as soon as they land on your site.

Include wayfinding elements (like breadcrumbs)

For most sites, the majority of first-time visitors will land on a subpage, rather than your homepage. Wayfinding elements help visitors quickly orient themselves so that they can better navigate your site.

Examples of wayfinding elements include:

• Breadcrumbs
• Highlighting current navigation (for example, highlighting the active menu item)
• Human-friendly URL structures
• Step listings (for multi-step processes, like an eCommerce checkout)

Website architecture best practices for specific pages

There are a few pages that all websites have (or should have), so it’s important to get these pages right. Here’s a rapid-fire look at some of the most important pages for regular sites and eCommerce stores:

Homepage / landing pages

• Clear headline that describes your site.
• CTA that drives visitors to a primary action.
• Accessible navigation.
• Feature the most important items. For example, your top blog posts or best-selling products.

Contact

• Simple contact form.
• Physical address (for physical locations).
• Social media profiles.
• Clear phone number and other contact information (if applicable).

Product pages (eCommerce)

• Clear add to cart button.
• Understandable variations (e.g. sizes or colors).
• Product categories/breadcrumbs to act as wayfinding points.
• Clear product details (like materials, features, etc.).

Checkout page (eCommerce)

• Step listings so users know how long the process takes.
• Clear instructions.
• Logos to communicate payment methods.

Case study: Improve website architecture with tables

One great way to improve your website architecture and make large amounts of information more accessible is with tables.

Most websites, especially WordPress sites, don’t list information in a very efficient manner by default.

For example, if you have a WordPress blog or eCommerce store, WordPress will create a lengthy list view for each blog post or product.

Here’s an example for a book review website — notice how each item takes up lots of unnecessary space, which makes it hard to browse all the content:

If you only have a few items, that might be ok. But once you start getting into 25+ items, a table provides a much more efficient way for visitors to browse content.

Here’s that same book review website from above, but using a table layout to improve the website architecture. Now, visitors can see additional helpful information in much less space:

Here are some real-life examples of websites using tables to improve their web architecture:

Ian Martin Job List

IanMartin.com is a recruitment and project-staffing firm that posts jobs in several different industries. To help visitors navigate all of these job posts, Ian Martin uses a table layout. Visitors can also filter all the job listings without reloading the page:

MythBank

MythBank, formerly known as All Timelines, is a neat site that displays the proper viewing/reading order for popular book, film, and television series.

In a way, it’s kind of like the information architecture for your favorite entertainment series.

To make these timelines easier to understand, MythBank uses a table layout.

Below, we’ll show you how to use a table layout on your own website.

How to analyze your existing information architecture

There are plenty of free tools to help you analyze your website architecture, with two of the best options being:

1. Google Analytics
2. A heatmap/user recording tool

For a more heavy-duty option, you can also use the Treejack software, which employs a card sorting strategy to find where people get lost in your content. However, Treejack’s plans start at $199 per month, which puts it out of reach of most casual users.

1. Google Analytics

Google Analytics provides a wealth of information to analyze your website architecture.

For example, you can quickly see:

• Top pages — you want to feature these prominently because they’re what your visitors are searching for.
• Bounce rate — pages with a high bounce rate might have architecture problems.
• Engagement/time on site — low numbers might mean your website is too difficult to use.

One of the most useful reports, though, is the Behavior Flow report in the Behavior section. This report shows where visitors land on your site and then where they go from there.

By understanding where visitors want to go from each page on your site, you can optimize your website architecture to make those pages more accessible:

2. Heatmaps/user recordings

If you want to perform more in-depth usability testing, you can use a heatmap and user recording tool like:

• Hotjar
• Crazy Egg

These tools let you see exactly where users click and scroll on your site (heatmaps). For a more detailed view, you can also take individual user recordings to see where users hit problems.

How to plan your website architecture

If you see gaps in your website architecture via the methods above, you can use techniques like user personas and wireframes to plan out your architecture and website content.

A user persona is essentially a fictional character designed to represent your target audience. For example, “Sally is a 35-year old manager at a technology company”. By understanding exactly who your audience is, you can create a website architecture that works for them.

If you’re not sure who your user personas are, you can employ user research to understand your target audience.

Once you understand your audience, you can use wireframes to plan out your website architecture. A wireframe is a basic white-and-black layout for your website and its key structure. You can create a wireframe or similar deliverables using free tools like Pencil Project or Mockplus.

If you need help, you might want to consult a UX designer at this stage.

How to improve website architecture with Posts Table Pro

If you want to use a table layout to improve your website architecture on WordPress, you can use the Posts Table Pro plugin.

Posts Table Pro helps you improve the architecture of your WordPress website by letting you display any type of content in a flexible table layout.

You can display posts, pages, or custom post types, which lets you create an architecture for any type of content.

For example, Ian Martin uses Posts Table Pro for jobs, while MythBank uses it to list books and TV episodes.

Posts Table Pro is especially helpful for sites with lots of information, because it gives visitors a much more concise, filterable method to browse your content catalog. For example, you can let visitors search or filter without reloading the page, which saves them from having to scroll through large numbers of pages.

Posts Table Pro does not replace the other website architecture best practices in this post. But when combined with those general best practices, it helps you make your WordPress site easier to navigate.

If you’re running an eCommerce store, you can also use the WooCommerce Product Table plugin to achieve the same effect for your WooCommerce products.

Here’s how to set it up…

1. Install and activate Posts Table Pro

To get started, install and activate the Posts Table Pro plugin on your WordPress site. You’ll also need to activate your license key to receive updates.

2. Choose what type of content to display

To choose what content to display in your table, visit Settings → Post Table Pro and use the Post type drop-down. Again, you can choose:

• Posts (full tutorial)
• Pages
• Custom post types (full tutorial)

3. Choose columns in your table

Next, use the Columns setting to control exactly what information to display in your table. Here, you want to think deeply about your overall website architecture and user personas.

Again, you want to make it easy for visitors to find what they’re looking for, so make sure to include the most important information in the columns.

For example, if you have a book review website, you’d want to include important information like each book’s:

• Title
• Genre
• Author
• Etc.

Learn more about the column options

4. Configure search and filter options

To help visitors browse your content (especially for large catalogs), you can add search and filter options to your table view in the Table Controls section:

Again, think about what your target audience would find most helpful. For example, for a book review website, visitors would likely want to filter by author and genre.

Feel free to peruse the other settings, as well. Once you’re finished, make sure to save your changes.

5. Add Posts Table Pro shortcode

Finally, to display your table view on the front-end of your site, add the [posts_table] shortcode to the front-end of your site.

If you have an especially large content catalog, you can also further improve your website architecture by using different shortcodes for different categories of content. For example:

• [posts_table category="science-fiction"]
• [posts_table category="fiction"]

Here’s an example of what your table layout might look like for a book review website:

Bonus: Restrict content to improve architecture

Sometimes you might want to have one website architecture for authorized users and another for non-authorized guests.

For example, you could password protect or hide an entire category of posts while making the rest of your site public.

If you want to restrict access to a category of content, you can use the Password Protected Categories plugin to restrict one or more content categories using:

• Passwords
• WordPress user roles

Learn how to create password protected categories

Improve your website architecture today

No matter what type of site you’re running, it’s important to focus on optimizing your website’s information architecture.

Your website architecture helps visitors find what they’re looking for, which helps you achieve your business goals.

To improve the architecture of your website on WordPress, you can use the Posts Table Pro plugin.

It lets you display any type of content, which makes it a great option for all types of sites, especially those with large content catalogs. Plus, you can control exactly what information and filters to include, which lets you optimize your website architecture for your user personas.

To get started, purchase Posts Table Pro today:

And if you’re running an eCommerce store with WooCommerce, consider WooCommerce Product Table to use the same table layout to display your products.