My biggest takeaway from the second Offline Camp in Santa Margarita, CA — plus toast!
During the midday session of the second day of the camp, I joined a session to talk about design patterns to express the states of being offline, syncing, etc.
What are we talking about when we talk about being “offline”? Here’s an example. Imagine you’re on a flight that is about to take off. You visit a web page on your phone — a newspaper site for instance — and as you’re reading, the cabin crew asks you to put your phone into airplane mode. You do this and continue reading your article. The plane takes off and you soon finish your article. You click the next article link at the bottom of the page. What happens? Does the next article load? Are you interrupted with a page that tells you can’t load that resource because you are now offline?
Well, if the web site developers have implemented offline patterns that pre-load articles and cached them to your device while you still had a network connection on the ground, then you’ll happily navigate to the next article even though you’re in the air and offline.
Back at the session, my primary concern was contributing to the work to ensure that the group didn’t end up with a purely visual pattern proposal. I wanted the concepts to have a firm semantic foundation that can be expressed in non-visual media as well. From the discussion, we developed 3 concepts that identify areas of semantic relevance for offline experiences.
Conceptualizing offline experiences
Freshness
Freshness refers to the age of information that is stored on your device. If you visited the newspaper website in our example above, cached some articles and then turn off the network, then those articles will begin to “age” in a sense. Until you turn your network back on and the website can query for new articles or updates to cached articles, your information will become stale. Freshness is relative to the type of information. A newspaper article might become stale after a few hours if the story is currently developing. A Wikipedia article, by contrast, might remain fresh for weeks or months.
Designers should express freshness, relative to their content types, in the UI. This might be accomplished through indications of last updated time or last synced time.
Reach
The concept of reach describes you’re ability to fetch information to your device. You might reach into a connected external hard drive, or a local LAN network; you might reach into a peer-to-peer or a private virtual network. Most often, we’re reaching out to the internet for information. If the source of information retrieval and the source’s reachable status are critical to user decision making, then those states should be surfaced to the user.
Several icons have emerged to express this state, such as the cloud with an arrow pointing up into it (an example of reaching into the cloud). In terms of semantics, I proposed the states of: reachable, unreachable, unknown.
Assurance
We spent a lot of time exploring metaphors to describe the anxiety of not knowing if something you’re writing online has saved. Did it save to my computer locally? Did you save to an online location? If I refresh the tab, will my text disappear? Do I need to press a save button or does save happen automatically?
We had a difficult time coming up with the term assurance. We explored metaphors of correspondence — sending letters through the mail without knowing if they have arrived; gossip — the pressure one feels to tell a secret and the moment of joy one experiences when the secret is divulge; storage and hoarding — the anxiety one feels when wealth or valuables have accumulated in one place and the dread of disaster and loss builds.
Ultimately, we decided that the anxiety of loss and release is resolved through assurance that one’s property is safe and delivered. Today, we tend to express assurance through words like synced or saved. Saved is a well known concept and a good one to reuse. In the future, when content might live in multiple places, across distributed networks and at different version points, we will need a richer language to produce a sense of assurance in our users. We did not develop iconography or terms to express this idea beyond synced or saved.
Expressing offline syncing to the end user
The last design issue we discussed is how to express the ability of a site to cache a site offline and the progress of this activity. We came up with the progress toast pattern. A toast is a notification that rises from the bottom of the screen…like a slice of toast in a toaster! By combining the toast unit with a progress bar, we can express the ability of a site to cache itself offline and the progress of this activity.
Activating the toast bar expands it, providing a space to explain the operation and perhaps link to settings that allow a user to control the offline experience. The contents of the toast will depend on the specific needs of the application.
Summary
As you are designing your website or web application and thinking about how it will behave under spotty or unavailable network conditions, try framing the problem in terms of freshness, reach, and assurance. How will you express to your users that the content is up to date, safe and available across their network?
And don’t forget the (progress) toast!
