Sanbang help you with the quick fix. Mobile Default page Design

Source: Internet
Author: User
Tags empty mail

The meal is complete: The default page appears when the user does not submit any information or the network connection is not smooth. Often designers are accustomed to using a wealth of data content to design the page beautiful and practical, consider the interface to show the "ideal state", often ignore the "default state" without content. The user experience is reduced by the design of a default page that has not been carefully designed. And may bring trouble to users, the following image of the iOS system Mail app, no mail when there is no effective feedback on the interface, users can not clearly know whether the network problem or Account synchronization error or is not in the Inbox is indeed an email. The same goes for the Pinterest and the departure interface.

What content can be added to the default page to make it "rich and friendly"? In the designing Web application, Nathan Barry put forward the concept of "WWH" to help product designers solve such problems.

  Tell the user what data will appear here (What)

First of all, the user is likely to be the first contact with your product, they are not very familiar with the use, and this is what you can use the default page to give them a good opportunity to explain. You can use simple and straightforward copywriting at design time to tell the user what will be placed here. Take a little thought here, don't let the blank default page become the last state that the user sees.

Here are some good examples:

E-voucher and itinerary sheet for Alipay Wallet the page through the bill graphic + text clearly explains what will appear under the category, and provides a button to add a ticket below the screen.

Dropbox is a network file synchronization tool that I like very much, the problem that the product faces is the need to guide the user to upload content. Apply to the user's first use of the collection, photo albums and reminders through the gray-scale and line-style illustrations and plain text to tell users how to use these three features, the screen to maintain the consistent brand style, but also reduce the user because of the list of empty things and create emotional frustration.

In addition to simple icons and text descriptions, some applications have a quicker and more straightforward approach: preset content, which allows users to directly experience the actual content of the information, or some sample information, without imagining anything.

Shadow puppet can combine photos and video clips with sound, stickers, etc. made into animation, made simple, known as the video version of the PPT. Its home page preset video samples, users can watch video cases of Shadow puppet video production has a perceptual perception.

  Tell users why they want to submit content here (Why)

After understanding the content form of the information, it is necessary to provide the user with a reason for submitting the content. The design of the default page should simply tell users the benefits of creating content, such as knowing more people, being more organized and more efficient at managing information, and so on, to help users produce purposes.

Read the bought and cloud space by reading the default page directly tells the user: quickly to buy books and upload to the cloud space, so you can have a cross-platform synchronization of the experience of the book.

Emotional copywriting and graphics can also motivate users to submit content. Headspace is a application that focuses on teaching people how to meditate and provide voice guidance. Its friend page in the default state provides the user with the reason to monitor and encourage each other's meditation process by adding friends. See this Meng Meng's default page, the user has any reason not to invite friends to monitor each other?

Or you can motivate users to add content on their own channel, just like the social application same, through playful copywriting.

  How users can submit content through explicit, procedural actions (how)

Give users a clear guide to the operation, in the interface to provide a clear button, arrows to indicate user action. Indicates that the content is best displayed in one page, and if there are many steps, it can be split into the specific use of the process guidance.

"Le Power" friend ranking page, in the absence of a friend to add the case, the page shows some of the social network icon and a large number of buttons to remind users to bind social accounts to find more friends together PK exercise.

A pocket is a tool that allows users to save content (text, pictures, and even video) and use them for other time to finish reading. When there is no content in its list page for the first time, a button "learn how to save" is displayed, clicking on the various ways to add a list in detail.

Taasky and Clear as two Interactive excellent task applications, have a very rich gesture operations, they do not like other software in the interface mask, labeled to make a lengthy user education page, but directly to the operation of the guidelines embedded in a task, The user can understand all gesture operations by simply sliding the screen along with the current task's simple description, that is, enriching the original blank default page and naturally instructing the user on how to use the software.

Orgami is an origami-style chronicle app, which is not empty on the notes page when it is first opened, but is not purely for aesthetic purposes and is included in the application-related instructions.


The default page status is most likely the user just started to use the application will be seen, then they still have patience with your product, designers should grasp the natural opportunity to talk with the user, you can start from the following points to design a blank and not empty default page.

  1. What

Specify the data that will appear on the page.

Try to let the user experience the sample information directly.

  2. Why

Motivate users to submit content.

  3. How

Operation BOOT.

Streamline steps.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.