This article is the eighth edition of the Advent of Patterns series. In this series, running from December 1st to December 24th 2024, I will document one design or programming pattern I have noticed recently. Read more about this series.
Applications that aggregate or have lists of information commonly show previews of information in an overall view of the system. An example of this pattern can be seen on email clients. When I go to my emails, I see a table with a list of entries. Each list entry has the essential information I need to evaluate what action I want to take next: open, respond, archive, mark as spam, and more.
ProtonMail shows the following pieces of information for each email in your inbox or result on a search page:
- The sender.
- The title.
- Whether the email is part of a thread (indicated by a
[1],[2], etc. counter). - When the email was received.
The following screenshot shows an information preview for two emails:
While the inbox could show more, there is a fine balance that an email client needs to tread in terms of overloading the user with information. Every additional email adds information that a user needs to process. Every additional field of information displayed for each email further adds to the cognitive overload required to process an inbox.
When I was designing my web reader, I continually asked myself the question “what information is absolutely relevant to see?” I decided that the three pieces of information I needed were:
- Post title.
- The domain of the author, which is useful to me to understand the source of a post.
- A link to the post.
Here is a screenshot showing my web reader and a few entries:
The information previews are intentionally minimal. All posts are nested under a heading associated with a specific day. This allows me to reduce the amount of information on the screen and improve my ability to focus on and skim entries. I then usually open posts that interest me in a new tab to start reading.
The pattern of an information preview that gives a user a high-level overview of what is available on another page appears across web design. Another common use of the pattern is the “link preview” that appears across messaging applications. When you share a link in Slack, Discord, or other social platforms, the link is commonly “unfurled”, or expanded, to show information about the link. This can include the article title, meta description, author, meta image, and more.
Link previews in messaging applications give the user more context about the content available on a page. While a lot can usually be inferred from a URL alone – such as through the domain name and the slug of a post – the richer link previews give the user more information. Sometimes, a link preview could provide a full post, such as is the case when you share Bluesky links on Discord. Here is an example of a full Bluesky post available in a link preview:
Embedded links to other content are a form of preview, too. Many websites show embedded previews of social posts that are relevant to content. Embedded previews represent content, but more context is usually available if you go through to the full version. For example, an embedded Bluesky post will show the post itself but not the comments – the comments would be available on the main source
Browser tabs also have previews, too. Firefox, the browser I use, has two types of previews: the condensed view and an expanded view. The condensed view is open by default; the expanded view appears when you hover over a tab. The condensed view shows the tab icon and as much of the document title as can fit. The extended preview shows the full document title, domain, and a preview screenshot of the document. All of this is useful information to help a user make a decision about which tab is relevant to the task they are trying to accomplish.
Hovercards and link contexts are more examples of information previews.
The idea of an information preview also makes me think about the role titles play in clear documentation. The clearer the title of a document is, the more likely it is someone is able to evaluate if the document pertains to what they want to know about.
What examples of information previews have you seen? Let me know!
