Visual Design: UI States
Allows you to communicate the state of a page or a component and set the user expectations.
We all like the people who interact with us appropriately for different situations where we need support, appreciation or guidance. Similarly, users love the products that respond and give proper feedback according to the situation. UI states help a lot for the system to respond and guide the user by scaling the components and pages in designs to different situations.
States help us in planning the behaviour of the UI for different conditions. When you are designing wireframes or visuals, after completing the initial designs, identify different states for each component and the screen by going through the list of states. In general, there are nine states in design that are applicable for the screens & design components.
Free & Discounted Udemy Courses — Explore Now
The general nine states of design are listed below:
- Nothing — The state of a component/page when it does not have any data yet. This is considered mostly when the user interacts with the component or the page for the first time.
Image shows the nothing state of a Documents list for a new user.
Why is it important
- To guide the user on what might exist in that page/component and set the expectation.
- To showcase what value it might give and encourage actions.
2. Loading — The state where the intended content is loading and did not yet appear to the user. Definitely not an ideal case when everything is good. But we find ourselves in these loading states for various intentional and unintentional reasons. (Internet strength, App rules)
Loading state of LinkedIn is shown in the above image
Why is it important
- To avoid angst by giving a clear status that the intended things are going to appear.
- To avoid drop offs by letting them know that things are in process to appear.
3. None — The state where there is a component/page. But presently it does not have anything to showcase. Ex — No new issues in your phone, No tasks for today.
None state for search is shown below.
Why is it important
- To give a quick status for the user
- To guide the user in taking required actions
4. One — In this state, you have some data available. In a list, it might be when you have one item (or one left).
The above image of a google drive has only one folder in it.
Why is it important
- To plan how does the screen look when there is only one element
5. Some — This state is usually what we think about while designing the component. This might be the most frequent state that user sees after the initial data input is done from the user’s end.
The table with some rows is shown in the above example.
Why is it important
- To plan how the system should behave for the most common cases.
6. Too Many — Having too many results/ information in the same component/screen. Eg: Too many search results (You might use pagination for it).
The above example has too many rows in the table such that it is using pagination to accommodate all in less real estate.
Why is it important
- To plan scalability in design by understanding the extremes situations of overflow and still avoid overwhelm.
7. Incorrect — Error state, something is wrong with the component or screen and error occurred.
An incorrect state of the card number is shown in the above payment portal screen.
Why is it important
- To identify the error states.
- To plan on how to report errors to the users.
- To guide the user in recovering from errors.
8. Correct — Added the right information the component needs and it’s good to proceed now.
A correct state of the input field is shown in the above image.
Why is it important
- To give status for the user that actions are being performed in the appropriate way.
9. Done — Success state showing that the application received what it needs and users don’t have to worry about it anymore.
The success state of invitation sent is shown in the above example.
Why is it important
- To drive a positive emotional state for the user regarding his actions.
- To give a clear status on completed things so that users need not worry about them anymore.
While designing these states, check with the [heuristic principles] to avoid usability issues.
Other than these general nine states, there are other states focussed on actions of users.
Normal state: Every element will have a static state which is the state of the element before the user interacts directly or indirectly with it.
Hover state — This state is planned for showcasing anything text or component is actionable by differentiating the actual state slightly when pointed on the element.
Pressed state — A pressed state communicates a user tap, this is generally used in mobile or Ipad where touch is involved.
Drag state — A dragged state should be designed for situations where users need to press and move an element or component.
Focus state — A focused state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.
Selected state — A selected state indicates which option is selected by the user among all the options.
Disabled state: This is a state that is used when a user is not allowed to take a specific action.
The “Add” action is disabled till the input is in the right format.
Thus, a design with all the states figured out and implemented wins over users’ trust as even in an unanticipated scenario that they may come across would be addressed and taken care of.”
Tips / Best Practices
- List down all the pages and their components
- At a minimum, ensure that all the applicable states (of these nine states) are incorporated according to the context.
- Document all the problems that are needed to be solved while designing the states.
- Design crucial and dependent states in wireframes itself to get more clarity.
- Include the states of the components in the library to reuse them.
Checklist
- List down all the pages and components.
- Identify what states are relevant to each page and component.
- Align the states with existing frameworks.
- Check for inconsistencies in the behaviour of these states in different pages.
- Document the states in the design system.
- Have a states tracker which helps you know which states are left
Related Topics
Quick Question
Select the appropriate stage of design where we need to think about UI states.
- While ideating on the concepts.
- While finalizing the components that should be used.
- While doing the journey maps.
- Before giving handoff to the developers.
Leave your answer in the comments section below!
Free & Discounted Udemy Courses — Explore Now
