Designing for Application States: Creating Seamless User Experiences
Design thoughtfully for every app state, transforming potential user frustration into a seamless, engaging experience.
An application carries users through different states during their journey –from happy steps to error scenarios. Each transition shapes the overall user experience, much like chapters in a story. During onboarding, users expect a welcoming screen and, maybe, a quick guide. After many times using the app, seeing the same beginner tips can become tiresome. A well-designed app anticipates and adjusts user needs in all states, enhancing an app's overall effectiveness and user engagement.
Designing for Different States
Imagine downloading a promising new email app that claims to revolutionize mail inbox management. Tap on the app icon with anticipation, but instead of a welcoming experience, a clean screen is presented –empty and without guidance. This harsh first meeting can make users feel confused and discouraged, wondering if something has gone wrong or if they missed an important step.
This scenario is one of the most critical, yet often overlooked, aspects of application design: state management. An app exists in different states throughout its lifecycle, much like a book with unique chapters that move the story forward. The empty state described above is just one of several crucial moments that shape how users perceive and interact with an application.
Designing an app is a choreography with four fundamental phases that every user will experience: the empty state (without content), the loading state (fetching data), the error state (when something goes wrong), the onboarding state (the initial guided experience) and the offboarding (the final end of the experience). By designing thoughtfully for each state, the app creates a seamless experience that builds trust and encourages continued engagement.
1. The First Impression: Onboarding
Onboarding is an app's business card, the moment to show greatness and set the tone for what’s ahead. Business Dasher claims that effective onboarding can improve user retention by up to 50%. Research from Nielsen Norman Group indicates that users form their initial impressions of an application within the first 50 milliseconds of interaction. Many users will abandon an app entirely if they face confusion or friction in these early moments.
A well-designed onboarding experience combines thoughtful illustrations, animations, and compelling copy to create a delightful experience in just a few screens. It's a state to offer a subtle yet effective introduction to the app's features and functionality. Apple's Human Interface Guidelines highlight that successful onboarding shouldn't feel like a tutorial, instead, it should feel like discovering a new tool that you've always needed but never knew existed, in just a few screens (3 or less).
1.1 First-Time Usage
The first time a user opens an app is a climactic moment –it often decides whether users will use the app or delete it. This state is commonly known as the "state of nothing," as all components are initialized but contain no content –no user input yet.
Since it's the user's first interaction with the app, supportive guidance such as “do this”, “add here”, and "tap there" can be useful. Phrases like “nothing to see here” can feel dismissive and fail to provide clear direction. This state communicates that the screen is intentionally empty and not the result of an error.
When a user first uses the app, guidance on how to create a task or populate a view can be given. After the third or fourth usage, however, tutorials can be annoying and overstated; instead, a friendly message when the inbox is empty again communicates that the clean view is not a mistake. This state is important as users might think they lost all the information or there's a missing connection. Make them aware that the lack of data is by choice and not an error.
A common practice is to include introductory content visually guiding the users. For example, Todoist creates a starter list to showcase the app’s capabilities. The pre-filled items show features like adding emojis, bold text, and organizing tasks with hierarchical structures –offering users a clear example of what they can do.
1.3 Requesting access state
The requesting access state is when an app asks permission from the user, such as location, camera access, or notifications. This moment is key, as impacts the user’s trust and willingness to grant access. Clear, concise messaging is essential to explain why the permission is needed and how it enhances the user experience. For instance, instead of a generic request, a photo app might say, “We need access to your camera to let you capture and edit memories instantly.” Providing this context fosters transparency and helps users feel more comfortable granting permissions.
2. State: Ideal
This is the happy path, the state in which actions happen as planned, and is the perfect flow.
2.1 State: Partial State
The difference between the error and the ideal state is like night and day. But how does the screen look when there’s some data but the screen is not populated in full, as designed, yet? For example, in a Photo Gallery App, the gallery grid may show only a few photos (2–3) instead of a complete grid. In a Social Media app, the feed may contain only a couple of posts, not enough content to scroll fully.
The partial state is when the view is not empty but is poorly populated. This is a great opportunity to design micro-interactions to guide users toward the full glory of the Ideal State. Build "acceleration" into this state — a game design term that helps a player visualize how they could be more powerful by performing a series of tasks. Keep users hooked.
2.2 User-Cleared Data
There are two types of people: one that doesn't delete emails and the second with a clean inbox. An app must fit those two personas and provide suitable views for empty states.
This state is when the user uses the app for the first time, or when users intentionally clean all the content from the view. The second option requires a different strategy as it represents achievement rather than a new beginning. Consider how email applications handle this: Some users maintain thousands of messages, while others strive for "inbox zero." Your application should celebrate both approaches, acknowledging the empty state as an accomplishment when appropriate: "Congratulations on cleaning your inbox! Ready to tackle new messages as they arrive?"
2.3 "No Results Found”
A search result without a match is another type of empty state. This state is a great opportunity to reward users or encourage further action. You didn't find the music you were looking for? Maybe those options can help. Offering the closest possible match can be helpful, but when "no results" is the answer, it's essential to deliver the information in a non-intrusive way.
Avoid delivering a "no results" screen, as this forces users to tap back to refine their search. Instead, display the message near the search bar, allowing users to quickly adjust their query by keeping the search field easily accessible. This reduces frustration and keeps the search process intuitive and efficient.
2.4 New Updates!
This state is to celebrate that the app received a major update with exciting new features for users. This experience resembles onboarding but is specifically designed for returning users. It appears immediately when the app is opened and should be brief to avoid disrupting the user journey. Avoid using this feature to communicate bug-fix updates.
3. State: Loading
Loading states are inevitable, but they don't have to be frustrating. This state appears for milliseconds while the information is being loaded. It can be a full screen or a simple loading icon. If everything goes as planned, this state won't be seen. But unexpected things happen, and there are ways to transform this boring waiting moment into joyful microseconds.
For many Product Designers is an afterthought state. When the app is retrieving data, waiting for an internet connection, or transitioning to another screen, users should know that the app is working.
3.1 Skeleton
A skeleton screen is a loading screen. Instead of relying on spinning wheels highlighting waiting times, it displays the basic structure of a page and gradually fills in as content loads. They create a sense of progress and reduce perceived waiting time by giving users a preview of the upcoming content.
A skeleton outlines areas where the content will eventually appear, acting as a placeholder until the data is fully loaded. By offering a visual preview, skeleton screens help manage user expectations and make content loading feel smoother. This is especially helpful when an app fetches data from multiple sources. Common elements that can benefit from a skeleton include images, cards, charts, lists, tables, and text.
4. State: Error
Is the state of "things went bad". It is more complex than a single screen, as errors can happen in unexpected combinations. These may range from missing, or incorrect, data in an input field to server connection failures. The app should always protect user data and clearly communicate any problem. Keeping users informed is crucial, especially in critical situations like a failed banking transfer –did the money move between accounts or not?
To create effective error messages, follow best practices to ensure clarity and usability. Here’s a helpful guide.
5. State: Offboarding
The offboarding state is the final stage of a user's journey with an app. While often overlooked, a thoughtful offboarding experience is essential for leaving a lasting positive impression. It is more than just account deletion; it’s providing users with clarity, respect, and control over their data and experience. By handling digital endings gracefully, apps can foster trust, encourage future re-engagement, and demonstrate a user-centric approach even at the point of departure.
