Booklet

author

Mike V Dijssel

Design

Design for different states in the user interface

design

Design

|

DESIGN FOR DIFFERENT STATES IN THE USER INTERFACE

It's easy to design only the perfect state. But keep in mind that a large amount of users experience completely different states. So. here a list with different possible states in your UI.

THE IDEAL STATE
This state is the most ideal state that's possible with the perfect content and data.
Most designers only focus designing this screen.
But keep in mind that the other screens may need more attention than the perfect ones

THE BLANK STATE
This state shows how it looks like when there is no content or data to be displayed.
It's possible that an user see this screen when ifs the first time visiting this screen
It's also possible when the user performed an action what resulted in no content getting returned.

THE LOADING STATE
Mostly this state is visible when it's retrieving specific data or an action is been performed.
There are different ways to give visual feedback that the system is loading.
Like progress bars, loaders. spinners, skeleton screens and many more.

THE PARTIAL STATE
This state shows how it looks like when there is only a part of the content or data displayed.
This screen is possible when an user just started interacting with the product.
Normally. they are now working to the ideal state.

THE IMPERFECT STATE
This state shows how it looks like when the content is not optimal returned or used in the product.
This could be very long text, unrealistic numbers, content format missing or content that's loaded in the wrong format.
Is it clear for the user that the content is poor instead of thinking the system is broken?

THE INTERACTIVE STATE
This state shows how it looks like when the user is interacting with specific elements in your UI.
This could be interactions like clicks, hovers. focus or other possible interactions in your UI.
In some cases you can show specific states in your styleguide or Ul cheatsheet.

THE ERROR & SUCCESS STATES
These states shows how it looks like when a user encouters errors or succesfully accomplished tasks.

NEVER FORGET STATES!
Let me know your thoughts in the comments. would love to hear you!

More booklets by Mike V Dijssel

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets