Do a flat design-interactive Chapter

Written in front of the words: (see the text, please jump directly to the dividing line)

When finished "do flat design-visual chapter" to the designers look for guidance.

Everybody Spit:

Some people say, "Only the interaction flat, the vision to do flat ..."

Others said, "If a product to the hope of the visual, want to rely on the visual performance of the flat product, is clearly not reliable ..."

...

This is true, flattening is not only the interface visual flat without three-dimensional sense, but also the interactive experience of the flat, information architecture flattened.

Before we get to the point, let's take a look at an example where I found someone using the UI screen in a sci-fi movie to compare it to a flat vision, and they said it was a trend for the future interface, and it's really similar to the current UI screen to see some screenshots of the movie. The combination of the projection light and the color block is simple and clear, and it looks like a futuristic and design sense.

But I think this should be an interactive flat representation, remember in "Mission 4" There is a scene:

Tom Cruise's convertible coupe was chased by terrorists in a Dubai sandstorm, bringing the climax of the film. I was very impressed with this paragraph.

At the beginning of the chase, the beauty of the co-pilot with the projection on the windshield shows the navigation, chasing the speed of the seat and other related information, and began related operations, to Tom Command. The last successful pursuit of the terrorists.

You can see that the visual representation of the interface here is that the projection light and color block are mainly very flat, but if it's interactive operation and information display is not flat, deputy driving beauty point Half-day can not find the location, even at a glance does not know how to operate the interface, hehe, do not talk about chasing terrorists, I guess I'm freaking out.

(See the movie plot for details)

Similarly, if you have a product you do not know what he wants to express, also do not know how to use, the point of a half-day can not find the information you want to find, the estimated time you have no patience, or a minute you will unload it off. If you look good, you may be able to stay a little longer, but in the end you will not be his loyal users.

So, the importance of flattening and information flattening is self-evident.

http://www.noteloop.com/kit/fui/Professional collection of movies in the UI interface section, interested students can see

========================== Split Line, to the ==========================

Let's see why flattening is so menacing.

This is because our demand environment is changing. Before we have no ipad no smartphone, only the PC, we only need computer environment, so flat flattening does not seem to be important, and then see now we have a variety of intelligent devices, need to be in each scene of each device at any time switch, you can see from the PC to the handheld devices are increasingly obvious trend.

With the diversity and popularity of smart devices, interactive interfaces need to become more adaptable to their changes, and it's clear that flat interfaces are easier to handle than other styles. Mobile Internet is developing in the direction of requiring low configuration, high efficiency, personalization and quality user experience. We need to respond quickly to this trend.

In fact, before the word "flattened", we have always emphasized the ease of interaction and the creation of a quality user experience, and have been trying to do this. In fact, in my opinion, the term "flattened" is a general concept of these design goals, which can be very broad and should be an intrinsic design idea.

Next, let's look at the ways in which you can flatten the interactions.

1. Structural level reduction-efficient

First of all, to understand the "flattening" of interaction by literal meaning, corresponding to this should be "structure level", where I understand that the interaction steps, the previous also has been emphasizing the streamlining of interactive steps, want users to complete the task with minimal steps, it is obvious that this is required to flatten the hierarchy, so the interaction steps and hierarchies are interrelated.

Let's start by understanding what a hierarchy is.

(Source of material: EICo)

As you can see from the diagram, this is a tree-shaped structure

The number of layers that are linked is called the depth (Z axis), and the total number of pages contained in the bottom page is called the breadth of the link (the x axis). Portrait (Y-axis) In many cases, there are only one layer, put more are some message reminders and shortcuts.

Look at the PC-side web interface (for example, Taobao), the bottom page is his homepage, contains a very rich overview of the page, you can see from the breadth of coverage is very large.

Look at the depth.

From shoe-bag accessories-to women's shoes-to shoes-to shoes of various types

As you can see, Web pages pay more attention to deep breadth of balance.

When you look at the phone, it's clear that if you move the web structure directly to the phone, it won't work.

Because of the restrictions on mobile phone equipment, Taobao's mobile phone main interface is greatly weakened, the depth of information more obvious.

On PCs, we can use breadcrumbs or various kinds of navigation to clearly show the hierarchy, so that users do not get lost in complex hierarchies.

But the display area on the mobile device is limited, there is not enough space to put this path, more times we can only use back.

So this also confirms the previous talk of the flat and menacing trend.

How do we reduce the structure level at the mobile end and streamline the interaction steps. summed up the following methods, but also welcome to participate in the discussion.

1) Tied

Display side-by-side information in the same interface, reducing the page's jump.

The most typical example of this is Windows 8, where the weather/mail before that can be seen in a specific application, and windows8 the information in the same interface.

Another example: Next day

Calendar inside respectively for the year, month, week, day display mode, click on the timeline below, content directly in the current page switch, did not jump.

2) Shortcut

Taking iOS7 as an example, a shortcut menu can be exhaled from the bottom by simply sliding up and down at any interface.

Setting up WiFi and flashlights can be done directly from the menu.

In IOS6, if you need to set up WiFi, first go to the set, in to WiFi in the Select network

Contrast steps:

iOS7: Bottom Slide = = Open WiFi

ISO6: Click settings = = Select wifi=== to open WiFi

The reduction of the level structure, the user does not need to be in a layer of point to set inside to press, improve efficiency also make the structure become clear.

Example: Taobao mobile version

No matter what store you're looking at, baby, just click on the bottom right corner of the "Amoy" can appear and home navigation the same shortcut menu, do not have to return to the back of a layer of

3) Display key information

This is the process of buying tickets for a watercress movie.

The steps are: Select the film = = Choose the Ticket = = Choose the cinema

In the "Select Cinema" interface, in addition to showing the name of the cinema, but also showed the "lowest price" xx yuan, and the rest of the games, and whether you can buy the key information, here combined with scenarios, the user since the point of "choose to buy" that the user's purchase desire should be very strong, so that the key information shown here, You can make the user choose the cinema at the same time can see the lowest price, do not have to go in a theater to see, but also to speed up the purchase efficiency.

4) Reduce click

Cases：

iOS7 Close the background program, just use your fingers to slide up and down.

In contrast IOS6 is long press appear delete button after turn off

To compare the following steps:

Iso7: Double-click home==== Slide Delete

ISO6: Double click home==== icon===== Click Delete

One of the most representative examples of reducing the click Point is clear.

Of course here to draw attention is that the sliding gesture, obviously not a bit of the hint to the obvious, so the operation of the type of sliding gesture must be designed naturally, otherwise the user can not find a point where do not know how to operate will have a sense of frustration and give up use.

From the above example, we can see that the hierarchical structure is reduced, the interaction steps are necessarily reduced, so the user's efficiency is improved.

Mobile end due to the limitations of the device itself, there is not enough space to show the path, if there is no clear hierarchical relationship, this may mean that the user is very likely to lose direction, even to go deep into the information to find what they want, what should be done is to reduce the depth of information.

2. Explicit expression-accurate

is to allow small white users to use without pressure, remember a product manager said "If your function can not let users see at a glance, but also need to explain the words, then you have failed this function ..."

The approach can be to reduce the buttons and options to make the use more concise.

Example: Shake

Shake, the user's instinct reflects, do not need any explanation, even the child knows, as long as the mobile phone shaking can achieve this function.

Example: Vine PK gif racer

The same is true for recording video, Vine (pictured above) is closer to the real experience, and when your finger is in the middle of the screen, the progress bar starts running and pauses when the finger leaves.

If quick (above) is to click on the shooting button to control, but also to the automatic manual, buttons and options are many, seemingly perfect function, in fact, experience is not so good, we can install a comparison experience.

More intuitive way of expression, so that users can more accurately use the experience, do not have to do here to how to operate and distressed.

3. Information visualization-ordered

The internet is already the era of information explosion, how to find what they want from these, especially now small screen equipment popular, so we need to reduce the excessive complexity of elements of the interactive interface design, so that information more intuitive display.

If the need for less information, less function, then to do intuitive is very easy, in fact, many products are not doing all-inclusive things, this is a very good trend. But in many cases, the amount of information we face is too large, so how can we make it intuitive?

A product manager said "Classification!" Classification！ Classification！ This is the only thing that the product manager should do for the user after determining the main functional framework of the product. Classification does not help to reduce the difficulty of product use, but it helps users to recognize the product and the world around. ”

Designers of course can also, finishing! Finishing！

The internet to organize a large number of information orderly and clear, so that users can be sorted according to your clear classification quickly find what you need.

By sorting, we can find the nature of things, discover new ideas, and see things that are hidden in the surface. By tidying up, the problems in our field of vision become clearer, and many new discoveries are made.

Here about finishing the topic actually has a lot of, do not specifically unfold, the specific related books "Soto and Super finishing"

"The Legend of Soto and finishing operation"

Cases：

http://hao.uisdc.com/

This is a designer's web site navigation, classification is very clear, but also collect and tidy up a variety of designers commonly used resources, including tools download, design tutorials, color, creativity and so on content, at least the design-related things have helped me to organize together, it is very convenient to use. I used to search for materials and stuff.

Including the most familiar Web site navigation hao123 Why small white users like to use, it is because of sorting to make the Internet information intuitive and orderly, so that users can quickly locate the information they want to find.

Clean and orderly, always more than disorderly and pleasing, timely in the information is very large, in order to find in the environment will be more convenient and quick.

4. Consistency

Multi-platform use, now users have been accustomed to using multi-platform devices in multiple scenarios, and once users have learned the operation of a part of the interface, they will soon know how to operate elsewhere or in other performance.

1. Functional Consistency:

Example: Taobao mobile version

One day, I bought a thing on Taobao, there are quality problems sellers let me screenshot to see him, I was nest on the sofa with the mobile phone Taobao, I found in the interface for a long time did not find the place to send pictures, and finally saw the lower right corner, I hope the point open, the result is expression. Hey, I have to turn on the computer, the first use of QQ mobile phone pictures to the computer, in use want to send the past ... you can see my time is 22:17, I was very do not want to open the computer, but there is no way to send screenshots! That helpless feeling ah, you understand! (whether I did not find a way to send a picture on the phone, good friends please tell me)

2. Seamless experience between platform and platform

Of course here in addition to data synchronization, there is a point is to consider how to solve the problem of cross integration between multiple devices.
Cases：

One time in the use of Mac QQ, found in the choice to send pictures, incredibly can choose from the iphone album, let me feel this experience is very good, I no longer need to put on a mobile phone QQ, computer on a QQ spread.

QQ support for multiple devices landing, performance of multiple devices cross-fusion consistency of the function of the most representative is, mobile phone QQ on a function: "Transfer files to My Computer", to pass photos of what, no longer need to log 2 QQ in two different devices on the transmission. Multiple devices on the landing the same QQ can be done.
So ensuring consistency is also a very important point of flattening, reduce learning costs, improve the use of efficiency.

5. Other

Response and feedback, I think it should be considered more important in the flat, the interface should remind the user what happened, let the user understand the feedback, when the user is wrong, they can clearly know what to do. Otherwise, users will often choose to leave at a loss.

Summary:

Effective collation of information, reduce the level of structure, the function of the expression is straightforward and so on are all kinds of means to flatten the interaction.

Interactive flat design, in fact, is a concept, is an intrinsic design idea, the purpose is to be able to change the environment needs of a variety of circumstances, can still improve the user experience of a method.

The pursuit of "flat" is our design goal. Whether from the visual, or from the interaction should be based on the product's actual situation/scene and the user to specific analysis, to achieve a truly flat target to provide quality user experience.

The visual designer said, "The interaction is flat, the vision is good to flatten ..."

The interactive designer said, "The information is flat, the interaction is so flat ..."

Product manager said, "The product positioning flat, the information is good to do flat ..."

......

You think? Welcome to the discussion

Visual article: http://cdc.tencent.com/?p=7844

(This article is from the Tencent CDC Blog, reprint, please specify the source)