UI Design Class: Interaction
About Lesson

what to learn this time

  • Understand types of information structures.
  • Understand what navigation is possible based on the structure.

 

What do you do when looking for a book at the library? If this is your first time visiting a library after moving, many things will be unfamiliar to you. First, go to the library and take the elevator to the reading room. If there is a book you are looking for, search for its location using your computer or smartphone. Once you find the book you want, it will tell you a complicated number. Use numbers to find which bookshelf and which column the book is in. When I don't really have a book I want, I choose something that looks interesting among books with similar characteristics on the bookshelf.

Every IT service is like finding a library book. The experience of finding the book you want and the experience of finding the product or content you want are both similar. What's slightly different is that because it's digital, you can easily apply various filters and there's no need to physically move the item.

Information Architectureis a concept about the structure that organizes information. In a library, information structure determines how to divide bookshelves and what standards to place books. The goal is to allow users to easily and conveniently access the information they want, just like finding a book.

On mobile devices where space is limited information structureThe way you design it is especially important. There are limits to information in physical space, but there are no limits to information in virtual digital space, so it is important to design the structure of information and the way to navigate it.

information structure

The structure of information is largely divided into three types.

Flat

This is a simple form used by many apps. This is a structure in which each screen is arranged flatly without any hierarchy. The information displayed on the screen is presented at an equivalent level. There are limits to the information that can be displayed, which may make it more difficult to find the information you are looking for. It's suitable for simple information or small apps.

  • Example: iOS, Android navigation tab

 

Tree

Each screen has a hierarchy and lists information in a tree format. Categories are divided into upper and lower categories. By understanding the overall structure, you can quickly figure out where the information you are looking for is located. If the hierarchical structure is complex, it can become difficult to find. This is a commonly used form when organizing large amounts of complex information.

  • Example: Commerce tree structure

Network

It is a form of back and forth between content.

Each independent screen is connected to a network. This method is often used when one piece of information can be accessed through various paths. Unlike Flat and Tree, which allow access to information only within a designated space, it can move across multiple areas. It can be difficult to control as it cannot be directed to a specific flow.

  • Example: Namuwiki, Wikipedia, web browser

Navigation method

We use various information seeking methods depending on the nature of the information we provide.

Drill Down

Select one of several options and move to lower level information. This pattern is suitable for selecting and viewing a large amount of information, such as categories. This pattern is suitable when a large amount of information can be divided in a way that is familiar to the user.

  • Example: iOS basic structure


 

Step by Step

This is an exploration method that performs tasks one at a time. This is a pattern in which necessary information is submitted step by step and new tasks appropriate to it are presented sequentially. This pattern is suitable when there is a large amount or type of information that the user must provide, or when the displayed information or flow varies depending on conditions.

  • Example: shopping cart

Pyramid

This is a way to explore flat information without returning to the parent level. Like a gallery, when you enter content from a list, you can view other content there. This pattern is appropriate when the context in the list is not very important for information navigation.

  • Example: iOS Gallery navigation

Module

It is a structure in which there are several modules, each of which is driven by a specific unit. This is a concept used when several structures are combined into one. It has a central base page and provides access to various modules. Used when each module exists independently.

  • Example: shopping cart, wishlist

Helps with easy navigation

Name chunks of information and divide them into categories to make navigation easier and more convenient.

Labeling

Write an appropriate name so that you can quickly understand the nature of the information. You should use a name that allows you to predict child elements by looking at the parent element. If the name is too abstract or too specific, it is difficult to predict what information it contains, so you need to write a balanced name.

Category

As with labeling, you need to divide it into categories so that users can easily predict where the information they want belongs to. Because the deeper the information structure, the more difficult it is to find information, divide the categories into thin and wide information structures as much as possible.

 

Join the conversation
0% Complete