UI State Checklist for Developers and Designers

I find the most common problem with any design is the lack of accounting for state change. No matter how experienced you are, it is really hard to account for every edge case 100% of the time.

Over the past year, I have been experimenting with a small framework of three questions to act as a starting point for any design/dev team when looking at a fresh design about to be built.

The Checklist Basics

For every UI element in a design, ask yourself three questions that the answer to will change as each element is considered.

• What does [the element] look like when [state]?
• How does [the element] interact when [action]?
• Where and when are there exceptions to the above rules?

Applying the checklist to a list view

What does [the element] look like when [state]?

• What does the list view look like when there are zero list items?
• What does the list view look like when there is 1 list item?
• What does the list view look like when there are 10 list items?
• What does the list view look like when there are 1000 list items?

How does [element] interact when [action]?

• How does the list view interact when you when scrolling?

Where and when are there exceptions for the rules?

• no other current exceptions based on normal list view

It isn’t full proof and you will still find unaccounted for parts of the design; but I invite you to try it yourself and see if it helps make your design review conversations more efficient.