Teach you how to create an elegant initial status page

@ Product Manager Chaoyanglu: At the beginning of this article, as always, give a few examples, but this is a counter example, the first example is a domestic network monitoring software dashboard interface design:

Another display interface for the detailed data of the product:

Next look at another OA system's product category page:

The above example is enough to illustrate a problem-the initial status page needs to be designed.

In fact, there is a source of this article, a few days ago in the "Product Manager Combat training camp," a micro-letter sharing an article called "User Interface Design Principles" (the original author unknown, should be a translated article, where the 16th principle mentions the design of the initial state page, the following is the original description: " The first experience of using the interface is very important, and this is often overlooked by designers. In order for users to get started faster, it is best to keep the initial state in the design, that is, the state has not been used. This state is not a blank canvas ... It should provide a direction and guidance to enable users to quickly enter the situation. There may be some friction in the initial state of interaction, and once the user understands the rules, there will be a high chance of success. ”

Personally, the so-called initial state page, is actually a limit state page design, the Limit status page includes the initial page and a very many status page, as shown in the following figure:

The initial state is just beginning to use the interface, very many pages we can understand that when the amount of data is very large, the effect of the entire interface, both are very important.

In most cases, product managers and interaction designers are concerned with the ideal state design, that is, the normal product interface is what it looks like, so in the design of software interaction prototype, we like to use more reasonable data bar to design the interface beautifully and seemingly usable, but often ignore no data or very much data, Whether the interface can host the original design, but the actual software must consider these states. Today, the design of the initial state page is discussed, and many states will be described separately in the following articles.

Back to the starting point of the problem, what is the initial status page to solve? The individual lists several points:

1, inform: Tell the user this page has no data, need users to create or add;

2, Guide: Through a clear step of the operation to guide users how to apply the system;

3, Template: The default to give the data template, so that users understand the situation, based on this quick start;

Better initial state page design should be able to cover the three points of more than two (bad design only do tell or not), let's look at the more excellent interface design:

The following is the domestic well-known enterprise-level online collaborative work software Tita "plan" initial page, if the traditional design, may only give a hint called "Currently no plan, please create." And Tita's designers are more clever to inform and guide-the relevant functions in a similar way to tell the story, let just come in the user can have a general understanding of "How to do the plan", another designer to tell the story of the way is also more lively, so that people can be a good introduction.

This is also the case for the project's page design, which explains to the user what the project is, what the project can do to help the user, and then leads the user to create a new project.

126 mailbox To do mail interface, when not set up to do mail, to the user tips and related help guide, the following interface design.

Another new generation of enterprise-level collaborative services teambition, with a very rapid development momentum in the country, has a very interesting project initial status page, which is a separate path. We note that the design of the floating layer in the following figure, such as "Today's dynamic" here, the floating layer with icons and text prompts the project Dynamic Help and the use of guidance, while the translucent floating layer shows that if you have added the effect of the task, advance to the user can expect results.

The above is the personal discovery of some of the better initial state page design examples, no matter how the design, the source of the problem is to consider the user's initial learning costs how to reduce, only to allow users to quickly accept, the product will not be easy to discard-become more valuable.

Finally, the emphasis on a concept, the initial status page is not equal to the blank page, I believe that read this article, this everyone in the back of the design can have experience;