The Nine States of Design

Modern UI teams are designing components first; Interfaces are merely the thoughtful composition of components. This leaves an often glaring hole for users on “the unhappy path” — The places where users may, intentionally or not, stray from your idealized flow. As we learn to craft systems rather than pages, we must invest effort into shaping these often missed states of design and create with a component lifecycle that can support everyone. Here’s the lifecycle as I see it:StatesNothingWhat happens before your component does anything? Maybe it’s the first time a user sees it. Maybe it’s not activated yet. Essentially, the component exists but hasn’t started.Jonas Treub makes sure framer gets you up to speed.2. LoadingThe dreaded state. In a perfect world, no one would ever see this; Alas, here we find ourselves. There are plenty of ways to keep your loading state subtle and unobtrusive. Facebook does a pretty good job of this:Facebook uses a “dummy post” rather than a traditional loading spinner.3. NoneYour component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this thing!”), or to reward them (“Good job, everything is taken care of”).Luke Seeley knocked this one out of the park.4. OneYou have some data. On an input, this may be after the first keystroke. In a list, it might be when you have one item (or one left).Luke Seeley again for MetaLab.5. SomeThis is usually what you think of first. What is the ideal state for this component? Your data is loaded, you have input, and the user is familiar with it.A big comfy dashboard from UENO.6. Too manyWoah there! The user has overdone it in some way. Too many results (maybe you paginate them now), too many characters (maybe ellipses?), and so on.Good ol’ pagination from Pete Orme7. IncorrectSomething is not right about the component. An error has occurred.A nice error state from dunked.com8. CorrectGood to go! This item has had its needs satisfied.short form Ionut Bondoc ( ►IB )9. DoneThe user’s correct input has been received by the application. They don’t have to worry about it anymore.Igor Chebotarev gives some positive feedback.

Typed at

Share your love

Leave a Reply