Categories
Content Experience

Humanizing Dates and Times

Content often relates to time in some way.  How to present time most effectively involves design decisions. Previously I discussed why content designers should think in terms of slices of time rather than specific dates.  In this post I want to elaborate on how audiences think about time, and how to humanize temporal information and present it in a way that fits everyday thinking.  Never mistake a deadline for the real goal.  Temporal information must support goals, rather than become the center of attention. It should be synchronized with our needs.

The Decline of Schedules

Twenty years ago many households had a VCR.  The only notable aspect of the VCR’s mundane appearance was its digital clock, which was often blinking after the electric power was interrupted, and no one could figure out how to reset the time. The blinking VCR clock, vainly calling for attention, became the butt of many commentaries about poor usability.  But why VCR clocks might go unset for so long went less remarked.  The VCR can tell us the time, but it didn’t tell us what we needed: when programs were being broadcast that we wanted to record.  Eventually interactive program guides provided the information users wanted, and they could choose the program, rather than the time.

Even today we have digital clocks that serve little purpose. Many microwaves have them. People have stopped wearing watches because time-displays are available on so many devices.  We synchronize our lives by pinging each other, rather than scheduling dates. We automate our calendars to pay our bills, and so doing worry less about today’s date.  For many activities,  audiences consider time as a choice to manage, rather than an obligation to fulfill.  People want the convenience of on-demand services, and scheduling is a barrier to that.  The more people fall out of the habit of scheduling, the harder the task of scheduling becomes.

Despite this big behavioral shift, content designers for the most part have not yet developed alternative paradigms to the clock- and calendar-centric expressions of temporal information.  Times and dates tend to be opaque: obstructing answers that audiences may be seeking.

Time as Information

How time can be used as a way to reveal options is an emerging challenge.  This weekend I was considering a visit to a storied landmark in Rome, the Castel Sant’Angelo. When I Googled to get details about an exhibit there, Google presented the following visual of times when the landmark was most busy.

Google search results displays popular times for visits to a tourist attraction.
Google search results displays popular times for visits to a tourist attraction.

The visual provided me with a rare moment of online delight.  I received useful information that I did not expect.  Tourist attractions in Rome can be busy on weekends, when budget airlines bring weekend visitors from across Europe.  Knowing when the landmark would be less busy is helpful.

The genius of the popular times display is that is answers a question that, while related to time, prioritizes the more important consideration: the experience associated with different times. It’s an example of the kind of temporal contextual information that will be increasingly common with the deployment of IoT sensors capturing time-stamped ambient information.

Dates as Proxies for Goals and Motivations

When people notice a date, they associate a meaning with that date.  If they fail to associate a meaning with the date, they will ignore the date entirely — it is just another abstract number.  An important question arises: Why does this date matter?  What’s significant about it?

Dates are often proxies for goals and motivations.  Does the date, or more specifically, the duration associated with the date, signify our ability to achieve a goal, or does it indicate a lack of progress?  It’s not the date per se that matters. It’s what it symbolizes to us. The date is just an ID number that we translate mentally into a signal of hope or despair.

range of goals and motivations according to time granularity
Range of goals and motivations according to time granularity

Some dates become symbols of us as individuals: they indicate where we are in the passage of time.  Other dates and times express the behavior of something we are interested in.  Dates embody events, which we evaluate with respect to a specific point in time. What that symbolizes to us will vary.

Events are bookmarked by a start and finish.  Those attributes shape four generic questions about events:

  • How long from beginning to end? (Duration)
  • How long since? (Relative time past)
  • How long until? (Relative time forward)
  • Is the event within a defined period? (Defined time period)
Goals associated with generic time-based events
Goals associated with generic time-based events

Embedded within a start date or an end date is a user goal. Users scan for information that would indicate how well they are meeting their goals.  The progress or deterioration of a situation is frequently a function of an event’s duration.  The urgency of the situation can be a function of how long it has been since something happened in the past.  The effort involved with a situation can be shaped by how far the end goal is in the future.  The length of time is a characteristic that can imply significant consequences to users.

The defined time period is a complex situation that arises surprisingly often.  Businesses, universities, and government departments all seem to love time-base eligibility requirements.  People want to know if they are eligible for a rebate, a scholarship, a tax credit or if their product warranty is still valid.  Instead of finding a simple answer, they are forced to compare how their activities comply with some arbitrary qualifying start and end dates.

Translating and Transforming Temporal Information

Focus on how audiences attach significance to time-related information. Provide it in a format that audiences will notice and use.

The presentation of temporal information needs to take advantage of intrinsic capabilities of digital formats — without making audiences focus on the arcane presentation native to those formats.  Content designers should translate temporal information into the language of the audience, and transform temporal data into answers that audiences care about.

Computer time and date formats are precise and granular — forcing audiences to think what the information means in everyday terms. Fortunately, software libraries are available to translate computer dates into more intelligible language.  Among the most useful is Moment.js, a JavaScript library.  Moment can translate time and date information between different locales (non-English as well as different English language variants).  It contains a function called “humanize” which translates numeric values into verbal phrases.  In instead of seeing “1 day” or “24 hours,” audiences can see “a day.”

Moment.js humanize function (via Moment.js)
Moment.js humanize function (via Moment.js)

Moment also reduces complexity by rounding times to whole units that audiences will be able to notice and grasp more readily.  Few people want to see that something happened 27 hours ago; they’d rather see it displayed as happening yesterday.

Moment.js value ranges (via Moment.js)
Moment.js value ranges (via Moment.js)

These capabilities come together to allow Moment to perform near-natural language calculations on dates.  Users can add two months to a date, without worrying about how many days the intervening months have.  They can subtract days from a date, and get an answer expressed as “Last Wednesday.”  The granularity of units can be adjusted, so that information can be rounded to whatever level of detail is most appropriate.  This capability is helpful when users need to know if two dates might fall in the same time period.  For example, if I delay doing something by 45 days, will the activity still be in the same year, or be pushed into the following year?

Moment recognizes concepts such as the beginning and end of the day.  It also has capabilities to parse natural language date inputs to convert them into computer-friendly date formats.  These capabilities will be increasingly important as people interact with computers through voice interfaces.  Calendars don’t work well with voice input and output. People need common language ways to transform temporal information.

Moment.js calendar and relative time options (via Moment.js)
Moment.js calendar and relative time options (via Moment.js)

Framing Time to Support Goals

Humans frame events according to periods that are significant to them.  Organizations sometimes insist on making their customers adapt to the organization’s schedule, resulting in maddening situations involving proration.  Instead of basing schedules linked to one’s own life events, people are expected to follow the schedule and calendar of the service provider.  A better approach comes (ironically) from the DMV [division of motor vehicles], who link driver’s license renewals to birthdays.

We can support audience goals and motivations when we synchronize time-related information around their perspective. People often define cultural artifacts in terms of their decade (e.g., music or TV shows from the 1980s).  Let’s imagine you and a friend both went to university together in the 1990s.  You are both film buffs, and enjoyed watching movies together.  You get in a debate about who was the best actor in the 1990s.  Many questions about superlatives involve time frames. We don’t care who won the most awards ever; we care about who won or was nominated for awards in the time period that’s most significant to us.

You and your friend remember Michael Caine and Tom Hanks were nominated for Bafta awards in 1998.  So which got more recognition during the entire decade?  A seemingly straightforward question, trying to identify the actor who got the most nominations, becomes an involved research project.  Googling the question doesn’t generate an answer: it only generates links that must be read and assessed.

Questions involving superlatives often involve needing to transform date-related values.
Questions involving superlatives often involve needing to transform date-related values.

Film trivia might seem like a pale example to illustrate how poorly content is structured to help people frame their time-related questions. While low in importance, it can be high in the motivation it elicits.  Some people want to know such details, and have trouble getting the answers.  But consider the opposite situation: something serious, but where motivation is low.  When does one need a twice-a-decade medical screening, that promises no fun?  This is the kind of issue that doesn’t align with a specific calendar date.  People need to see a realistic window in which they can schedule the event.  When they go beyond that window they need to receive an appropriately worded communication about how overdue the person is, and the significance of that delay.

Linking Events, Temporal Information, and Actions

When we need to do something is closely linked to what we will be doing and why we are doing it.  Event-related content is intimately linked to temporal information.   Temporal information can trigger user actions.  Temporal information is the glue tying together what’s significant to the audience, and what they may need to do.

When something happens should be secondary to what happens and why it happens.  Temporal information needs to be presented in the most motivating format possible.  It needs to reflect the context of the user, not the context of the clock or calendar.  It needs to be humanized, so people can understand the importance of the time mentioned.  That requires us to think like the audience: to know if they think about the topic in terms of minutes, hours, days, weeks, months, or years.  And it requires us to help them see what’s typical or should be expected.

—Michael Andrews

Categories
Intelligent Content

Are UI Cards good for content?

A user interface format known as cards is gaining popularity with mobile and web designers, and is being used in a variety of contexts.  UI cards can simplify screen design, but they don’t always promote good practices for content.   It helps to know when using cards supports content, and when cards can result in problems for audiences.

What are UI cards?

UI cards are boxes of a fixed width that are containers for content.  They may or may not have a fixed height. They can be placed beneath one another, or beside one another, and occasionally, stacked on top of each other.  The metaphor informing the design of UI cards is the index card or the flash card.  Unlike with physical cards, it is rare that one shuffles UI cards: the position of the card is normally determined by the application.

The recent interest in cards echoes a similar interest in the index card metaphor in the early days of personal computing 25 or 30 years ago.  Apple developed an index-card based tool called Hypercard.  The novelist Robin Sloan considers the Hypercard design as “pretty cool” but notes the negative complaints it created: “It squeezes information into screen-sized ‘cards’ and doesn’t allow scrolling through long documents. The academics agree: cards are too limited. Cards are lame.”  Around the same time, Microsoft released a product called PowerPoint that was also based on the index card metaphor.  It too spawned complaints about how well slides present information.

Today, many leading digital brands use UI cards.   Unlike the earlier card-based software, today’s UI cards only take up a piece of the screen, instead of the entire screen. UI cards have quickly become a common interaction design pattern, and some UX designers even refer to a “card architecture” design concept.

Examples of UI cards

Designers tend to use UI cards in one of two ways: to hold a piece of information from a stream of messages, or to showcase items that are part of a collection.

Streams of messages and notifications are generally not related to one another.  Cards help to separate distinct messages from one another, and provide a focal point for users to see updates.  Streamed content can be either summaries or previews.  Google Now uses cards to show summary information, such as sports scores for a team one follows.  Both Facebook and Twitter use cards that show a preview of content available elsewhere, such as an article.

screenshots of Google Now
Examples of cards for Google Now showing updates for user’s stream

Collections are another major use of UI cards.  Whereas UI cards for streams work well on mobile platforms, UI cards for collections work better on tablets or laptops.  Each card is like a small poster that provides a teaser for content.  These cards often highlight visual content with limited substantive information, and provide a way to scan content, but users must navigate elsewhere to get details.  Pinterest is the best-known example of this kind of card, though many other sites use the card collection concept.  The cards aren’t necessarily intrinsically related to one another: the relationship between cards in a collection is defined by their curator — either the user collecting them, or a brand that is displaying the group.

Why are UI cards suddenly popular?

Cards mesh with current sensibilities about digital content: they package content into bite-sized pieces that work on mobile and social networks.  From a front-end perspective, using cards provides an easy-to-apply layout for a responsive web design (RWD) framework.  With their fixed width, cards can be used in one, two or three column layouts, allowing the same card designs to be used on smartphone, tablet, and laptop screens.   Fixed width cards are well suited to the flexible grids used in RWD.  Visual designers seem to like cards.  When using a fixed length, cards form a perfect grid; when using variable lengths, cards form a masonry layout that looks like a vertically oriented brick wall.

Cards are also popular because they seem to tame content.  Cards are modular, so different content items can be stacked together without calling attention to their differences.  Cards minify content, by forcing content to adapt to the constraints of the card boundary and card visual layout.  Designers like that cards allow different content to be mixed and matched without worrying that the design will become cluttered.

Interaction designers like cards as well.  Cards can break down content into digestible bits that allow users to interact with it.  By offering a container for content, cards provide the suggestion that the content is tangible and personal to the user.  Like a Rolodex card, UI cards can contain personal details, such as one’s flight info.  Like baseball cards, UI cards can be collected, and displayed on a virtual corkboard.  They can be traded as well, or more accurately, shared, through social media.  And cards provide containers to break down sequences of interaction, such as Google recommends for its Google Glasses.

screenshot of google glass cards
Sequence of cards for Google Glass. Source: Google

UI Cards as Interaction Design

Most of the impetus for UI cards has come from the interaction design (IxD) community, rather than the content strategy community.  IxD has various goals for promoting UI cards, but these goals are separate from the goals of content strategists.  When IxD refers to UI cards as “content cards” they rarely are focused on the details of the content inside the cards.

UI cards offer appealing aesthetics: they are well behaved on a grid, and provide fluid behavior during interaction transitions.  Cards present an illusion that everything one needs to know is right there in from of them.  They mimic a bulletin board that can be scanned quickly.  When a user wants to engage with the card, many interaction possibilities are available.  The card can be animated, swiped, or flipped. In contrast to the tedium of scrolling, UI cards allow a range of interaction possibilities.

While offering some fun possibilities, UI cards can privilege interaction over the substance of the content on the cards.  IxD’s approach to content is to design it from the outside in: start with the desired layout and behavior, and then expect the content to fit.  By focusing on the container for content rather than the content itself, interaction design can create problems for content.  The size of the container can dictate the size of the content, rather than the other way around.  The tyranny of form over substance is most acute with fixed height designs that follow a precise grid layout.  Such layouts can sometimes cause content to get dumbed down, much the way PowerPoint presentations can squeeze meaning and break flow from narratives because the format limits how much text can comfortably be placed on a slide.   One application called Citia tries to summarize books on square shaped cards, but the pacing of information on the cards is uneven: some cards are dense with information, others less so.

UI cards can contribute to content usability problems that may not be immediately evident.  Users often like UI cards when they encounter them, and don’t notice their limitations.  They see tidy cards often with colorful thumbnail images.  The cards seem optimized to make good first impressions.  But often, the cards end up squashing the content that must go in them, or omitting content details that don’t fit the layout vision.  The most common problems are truncating content, or hiding content below a hidden fold on the card that’s not visually obvious.  Paradoxically, while cards are meant to provide all needed content with a quick glance, they may have vertical scrolling behaviors within them.  Occasionally, they will even have a line of text or icons within the card that requires horizontal scrolling.  Users don’t know if tapping for more information when content is truncated will result in a hover state bubble, or take them away from the card.  Some content cards hide information by placing content on the backside of the card, requiring the user to tap the flip the card — if the user knows to do that.  So for all the talk about cards being a design pattern and architecture, there seems to be a lack of convention for how to design them.   Users can’t confidently predict how any new card they encounter will behave.

screenshot of cards on a recipe site
Collection of cards from a recipe site. Note that the title on one card is truncated, as are the ingredients on many cards. To see the non-visible ingredients, the user must tap the “and more” text. This is an example of content being squeezed into available space.

Another issue with UI cards is their lack of hierarchy.  When all cards are the same size, all cards look equally important, whether they have detailed information, time sensitive information, sparse information, or optional information.  Visual designers like to feature photo thumbnails on cards to help users scan content for items of interest.  That approach can work well, provided the photo conveys real information and is not simply decoration.  Cards about movies might show images from the movie or pictures of the actor.  But if all the cards are about the same topic, say articles about running pinned on Pinterest, and all the cards show clichéd stock photos of a person running intensely, then the photos provide no information to help the user scan many similar looking cards.  Instead, the user must look at every card individually and try to determine relevance based on limited text descriptions.

Cards as content units

An alternative way to look at cars is as units of content, rather than containers for content.  By focusing on units of content, we can ask: what does the card represent?

Content for cards can be pulled from 3rd parties not related to the card publisher, or content can be provided by the card publisher directly.  With 3rd party content, the card publisher often has limited control over the content.  They may capture the first 30 characters of the title, a thumbnail of the first image provided, or the first four lines of the article.  In many cases the card is simply a preview of another unit of content: a full article available elsewhere.

When brands use cards to present their own content, they should be able to choose content elements more carefully. But having control over the content does not assure that the right content is selected for a card.  Suppose the idea is to provide a card to show the weather forecast.  While simple in concept, it still requires choices about what specific information to show, and how that information is accessed.  When the form is already fixed, the choices for the content are restricted.  A severe weather alert is issued, perhaps an impeding hurricane, but there is no space on the card to show that information.  The card becomes a blob that can’t be enriched with new content elements, because the format prevents such additions.  Brands try to work out what content relating to a topic they can fit on a card, rather than ask what content they want to present, and how might cards help them do that.

Too often, content is simply chopped up to fit on cards.   For cards to be useful, the content on them should have meaning outside of the card container.   This requires designing cards for content from the inside out, starting with the content.

Two recent content applications are pointing to how cards can represent meaningful chunks of content.  The field of journalism is under enormous pressure to become more relevant to audiences, and to increase the speed and efficiency of providing updates.  Cards are being embraced by a new journalistic genre called explanatory news that has emerged to address these challenges.  The news sites Vox and Circa are showing how cards can represent meaningful chunks of content that can be combined to form larger units of meaning.

screenshot of cards from Vox
Example of Vox cards used to explain background content.

Vox uses cards that are attached to yellow-highlighted words “to offer deeper explanations of key concepts.”  Stacks of cards “combine into detailed — and continually updated — guides to online news stories.”    Vox cards are topics, focused around a question, and answer why the topic and question matter.  Vox’s idea is that while news developments relating to a topic are always happening, some core material will be relevant context for any developments about a topic.  The cards signal: this is not breaking news, but it is important.   The linking of the cards provides a way for users to navigate through related topics.

Circa uses a concept similar to cards it calls atoms.  Circa is also working to provide more context for news, and decided to use atoms as a way to structure the information relating to a story, so that the atoms link together to form an ongoing narrative.  Each atom is a unit of content, “a fact, quote, statistic, event or image” and each unit is tagged with metadata.  The tagging of atoms allows readers to identify what’s new relating to a developing story, and to follow specific topics of interest.

Screenshot of Circa atoms
Examples of Circa’s ‘atoms’ which are similar to cards. Each atom represents a different unit of content.

Unlike other card examples,  Vox and Circa are using card-like structures to re-imagine the creation and delivery of narrative content.  The separation of content between updates and background information can be applied to other content genres.  Gartner analyst Todd Berkowitz notes the potential use of cards for content marketing: “I like the notion of being able to update stacks. From a content creator’s standpoint, this is easier than trying to update a whitepaper or eBook. The individual cards also offer re-usability. The Vox Cards can be tweeted, shared on Facebook and with Google+ circles, but providers would also want to add a button to share on LinkedIn. So when you add a new card, a provider could blog about it and also tweet it.”

Cards don’t mean updates are now trivial.  While it is easy to add a new card with new information to the stack, brands need to make sure the information on previous stacks is still current.  For some topics, the background information can be changing as well, even if less frequently than the updates.

Emerging best practices

It’s best to consider cards an interesting experiment, rather than a design pattern that reflects the distilled wisdom of many years of practice.  Still, cards hold great promise, and implemented intelligently, can provide benefits for both audiences and authors.

The value of cards comes from their ability to break apart larger clumps of content into more meaningful units that can be managed and recombined more easily.   As Circa has shown, cards can represent different kinds of information, as well as different topics.  Cards can offer an alternative to conventional articles.  Cards can promote a new workflow for content that is more focused on revising only what is necessary.  Ideally, cards could drive wider adoption of structured modular content.

For cards to realize their potential, designers and authors should stop thinking about UI cards as being like index cards, flash cards, or playing cards. UI cards will often need to be elastic to accommodate content intended for them, and they need to be intelligent, not just animated.  In recent years IxD has become critical of skeuomorphism in design — the reliance on physical metaphors in digital design.  UI cards aren’t made of paper stock, shouldn’t look or behave as if they were.

– Michael Andrews