Mobile Application Interface Design Mode with guidance

The text work is a bit unrestrained. It has been playing until Sunday evening. I am afraid it is difficult to make myself have such a strong idea for anything else. It is hard to say. In fact, on the weekend, if God wants to clean up his house and prepare to move; busy to do content, just when leisure and entertainment.

This article is similar to the previous article on early prototype Design and user testing. It is also from a new book, Mobile Design Pattern Gallery (Mobile Application Design Pattern Gallery ), if you are interested, you can search for it. I will not add a bookstore link. There is really no time to repeat what we don't have. It's a bit difficult. Let's enter the text happily.

Some days ago, our (author of the original English) team received a new mobile application project. Sadly, at that time, all the mobile designers had been bought for tickets by other projects, and the rest of the designers were mainly engaged in enterprise-level applications or efficiency tools. So I created a quick tutorial that contains a large number of mobile apps, hoping to help them get familiar with new directions as soon as possible. The results are really good and the training results are gratifying. This tutorial has become a reference for the mobile application design model at hand and is gradually compiled into a book.

I personally love the topic "Guidance" and share it with you here. Although these design patterns are best practices based on mobile applications, they are also applicable to mobile website designs to some extent.

Remember the first time I used Photoshop? What impressed me most was a blank canvas and a bunch of powerful tools on the left. At that time, I just assumed that they were very powerful and I was not sure, because in the face of such an interface, I had no idea where to start using them. So I had to buy another "Teach Yourself Photoshop in 24 Hours" and spend some time learning first. (For 24-hour tutorials, I have only read one copy of JavaScript, which is really bad .)

　　

 

More than 10 years later, there have been thousands of applications in the mobile market. Each category has several dozen identical functions. Most of these applications are free of charge, so we often choose to download and install them at will. It takes 5 minutes to study the user interfaces with poor intuition, unload them, and install another one for fun.

Layar Reality Browser is a mobile application based on Augmented Reality (AR) technology. Its initial version is shown in:

　　

 

What makes my big gray interface "Augmented Reality "? The answer is "guiding ". For mobile apps, the essence of "guiding" is a small tip. When users use the app for the first time, they will be prompted to recommend some common function operation methods to users, or lead them to fulfill a preset teaching goal. The simple but attentive guidance method can effectively improve user satisfaction in the first experience.

Mobile app boot modes are roughly divided into eight categories:

Dialog)

Tip)

Travel (Tour)

Video Demo)

Transparency)

Embedded)

Persistent)

Discovery)

　　

 

Dialog)

A simple dialog box with an introduction is the most common guide for mobile apps, perhaps because it is relatively easy to develop code. However, because it is too common, this mode is easily ignored by users.

Keeping the text concise is very important, and no one wants to read a lot of content here. Note that for very important information, it is best to leave an entry in the application that can re-read these prompts. The following is the homepage of the TargetWeight and ActionMethod applications.

　　

 

Tip)

This method is more contextual than "conversation. We can use tips in any view interface of the application, not just the homepage. In the eBay app (as shown on the left), the "save search results" function is eye-catching through prompts. Imagine if you don't use such obvious tips here, the user's eyes will easily overlook the original title. In addition, the prompt for guiding users to customize the homepage in Android is also a typical example (on the right), and some are similar to those in Windows.

　　

 

ShoppingList will incrementally prompt some main functions during user usage to guide user operations.