Patterns of #Card User #Interface #Design
Posted on July 9th, 2014
Christopher Tse, Saikiran Yerram
7/8/2014, Amplify, 55 Washington Street, Brooklyn, NY
A web page, an app, a file, or an api all convey information. Organizing, categorizing, etc. these items can improve our ability to understand and communicate. Christopher presents a framework for thinking about ways to make better tools to aggregate and magnify the power of these pieces of information.
Christopher correctly labels all these items as carriers of information and uses the term ‘card’ to signify their similarity to physical cards that we can order, spatially place, add notes to, put in containers, etc. He proposes this as a metaphor for our use of information in the future.
He talks about different types of cards from 1. permanent records to those that are 2. teasers to get us to further explore topics to cards that are 3. alerts which demand immediate action, but are ephemeral. The unifying concept is that each contains three elements:
- Context – environment (location, time, previous behavior)
- Lens – the compelling part of a larger body of information
- Triggers – opportunities for the user to do something
The context is usually invisible to the user. The lens will be longer for longer-lived cards. The trigger is more prominent in the shortest-lived cards.
Cards can also be grouped different ways:
- Narrative containers – helps you tell a coherent story. Can be nested. Saikiran provided an example when teaching math.
- Discovery containers – harness the collective. E.g. Pinterest., Facebook, Twitter.
- Conversation containers- directed by participants
- Workflow containers – chain a series of actions.
Cards are part of a revolution in knowledge as we move from a high-level single point of view toward a more emergent POV. It draws on many inspirations including the vetting of scientific research by peer review and the distinction between linear story-telling and the emergent story telling in many video games. (see Story Design for Games).
You can get the deck here