10 design principles for mobile applications

"Editor's note" The original author Jonathan Stark is a mobile device consultant, trainer, this article is compiled by @c7210. The article summarizes the 10 principles of mobile application interface design, including design concept and specification, use of scene environment, navigation, user input, operation gesture, screen orientation, start loading and so on.

It is hoped that the normative thinking can help the designers who are not very familiar with the field to establish a practical design frame of thinking.

While mobile devices and traditional desktop devices are all "computing devices," the differences are obvious: mobile devices have a much smaller screen, a network of wireless links, a weaker battery, and so on. This list of "weaknesses" can be very long, but if you think of mobile devices as a degraded version of the computer, that's also the wrong idea.

In fact, from some other point of view, mobile devices are more powerful than desktop devices. Smartphones and tablets are more personalized devices that will stay with you, allowing you to access the Internet anytime, anywhere, with the cool features that traditional devices don't have, including GPS, digital compasses, accelerometers, and so on.

All of these differences make applications in mobile devices have a lot of originality in interface design. I (English original author) based on my work experience in workshop, summed up the mobile application Interface Design 10 principles, here to share with you, hope to help those who are not very familiar with the field of designers to establish a practical value of the design framework of thinking.

1, design concept

From the traditional equipment to mobile field, the first thing designers should do is to adjust the thinking mode and design concept.

Focus on

The essential goal of mobile applications is to help people accomplish specific tasks with the highest efficiency. Less is more, and the product you want to cut off is usually a lot more powerful than you think.

Unique

From the outset, understand how your application is unique to the product's overall user experience strategy and highlight these selling points in the interactive and visual design process.

Charming

Mobile devices are quite personal tools, people will gradually in the process of using the emotional integration into the software and hardware; The application also has to interact with the user at the emotional level, through a variety of friendly, interesting, reliable design and functionality to let users feel admiringly.

Considerate

Instead of focusing too much on "development" itself, do not use your own mental model and the business logic of the product as the criterion of design. If you really want your products to be accepted by more users, you must learn to stand up to them and make design decisions.

Do not use the concept of "more than the more" to create mobile applications

Related reading:

User Experience design with "machine" strain the difference of mobile application and user experience Strategy 2, use environment

When it comes to the use of mobile devices, it is common to associate professional business people with the image of a smartphone in the airport with a suitcase. However, this is only one of the mobile application context environments, and the usage scenarios we need to consider can be grouped into 3 categories:

to kill boredom

In fact, many users will be home in the sofa to use mobile devices. In this scenario, the adopts time is longer and the demand is biased towards leisure, so more real and enjoyable experiences are necessary.

Busy

The image of the airport mentioned above is quite typical. In this scenario, applications must be able to help them accomplish small tasks quickly with the user's own hand, and the text and interaction objects in the interface should be large enough to be clear to ensure that they are still identifiable and easy to operate under unstable conditions.

Off-site

The user is on the road or in a relatively unfamiliar environment. In this case, not only to take into account the previous point of the readability of the ease of use of the problem, at the same time, network links, electricity and other factors can not be ignored. Products designed for such scenarios provide the necessary offline functionality support while minimizing the functional features that can lead to power consumption.

Recommended reading: IOS WOW Experience – designed for the context of an application

3, general design code

Different types of applications (utility, efficiency, immersion) have different design and development rules, but from a holistic point of view, for small touch screen mobile device application design process, there are some global norms need our attention:

Responsive

If the user performs the operation, the application must immediately respond accordingly. Responsiveness and speed are not the same thing, perhaps some of the implementation of some functions does take some time to complete, such as adding to the media file, but you have to let users know that the process is happening. (Recommended reading: Provide positive feedback for user's successful operation)

Details

The details that we don't care about in the design and development process are likely to be easily noticed by users. Excellent detail design is very helpful in improving the overall experience satisfaction of the product. Imagine a car with a powerful engine and a beautiful look, and if the cab is not carefully crafted or has been making annoying noises on the road, then it is clear that user satisfaction will be greatly compromised.

Thumb

With regard to touch-screen operations, in many cases, we are simply designing the thumb, unless you are sure that the user will use two hands to manipulate the device. And even if the user is in the hands of the machine, usually use two thumb to operate. Therefore, the design plan usually needs to be considered around the thumb.

Click on target

Look at the finger belly of your thumb, which is the place to touch the interface. My own looks are like a bottle cap, both in size and shape. Even if it looks good, it is a bit bigger for the tiny objects in the mobile device interface. Apple's recommendation in the iOS interface design specification is that the minimum size of the hit element should be 44 pixels square, but in practice there are many cases that do not conform to this specification, including Apple's own application.

In addition, the layout relationship between adjacent elements is also something you should be aware of, for example, in the creation of a content class application, it is not a good idea to put the return button directly next to the Save button.

content

Direct manipulation is the foundation of the touchscreen device interaction model. Users can interact directly with the interface without the need for a mouse-type auxiliary device (and also as a disturbance factor).

The advantages of this model are self-evident, far from saying, my two-year-old child can easily use the ipad, but completely confused notebook or desktop. For the application running in the touch screen equipment, it is more to streamline the interface elements, so that the content presentation mode and function of the operation method as far as possible in line with the "direct manipulation" framework of intuitive mode.

Control Element Layout

Typically, interface elements with control functions need to be placed below the content so that we do not block the content while performing the operation. Think about calculators, scales, or computers in front of you. Although the traditional desktop software and Web pages are related to navigation and operation on the top, but that only applies to mouse manipulation, after all, the size of the pointer relative to the entire display device is insignificant.

Roll Screen

Most of the time, the taboo of "line below" also exists in the interface design of mobile application. In addition, for some applications, a single screen mode can bring more solid and reliable feeling, because all content is predictable.

Of course, in most applications, it is unrealistic to avoid scrolling, but consider whether there are ways to reduce the uncertainty associated with scrolling, allowing users to understand the existence of content that has not yet entered the visual range.

Recommended reading: Designed for touch-screen mobile devices

4, Navigation mode

New navigation patterns are more and more, and you can find more than one in path. But if you still decide to use the native standard navigation model that users are familiar with, make sure your choices are in line with the actual requirements of the product. Some of the most common navigation options include:

does not have navigation: a practical application of a single interface (for example, "weather" from iOS). Tab Bar: A navigation mechanism that provides an application with the ability to organize subtasks, view interfaces, or functional patterns at the global level (for example, "Phone" from iOS). List: For browsing in the tree information structure (for example, iOS's "settings").

iOS tab Bar

List navigation for iOS

Recommended reading:

iOS interactive model and innovative product concepts first understand the rules, and then seek innovation-about iOS application interface customization 5, user input

In the touch screen device input text, this thing can almost use the word of pain to describe, and then the equipment and applications are no exception. What we have to do is to do our best to help users reduce their negative feelings.

The

smartphone's system platform typically has built-in keyboards for different types of content, such as text, numbers, emails, URLs, and so on. In your application, be sure to use the corresponding keyboard for different content types to improve user input efficiency. Automatic error correction with input method sometimes really annoying. This can be done in advance for your application, such as turning on or off automatic error correction for some fields (Auto-correct), automatic first-letter capitalization (auto-capitalisation), or automatic completion (auto-complete). If your application does require users to enter a lot of text, you can consider adding a horizontal screen for the application, allowing the user to enter through a wider keyboard.

6, Gesture

A hallmark feature of capacitive touch-screen mobile devices is gesture manipulation.

Intangible

Gestures are invisible, so how to conduct reasonable guidance, so that users understand the application support gesture operation, while not very obvious damage to interface coordination, this becomes a bit challenging.

multi-touch

To carry out multi-touch, normal humans usually need two hands to work with. For example, "double finger opening", either the hand holder through two thumbs, or a single handset with the other hand two fingers to operate.

Sometimes it's really annoying, for example, when I'm walking on the road with a coffee in one hand and holding a cell phone in one hand, I feel very sad if some of the features in the application have to be done with a finger-opening gesture (which is why I personally think clear is not good to use – the translator C7210).

icing on the cake

I personally always think that gesture operation, especially the various cool multi-touch operation is more like a icing on the cake to enhance the experience of the auxiliary interaction, even if users do not know their existence, it should be able to use the normal application.

Deep reading:

iOS User experience resolution – Gesture mobile device operation legend and touch screen Ergonomics 7, screen orientation at present, the default and most mainstream screen orientation is still the vertical screen. As mentioned earlier, if your application requires users to enter a lot of text, it is best to consider supporting the horizontal view mode, so that people can use a wider keyboard. For the application of the content reading class, you can also consider adding a separate lock screen setting in the application.

Deep reading: interface design and experience promotion in the switch

8, Exchange provides feedback

Provide immediate feedback for each user's interaction behavior, or users will be suspicious of whether the program is having problems or mistakenly thinking that they are not accomplishing the actions they want to do. The form of feedback can be tactile, such as vibration, and of course most of the cases are visual, such as adding a highlight to an interaction object or using an animated transition effect.

If an operation takes a while from execution to generating results, be sure to provide a visual element such as a wait mark or progress bar to let the user know that the system is doing the necessary processing work.

Modal Dialog

Mainly refers to the alert warning box, which is a very unfriendly way of interrupting the current task process, so you should only use it to alert the user if there is a significant problem or where there is a potential for serious consequences. Even if you have to use it, try to keep the copy friendly.

Confirm

Action forms are more reasonable when you want users to confirm whether they want to perform an operation or not. Sheet Rather than a warning box, an action form is more like a response to a user's behavior in the context than a don highlighting something that is out of the picture.

9, start loading

It is not assumed that users will consistently use the application until the goal is achieved. In some scenarios, the user is likely to temporarily quit the application, and when they come back, it's best to make sure that the current status is exactly the same as when they left, including the input and the actions and settings that were performed.

For some types of applications, it is possible to use an "empty interface" image that is completely consistent with the first screen interface at load time, which reduces the user's perception of latency and makes them feel that the application takes only a little time to complete from boot to load.

Note, however, that you should not place any interaction elements in this "empty interface" picture.

Also, try not to use too much brand information in the startup image, as it is likely to make users feel they are watching ads.

10, First Impression application icon

Your application icon will fight in the ocean of icons for all kinds of similar products. In essence, it's more like a business card than a work of art. As far as possible in the icon to express the main features of your products and selling points, accurately reflect the product type and positioning.

First Boot

The performance of the first start can often determine the success or failure of an application. If a new user is confused and frustrated at this point, they will soon give up the product. If your application provides complex functionality, you can consider adding a few hints to help the user produce an accurate understanding of the product in the shortest time possible.

Note, however, that these guidance tips must not replace the self description of the design itself, if you find yourself more and more thinking of those guidance instructions and reduce the study of the interface design program, then the introspection. (Recommended reading: A guided Mobile application interface design pattern)

Translator Blog: Beforweb