User Interfaces are typically quite dynamic, as content can change depending on user interactions and system statuses. Whenever possible, include mockups of how these situations should look.
Ideal State
Typically, the ideal state is what you think of designing first. All of the content beautifully fills in the card, and everything looks balanced. The text perfectly fits into the available area.
Partial State
In a partial state, the card is missing some content (but not all). Here’s how the card looks with a tiny description but no image. Now, no need to design all the possible partial states for this card; just include the edge cases you want the developer to develop solutions around.
✨ Project Check-in:
In the project file, mockup a partial state for the card.
The partial state gets even more interesting when you zoom out to think about how this card fits into the app. When there’s only one card shown, there is a lot of blank space to do something fun. We could use this space to show trip ideas.
Blank State
What does it look like when there isn’t any content to show? In the card we’re designing, there’s a blank state for when the user didn’t upload an image for a trip. And there’s also the possibility of not having a trip description. What happens then? Perhaps there’s a prompt to add content.
✨ Project Check-in:
In the project file, mockup a blank state for the card.
Loading State
How should the card look when the page is loading? You could show a skeleton UI or progressively load the image.
✨ Project Check-in:
In the project file, mockup a loading state for the card.
Full State
Consider the text overflow. What happens when there’s too much text to display in the trip count, name, and description? Does text wrap/truncate? Is there a style for overflow text (ellipsis, fade out)?
✨ Project Check-in:
In the project file, mockup a full state for the card.
Now, this isn’t part of the design file we’re working in. But let’s consider what happens when we think about how this card fits into a page layout. But what if there are a lot more cards?
- Should cards continuously appear as the user scrolls? This is called infinite scrolling, and you’ve probably seen it in apps like Pinterest and Google Images.
- Should a button appear to “Show more” cards in sets? Or how about a “Show all”?
- Or should pagination appear?
Resources:
- Designing Dynamic UI States – Related Treehouse Workshop, explanation of states
✨ Exercise: Content States
Task summary:
- Mockup a partial state for the card
- Mockup a blank state for the card
- Mockup a loading state for the card
- Mockup a full state for the card