User Experience Design: Interactive type of Web page menu

Article Description: types of interaction for various menu designs.

The interaction type of the menu:

Parallel structure

Linear structure (the menu level expands in parallel to any axis of x or y). ）

Depth structure (the menu level is further along the z axis, and an interface displays only one menu level.) ）

Cross structure

The menu uses an arbitrary two-axis combination of x, y, and Z

Cross, depth combination

Use the cross structure to show the main level, and the other menu levels are displayed vertically.

Each platform analysis:

PC Platform:

PC platform Features:

High resolution-A large amount of information can be displayed on the screen.

Close to People (30~60cm)--You can use small fonts and small icons.

The mouse is easy to operate and flexible-it can support complex, powerful interactions.

Conclusion:

The mouse button provides the perfect interactive support for the PC platform. Capable of complex, powerful interactive design.

In the PC platform, the common menu type is parallel structure and depth structure, also has the combination of the two structures.

Mobile Platform:

Mobile platform features (mainly refers to the current popular touch screen tablet, tablet phone):

High resolution-but the actual operation is the width of the finger as an operating unit, operable text

Words and icons should be large enough (wide height to accommodate one finger).

Close to People (30~60cm)--You can use small fonts and small icons to design the display (no user-required exercise

) content.

Touch screen operation mode-can simulate mouse clicks, drag and drop, can't simulate right key, wheel operation. Can

For more flexible interactions.

Conclusion:

Limited by resolution, you cannot display too much information on one screen. So generally use a deep structure or a cross

Structure. For example, the iphone and other tablets, the general use of deep structure, the ipad and other tablets, the general use of longitudinal

Deep structure or linear structure.

TV Platform:

TV platform Features:

Distance from people (2~3m)--Design, text, icons, etc. than other platforms larger.

Operation and input mode is not as flexible as the key mouse--avoid tedious and complex interactive mode

High resolution (maximum to 1920x1080)--More information on the screen

Conclusion:

The TV screen has a high resolution, but it is sufficient to support the display of complex information from the hardware.

Limited to the operation and input mode, can not design complex interaction, mainly in depth and cross structure mainly.

The normal behavior of a person (general distance to the TV screen 2~3m) requires us to use a larger content rendering

Fonts and icons.