Empty States, and how they can fill up the gaps in your product
A very short UX guide on the empty states — on-boarding, error, clear & no results states
When I joined Kaodim in June, the team was gearing up to implement a new design system, a new design philosophy for the brand. For those who don’t know Kaodim, we are the №1 Services Marketplace in Southeast Asia. At the time, as a newbie, I got myself immersed in the product to understand how it works, which helped me look at every possible aspect of the user journey.
The thought was to pay attention to every element in the design, and guide users on all scenarios and all unexpected states. On different tasks being taken up among the design team, one interesting task I got to choose was to design for all the empty states.
Here I am planning to write on different kinds of empty states, and certain styles we used at Kaodim during the redesign. Hopefully these can easily serve as a quick-guide for any project needs.
Why empty states?
Empty states are important in the user journey, and if not designed properly, can put the user in isolation. This is why we need to identify all the possible empty states and give meaningful context (and suggest next action the user can take from there). This ensures a much better experience for the user.
As a designer, it becomes one’s responsibility to prepare for empty state scenarios — on all the possible ways such states may come, and design for them so that when your product goes out, users won’t go through a flow where they’ll feel lost.
Different kinds of empty states
Simply put empty states are states where no contents can be shown. Different types of empty states include:-
1.Clear States / when content in the state was cleared by the user. Eg: cleared or archived chat list, cleared inbox, all photos deleted, etc.,
2.Error States / User inputs leading to errors. Eg: no results due to too many filters, screen inactivity resulting session expiry error, App based errors, Downtime maintenance errors, Network-connectivity errors
3.First Use / No content to be shown because user comes to the screen for the first time. Eg: First time on Notifications screen, First time on Messaging screen, etc.,
4.Search Results/ When your search query gives you no results.
On-boarding & First time use
A first time use is where user gets the initial experience with certain features of a product. Designing a step by step preview (aka on-boarding, walk-through) is a good way to present the product features, and thus eliminate emptiness. A user might be able to stick on to the product, or even try some features just because of a well done on-boarding states.
Optimizing Search results
Kaodim is a search and discovery platform for services. As a user you reach the home screen to explore available services. There can be many ways a user can get no results at all. This can be by searching a place where a service is not available, or a service that is not being provided at all. In such situations, to extend the product experience further from feeling blankness, an intuitive empty state can be put in place.
Error States
Well thought error messages are examples on good designs. It assures users about the actual reason behind the search failure. The language tone to communicate is also important so that the communication doesn’t seem too techie or system-generated. Additionally a CTA (call-to-action) leading to the next step can be of help.
Once you identify all the error states, use a consistent design approach. Use colour choices that aligns to your product/brand. The error states should be helpful and act as a guide to what issue a user is facing.
First Use & Clear states
First use states and Clear states can be almost similar, or the same. Clear states happen when a set of tasks are completed by the user — eg: all messages cleared in the inbox, no notifications in the screen, etc.,
As with the cleared inbox, it may feel like an achievement for the user. So the empty state can be something in a positive tone saying the user got “all caught up.”
Conclusion
You can try different design patterns when you design for empty states. Interactive elements in the screens with animations, or simple non-interactive images. The latter is easier compared to the former. Always have at least one line of text that explains the state. Do remember not to use too many colours or visual elements in a way they become a distraction. Try to sound polite and sound funny. Bring in personality for the brand, and bring delight to the customers instead of frustration.
Now this seems shorter than what I expected. Phew, but I still hope this write-up helped you understand a bit on about empty states and how we designed a few for Kaodim mobile app.
As a designer focus on all the user journey, and not only on the happy-flow. Kick start the design process, brainstorm with the product and engineering team. As with my experience, I worked close with my peers, the tech team — product folks, developers, and QA folks. They are all great resources for everything you need to know about tech constraints. Be coherent (this is the hot word nowadays), make your product more user engaging and make it interactive and intuitive.
It’s been an eventful 2 months with Kaodim. More things to get done, and I only got started. Watch out for more!
( ＾∇＾)
Wanna be a part of our awesome team? Discover excitement! Join the Krew: http://careers.kaodim.com/
