Every visitor who exits your site is a potential customer lost. Therefore, your web design is vital to keeping people on your page—and even more critical to the success of your business. However, when the average bounce rate is over 50%, you only have a few seconds to make a good impression and keep people on your site. One way to help accomplish this is by incorporating information architecture (IA) strategies in your web design.
IA is a user experience (UX) strategy where you build a site with structural design in mind. This means that you put your target audience at the core of your design and create a site that is easy to use and leads with key information, drawing people in and keeping them on your site. In return, people spend more time on your site and are more likely to convert.
Looking to build a small business website, or looking for ways to improve your existing business website? Check out this article on how to design a website.
What Is Information Architecture
If you’re confused about what information architecture is, you’re not alone. There are all sorts of cryptic definitions of what information architecture is floating around on the internet. However, information architecture (IA) is defined as the strategic, structural design of a website so that content and elements are logically placed, or ordered, on a site. This helps create a better user experience, as it lays out web content so that it’s easy for site visitors to find and understand.
In other words, information architecture focuses on the structural design of a platform, or layout of web pages and web content. It considers user behavior and human psychology to more strategically design a site that functions as users expect it to so that it’s easy to use, and it works to create a visual hierarchy where the most important, most relevant, or most compelling information is at the top of the page, which draws readers in to continue reading the web page.
IA vs UX: What Is the Difference?
Information architecture (IA) and user experience (UX) go hand-in-hand, which can make it difficult to understand the difference between the two. UX is the process of designing a website so that it’s user-friendly and creates a positive user experience. IA, on the other hand, is an element of UX design that seeks to strategically structure a website.
Interested in learning more about how to design a site for user experience? Get the breakdown of the top UX design principles.
IA Design Dos & Don’ts
There’s a lot to consider with regard to information architecture in UX. From the different types of information hierarchies to design patterns, most IA boils down to a few overarching design strategies. To design for IA, keep the following IA do’s and don’ts in mind:
Dos | Don’ts |
|---|---|
Know your audience | Have a large number of items in your site menu |
Design for your audience | Use a specific audience for your site menu (e.g., For Students, For Parents) |
Create a visual hierarchy | Nest important information at the bottom of pages |
Focus on your goals | Get hung up on average time on page |
Map out your site navigation structure with wireframes |
Information Architecture Examples
Information architecture is one of those things that you won’t notice if it’s done well. This makes it difficult to spot IA in web design, so to help, we’ve compiled a few examples of how some websites incorporate information architecture successfully.
Trulia: IA Search Filters
The more content a site contains, the more important it is to organize to present it. To do this, filters are the go-to tool. However, not all filters are designed equal. Trulia does a good job of using IA-based filters. The horizontal filters are in order of most frequently used, and by having them across the top, opposed to on the left-hand side (like most filters), it doesn’t encroach on the results column or map size.
Trulia: Information architecture example
Gigi Pip: Ecommerce Product Categorization
In ecommerce, product categorization is vital. Site visitors are coming to your site looking for a particular type or style of product, and smart retailers know the value in delivering good results quickly. Despite offering a niche product, women’s hats, Gigi Pip understands that its audience is generally looking for particular types of hats, so it breaks out its menu by product type to quickly get visitors to the products they want.
Gigi Pip: Information architecture example
LeadFeeder: Visual Hierarchy & Leads With Key Information
LeadFeeder’s website does a good job of creating a visual hierarchy. First, it leads with its most important message, “Generate more leads …” This is effective in clearly stating what it does and why a site visitor should be interested in it. Second, where most sites use a visual hierarchy layout from top to bottom, this homepage utilizes its space above the fold by using a left to right layout that includes both its message, a call to action, and an image to reinforce its message.
LeadFeeder: Information architecture example
Visit Maine: Navigation Based on Audience
The navigation of the Visit Maine website uses principles of information architecture, where it focuses on quickly directing site visitors to the topics of their interest. To do this, the tourism business would have to have a good understanding of their target audience and know what they’re most interested in when landing on their site.
Visit Maine: Information architecture example
Qwilr: Intuitive Layout for Easy Editing
Qwilr is a leader in proposal software and it’s easy to understand why. Its proposal editing interface is designed with information architecture at the core of its layout. In short, everything is where a user would expect to find it, which makes it very intuitive and, in return, very easy to use. For example, in the upper right-hand corner, you’ll find your account, which works similarly to all email interfaces and online stores these days.
Qwilr: Information architecture example
Frequently Asked Questions (FAQs)
What’s the difference between UI & UX design?
The short answer is that UI stands for user interface or how a website looks, whereas UX stands for user experience or how site visitors interact with a site. While the two are often used interchangeably, they’re not quite the same.
Which site builders incorporate UX design?
Though most don’t explicitly state it, mostly all of the top all-in-one site builders incorporate UX design principles into their templates and themes. Squarespace is the most widely regarded site builder with award-winning designs. What sets Squarespace templates apart is that its site editor makes it difficult to break the template, so site design remains intact even after a good deal of customization. Learn more about building a small business website.
How much does it cost to make a WordPress website?
The cost to make a WordPress site varies greatly. First and foremost, if you’re looking to hire a designer, expect the cost to be anywhere from as little as a few hundred dollars for a basic website from, say, a Fiverr freelancer to over $10,000 for a more complex site from a web design agency. On the other hand, building your own WordPress site can be very affordable, as all you need is a domain and web hosting. Get the full breakdown of all WordPress costs.
