Talk about app's 9 most common state designs

Now do UI design not only to focus on the interface vision, also have to understand the point of interaction and with research, today @ 10 realities why this translation, including the mobile app in the process of the 9 basic state (loading, empty state, error status, etc.), with the excellent design case for learning, to collect!

Now the UI design team usually first design the components, most of the interface is almost a combination of various components. This will leave a suspended on the user's "Exception path". Since we are building the entire system, not several pages, we must devote our energies to the design of these often neglected states, creating the entire lifecycle of the component to suit everyone. The life cycle I understand is this:

1. Initial state

What does a component do before anything? Maybe this is the first time a user has seen it. Or it hasn't been activated yet. Basically this component exists, but it hasn't started yet.

The Jonas Treub design ensures that you understand the latest trends in framer.

2. In-load

A state of disgust. In an ideal situation, no one will see this. Hey, but we're in the real world here. There are many ways to make the loading state subtle and implicit. Facebook has done a good job of doing this:

Facebook uses "fake articles" instead of traditional circles.

　3. Empty state

The component is initialized, but nothing is available. No data, no items. This is a good time to lead the user to action ("click here!"), or to encourage them ("good work, all normal").

Luke Seeley it as a shortcut.

　　4. Single Item

It's starting to get some data. In the input interface, this may be the state of pressing the first key. In the list, there may be a state when there is only one item (or only one left).

Another Luke Seeley,metalab project.

　5. Some data

This is usually the first state you consider. What is the optimal state of a component? The data is loaded and content is entered, which is the familiar state of the user.

UENO. Comfortable large instrument panel.

　　6. Too much data

Wow! The user seems to be overdoing it. There are too many results (maybe you're paging them now), too much text (which might show ellipses?), and so forth.

Nice page-flipping design from Pete Orme.

　7. Error status

Component has failed. An exception was generated.

Dunked.com's error state is great.

　8. Correct state

Very good! This is the correct operation.

Design of Ionut Bondoc (►IB)

　9. Completion status

The application has accepted the correct operation of the user. They don't need to worry about it any more.

Igor Chebotarev gives some positive feedback. (This diagram is oversized, distortion after compression, the students can go straight to the chase wave to see)

These states recur as different pages, user actions, data updates, and any state changes you apply. Deliberate design of these changes will create a beautiful experience for users, regardless of their circumstances.

Many of these states have not been considered, forgotten, or simply ignored. It's a huge mistake and it's your chance to catch up with your opponents. Incorporate state thinking into your design process, which resonates with your users and also controls your application.

These 9 state designs apply to all design projects and components. Even if you make a conscious decision to ignore one of these, following this set of guidelines will ensure that you really think about those unusual paths.