IOS App Experience Design

Editor's note: This article from Chengdu Cai Cheng design CTO Sho Yixiang "@yxshawn", Focus on "ios,http://www.aliyun.com/zixun/aggregation/11432.html" > Human-Computer Interaction, UED, musicians, multimedia , philosophy, science fiction, electronics, psychedelic. In this paper, he compares the iOS application with the common website design, and puts forward his own design idea.

IOS app Experience design is not like the Internet experience design, there are a lot of methodologies and can be "reference" cases. In addition to Apple's <human Interface guidelines> and former Palm <zen of palm>, no better design philosophy and methodology are found.

In fact, even if you take a serious look at hig and Zen of Palm, or even Oolon Colluphid's masterpiece, you can't strictly follow guideline to design an excellent app. For the reason that I have to start with the program ape and design wet talking.

The software design developed by the people who were most thought at the beginning of the last century was understood by 1. Art 2. Programmer 3. The project manager is composed. The design I'm talking about here is not art! This is the premise. Because art is only concerned about good looks, they almost do not care about (or do not understand) the ease of use of products.

How do you identify programmers and designers? You can't tell them apart by writing code (after all, many designers write programming, such as designers of color designs, and vice versa), but you can differentiate them by the way they usually think.

Programmer: Wow! This function is good! Can we add to our app? "This kind of scene often occurs when they see a very" cool "very" gorgeous "app often sends out exclamation (or heart sigh).

The designer replied: "Why should we add this function?" ”

Programmers tend to focus on the function itself, hoping to add all the good stuff to their work. For example, good design patterns, efficient algorithms, seemingly gorgeous effects. The general Programmer's work has two kinds, the first kind is the function is more than the Beijing car, you need an Oxford dictionary thick manual to be able to understand how to use. Another kind has very gorgeous special effects, the interface flies, a absent-minded thought oneself is playing acrobatics.

Designers tend to focus on the product as a whole, they usually have a product of the function of cleanliness. They usually find resonance in photography: a good picture has three elements 1. There is a distinct theme. 2. The elements of the screen can quickly turn the viewer's attention to the subject. 3. There is only one theme, all the topics unrelated to the focus are cut off.

Unfortunately, many iOS developers are jumping out of the program ape. Crying with a roaring body shouted "We program apes can finally make money!!! There's wood and!!!. There's wood and!!!. So they can do something with the following figure to briefly explain:

That's right! The question is not whether the function is enough, but how well the experience is and whether it solves the problem. and especially in iOS app design, because the characteristics of the device itself directly determines the design is completely different from the experience of the site design.

We believe that the main differences are the following three points:

The so-called visual focus and operational focus of the problem, we can start from the traditional computer use. We control the computer is usually through the mouse, hands with the mouse control screen pointer, moved to a location, click, double-click, drag, and so on to complete the operation. What we see is the screen, the mouse is the operation. Our visual focus is the screen, and the action focus is the mouse. Types that belong to different visual focus and operation focus.

The biggest difference between a touch-screen device and a computer is that their visual focus and operating focus are the same point. So, we want to open a picture, just hand-click the picture.

The great benefit of the same visual focus and operation focus is that it is easy to learn to use such devices. But precisely because of the two-point same, when we are in the operation will also block the focus.

This feature can affect a lot of UI design, such as: Take out your iphone, put your hand on the iphone, you will find your iphone maximum width of 4 fingers width.

We use circles to represent the areas that are blocked, where the green area is a safe area, which represents the area where we think we are psychologically sure to be accurate, and the yellow area is a bit disturbing in our mind, and we are not sure if we can spot the region. For example, the design of a camera software:

Yes, the problem is self-evident. From the design of the UI, if it's a Web page, there's really no problem with vision (of course, the deletion button is a stupid way to put it next to the modification, which is not to mention). However, due to the same visual focus and operation focus of the same reason, click to modify it becomes very difficult and nervous, not to mention next to a delete button.

The traditional internet page of the jump between, we are familiar with the use of links. Links can be in the entire site or even between the site any jump, click on the link to enter a new space. Spatial perception is reticular, without head and tail, and can be entered at any point through the URL.

In mobile device application design, access to the app is usually a fixed point, each operation is brought into another space, if the loss of space perception, like the loss of a map, users can easily feel lost.

And because of the size of the screen and other factors, the app can not directly tell the user what the space is, but there are various means to give users hints. For example:

In camera+, there are two main scenes, one is taking photos, the other is photo management. The space between the two is the upper and lower relation, when the user clicks the photo album under the picture Scene, the interface pushes up the display picture management scene. Versa。 The scenario implied to the user at this point is as shown in the figure:

More complex space hints such as the Reeder iphone version. Each position in the space is very clear, and the animation of the way to the user hint of this sense of space. Not only that, the Reeder iphone version of asterisking to star space perception is not up or down, but the relationship. Please purchase your own experience.

In addition, the Reeder ipad version and our choice sense of space are also very good. Take our choice and Reeder ipad for example (video). Our choice in the section of the selection of the scene into the chapter, the selection of the section of the scene will be narrowed, through the "near big far small" common sense in a plane to imply the spatial relationship between two scenes. Reeder also used a similar approach.

In the case of the ipad, we usually use the ipad for two different positions, the first is to put the ipad on the desktop to operate, this position using the app, no matter where the button, click on the need to do with one hand, the two steps between the button distance is not a burden. And when the ipad is in hand, the problem arises in this particular position.

(If you have a cell phone, please hold it in your hand now) if you only want to do it with one hand, you will find that you click on all points on the screen with your thumb, but only the green area is easy to click. As the following illustration shows, the ipad's easy to operate area is also distributed in an arc region.

The next video also shows the difference between a bad postural design and a good postural design.

The first half of the bad postural design is because the design does not take into account the operating posture, so that the left a row of infrequently used functions occupy the most important gold area, while the normal operation of the area is far away from the easy to operate areas. It's more painful to operate than to eat a dead fly. And the latter, good postural design, all the common functions, a hand, do not need too much movement can be completed: The article, the next article, Mark Unread, marked plus star.

Of course, if you are our "cow one week" loyal readers, then you must remember our Hot Wheels (see the Bull Week 1.2 of the Invincible Hot Wheels) and a yang finger (Cattle Week 1.1 update notes)? Yes, we resolutely removed a yang finger because it was a beautiful but difficult design (at least not a good postural design). We have retained the structure of the Hot Wheels (of course, only in the program, but not enabled), because this is a good case of postural design. For example, when reading a magazine, we often have to flip an article, the traditional operation is an advanced catalog, and then find the article to see, and then jump. Using a hot wheel, as shown in the video, your hand doesn't have to leave the screen at all, no matter how much your hand is, whether you're left-handed or right-handed.

In the upcoming iOS5, the ipad's keyboard design also embodies the essence of the so-called postural design:

iOS devices, even all mobile devices, including Android, are designed differently from web design because of their unique use of the scene. Many "art" and even programmers who change roles from web design to design mobile apps often overlook these invisible factors, which ultimately lead to a difficult level of product design. If, in recent years, interaction designers have become more and more important in the design of their web sites, their position in the design of mobile devices will be even more significant. Visual Focus/Operation focus, spatial perception and postural design the features of these three iOS devices can be likened to Android or even more devices, and of course, the three features.

Of course, it is precisely because of these reasons, when we hear people excited to tell us: "Wow!" HTML5 can do all the equipment adaptive ye~ "when we are usually dismissive, in the mind Meditation" Programmer! ”。 Of course, this is not demeaning. It's just, one thing to admit, that different sizes of devices, different resolutions, if you want to get the best experience, "adaptive" allows the machine to adapt and make it difficult to adapt. For example, a button would have been 1 centimeters wide, an adaptive, on the iphone on the original 1/3 when you call people how to click? Of course, there are many examples. Most of this kind of propaganda, which does not spend Kungfu, is like a telegraph pole full of small ads, usually the lack of high-quality applications of the terminally ill hardware manufacturers to quickly resolve the pain and buy kidney practice. Of course, technology-sensitive engineers are unconsciously helping to yell.

The color range design will continue to be considered for mobile devices. More design methods and philosophies will continue to be shared. Stay tuned.

Author: Sho Yixiang "@yxshawn"

Unless noted, this site articles are original or compiled, reproduced please specify: The article from 36 Krypton