Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Information Architecture (IA) is a series of design choices and techniques that prioritize the organization, structure, and labeling of page content and pages in a way that is easy for users to understand and navigate. The way you display the content on your websites should effectively show users how to find what they are looking for on your site without becoming confused or frustrated.

There are two main components of information architecture: structure

  • Structure, or the way

...

  • information is organized into categories, hierarchies, and relationships

...

  • Labeling, or the things used to represent and classify those things. 

Why use Information Architecture?

...

A poorly organized site might prevent people from visiting it again, especially if they never end up finding the information that they need. If you put too much information content on a page, how do users know where to look? 

...

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 by putting different information in into categories. This will help ensure that users are finding information where they expect to find it. 

...

If you still feel unsure about the results of your card sorting, recruit a few willing volunteers to go through this process and compare and contrast the results. That way, you have an outside perspective on how intuitive your site's navigation is

Information Flow Trees

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.

...

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.

Image Modified

It's important to make sure that any images you use online are high-resolution, if possible. Consider creating alt text for any images you use, in order to make your sight more accessible to those with visual impairments. 

Icons

Icons are small visual tools used to represent functions on the interface. A user will be able to navigate a website using the icons, limiting the number of words used on the screen. Icons should be simple, consistent, and universal. For example, a magnifying glass is commonly associated with the search bar, which we can see on the IKEA website (see figure 7). 

...

Visit the Visit Google's Icon Library to see different icons and their meanings. 

...