What information architecture is
Information architecture (IA) is an important part of designing and developing a website.
Information architecture is all about organising data and content in a relevant and structured manner. Information architecture that is well-designed improves the usability of a website and keeps the website well organised.
Louis Rosenfeld and Peter Morville defined three areas of information architecture that ensures a good design:
Content, Context and Users make up information architecture
This Venn diagram shows how all three areas are related to information architecture.
A website with a good information architecture makes the user experience (UX) much better.
Information architecture within the context of web design is all about putting files in the appropriate place. A web server file hierarchy is one example of how architecture can be improved. Take a look at this example:
An information architecture diagram for a website
It's clear from the above diagram that the website that has been created from the diagram is one that writes articles and reviews. It's also clear from the information architecture diagram that the company has an about section which contains three different sections; about the company, the policy of the company and the history of the company. The above diagram represents what the menu bar on the website contains.
This hierarchy also happens to be the file hierarchy of the web server in which the website is hosted on. Now looking at the file hierarchy:
The file hierarchy of the website
Ignoring the .html part of the filename, these files give a good idea as to what is in the file. The diagram above does indeed also represents a site map.
The sections without a .html extension are directories.
By using directories rather than placing every file on the root directory the site becomes more structured. It's important to note the importance of a good site structure since it also makes it easier for users to find what they are looking for. This means utilising well-formed, easy-to-remember URLs.
Index files
Notice that each of the sections (about, articles and reviews) in the previous file hierarchy had a file called index.html under it. This index file is the first file the server will look for when a user visits that directory and is an incredibly important feature of web servers.
An index page is the default page when a directory is navigated to. Without an index page if the user visits the directory, they will instead likely see a list of all the files in that directory. The index page is good for information architecture since it means that users can visit a directory such as the about directory and not need to type about.html. This makes the web address more friendly to users since not having to remember whether the file is .html or .htm or .php makes navigation easier.
For instance, instead of navigating to example.com/about.html the user can navigate to example.com/about since the index page exists inside the about directory.
A friendly URL can be generated much easier using directories. For instance, inside the 'about' directory there could be a directory called 'us'. Now the URL would become example.com/about/us. Friendly URLs are ones which are easy for users to remember and are meaningful in the sense they give a context about what the page is about.
This website takes advantage of index.php files, however, you will be automatically redirected to the page without index.php at the end.
Desiging the information architecture
There are several methods of designing the information architecture of a website. This article discusses three.
Card sorting
Card sorting involves getting a group of developers (often around 5) to produce cards with the sections they believe belong on the website. The group of developers then decide (and argue) whether or not the card belongs on the website and where it belongs on the website.
Card sorting can be done on sections only, for instance only the articles section could be done in the first card sort and then the second card sort focuses on the about section.
The biggest disadvantage with card sorting is that it can become too messy with far too many sections and conflicting ideas.
This website's information architecture was designed using card sorting with a couple of friends originally.
Focus groups
Although not many websites will be able to use focus groups or groups of potential users, some will. Within a focus group users describe what they'd like to see in a website, for instance a blog. They can give a rough idea as to what sections should go into main website navigation.
With a web application it is often very important that the application uses focus groups or user input to build the application and therefore in this situation focus groups can help construct the information architecture.
The focus group method involves getting the users to either write down suggestions or discuss them within the group and come to conclusions on the architecture with one or more of the developers.
Front-end vs back-end information architecture
Information architecture also has an important role to play on the front-end of a website. This article has mainly focused on the back-end information architecture, that is, ensuring that the server is properly setup with an organised directory structure.
Front-end information architecture focuses highly on ensuring that users know where to look for information. A menu should be organised in an appropriate manner so that users can find the page they are looking for. For instance, a user would expect the "Our history" section to appear underneath the "About" menu item on a menu, not under reviews or articles.
Webpage layout
The purpose of this section is not to discuss overall webpage layout, but to describe how information architecture can dictate the layout of certain elements of a page.
Information architecture is not solely concerned with the way in which data is organised within the server and how the user accesses pages. As well as these two concerns it is also about the way in which information is presented to a user on a webpage.
This website for instance has a masthead, search box and navigation bar at the top (which floats when the user scrolls down) and then a site links section and footer at the bottom of the page:
The masthead, search box and navigation bar of this website (Christmas theme was enabled at the time)
The masthead or top section of a page should be dedicated to a title about the website, a title about the page of the website and should provide navigation elements (the navigation bar and the search box).
The site links and footer of this website
It is often the case that the bottom is dedicated to site links that are not considered a part of the main website, for instance a link to a site map, or a link to the website legal information. It is common place for websites to have legal information at the bottom of the page in the form of copyrights. Some websites also have information about contacting the company in this section.
