User Experience Interaction Design: Hierarchical information structure representation method

Article Description: hierarchical information expression forms in interactive design.

Whether fixed or mobile network, in the interactive design process, the level of information on the expression of a variety of different forms, here for the different mobile phone platform for the two-tier information on the simple classification and discussion.

1,tab Way

TAB is a very popular application in Internet products and has a very changeable form in all kinds of software applications.

A the most original eco-tab form

What kind of interactive information does this form of tab convey?

1 Other tags briefly summarize the information of the tab corresponding page

2) Check the label to display the current browsing information

3 Although each tab is independent of each other, but the tab provides a convenient way of information recognition (label), easy to find the corresponding page information accurately and quickly

4 There is a problem is: with the increase in the number of tabs, the user to withstand the pressure of memory units more and more, the label itself has become increasingly weak message

At this point, how do we arrange the way we remember? According to the normal memory of the unit in 7 or so, when the memory of more than 7 units, we will adjust the way of memory, such as the merging of similar information into a unit stored in memory. But anyway, this kind of memory is really aggravating our memory burden, before very casual, now need to concentrate on!

But once the information is messy and confusing, we begin to remember completely, only one click to "Try" and touch luck.

This way the tab is more likely to show up on the PC side (through the weak hints of the tab tag to guess), but on the phone side is too reluctant.

B non-touch hard button operation mobile phone

For non-touch hard button operation of the phone, too much tab can be expressed in the above two ways to express:

1 indicates the presence of more tab pages by displaying and hiding in half the Tab tab

2 implies more tab pages through the presence or freezing of the left and right arrows

C Touch Screen Mobile phone

Compared to the touch-screen mobile phone, touch-screen mobile phone on the size of the tab element, operating behavior has a more positive way, directly sliding the overall tab group can browse all tab tags.

There is another way, which is not covered here, is to click the arrow to scroll through a set of tab forms, which is more common in window mobile, given the capabilities of different platforms.

2, accordion Way

The accordion is another form of the two-layer information interface, but the second-level information in the two-layer information structure has obvious coherence, and the content has some limitations.

A non-touch hard button operation cell phone

Hard key operating system this way, it is urgent to consider the shortcut of list expansion and shutdown operation.

B Touch Screen Mobile phone

And for the accordion-type interface expression, there are also two ways to display on the screen, one is the expanded content and the first level information list as a whole displayed on the screen, if Mansi the overall scrolling; the other is to ensure that all the first level information lists are displayed in the visual screen. The space vacated in the middle is used to display the contents of the expanded Information list, the content is scrolled in the space scope, and the other first level information list remains unchanged, which is not particularly good for the first level information list.
We can choose the best design plan according to the different situation of the requirement.

3, other extensions

No matter what kind of information to express the way tab or accordion, and the two-tier information structure of the relationship has an important relationship, reasonable information structure using a reasonable expression is the key to solve the problem!

In the above diagram, I give the first level of information and the second level of information can be divided into several states, this state of the segmentation based on the following possible:

1 The judgment of the value of hierarchical information itself

2 The limited screen space, must be in the first level and the second level of information to make a choice

3) Demand-oriented, what is the intention of this two-level information display?

4 actual software development, actual resources or leadership will limit

From the analysis of the importance of these two layers of information structure and the value of information, we may be able to find more useful interface expressions from the two expressions of tab and accordion.

A When the Tab tab becomes more and more useless

In the previous discussion about the tab, when the number of tab is more and more, bring us more and more memory burden, actually also explain a problem: this time tab label also began to appear more and more useless, then why don't we optimize it?

The iphone client also has quite an application in this area

B second tier information doesn't have much value.

This is more typical of the UC browser to retain the Web page, Safari browser to retain the Web page, QQ browser to retain the Web page way.

As shown in the figure above, the dot component in the iphone can be viewed as a tab, and the information itself is compressed to the minimum, because of the limitations of the mobile phone's operating space or the need to see how many pages in the current container are sufficient for the tab tag to function.

At this point, what other pages show (the information that the tab text brings) is less important than the limitations and ease of use of mobile phone operations.

The QQ browser is based on the Safari browser design extension, can be in a limited space, save more browsing page, but as the browsing page shrinking, window information display is more and more limited, we choose a browse window is more likely to be based on the title of the browse window; I don't know if that's the reason, UC Browser is directly into the form of a list, two layers of information into a layer of information processing, because the other layer became "useless."

C launch new page allocation first level and second level information

When the first and second layers of information produce a certain scale effect, the new page is distributed to balance the first and second layers. This is the most common and easiest way to understand the display. Of course, this approach also has its problems, if the level of information is more, it may increase the user's "deep" memory burden.

In the iphone User Interface guideline, three different forms of application style are proposed, one of which is productivity application, and the processing of hierarchical information is shown below.

This kind of display level information in the form of a page will vary according to the structure of the information itself, which requires the flexible use of the control of each platform itself and the reasonable display of some idioms.