Common models in information architecture-2

The previous issue shared three basic interaction models, two-panel selection, Canvas Sidebar, Wizard (Wizard), and the interactive model discussed in this issue is not limited to the information structure on one page, which is: responsive and embedded.

1. Response-Type appearance

A page to display a lot of content, but some of the content is not very important, we want the user interface to be simple, but also have to put the content in the interface, in such cases, you can show the important content, and other content to hide, users can use a simple operation to access hidden content, Such a page not only on a page with the information structure, but also has a vertical hierarchy, not a brain to the user, but when the user needs to display.

Usage]

1 to separate the main and secondary content, the default display of the main content, the secondary content into the previously hidden areas;

2 in the default display of the interface to place eye-catching buttons or connections, so that users can find those hidden content. &http://www.aliyun.com/zixun/aggregation/37954.html ">nbsp;" for example "more", or use a right or down ARROW as part of a connection or button label.

3 Open the hidden area, set another button or some way to let the user close it. The contents of the hidden area should be the user will not need it most of the time, so to enter and exit this additional area of the operation is eye-catching.

Form]

1 page expands: In the main interface to provide buttons or connections, users click Later, in the page to expand a region, showing further content, this form of real-time feedback to users of the operation, but also easy to give users a natural excessive experience, this form is suitable for the expansion of the main content, more detailed, A step closer, when the user doesn't see the content, it doesn't affect the use, and the user can see more, or get richer, features.

For example:

In the QQ Chat window when the user clicks "Chat record", the page expands an area, the user can see more chats record.

QQ Space in the Personal center, the page will be updated by friends of the log title listed, when the user clicks on the "expand" button can see the beginning of the article paragraph, while the button converted to "Put away", the user can choose to hide the content again.

2) Pop-up layer

The user clicks the button, in the page floats out a layer to display the further content, and the page expands the form to be different, the pop-up layer is more suitable for the area content more important time uses, for instance the pop-up layer contains some operations, or the important prompt. The pop-up layer generally contains the following sections: the title bar (distinct from the content area, with captions and close operations), the content area (the main content area of the pop-up layer), the Operation area (the main operating area of the pop-up layer, the OK/Save button). There are two types of pop-up layers, modal and non-modal, for the modal window, the pop-up layer can be moved, outside the pop-up layer of the page is locked, not operation; For a non modal window, the layer can still be moved, the page outside the pop-up layer can be manipulated, and the pop-up layer can disappear when the operation can continue to appear, Depending on the circumstances.

Example：

In the show world's application, the user clicks "My locker" to pop up a display I have purchased the item the layer, this is a pattern example, after this layer, the original interface is in the grayscale display state, other buttons cannot click.

In the drawing tool, for some of the expanded tool panel also uses the pop-up layer mode, this is a modeless example, when the pop-up layer appears, the original page tool can still be used.

2. Embedded connection

Embedded connectivity is already a widely used pattern on the Web, when users browse along a linear path, such as a piece of text, an operating process, and in the process of browsing, we want to provide some additional content beyond the user's main attention, which may be an additional message of a story, Or an interpretation of a concept, or help text. Such a form can quickly advance the person who wants to get the job done quickly, while the person who wants to know more sees additional information, satisfies the user's curiosity and explores the unknown content.

Usage]

1 Create a portal for additional content that may attract users,

2 These entrances may be underlined connections, large headings, buttons, menu items, icons, and some clickable graphics areas. For icons or connections that are not easy to understand, you can add a short description to prompt.

3 provides a way to return to the main tasks of the user after reading the contents of these branches.

Example]

1 in the Web news, to a paragraph of text mentioned hot words plus links, when the user is interested in this word to see the word related to the news:

2 Online Bookstore When displaying the details of a book, a list of books is listed based on other users ' purchases on the site, and a location on the page shows: "Customers who buy this book have also bought", and "customers who have read this book have seen it" list, These precise referral lists provide users with more information about the same books, predicting that users of a particular book may be interested in a particular category of books.

Source Address: http://isd.tencent.com/?p=2067