Symmetry interaction-emphasis in interface design

For the interface design, many people are very curious, in fact, in the interface design, the symmetry of the information presentation is very common, information equivalence and evenly distributed around the rules of the geometry can bring harmonious proportions and balance. In the interactive design process, the user's operation flow is also done in a symmetrical manner, which we call symmetric interaction (symmetry of consortium). For example, the iphone's switching process is done in the following process:

As a mobile phone commonly used in a set of related operations, its design ideas also adopted the principle of symmetry interaction, so that both follow the same process, it is easy to understand and learn. In fact, most of the phone's switching machines are controlled by the same process or the same button. This symmetrical form spreads a set of ways about workflows, that is, symmetric interactions.

The benefits of this approach are obvious:

1, accelerate the user to some symmetry function interaction identification and cognition, improve the easy to discover sex.

2, a few basic institutions at different levels of duplication appear, reducing the cost of learning users.

3, improve the consistency of the entire product interaction architecture.

Alan Cooper sums up a simple experience in the book about face 3:the Essentials of consortium:

Where to export, you should allow input from where.

This illustrates the user's habit of performing logically related operations in the same way. You asked me to log in to the top right-hand corner of the page, so I'll go to the top right-hand corner when I log out of my account. You allow me to enter edit mode through this button, so I also want to exit edit mode by clicking the same button at the end of the edit.

Let's take a look at some examples.

Circle (Circle) is one of the highlights of google++ social services, where the interaction is symmetrical when a contact is added or removed from a Circle.

Drag the contact card from the list and drop it into circle to complete the add circle operation.

Pull the contact card out of the circle to complete the Remove circle operation.

Just think, if you remove the contact from the circle of the interaction process to "select the target and then press the Remove button on the page", will bring the user circulation is not smooth, the feeling of blockage.

iOS app management function is activated by a long press an icon, then the entire interface icon will be constantly jitter, users can hold down one of the icons drag to sort or categorize. However, at the end of the management function, the user is forced to use the single physical button home to implement. Although the home key carries most of the exit features throughout iOS, it feels good to use it, but it's not intuitive when used for the first time. Most users may want to return to their normal state with the same interaction (long press an icon) after finishing the app.

At the same time, as iOS4.3 's new gesture, the finger gathers can replace the home Physics button, becomes in the App quit another choice. But when you return to the main interface and want to return to the app that you just opened, the user only:

Re-find the app you just used in the icon heap and click Enter.

Double-click the Home key to select it in the background task.

Either way, there is a familiar process for new users. Imagine how convenient it would be if you could support the gesture of the finger, and then quickly switch back to the last open app after the fingers gather back to the main interface.

Let's look at the design of Firefox4 Add/Remove bookmarks.

When you open a Web page in Firefox4, you want to save the page as a bookmark, you can click on the pentagram at the end of the address bar:

The pentagram symbol is lit to indicate that the page has been bookmarked, but when the user wants to remove the bookmark, because of previous experience with other software, based on reflex or instinct, will go to click the symbol again to uncheck the status, so as to achieve the removal of the bookmark. However, after the click, there is a scene:

Users need to click "Remove Bookmark" on the coverage panel to remove the bookmark.

Does it feel a little inconvenient? Do you feel that the workflow is interrupted? Maybe you have a better idea to explain?

The following Balsamiq tree list, in view (output) and edit (input) mode, the performance of the two are not consistent, the user can not see the edit after the completion of the state, which is an input and output of the asymmetry.

Axure in this respect performance will be more than a chip, the user can be edited in line, WYSIWYG, the input and output to maintain a high degree of consistency.

Summary

From the previous examples, we can find that the use of symmetric interaction in appropriate cases can improve people's understanding of product functions and gain a better user experience, we can try to use the following details of symmetric interaction design.

Login/logout (login login in the same place)

Edit/finish edit (in-line editing, WYSIWYG)

Export/import (Import Export interactive process symmetric)

Input/output (Input-Output interactive process symmetry)

Add service/remove Service (delete where added)

Enter immersive model/quit immersive model (enter or exit immersion mode in the same way)