On Mobile, Design for Interruption

Let’s face it: we use our phones when we’re driving, when we’re in line at Starbucks, even when we’re in the restroom at the ski lodge and there’s 10 people waiting to birth something unmentionable. So what happens to our mobile experience when we are interrupted? Where does our mobile experience go?

Great apps, like YouTube’s for iOS, allow the flow to continue from the point of interruption. There are some accommodations that can’t be made – for example, if you are viewing a video in full screen, you’ll lose that view (tested in iOS 8.1). But the result is acceptable: the video is paused and in the state we left off before the interruption occurred.

Another handy feature that the YouTube product as a whole has (not simply in iOS) is: the History content section. If my experience is interrupted – say, because a cop has pulled me over – then after the cop leaves, I can pick up where I left off by going to my History and finding the video I was recently watching.

The champion in this pursuit of designing for interruption is ‘the Cloud’.  It’s this remarkable technology that is allowing digital companies like YouTube to create seamless experiences for its users. Habitually, all internet connected experiences are frequently transitioned – not just interrupted – purposefully and wistfully from one internet connected device to another. For example, on any given day I’ll be sitting on my couch looking at a YouTube video on my phone. It’s possible that later, when a friend arrives, I may launch YouTube on my Apple TV and pull up that same video. And still later, I may again reference that video while sitting at my desktop computer. This seamless, wistful experience would not be possible without the almighty cloud, which allows for synchronization of all my data across all my devices.

Viva interruption – and viva ‘le cloud’.

interruption flow mobile
interruption flow mobile

What’s Essential to Know about SVG

SVG is a relatively new technology that allows for improved rendering of image-like content. It’s a preferred method for adding artwork to mobile and web apps because it performs faster than traditional jpg and png images.

SVG are essentially vectors – you can increase and decrease their size without losing quality (using code)

SVG are better than icon fonts because: they are image tags, which makes them better for accessibility and they have more controls (e.g., class name).

Apps are built using templates. Here’s how to templatize SVG:
use inline HTML, and wrap the SVG in a DEF tag, as DEF prevents it from rendering. You can use it one time and then point to it in the templates. SVG is rendered in the DOM, so there’s no HTTP request (HTTP requests slow apps down) – then use CSS and JavaScript to make it increase or decrease in size, animate, etc.

1) a PNG might render faster if the SVG has a lot of vector points – thus SVG is more for boxier artwork, such as charts and graphs or logos that don’t contain a lot of complex lines

2) SVG needs fallback support for Android 2 (and IE8)

based on LukeW’s notes from C.Coyier’s lecture:

icon set in this artwork can be found here:

My Mantra for Mobile Design

There’s a lot of mantra in discussing mobile, such as ‘keep it simple’, ‘feature rich, user poor’, and ‘remember the 80/20 rule’. With such competition, i’m hard pressed to think of a new catch phrase to describe the process of mobile design.

I suppose if i was using mobile to type my mantra, it would come out in the form of a short text character burst: ‘delight them with simplicity and efficiency’.

Ok, so I guess I just wrote my mantra.

Well, now that i’ve written it, i have to consider how to advise accomplishing it. One thing that can’t be omitted – so we might as well start there – is knowing our users.

Of course, it’s easier to know our users if we already have an existing product. Then again, it’s easy to assume we know our users because we have an existing product – and the tried and true response to assume is don’t assume, or you make an ass out of u and me.

So how do we really get to know our users? *User interviews is irrefutably the best way. However, analytics helps too. For those with an existing product, examining the analytics to see which 20% of our features are being used on mobile devices is a primo place to start.

Then there’s the startups with a unique idea – they don’t have users yet. Therein lies the benefit of not having to edit somebody else’s work, i.e., you can start from scratch. Have you ever been handed a document that’s been authored by others, and that you have to edit? The task can be overwhelming. It’s like inheriting a code base developed over several years – versus creating the whole application from scratch. Or a piece of furniture from Ikea – and being told to add onto it, but make sure it matches.

My advice? Go Japanese – design, design, design – add layer upon layer upon layer – then start taking away, stripping down, removing, re-shuffling – heck, throw it away, breathe, then start from scratch. Ultimately, you’ll enjoy the process because you’ll be constantly problem solving – and you’ll wind up with something so simple – and efficient – that it delights. The quality will surface in your work, while the waste will get siphoned down the drain.

This Japanese design process i’m referring to applies to whether you’re re-writing an inherited design; or starting from scratch with a new one. In the case of a code base, Git Hub is our hero – and in the case of a tech spec, I simply duplicate my document and keep a series of sequential revisions in Google Docs. (For you Ikea builders, you’re on your own).

In summary, when designing for mobile, in order to ‘delight them with simplicity and efficiency’, we have to understand our users through user interviews and analytics – and we have to iterate by building and tearing down, forgetting and rebuilding – over and over again. As a result of our design process, we’ll understand our product so intuitively that we’ll be able to serve up it’s good parts and omit the rest. In return, our users will feel delight for the efficiency in our design and (hopefully) fall in love with our creation.
*note: in that we can’t user test without user interviewing, I’m bundling user interviews and user testing into the one term user interviews

Search vs Navigation

Often times, search doesn’t work well.  It is not uncommon to get a Search Results page with a message reading “no results found for [your search term]”. That’s why it’s important to not rely on Search; rather, to have it be supplemental to navigation. Thus, when weighing the relationship between search vs navigation, it is key that navigation educates and leads users to find the essential content in a web site or application; and search is a bonus treat for power users that know what they are looking for.

Let’s take a look at how educates their users using meticulous navigation. The search filters in the Category Landing Page in the example below show us that the products come in a ‘waterproof version’ and an ‘800 yard’ version.

amazon search results
amazon search results

A user who knows exactly what they want to buy will type into search ‘waterproof rangefinder’. However, a person whom is browsing for rangefinders might land on this page, and then realize that they exist in a waterproof model. That kind of discovery is great UX because it leaves the user feeling empowered – they have gained knowledge, and thus feel smarter. And it’s better for business too, because an educated user is one that’s more likely to revisit t the product for future purchases – and/or make the current purchase they are contemplating.

UX Tool:

One way this ux tool UserVoice can be used is to quickly install a forum in your company’s website to get feedback from colleagues while iterating on a Product Roadmap. Thus, everybody has buy-in while components of the Roadmap are being developed.  Your colleagues can submit and up-vote/down-vote ideas.*

From the UserVoice website:

What is UserVoice?

UserVoice is a software-as-a-service provider of customer support tools that include:

  • Feedback forums to understand the ideas users care about most.
  • A support ticket system to track and respond to customer support requests.
  • A knowledge base to answer common questions and help users find the information they need when they need it.

*additional info: Bruce McCarthy, Lean Roadmapping: Where Product Management & UX Meet. Video.