A guide design mode of mobile application interface

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

The writing work is a bit unrestrained, ah, until the Sunday night so the time, I am afraid of any other things can not let oneself have such a momentum. It's hard to say. In fact, two days on the weekend is mainly to pack up their belongings ready to move, busy doing content, pure when leisure and entertainment.

The current translation, similar to the previous article on prototype design and user testing, is also from a new book, Mobile Design Patterns Gallery (the Art gallery), interested students can search, I will not add a bookstore link. Indeed there is no time to dwell on those who have no, a little noisy, let us happy to enter the text.

A few days ago, we (original author) team received a new mobile application project. Sadly, all the mobile designers were already getting tickets for other projects, and the rest of the designers were in the field of enterprise application or efficiency tools. So I made a quick tutorial with a lot of mobile apps to help them get to know the new directions as quickly as possible. The result is really good, the training effect is gratifying, this set of tutorials also becomes our mobile application design pattern reference, and gradually compiles a book.

Personally, I am most interested in the topic of "guiding" and share it here. It should be mentioned that although these design patterns are based on best practices derived from mobile applications, they are also applicable to mobile web design to some extent.

Remember the first time you used Photoshop? What impresses me most is a blank canvas and a bunch of powerful tools on the left. In other words, I was just assuming that they were strong, not really sure, because I had no idea where to start using the interface. So I had to buy a "teach yourself Photoshop in Hours", spend some time self-study first. (24-hour series tutorial, small c I only read a JavaScript, the impression of really rotten.) )

More than 10 years from now, there are thousands of apps in the mobile market, each of which is almost identical in several dozen functions. Most of these apps are free, so we often randomly pick a download installation, take 5 minutes to look at the intuitive user interface, and then unload it, and then load another game.

Layar Reality Browser is a mobile application based on augmented reality (augmented Reality, AR) technology, and its initial version is shown in the following illustration:

What made me "augmented reality" through this large gray interface? The answer is "bootstrap." For mobile applications, the essence of "boot" is a small hint, when users first use the app display, to recommend some common features of the operation, or to lead them to complete a predetermined teaching goals. Simple but attentive guidance can be very effective in the first experience to enhance user satisfaction.

The boot mode for mobile applications is broadly divided into eight categories:

Dialogue (Dialog)

Tip (TIP)

Travel (Tour)

Video Demo

Translucent callout (transparency)

Embedding (Embedded)

Continued (persistent)

Explore (Discoverable)

Dialogue (Dialog)

A simple dialog box with an introduction copy is the most common way to boot in mobile applications, perhaps because it is relatively easy to develop coding. However, because it is too common, this model is also very easy to be ignored by users directly.

It's important to keep the presentation concise and no one wants to read a lot of content here. Another point to note is that for very important information, it is best to leave an entry in the application that can be read back to the content. The screenshot below comes from the home page of the two apps Targetweight and Actionmethod.

Tip (TIP)

This approach is more contextual than a "conversation". We can use hints in any of the view interfaces of the application, not just the home page. In the ebay app (shown on the left of the image below), the "Save Search results" feature is prompted to attract attention. Just imagine that if you don't use this obvious hint, the user's gaze will easily overlook the place where the title was originally presented. In addition, the Android instructions to guide users to customize the homepage are also a typical example (on the right side of the diagram), some similar to Windows paper clips June.

Shoppinglist will be in the process of user use of some of the main functions of the step-by-step prompts to guide the user action. #p # subtitle #e#

The usual principle is to place a hint bubble next to the related features you currently need to highlight, keep the presentation brief, and remove the prompts when the user starts to perform the corresponding action.

Travel (Tour)

Travel can bring the ultimate guide experience-through the key screen and important functions of the continuous display, in the shortest possible time to lead the user to the application of a comprehensive exploration. Nike GPS Application is a good example of this approach, especially for mobile devices, including a clear introduction, vivid pictures, simple navigation, and a clear enough close button. The tour will appear in the first screen of the application, and the user will be able to browse or close it freely in the 7-screen presentation. In addition, in terms of navigation, Nike GPS also uses the page indicator (dot) and the page number count ("2 of 7") to clearly show the current travel steps. Calcbot also used similar navigation.

Video Demo

For some applications that rely on specific action methods, the video demo may be the most effective way to boot, because it can dynamically demonstrate the actual operation of the application. In this way, Roambi shows a lot of their visual data, and visually demonstrates gestures for navigating and browsing content. Google Goggles inserted a YouTube video directly into the demo.

We can usually use this method to show the key function points of the application, or to demonstrate the operation of the application from the point of view of standard operating process. In addition, you need to provide basic control functions in video, including Stop, pause, volume control, etc.

#p # subtitle #e#

Translucent callout (transparency)

Translucent annotations are somewhat unique to touch-screen devices compared to other guided design patterns. It usually appears in the first screen of the application, with a translucent layer covering the real interface as the background. Pulse and Phoster are typical examples of translucent annotated patterns that quickly and visually show the user how to navigate the content.

Instead of trying to make up for the poor design of the application interface itself, we should use semi-transparent annotations in the right way. When the user starts to produce the corresponding interaction behavior, must remove the annotation in time.

Embedding (Embedded)

Unlike other modes, embedding is not rendered before the target interface is loaded. In this mode, the relevant boot content is incorporated into the interface design until it is removed by the true content overlay. Both Mini diary and pageonce are typical examples, with embedded hints that they can immediately drive the user to do the relevant operation.

Multiple inline boot hints can exist in an interface. In the design of the application of the interface, these embedded elements should be differentiated processing, through the image and other ways to make them with the common content is very good difference.

Continued (persistent)

This approach is also incorporated into the interface and always exists. For example, Jamie Oliver's recipes always advises users to get extra functionality using a horizontal screen. Spring Pad combines the two modes of "embedding" and "sustaining"--the "+" symbol used to guide users to add custom content is always present and replaced with formal content.

Explore (Discoverable)

The so-called "exploratory" approach may sound contradictory, but it is an effective way to encourage a user to perform a particular interaction without affecting the design of the application interface itself. Typically, such a boot is rendered under the trigger of some action, such as a drop-down or flip side.

Be cautious about using this type of boot. Its most common function is to refresh or load more content.

Original site to compile the article. If you want to reprint, please specify: This article from the IS for Web

English Original:

http://www.uxbooth.com/blog/mobile-design-patters/Translator Information: C7210-web design and front-end players, is now working in the Mass Comment Network product Department user Experience Design Group (UED)