Common models in Information architecture

The common model in the information architecture is part of the entire Web interaction design method:

The purpose of this issue is to share and summarize some of the basic interaction models in the information architecture. Information architecture needs to consider the construction of content and function, first of all, we need to consider how to organize the relationship between the content and function, that is, how to split the content, how to make some actions and objects with the smooth combination of the theme; Panels and other elements to express the information, the interaction model is for the second step, these patterns help us in the expression of information can have some common ideas and starting point.

1. Double panel display (Two-panel Selector)

"Form" puts two adjacent panels on the interface and displays a set of objects in the first panel, from which the user can select any selection and display the contents of the selected object on the second panel.

Advantages】

This pattern is placed adjacent to two panels, users can quickly swap their attention for a look at the entire structure of the list (such as what is the latest application in the picture), and then look at the details of an object (what the application does, what it does, what it does, etc.). This tight integration has several notable benefits compared to a single window:

Reduce physical expenditure, two panels are very close, the user's eyes do not need long-distance shuttle, you can use a mouse click or button to change the selected items, rather than the first to choose between the window and screen;

Reduces the cognitive burden of visualization, when a window pops up to the top, or when the content of a page changes completely, the user has to pay extra attention to what is now to be seen, and if the window itself remains unchanged, the user can focus on a smaller range of changes;

It also reduces the burden of memory, where the list on the left acts as a "signpost", so the user is fully aware of which application they are currently in.

Usage】

Overall layout: The list of choices can be placed on the top or left of the panel, display the details of the panel on the bottom or the right, so that the majority of users to take advantage of the direction of sight flow, according to the user from left to right language reading habits so that users easily find the information they need.

Layout of the list: there are generally four ways of layout: linear lists, usually sorted, two-dimensional tables, which can be sorted, and also allow users to filter through column or row headings; Spatial organization, such as maps, charts, and areas like the desktop, allows users to place objects according to their needs.

Action: When a user clicks an object in the list, its contents or details are immediately displayed in the second panel. It is also best to support keyboard operations to change the way you choose, such as up and down ARROW keys;

Vision: Make the selected object visually visible, such as giving the selected list object a different color and brightness.

Example】

Double-panel application in Qzone, when the information is selected from the list on the left, the details of the object are displayed on the right, and the information segmentation form of the subject category is used, and if the user selects the left List object in the basic application mode of the common pattern, if the object can be visually highlighted, might be friendlier.

2. Canvas processing strip (Canvas Plus Palette)

Form】

For the graphics editor, place a toolbar with an icon next to a blank canvas, and the user clicks the button on the Palette toolbar to create the object on the canvas. The toolbar is usually used to create objects, and the canvas is used to place objects.

Advantages】

This pattern comes from people's Daily experience canvas, palette, is such a style, so the user is easy to understand when using, while the canvas processing tool also utilizes the benefits of visual recognition, the most commonly used icons (brush, hand icon, magnifying glass, etc.) in a variety of application systems are reused again and again, And each time the same usage, reduce the user memory and learning costs.

Usage】

The sidebar itself should be an icon button or a grid that looks like a button, because the Chinese language itself is more expressive, so it's easier to understand the form of the toolbar with the text in the icon.

The sidebar is placed on the left or top of the canvas, and when the tool is relatively long, you can divide the toolbar icons into groups, such as tab in the card stack mode.

Example】

QQ Show bubble Log edit box is just a canvas processing with a user, through the icon Plus text form the tool bar, and split line to the tool group.

3. Wizard (Wizard)

Form】

In the interface, step-by-Step guide users to complete the task in a predetermined order, the task into a series of steps, in each step let the user focus on one thing. For example, the registration page for Qzone personal space:

Advantages】

For longer tasks, how to let the user understand the steps of the operation when designing the user interface, the advantage of the wizard is to let users organize the task in accordance with a predetermined roadmap, without having to understand the structure of the entire task, and the user is going to perform each step sequentially, believing that if they follow the instructions, they will complete successfully.

Usage】

The operation of composing a task is divided into several parts or groups of operations, the order of each part may have to be strictly restricted or can be selected by the user.

Qzone's registration process includes choosing a style, fill in the personal information, supplementary information and complete four steps, the user must fill in sequence, and can not fill in the following steps to come back to write the first, and for some online payment process, from the product selection, payment information, payment address, shipping address and other steps, Their order is not important because the choices that follow do not depend on the previous selection, and putting the relevant choices together simply simplifies the work of people filling out forms.

Task split after the number of steps and granularity often need a good balance, if only two steps, it would appear silly, if there are 15 steps, it will appear boring; but each step also needs to be guaranteed not to be too complex, or lose the meaning of the wizard.

"Page Performance"

1 multiple page representation

From the performance of the page, the simplest implementation is to put each step on a separate page, with the forward and backward buttons to control, but this form also has disadvantages, each independent interface can not display the context, the user does not know the front and behind the display of what, respectively, It is therefore best to allow the user to move forward or backward at any time during the process. Because if the user can not change the previous option and must start again that would be unbearable. From this point of view, if it is a multiple-page wizard, its standard configuration should be:

Or combine two-panel selection mode:

2 Single page representation:

The first column with a title: There is a fixed number on the title, because you can see all the steps at a glance, so this pattern is suitable for a few branching tasks.

The second response allows or responds to expansion: The following steps are displayed on the page after the user completes the previous step, which makes the page simpler if the wizard does not have many steps.

Summary：

The above three kinds of commonly used mode: Two-panel selection, drawing canvas with strips and wizards are the patterns that we often see in web design, and we have been unknowingly aware of and accustomed to them, through these basic patterns, in the design of deformation and innovation can create a more interesting and convenient way of interaction. The following example is an example that combines the above three interactive patterns:

(URL: http://www.mrpicassohead.com/create.html)

It is obvious that the tool uses a pattern of canvas processing, consisting of two sets of toolbars and one canvas. At the same time, the Web tool also combines the duplex selection mode, tab to the toolbar to classify, when click "Face", "noses", "lips", the tool changes once, and display these objects:

And at the prompt of the operation step, the response of the wizard mode is expanded: When the user selects the Type of tab for the first time, the user is prompted to select the appropriate element from the sidebar to the canvas, and when the user makes a selection, the next step is displayed:

Source: http://isd.tencent.com/?p=1894