Metaphor Design for Mobile interface

What is the interface?

Yes, there were times when I was thinking about this simple question, and then my answer was: the interface is an explicit solution to the software application, using graphical symbols to explain its functions and tasks to the user.

But recent perceptions have made me a new answer to this question: the interface is the software application itself. It is not a graphical specification of software application functions, not a graphical translation of software application functions and tasks, it is the software application itself, and it is natural.

A simple question, how many ways do you think you can shrink this folder simply by presenting the interface from the launch of the ipad folder?

There are three ways to do this: Tap the folder icon or click on the other area, drag up the (Flick) interface, and swipe both sides inward (pin close).

The first one you may have known, but the back two, you may be skeptical to try, believe me.

So, from my point of view, this may be the reason people often say that the iOS operation is easy to understand. After you click on the folder, the folder expands the animation, and finally his visual style, has told you how he should go off, you will involuntarily, learn these operations.

And that's the metaphor. This explains the impact of metaphor on experience in IOS Human Interface guidelines: When your application's visual objects and operations are modeled on objects and operations in the real world, users can quickly understand how to use it. (When virtual objects and actions in a creator are metaphors for objects and actions in the real world, users quickly grasp Ho W to use the app.)

For me, the iOS folder is more like a drawer metaphor, and its top is glass. From the animation, he built a drawer-like space, you can see it.

interface and interface, is not a simple linear relationship

One thing we have to deny is that the interface is actually in contact with the interface, and I mean that the connection is the sense of space. There are levels and logical relationships between each other, and the more realistic the relationship is, the better. The easier it is for others to understand, the less they need to learn.

This is what we need to do to make metaphors, and we need to do this by showing the relationship between the interfaces.

Metaphors give people predictability, and users can easily understand the software applications you design. It's a feeling of mastery, a sense of control. When the user is working, they know what is going to happen next and how to get back-even if it's the first time.

Why do

need to pay attention to metaphor design in mobile interface? 1. Navigation Missing

The physical size of a touchscreen phone is about 3.7 inches, equivalent to a credit card. In such a narrow space, we can not grasp the PC client "in a main interface to complete most of the task" idea, to design mobile clients. We have to split the interface.

The problem with this is that the split interface is logical, but we can't copy the method from the PC client: Use the taskbar, Cascade modal dialogs to represent this logic.

Because we have no space at all, so we have to do it differently.

So, we split the interface more independent, so that the interface into a card-type, an interface to complete a task, to ensure the interface between the single, to avoid the interface between the logic, or jump to the confusion.

2. Lack of physical mechanics feedback

On the traditional mobile phone, the user uses the keyboard, to operate the visual object on the screen, the keyboard in this stage, is actually the user action behavior of the translator. And the advent of the iphone has cut off the translation of this manipulation into direct touch, which is a great step forward.

While the iphone shortens the execution phase of operational behavior, it brings trouble to the feedback phase of operational behavior: Only visual feedback, the physical mechanical feedback of finger touch disappears.

Your fingers are no longer able to feel the physical mechanical pressure of the keyboard, or even, assuming your fingers are stout, you can hardly see whether the button is pressed. In the case of input, this is particularly so, with a long history of efficient "blind" input in a keyboard phone that only goes into the archive of history.

Therefore, we need to use the user's visual and auditory to provide feedback.

The content of

metaphor design

For a product, metaphor design is not only animation, all kinds of real-time state details of the design, in more cases, we need to follow the steps to complete the whole system of metaphor and structural design. He includes the following:

1. Pseudo-materialized visual appearance and auditory feedback

The first step in metaphor design, starting with the look of the application, if you can, you should consider the appearance of the application showing the physical texture of the material, as well as the reasonable lighting effect, and the correct display of the elements of the interface between the spatial level of the sense of space.

In addition, we can not ignore a kind of physical and chemical design: sound effects. It is not only a means to compensate for the lack of physical mechanics feedback, in some cases, but also an effective feedback mechanism, such as when the screen is in a closed state (this is often the case), the proposed materialization of the sound can make the user understand the current user status. iOS unlock the sound of the screen do you remember? There is also the sound of tapping the keyboard and the sound of the photo shoot. It's all very well intended for physical and chemical effects.

The appearance of the materialized will greatly reduce the user's cognitive cost, no need to read additional text, the user just see the software appearance, know its use.

2. Instant Feedback

Suppose you use gestures to perform an operation on a touchscreen device, but there is no feedback on the interface. You're going to have to guess, you're experiencing the following:

your operation gesture is wrong, the software can not respond to the program when the machine, temporarily did not respond

As for the situation two, I am sorry that we may be helpless. But for case one, we need to discuss if the feedback user is wrong with the gesture and directs or helps the user to the correct operation.

From this view, the traditional Web page on the use of feedback, transplanted to touch-screen equipment, it is not acclimatized. The best error feedback for mobile devices should be to follow the user's gestures immediately.

As shown above, this is a touch screen, should have a feedback, it immediately responds to the user's gestures (even if it may be wrong), and when the user releases the operation, and automatically return to the correct results of the operation.

He has a learning cost for any software application. Some costs are high, such as office,photoshop productivity software, but also low-cost, such as calculators, notepad and so on. When the software is applied to the physical and chemical design, in fact, this has reduced the cost of some learning. But how to continue to reduce the cost of learning? Let the user make mistakes and learn from the mistakes.

Instant feedback reduces the distance between operation and feedback, effectively reducing the cost of repairing errors and improving the efficiency of users ' learning.

3. Mobile Animation

The traditional software interface switch between the more brutal, in most cases, he only shows the command before and after the execution of two interfaces, and ignore the process between them. And in the real world, without this process, it's even hard to understand how the interfaces at both ends of the process are connected.

Animation has an unmatched expressiveness, it is the most effective communication with the user, an exquisite, micro-animation, can be friendly to connect two interface between the switch, while he also has the following role:

displays the current state of the software to provide feedback that is useful to the user to enhance the control sense of the user's direct manipulation by visually expressing the results of the user's actions

Mobile animations run through the entire iphone operating system and are also included in non immersion applications. But as a metaphor design tool, we need to note that animation is often used to improve the user experience, it is not the focus of the user experience.

The criterion of

metaphor design 1. Interface space with realistic logic

Mobile animation is the last piece of metaphor design, but we are not enough to put together the puzzle, we also need to test whether such a puzzle conforms to the real world logic.

Flipboard consistently uses the animated effect of flipping pages, either from the front page or from a feed. He even made a fine three-page animation effect: Only flip one, flip two pages, flipping three pages and above; he gives the user a feeling that:

all the content I subscribe to is a magazine where no page has a subordinate relationship, only the order of the relationship on the first page of the box-type thing, equal to the magazine's catalogue

and domestic similar products, he presented a slightly different interface space, as a whole, he is like a time to change the cover of the magazine Cabinet.

But personal feeling, the process of moving from magazine to magazine to animation, is a bit rough and difficult to find relevance in real life. Personal point of view, if the process animation can be similar to ibooks open the book animation or the same. Perhaps more in line with the logic of reality.

2. In simple terms, how your interface enters the eye of the user, and in the opposite way, disappears from the interface, and the process is compatible with real-life metaphors.

3. Respond to user's intuitive gestures

The biggest feature of mobile devices is: direct operation. If you set up your interface to push it from the bottom, the user may intuitively think that I'm pulling the new interface down and the interface disappears.

From the diagram you can see that Tencent love to see the successful care of the user from the metaphorical design of intuitive gestures, just down to pull, users can close the interface.

From the outward appearance, the comment interface is under the main interface, and the animation effect belongs to the main interface to stretch downward, and the comment bounds are pushed up to the top of the interface. But the clutter also responds to the intuitive gestures of the user, simply dragging it down in the body interface to activate the comment interface, which has to be an improvement and transcendence over the Twitter client.

Summary

In fact, understanding the metaphorical design of mobile interface is not a very difficult thing, because this is a process of simplifying the results. The difficulty is that designers should jump out of the traditional buttons, clicks, and other interactive restrictions to take into account the logical combination of real life and the response of the user's intuitive gestures.

For mobile software applications, the original intention of metaphor design is to solve the problem of lack of navigation and feedback of physical mechanics, but it is also the core embodiment of the competitiveness of mobile products. How to help users understand your software application more quickly, and how to help users to use your software more smoothly. This is the answer that every designer should look for in real life.

Source: http://www.userkon.com/tolyer/metaphors_design_on_mobile_device.html