Discussion on symmetric interactive application

In the interface design, the information presentation mode of symmetry is very common, and the information equivalence and uniform distribution in the surrounding of the regular geometry can bring the harmonious proportion 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:

accelerates the user's identification and recognition of some symmetric functions, and improves the susceptibility to discovery. A few basic institutions are repeated at different levels, which reduces the learning cost of the users. Improve consistency across the 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 + 's social services, where the interaction is symmetrical when adding or removing a Circle from a contact.

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:

again in the icon heap to find the app just used, click to 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.

Is that a little inconvenient? Do you think the workflow is interrupted? Maybe you have better ideas 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 (log in one place) edit/finish edit (inline edit, WYSIWYG) Export/import (Import export interactive process symmetry) input/output (input-Output interactive process symmetric) Add Service/remove Service (delete where added) Enter immersive model/quit immersive model (enter or exit immersion mode in the same way)

......

Welcome to Add.

Source: http://dedicky.wordpress.com