Qzone album Photo Editor design case: A concise design to reduce user thinking

Web page Production WEBJX article introduction: Design Case: Simplify the user interface, don't let the user think.

• Introduction
QQ Space Photo Album personalized tool, can be the effect of the image optimization, text editing and so on.

From the design of the use of innovative methods to minimize the user's thinking. Among them, through the special performance of the interface, let the user learn to use more easily. In the use of the process, but also to avoid the complex operation of the threshold to reduce the use.

• Positioning

Understanding user Needs
• Users expect photo editing tools to have a "play" photo component;
• Most users reflect that the most needed function is to rotate, crop, and add photos to the border;
• Can add text and decorations to photos;
• Optimize your photos for color or other effects.
...

Analyze User Requirements

In addition to the photo can be a simple angle rotation, size cutting, adjustment, but also to the photo can add borders, text, decorations, and further to the photo processing brightness, blur and so on ... Many features are enough to make photo-editing tools seem complex, and bring a higher cost of use learning.

Photo editing tools for photo albums need to be easy to learn and easy to use. Even a few simple optimization steps are enough to satisfy your needs. Even if you are skilled at using Photoshop to optimize your photos, choosing a photo editing tool is just a quick and easy way to achieve some simple personalized results.

• Design
Requests for photo editing tools, from the basics of optimized photos, to photo-specific effects, and as many personalized photo features as possible. But the premise needs to let the user can easily find the basic optimization function, the interface needs intuitive and easy to use. Of course, it's not an editor full of features, and it comes with a tutorial.

Interface layout allows users to understand
Interface design to convey to the user's personal experience is the most direct. The interface is too functional and complex to allow users to have a high threshold of learning when using photo editing tools. Starting from the interface layout, design the layout of the interface structure.

Simplify and design the layout structure
Design the interface of the photo editing tool to try to distribute all of the features in three different areas:
1. The simple effect of the photo optimization
2. Personalized decorations that can be added to a photo
3. Photo Preview Area

It's not easy to put all the features on the screen, let the user step through each feature to change the photo, and then find the functionality that he needs, or find one of the features that is needed under a multitude of features. If you just want to turn the reverse direction of the photo rotation correction, crop size, will take some extra functions occupy the photo preview area.

How to classify functions reasonably, adjust a suitable layout structure, make the interface easier to understand, but will not let more personalized function submerged?

Edit photos, WYSIWYG, the core content is the photo preview area, followed by the provision of a fixed editing photo ribbon: All the features in a fixed area, can be more easily found.

Functional area
Based on the simple needs of most users, the most commonly used functions are placed in the most easily found location. When you need more personalized photos, you can also easily find the entrance.

Extensible ribbon-Add decorations
Consider the "Add Decoration" feature will have a lot of decorations, need a fixed and obvious location. The core of the photo editing tool is to allow users to "play" photos while simply optimizing them. So the design of this area is to allow users to open the use when needed, through special technical processing, but also allows users to control, switch to a fixed can add decorative areas.

An orderly process of learning
This interface design allows users to lower the threshold when using the photo editing tool for the first time. The simplification of the interface layout makes it easier for users to understand that the editing, optimization, and more operation of the photos can be found in a fixed position. The entire use of the process is predictable.

Avoid complex operations
Many functions, how to let users each can learn to use, is also a thorny issue.

For example, a common optimization of photos uses complex "modal dialogs" (e.g., brightness adjustment).

Modal dialog box "benefits"
Double insurance , adjust to the appropriate effect, and then determine again, not satisfied, cancel. Most of the misoperation can be avoided.

Harm
You need to complete the current operation , if the current operation is not "OK" or "Cancel", there is no other action, the dialog box is modeled, blocking the other actions behind.
The more steps you take, each operation needs to be identified once, and obviously not every operation needs to be done, or even the user will be bothered.

For photo editing tools, we need simpler and more convenient procedures. As far as possible to avoid the modal dialog box, become a taboo in design, of course, not just try to make the modal dialog box "Cancel".

While classifying functions, it is more necessary to " double insurance " for complex and error-prone operations: such as photo clipping . Cropping is often not a one-step operation, it needs to adjust the cropped area of the picture several times and confirm the cropping range before it is saved. If you are dissatisfied with the situation, you need to let the user start over or give up.

Undo Operation Eases Misoperation
Undo the operation of the previous step, for the wrong operation or after the operation is not satisfied with the situation, than each operation needs to "determine", the use of the process will be more convenient.

such as sharpening, contrast, brightness, these operations are obvious, but also relatively easy to guess. And most of the things that are needed to use these operations are straightforward. If you are not satisfied with the effect of the adjustment, move the slider back to the original state; because the design uses a pull-down menu of this type of lightweight operation, in the case of Misoperation, undo the previous step can return to the original effect.

For example: Click the Blur function > Expand the Adjustment menu > after the completion > accidentally click on the other areas outside the menu or go to other functions when the > menu closed, the photo effect changed.

Then you can undo the effect of the adjustment before you do so by undoing the operation:

...

• Last
We will continue to think, try, and further improve usability in this piece of experience. At the very least, our thinking can reduce the user's thinking, will make the product more healthy growth.

Experience One: Qzone albums click on the Photo Editor or view the photos when clicking on the edit open Photo Editor.