Mobile UX Essentials

by Luke Wroblewski January 19, 2011

At the BAYCHI Interaction Design event tonight, Rachel Hinman (Nokia) talked about where and how to begin designing for mobile in her presentation on Mobile UX Essentials. Here's my notes from her talk.

  • Mobile is an interesting space but how do you get involved in it? Companies are hungry to know what to do with mobile but teams aren’t sure where to start.
  • If you’ve been designing for the PC, there’s a few things that are similar: how to work in a rapidly evolving field; how to create experiences within technical constraints; and similar tools and processes
  • But a mobile phone is not a computer.
  • Computer: predictable environment, large screen, multi-tasking, keyboard & mouse for input.
  • Mobile: highly variable context & environment, small screen & limited text input, UI takes up entire screen, hard to multi-task.
  • Many people try to shrink/port over desktop experiences. But the two experiences come from different lineages. We tend to see the World through a rear view mirror & reflect our past in what’s new.
  • Mobile UX presents you with new ways to allow people to interact with information. This means you can break free of old habits and what it means to “compute”. Be mindful of your own thinking –don’t be anchored to the past.
  • Step one: know the medium you are designing for. No excuses: go buy a modern mobile device.
  • Step two: participate in the culture you are designing for.
  • Step three: embrace the chaos. Mobile is a hot, violate space that is always changing.

The three most important attributes of great mobile experiences: are uniquely mobile, are sympathetic to context, speak their power

Are uniquely mobile

  • When the Web first came around, brochure-ware was common. We borrowed broken models, we were too focused on tactics, and we didn’t focus on what the Web could do well.
  • Mobile is a unique medium – focus on what it can do well. Historically mobile has been seen as constraint-heavy but these can be opportunities: small, always with you, good for timely information.
  • Technology can help guide but it should not be the focus. Do what mobile can do well and you’ll find the technology that can make it possible.
  • Focus on needs not tactics. Need vs. solution. Try to use different research techniques so you can triangulate from different angles.

Are sympathetic to context

  • Mobile context: what separates mobile from other experiences? Context. But that is a slippery slope. Mobile can be used everywhere so what is mobile context?
  • Context is about breaking things down into nouns. Think about your relationships to things. Relationships are semantic, social, spatial, and temporal. When you are making experiences, it’s not that only one relationship is active –it’s a focusing exercise. Which context is being emphasized now?
  • The Web is good at people and things and semantic relationships –OK at social.
  • Mobile good at spatial and temporal relationships. Spatial relationships deal with physical places. Temporal relationships are time-based. You can pinpoint people in space & time. This is a beachhead for mobile.
  • Always design for partial attention & interruption: on mobile you don’t want people immersed in their devices –they often need to be aware of what’s around them.
  • PC is like scuba diving. Mobile is like snorkeling.
  • Reduce cognitive load & opportunity cost
  • Ideate in the wild: you are automatically embedded in context. So ideas are born in the environment they’re used in.

Speak Their Power

  • A light switch speaks its power –you know how to operate it based on its form.
  • We can annotate interfaces on the Web –there’s room. On mobile, when someone looks at an interface they need to know how to use it. Know the differences between CLI, GUI, NUI, and OUI –We are currently in a GUI/NUI chasm. GUI requires metaphorics, containment, and place. These notions are becoming more brittle. We’re reaching the edges of the GUI approach.
  • It’s no longer what you see is what you get. It’s now what you do is what you get.
  • Ruthless editing is part of the NUI design process. Reduce things down to main 3-5 things people want to do. Cut out the rest.
  • The task efficiency model: get something done. Mobile is more about possibilities –learn how to pivot through information quickly. Present a host of options and allow people to navigate through them.
  • Tasks are about completion. Possibilities are interactions that improve value over time, facilitate exploration, or sense intent.
  • Web pages are like boulders. Mobile experiences take boulders and break them into little pebbles and stitch them together

Design activities

  • Go outside and brainstorm ideas. Focus on spatial & temporal ideas.
  • Use a card game to break mobile experiences into small index cards, then build a great “hand” of cards for a good user experience. Think about how to pivot people through that information.
  • Prototype, prototype, prototype. Use it at every stage of the process. Get it on to a device as soon as possible.
  • Ask: do users grok this? Does each screen speak its power? Can I simplify this? Is this intuitive?