...
To see how these ideas come together in practice, here is an example of good IA from the Adidas home page (see figure 1). The home page of the site acts as a welcome, giving the user any big updates or new releases that have come out. And, at the top of the page, the navigation is separated into broad categories which show more content when hovered over. Each category is then expanded upon, giving the user more options to narrow their search.
If a user was looking for men’s shoes used for playing soccer, they would hover over “MEN”, go to “SHOES”, and then click on “SOCCER” (see figure 2). If the user cannot find what they need using these categories, the search bar is always at the top right no matter where the user is on the website.
Bad Information Architecture
...
The Craigslist home page (see figure 3) is an example of bad IA. While there is quite a bit of information provided and a useful search bar, that is about all that there is. The lack of images and white space cause a blur effect on the page. Creating a larger page with spaced out information may be more effective here.
Utilizing and Implementing Information Architecture
...
One very simple and easy method of implementing IA is using a method called card sorting (see figure 4). While not always requiring physical cards, it is a method of outlining the information you want on your site and organizing it as logically as possible.
To start the process, you should label a series of cards (either digital or physical) with the information you want included on the website. For example, a company’s website might contain information on product pricing, company information, and resources to help consumers/users best utilize their product/information. You, or even better a random user, would then create groupings for the information (Main Menu, Company info, Client info, etc.), placing topics under specific groups. This will give you a visual layout of how the information should be grouped and subgrouped – grouping titles could become navigation drop downs, and the cards in each group could function as separate pages.
...
Another method of laying out the content of a website is to create an information flow tree (see figure 5). Like card sorting, this helps visualize and break down the content and paths of a website, allowing you to effectively organize and group information in an easy-to-understand way.
Starting on the homepage, identify what information you want included on the website. In the example, a shoe website is shown in the information flow tree. From the homepage, users would choose to look at either men’s or women’s shoes. From there, they can choose more specific styles (boots, high heels, tennis shoes, etc.) The individual branches will become different pages on the site.
...
Take the YouTube home page and video thumbnails for example (see figure 6). If the title of a video was displayed without a corresponding image, many users may not be interested in navigating to the video without a visual preview of the content of the video.
