Show design When you need it is not simple but not complicated.

In recent years the mobile platform, the number of apps are countless, interactive way is also everywhere, I believe we have played so many amazing app. You can see the bright spots or transitions, or the right thing to do, or breakthrough mode of operation, but I think "need to show" is also a lot of design of the exquisite pen, is a designer should follow one of the principles.

Display when needed

First of all, the concept of "need to show", the memory of this sentence has 2 source:

Extras on Demand. -"Designing Interfaces"

Excerpt: Make 80% use situation easier, and the remaining 20% is at least possible (requires a little effort from the user).

Only show What i Need i Need It.-"Android design-design principle"

Excerpt: When you see too many things at once, people are vulnerable to attack. The task and information are decomposed into small, digestible fragments. Hide the currently not-required options and instruct people how to proceed.

Two sources, one throughout the book, a specification of the operating system, which can be seen in the weight of this sentence.

As an example

Speaking of this, I can't help but to give a very favorite case-alkaqua mineral water. I do not know how many students in the supermarket to see this bottle of water, anyway it stunning my time ...

The entire bottle body only has the logo, the net content and so on information, with the capsule shape, looks very concise, the temperament is graceful.

But this is not the climax, the real climax is in the rotation of the bottle when the moment, I was amazed.

The detailed introduction of this water is printed on the back with a very small font, and the refraction of water in the right location magnifies the text.

Narrator: Why do we have to turn the bottle? You must be looking for it. Then when you want to find it, it is just right in front of you, not a step earlier, nor a late step, happens to catch up.

Why "show when needed"

In my opinion, "show as needed" can be a design principle that is not justified:

1. Page hosting More information

Since the way humans recorded things from murals to Roman "Codex" pages, the content has become borderline. The rise of mobile devices, so that our traditional sense of the "page" has become less and less, more need to hide the interface to carry more information!

2. Make the interface more elegant

The layout of the view that the elegance of the interface is the right to stay white, so that people can get a breath of sight. Like the wholesale market compared to the display of luxury shops, congestion, noisy always give people a low-grade, vulgar feeling, and spacious space always let people feel calm, leisurely. The hidden function frees up space and makes our interface elegant.

3. Core tasks/Information more clearly

All of the design of the page should serve its core tasks, hide unnecessary information, the core information will be relatively clear and highlight, this is the best guide to users.

4. Impress the user

The exquisite "functional appearance" as Alkaqua's description, when we really need to give us, such a design with the user to generate the interaction of thinking, let a person instantly moved.

Topic: How to "show when needed"

"Show when needed" is actually about 2 points:

1. Temporarily unwanted functions to hide.

2. Hidden functions to be found.

The 1th many people have already discussed, we can through gathers, the compression and so on the way to carry on. The 2nd thing to explore here is how to get the user to discover functionality, or "feature visibility".

In other words, the designer has defined some features hidden in the page, but users need unconventional means to discover that this is not a good design. PS: Here we need to consider how uncommon the function is, this article is not discussed.

Feature visibility

Feature visibility, in fact, is said to be "how to let users find functionality" problem.

The most direct form is to give the user a visual signal: there is something here. Of course the form can be straightforward or suggestive, or even socially influenced.

But if the signal is not given, the user can also:

1. Discover by learning.

2. Passive discovery.

3. No need to find out, it has already appeared.

So we have this framework:

Semantic symbols

1. Intentional semantic symbols

Intentional semantic notation refers to the intentional creation and layout of semantic symbols, simply speaking, there is a clear meaning of the entity information, such as the sign of the intersection.

Intentional semantic symbol is the most common and most susceptible signal in the interface language, such as arrows, buttons, icon, etc. We often use the down arrow to indicate that there is a floating layer or can be stretched, I button to view imformation information, with "+" to express can be expanded.

The "+" in Path represents a collection of "add" operations, and the introduction to Google Play uses "V" to indicate more information below.

2. Incidental semantic notation

Incidental semantic notation refers to the unexpected by-products of behavior and events in life, which is simply implied entity information, such as human Shadow, which is an additional effect of a person's presence in front of a light source, and also implies human existence. Unlike intentional symbols, they have no meaning on the surface.

An interaction with the music phone earlier in the year gave me a deep memory. The light here as an incidental product of an unknown (think of a silhouette on the corner of the street) is perceived by the user as implying that there is something here.

QQ Alert interaction is also very interesting, click on the bottom of the crown-shaped section, will pop a round menu, the crown itself does not have any clear meaning, it simply implies that it is incomplete form.

3. Interface metaphor

There is a special type of fringe semantic notation that must be mentioned, and the designer is most interested in it, which is metaphor.

Rhetoric holds that metaphor is the escape of rhetoric by comparing two seemingly unrelated things. The metaphor in design often uses the materialization to produce the incidental information, but it is not simply the object, but through the analogy with the real object, the interface language is escaped, so that the material, shadow, shape and so on form new meaning. As is known to all: the touch screen interface is based on a card-like metaphor, iOS unlock is the metaphor of the lock.

An operation in Flava believe that the person who used it will have an impression. The operation of the torn edge paper is reminiscent of the roll of paper, and the paper is the metaphor of the interface can be scrolled, the operation is sure.

Another classic case is the folding angle of the map in the IOS6, which can be turned upside down by a realistic metaphor.

4. Social semantic symbols

How to eat unfamiliar food or use unfamiliar tableware? See what other people do.

Which way to go through the snow? Follow the footprints.

People, society, other people have a lot of shared information, when these can be interpreted by us, it is a social semantic symbol.

How do you comment on a picture in path? Of course, you can click the smiley face symbol in the upper right corner, but you can also click on the left side of the smiling face in the bottom row. From the perspective of social semantics, as we have commented here, I should also be able to participate in the commentary, as in the snow along the footprints can find a way out.

You may find more when there is a comment: Clicking on the back of the smiley face and clicking on the page below the comment appears to be different.

I understand this: clicking on the blank area is like joining, and the click Comment is to view the details.

In fact, the above analysis is based on my guess, but if so, path here will be a bit flawed, click on the white space should appear "choice expression", rather than "add a comment."

Non-perceptible visibility

Of course, we have also encountered a lot of unsigned clues, that is, the interface can not find any relevant elements. For such an interaction, either the user can learn, or we let the function be found like an egg, or it is already present when the user needs it.

1. Guided-visibility

The easiest way for users to discover functionality is to educate. We can guide the new user, and the user can know the function before use, although it is very violent.

Who knows the title of "friend Plus" can see more features? But with the guide, the user said "really understand" ...

Another popular guide is the use of transition, which is based on a cognitive premise "where to enter, from where to exit" the reverse. That is, how an object leaves the interface, it can also enter the interface in the same way.

Paper the toolbar will slide out of bounds after selecting the brush, and then we have to slide the border gesture to open the toolbar again. did not see it to shrink the transition, really don't know how to get out.

2. The egg type is visible

The egg type can be seen in fact is also a user's learning, but this learning is passive, the user through purposeful or no purpose of the attempt to discover the function. Admittedly, iOS's undo input is the biggest egg in the system, but it's hard to see where it came from when I first found the phone in my trouser pocket and discovered the cancellation confirmation.

Naver the top of the home page will continue to fall when several features, but different from the microblog is that the damping here is very big!

When the user can not find the function or wandering, through a number of simple operations such as point, double-click, slide, and so will be able to find the function, it is very overjoyed.

QQ Music 3.0 Click on the cover will appear more features, the learning costs here is very small (large area).

3. Visible at task

Here is what I think is the most wonderful design, it needs to understand the functional characteristics and user behavior, and then like the Alkaqua, naturally appear.

This is what the iOS search bar does, where users don't need to know what to confirm, where to clear these operations, or even to know if they are there. But when you click on the input box, it is likely to be used, so it just happens.

Twitter's refresh is one of its most influential operations, in fact, the user's psychological model does not "refresh" the concept, but for a variety of reasons can not be instantaneous refresh, then the refresh operation should appear where? In essence, the demand for refreshing is not reload, but update, For the user This means that the request to the top of the page, request to the current information on the border after the request will naturally have to refresh.

The path timestamp is similar in design, and most of the time the timestamp is to help the event locate on the timeline, and it hides when we want to see the picture. If you're really interested in the timing of the event, you know it's there.

Finish the call.

In fact, there are many pioneers in the space discussion in mobile app design, and my colleague listy in the "mobile design space Saving Way" has also done in-depth discussion, I said that benefited a lot.

For the complex interface, we do not want it to become a blank, but need to effectively manage it, this article discussed the "Need to show" is one of the ways to effectively manage.

Jump open Less is more, I prefer a word: design is not simple, but not complex.

Reference documents

1. "Designing Interfaces"

2. The Elements of Graphic design

3. Design Psychology 2: How to manage complexity

4. "Android design-design principle"

Http://developer.android.com/design/get-started/principles.html

5. Cards, pages and scrolls

Http://apple4.us/2012/02/card-pagination-scroll-lawrence-column-for-blogweekly.html

6. "Mobile Design space Saving Way"

http://cdc.tencent.com/?p=5339

This article originates from Tencent CDC Blog, when reproduced please indicate the source.