UX cheat sheet: Preview and full display

Explore the different ways you can preview and display content to make navigation easier for your users.

My dad once told me that graphic design is the art of fitting a newspaper inside a matchbox, and I would say a lot of interface design is the same.

In this cheat sheet, we will look at different patterns to preview and display content items.

1. Preview and full display
2. Preview
3. Full display
4. Mix and match combos
5. Closing thoughts

1. Preview vs Full display

Good design shows the right amount of information at the right time.

For example, let’s say that we have a banking platform, and we need to show the user their transactions. We have two options when showing them stuff, we can either show them (a) everything about all their transactions for the last 23 years, or (b) just what they need to know, and then they can click to see more if needed.

The solution is usually (b), to show the user just as much as they need and they can investigate further if needed. Why do we choose this? Well, it comes back to some basic laws of UX:

• Hick’s Law: The time it takes to make a decision increases with the number and complexity of choices. The more complex a list of items is, the harder it is to make a decision, and it would be easier if the list was simpler.
• Pareto Principle (similar to the 80/20 rule). The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes. This means that the more we focus on the most likely actions, the better we can make the experience.
• Cognitive load. Cognitive load is the amount of brain power you have to use to understand something. The less information there is, or the more clearly it is communicated, the less thinking someone has to do.

So what does this all mean? Well, in this case, the simpler and more targeted we can make an experience, the better it will be for our users. To keep our user journey as efficient as possible and reduce cognitive load, we can…