The article is devoted to providing insights into the basics of information architecture in mobile and web design and how to apply it effectively in UI and UX design.
Every digital product consists of information, starting from mobile apps and websites, to an operating system and world wide web. It would be impossible for human beings to perceive all this information without previously carefully constructed. Today, many digital products are good structured and easy to use. Designers and developers take responsibility for constructing content and navigation system in the appropriate way for users perception. The science that assists experts in the content structuring is called information architecture. In today article we will talk about the basics of information architecture and how to use it to make a good design.
“ Design is like a joke. If you have to explain it, it’s not that good. “
What is information architecture?
Information architecture (IA) is a science of organizing and structuring content of the websites, web and mobile applications, and software. The founder of information architecture is considered Richard Saul Wurman. Today there is a growing network of active IA specialists who constitute the Information Architecture Institute. To simplify, information architecture is the practice of deciding how to arrange the parts of something to be understandable.
Information architecture aims at organizing content so that users would easily adjust to the functionality of the product and could find everything they need without big effort. The content structure depends on many factors, from a target audience to the type of the product that is offered. All are structured differently but with the same goal, to be efficient and to accomplish certain objectives.
Information architecture in the design
Since user-centered design became a trend, everyone wants to create a better design which is organized and easy to use. But that is not possible without knowing the basic principles of information architecture since that is the key to a good design. Even a good written copy, compelling content and powerful UI design can fail without appropriate IA.
Problem is that many companies don’t take IA seriously and think it’s impractical. Yes, it takes time to create a good organization structure, but once is done it becomes timeless and also requires specific skills to do it efficiently. Powerful IA is a guarantee of a high-quality product since it reduces the possibility of usability and navigation problems. Well-thought IA can save both time and money of the company, otherwise, they will spend it on fixing and improvements.
Let’s get something straight, IA isn’t the same as UX. Information architecture is like a blueprint of the design structure which can be generated into wireframes and sitemaps of the project. User experience designers use them as the basic materials so that they could plan a navigation system.
UX design is not just structuring the content, it also includes navigation planning, testing on users, research, basically everything that make users feel comfortable using the product. UX design encompasses users behavior and actions such as emotion and psychology, while IA is only focused on users goals.
Both IA and UX need to work together in order to create a perfect design. Good information architecture is essential to make every design efficient, while user experience makes those users feel connected with design.
Information architecture components
According to the book “Information Architecture for the World Wide Web” by Lou Rosenfeld and Peter Morville, there are four main components in IA:
- Organization system
- Labeling system
- Navigation system
- Searching system
Organization system
This type of system helps users to predict where they can find certain information easily. Organization system is structured in three groups: Hierarchical, Sequential, and Matrix.
- Hierarchical organization system structure is based on Gestalt theory and its main goal is to present content to the user in such a way that they can understand the level of importance for each element. As we know Gestalt psychological theory is based on how humans perceive and distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc.
- Sequential organization system structure creates a path for users where they can go step-by-step through the content to accomplish a certain task. This type of organization structure is used for e-commerce websites and apps, where users need to go from one task to another to make a purchase.
- Matrix organization system structure is where users choose the navigation on their own. For example, they can navigate through content which is ordered according to date or the topic.
Content can also be grouped according to the organization schemes:
- Alphabetical scheme is where content is organized alphabetically.
- Chronological scheme is where content is organized by date.
- Audience scheme is where content is organized for separate groups of users.
- Topic scheme is where content is organized according to the specific subject.
Labeling system
This system involves ways of data representation. Key of every design is simplicity, that is why this way of IA component is used to create the labels which represent loads of data in a few words. For example, contact us include a contact form, phone number, street address, social network links, etc. All that information can’t be included on a header, that is why designers create a “Contact us” button who triggers the page where all this information can be found. That way labeling system aims at uniting the data effectively.
Navigation system
Navigation is a very important part of a design process since it’s a set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product. As we talked about, the navigation system in IA is a way how users move through the content. Users are navigated on the interface via interactive elements such as buttons, switches, links, tabs, bars, menus and fields. Navigation is a complex system and it requires his own post about it, which we will cover in some of our other posts.
Searching system
The searching system is used in digital products to help users search for the data on the website or app. The searching system is effective only for the products with loads of information when the users risk getting lost there.
Content organization models
There are several most common models in the IA content organization:
- Single page model
- Flat model
- Index model
- Strict hierarchy model
- Co-existing hierarchy model
- Daisy model
Single page model
This kind of data structure is a good choice when it requires a design with not much content, like a single product website. A good example of this would be a website promoting an app. Its purpose would be to promote an app and make users download it, which generally provides a limited amount of copy with the focus on the button “Available on App Store”.
Flat model
This model works best for small websites and landing pages. In this structure, all pages are equal and put at the same level of navigation. This type of information structure is good for the websites which have a limited amount of the content and it’s not going to grow anytime soon. It’s especially good for startup companies that need something to start with.
Index model
Index structure model is one of the most commonly used in IA. All the pages are similar to each other, but the navigation system differs. It allows users to access pages via the page list which is available on every page. This way it may contain more content and remain usable and simple for users since they can skip useless pages.
Strict hierarchy model
This model is called “strict” because it gives users only one way to access subpages — via the main page only. This is a good choice for websites or apps that have a specific purpose, like e-commerce, so that the users wouldn’t skip the important information about their new offers, or educational websites in order to make the educational process gradual.
Co-existing hierarchy model
It’s probably most difficult to apply since it combines the ideas from a few models. Similar to the index model, it provides users with various ways to access the content still it aims at guiding people through a certain path so that they would take expected actions. It requires designers to have quite a bit of experience in IA to do it properly, but it is worth it.
Daisy model
This model can also be used for educational websites and apps as well as others that require users to complete a certain task. The daisy structure is built on such way that requires from users return to a specific point (usually homepage) after accomplishing the task. It’s a good example for to-do apps where users return to the main screen right after they complete a task.
To sum up, IA is a core part of UX design which helps users quickly and easily navigate through content and find everything they need. We went through the most important parts and explained them, but it needs more explanation on how to implement each of these structures in real projects. Information architecture is a huge field in UX design and we will try to cover more of it in some of our future posts.
Originally published at www.broworks.net.
