How to optimize website architecture for UX

Website architecture

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 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 use the Posts Table Pro plugin to create a table view of your content or products. This improves the architecture of your website, helping visitors to find what they're looking for:

An example of optimized website architecture using a table

An example of optimized website architecture using a table

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, and 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. You can create these tables instantly and dynamically using the Posts Table Pro plugin.

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:

Example of unoptimized website architecture

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:

An example of optimized website architecture using a table

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, created using Posts Table Pro. Visitors can also filter all the job listings without reloading the page:

Using a table view to optimize website and information architecture for jobs

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 Posts Table Pro table layout.

Using a table to list series order and optimize information and website architecture

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:

How to analyze information and website architecture with Google Analytics

2. Heatmaps/user recordings

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

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

After purchasing Posts Table Pro, you will receive a confirmation email containing a download link and a license key. If you don't receive the email, you can submit a support request. Download the plugin from the link provided in the email and save the zip file to your computer.

Upload the plugin to your WordPress admin by going to Plugins → Add New → Upload Plugin, selecting the zip file, and activating it. The setup wizard will then guide you in a step-by-step process to create your first table.

2. Name your table

Choose a name for the table that is only for internal use and appears on the list of tables in the WordPress admin. Then, select the post type you want to display. If you don't have a content type yet, you can create one easily with the free Easy Post Types and Fields plugin. Simply click on the 'Create a new post type' link to begin.

3. Choose what type of content to display

On the page for adding posts or pages to your table, you can select from posts, pages, and Custom post types. The available options will depend on the post type you selected in the previous step. If your post type has custom taxonomies, they will also be listed here for you to select.

4. Choose columns in your table

To modify the columns in your table, you can select which columns to display and in what order. For example, if you have a book review website, you'd want to include important information like each book's:

  • Title
  • Genre
  • Author
  • Etc.

You can add a column by choosing the type of column from the dropdown menu and clicking 'Add'. The added columns appear in the list of columns above, and you can reorder them by dragging and dropping the sort icon on the left or the column title. Additionally, you can click the pencil icon to change the column name or use the toggle to hide the column name completely. If you wish to remove a column, simply click the X icon next to it.

5. Configure search and filter options

You can add filters to your table that enable users to refine their selections. 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.

Filters appear as dropdown menus above the table, and you can add as many as you like. The available filter options will vary depending on the post type selected on the first page. For instance, normal blog posts can have filters for categories and tags, in addition to any custom taxonomies added.

On the other hand, other post types may not have built-in categories and tags, so they will display only the custom taxonomies added to them, which can be accomplished using the Easy Post Types plugin.

6. Choose how to sort the table

You can customize the sorting options for your table by choosing the default sorting option and the sort direction. This allows you to control the order in which the table is displayed to your users.

5. Display your table

Finally, once you have completed creating your table using the Post Table Pro plugin, the setup wizard will confirm that you have finished and provide you with instructions for displaying the table on your WordPress site. You have two options for displaying the table: using the 'Post Table' block in the Gutenberg editor, or copying the shortcode from the table builder and pasting it anywhere on your site. This gives you the flexibility to place the table on any page regardless of its content.

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

An example of optimized website architecture using a table

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

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.

Please share your thoughts...

Your email address will not be published. Required fields are marked *