Module tags in web page interaction design

Brief introduction

This is an article about the use of interactive design in Web pages.

This article mainly translates, because my English level is limited, some specialized noun also is not very clear, therefore some things are I with this effect understanding, has joined own thought, if has any wrong place to look at the comment, first thanks.

What if a user wants to browse the contents of one or more stacked panes without having to refresh the page?

For example, the following example:

First we should consider when we will use the module tag?

1. When you have the contents of multiple panes, only one pane can be displayed at a time.
2. The contents of different panes do not need to be cross-referenced.
3. You can switch the content of the page by changing the pane.
4. To navigate through different pages of a Web site, use navigation labels instead.
5. When there are 2-10 kinds of headings.
6. If this category of headings is relatively short and predictable.
7. If the focus is on displaying the contents of the window you are currently looking at.

And then we're going through the pictures above to think about these questions:

1. At present, a row of links can be directly in the contents of multiple stacked panes of the above they will be controlled, that is, the switch title to its corresponding content control.
2. There is never a label that stacks multiple columns to control the contents of a piece.
3. The different links are separated by a vertical bar character "" or by an identical graphic, which helps distinguish between the reader's current position and the next action.
4. You can always display the contents of only one label, highlighting the contents of the display and distinguishing it from the surroundings. Check the label and not the selected label to distinguish between processing, such as the above Yahoo! The selected label adds a small pointer "pointer" to the bottom, and the color is distinguished from the unselected one.
5. Each label and its underlying content should be linked or in the display area equivalent.
6. Only one content area can be viewed at a time.

We must be particularly clear on the following points:

• When a user clicks on a label to another label, the label should appear in the same location.
• Whenever possible, you can select a new label without refreshing the entire page.
• Select a label that will not affect the other parts of the page.
• Selecting a label does not browse to a different Web page or perform an action (beyond what is visible on the switch).

Well, you must have looked forward to it for a long time, we have considered so much, so now let's talk about something practical: wink: Let's take a look at what the module tags are worth using.

Within the scope of the module label, it shows the user a whole area of information (the overall area is similar to the content, such as the latest article and Jevin recommended this form can form a module tag.) This makes the content of the article more connected, interwoven into a network-like. And think about it. "You can always display the contents of only one label, highlighting the contents of the display and distinguishing it from the surrounding area. Check the label and not selected label to distinguish between processing ", from the effect itself is very prominent, so it is easier to attract people to see the eyeball, from the human-computer interaction, this can be prompted to see the person he is currently in the label and the hint of what tag he can click to view.

Regardless of the horizontal and vertical direction of the module label, it can also subjectively guide the reader's reading order (you can also not click in order, hehe).

There is also the use of module tags can be more reasonable use of page resources, for the optimization of the page is helpful.