Month: January 2012

Mobile UX Principles

Below are a set of user experience principles based upon writings and presentations by various mobile design experts, trying to define some core bedrock of ideas to guide tactical decision-making.

When in Rome… Leverage platform OS models, metaphors, and elements to achieve an experience consistent with user expectations for that device. For example, Android users expect “touch and hold” to call up a contextual menu of options, while “touch and hold” on iOS causes the object to “wiggle,” ready for deletion. And avoid desktop idioms such as floating windows, hover states, resizable panels, scrollbars, etc.

Balanced coherence: As appropriate for your app, balance functional and visual coherence across mobile, web, and desktop channels. Yes the functionality, capability, and visuals may vary per OS (see When in Rome…), but the experience should be intuitive and familiar when switching from one platform to another. Every pixel of the interface should add value to the user experience. Make it beautiful, and make it feel like a family.

Speak its power: Create clear, explicit, and discoverable UI controls that convey exactly what they do, like a light switch. Mobile users are often “on the go” and prefer obvious clear actions to complete tasks.

Animate to delight and orient: Leverage mobile OS animations and transitions to show the placement of hidden controls, suggest orientation/navigation/location, and add delight. For example, upon first launch, gently animate a hidden search field to visually cue the user to its placement.

Pivot, snack, bursts: Support “snacking” by enabling users to pivot through tasks and information in quick bursts. Remember, the user is not chained to a desk for hours. They are often in a state of “constant partial attention,” multitasking across physical and virtual contexts, sometimes one-handed while doing something else.

Edit ruthlessly: Don’t cram an entire desktop app into a phone or tablet. Focus, prioritize, and simplify to what matters most. This includes verbiage, imagery, features, buttons, icons, and especially menu commands, which should be exposed in clear visual ways.

Beware “fat finger”: Provide easy recovery from accidental taps and keep critical controls separated. Ask yourself: How can a mobile user still make use of this app with one hand while holding a coffee cup?

Minimize typing, maximize defaults: Despite auto-suggest, typing on a phone is difficult. Use defaults if possible, or carry-over from previous saved sessions/states, etc.

Think about the ecosystem, not just this device: Don’t design a mobile app in isolation. Keep in mind the ecosystem of functionality; your app should express a unified look and feel across multiple channels and devices. This is especially true if designing for multiple mobile OS platforms.

Focus on being useful, straight-forward…and fun! Don’t forget the cool factor of using mobile devices and apps. It counts towards your product’s brand perception, especially in over-crowded app stores. Users will reject your app brutally and quickly!

For your mobile UI, always ask…
– Can users make sense of it…quickly?
– Does each screen speak its power?
– Can I simplify this?
– Is this intuitive?

Mobile Design Slides & Articles

Rachel Hinman on Mobile UX

Design Experts on Designing Mobile UX

Mobile UX Archetypes

The Lifecycle of a Mobile App

5 Trends for Tablet Usage

6 Strategies for Multi-screen UX

---

* Mobile Intro >
* Mobile Considerations >

Key Mobile Design Considerations

When designing for the mobile UX, there are some key considerations to bear in mind, versus designing for stationary situations like a desktop.

1. Device
Know the medium you’re designing for, the various phone/tablet/device characteristics in detail. Make the most of the platform. Mobile devices have on-board GPS, compass, camera, accelerometer, microphone and other functions. Whatever the handset does normally, do that. Inconsistency leads to errors and frustration.

• Optimize for the uniquely mobile experience of your device, don’t just shoehorn existing desktop/web app into a mobile device.
• Be aware of the following typical mobile device traits:
• Richer, stronger pixel density (i.e., iOS “Retina display” for iPhone 4) that allows for finer details of text and imagery (and animations, transitions, motions overall)
• Multiple sensors: gyroscope, proximity sensor (to your face/ear), accelerometer, camera(s), speaker(s), and microphone(s) and GPS too…
• Also most devices have some combination of Wi-Fi, Bluetooth, and cellular data, as well as ports for USB and/or HDMI, etc. (various data connections)
• Such devices are part of some ecosystem (i.e., iTunes, Android Market) for app discovery, delivery, usage. There may be other appliances or peripherals as well, like dock adapters or USB add-ons. How might your app take advantage of that, if at all?

This site lists primary mobile devices with suggestions on device testing within a reasonable budget. Knowing your device is vital!

2. Person
Be mindful of multitasking user in chaotic environment, trying to maintain continuously partial attention (CPA). The mobile impulse usually boils down to one of three mindsets:

a) I’m micro-tasking. Optimize for quick bursts of activity. Identify the recurring tasks and then polish, polish, polish.

b) I’m local. Take advantage of location, audio and video sensors to establish context.

c) I’m bored. Distract me by taking me on a journey of discovery.

Mobile users are often multi-tasking, using a phone one-handed, or in a hurry. Minimize errors and make users more efficient, by storing preferences and recent queries, and suggesting matches. Reduce cognitive load and opportunity cost (Surface key actions and data with minimal user effort)

3. Context
Sympathize with the context the device UI is being used for. Consider the human relationships among information, things, places, activities. Think about semantic, social, spatial, temporal relationships.

Note that the contexts of use are constantly in motion, from loud chaotic spaces (a coffee shop) to quiet discreet moments (a movie theater). Be sensitive to the fact that the contexts may be changing, unlike being chained to a desk for hours and hours mostly creating/consuming large portions of content. Think small, snackable chunks of pivotable information and screens that can interrupted anytime, painlessly with zero failure.

** PC’s are found in a fixed, predictable environment, large screen enables multi-tasking, keyboard/mouse for input

** Mobile devices are in highly dynamic environments, with small screen/limited text input, the UI consumes whole screen, hard to multitask effectively

4. Activity
Participate in the culture you’re designing for; cultivate “mobile mindfulness” for the user/device/tasks.

The primary activity is likely focused on something easily achievable in a small-screen device form and given the constantly changing context/environmnent. Not long, drawn-out multi-step sequences but tightly chunked, pivotable tasks and screens. Focus on user needs, not just cool tech solutions or tactics. Platform technical abilities like GPS or accelerometer should be a guide, not the focus.

Be careful about “looking backwards while moving into the future”–the “rear-view mirror” effect (via Marshall Mcluhan) of cognitive habits and social conventions getting in the way. Invent new possibilities but be aware of historical conventions that linger.

---

* Mobile Intro >
* Mobile Principles >

Primer Introduction

This series represents a comprehensive summary of some core ideas, guidelines, and principles that enable the creation of an exceptional mobile user experience. If you or your team is interested in “mobilizing” an existing desktop/web app or inventing a new mobile app, this offers an overview of what is involved. Then consult with an expert UI designer to begin a collaborative design journey…

** An excellent resource for mobile UX design is Luke Wroblewski’s own Mobile First presentations and writings. Highly recommend! **

What does “Mobile UX” mean

A “mobile user experience” in practical product design context refers to designing products with user interfaces that are optimized for various existing and emerging mobile devices: smartphones, tablets, e-readers, hybrids (like the Motorola Atrix). Small screens and touch-based gestures typify this genre of user experience. Laptops, netbooks, and ultrabooks can arguably be considered “mobile” in an academic sense, but my focus here is mainly OS’s, platforms, and devices targeted for usage by a single person on-the-go across changing contexts, rather than stationary situations.

Why “Mobile UX” matters

Per my recent blog post, there are several major reasons why designing an exceptional mobile UX is vital for companies today.

• The rapid popular proliferation of mobile devices among customers & users
• Mobility is fast becoming the top strategic priority for hi-tech firms, including competitors and customers
• Mobile lifestyles are becoming the norm with workshifting paradigms and emerging device-friendly generations of users (Gen Y, etc.)
• Cloud is hot. The expectation to have quick, ubiquitous, anytime/anywhere/any device access to cloud-based information (files, apps, settings, histories, profiles, etc.) has quickly become the norm.

In addition, I highly recommend studying this article about mobile UX strategy tips for mobile web, tablets, and phones.

Mobile UX Process

Designing for a mobile UX follows the similar path as designing for any other world-class digital product, with iterative phases of Discovery, Concepting, Refinement, Evaluation, and Implementation with specs and other documented visual & interaction details.

However, the difference is simply this: the deep involvement of the actual devices that are being designed for. If you are designing for iOS, make sure there’s deep understanding of working with an iPhone/iPad, built into your design process. Ditto for Android, Playbook, Windows Phone 7, etc. Make sure you are not designing/iterating/evaluating in a vacuum separate from the device. Emulators and mock-ups can only get you so far. They are ultimately insufficient and leave unanswered issues of human factors, ergonomics, physical settings, environmental factors, which can impact the value and quality of a mobile UX.

If you design and build mobile first, you will get to the core of your features and brand value.

---

* Mobile Considerations >
* Mobile Principles >

I recently led the design of a new product feature that enables Windows to be re-skinned as an iOS style app. Sounds cool, right? But what’s really cool isn’t the just the UI–which is pretty nifty–but a team collaboration model we affectionately refer to internally as “3-in-a-box”. Getting Product Management, Engineering, and Design all in the room together to identify the issues, explore alternatives, make decisions, and refine the final release…And I do mean literally “all in the room” together, for a few intensive, dedicated days, face-to-face. Not using remote web conferencing tools or writing tedious passive-aggressive emails ;-)

This is a model we are strongly advocating at Citrix internally. While it sounds like basic common sense (we’ve all heard the chants about a “3-legged stool” and seen many Venn diagrams than we care to count) but actually doing it and making it work…that’s a different story! Some personal thoughts around “3-in-a-box” below:

---

* Many (traditional) software cultures can become quite comfortable with “doing it the usual way”, with lots of “throwing over the wall” and waiting for someone to take ownership with next steps. Getting lead folks together in a room to make decisions together is a big cultural, habitual shift…and that’s kinda scary for folks! No more hiding behind emails or multi-tasking on conf calls, silently inattentive.

* Face-to-face interaction forces everyone to commit. The physicality and locality of presence in the same room requires attention, focus, engagement, etc. Especially when everyone is encouraged to take a whiteboard marker and sketch out ideas!

* To make this collaboration work requires executive support from your respective VP’s/GM’s. I don’t mean a dictatorial “you must do this” command, but truly enrolling their trust, making sure they recognize the benefits, and acknowledge its value to the overall product development process and strategy for the business unit and/or company. Showing this exec support to the teams lends additional credibility and motivation, which is vital.

* Kicking off the engagement requires the lead designer to set a strong posture from the get go. Show conviction and authority and willingness to explore, fail, iterate TOGETHER. Set the agenda of what will be and what won’t be discussed. Clarify roles of who does what, and who doesn’t do what. Don’t assume anything and be firmly direct. This helps develop healthy respect and credibility for the rest of the sprint’s duration.

* The designer should use this as a great opportunity to educate others about design methods, how to evaluate alternatives, open the kimono on design decision-making, justifiable explanations for why something may or may not work, etc. Really making efforts to include PM and Dev to be a part of that dialogue, so they too are contributing and actually “designing the product” collectively.

---

For this particular project, we completed two valuable design “sprints” (for lack of a better phrase, as it was not strictly Agile):

The first sprint was about overall UI design direction setting, addressing the core requirements (already defined by prior research and PM tasks), per known (or yet to be investigated) technical limitations. Whiteboarding, pixel comping, real-time coding of modules/elements all occurred during that week. Lotsa late nights! We itemized the issues and powered through them one by one, taking breaks as needed.

Our second sprint was several weeks later as the Dev team was finalizing their front-end code, towards UI freeze. This was the prime moment to try out builds, slice up final tweaked assets, generate last minute alternatives per technical hiccups, and do any “over the shoulder” art directing with the developers. Fit & finish! It all matters and really requires face-to-face direct interaction to succeed.

The result: a much better product overall we could all be proud of and truly call a version 1 (rather than a tech preview). Also, a positive team rapport and strong desire to improve things further for v2, both in terms of the product and our team dynamics. This has become a positive example that we hope to shepherd across the rest of the company…

We recently held a #CitrixDesign summit on mobile design, featuring Hugh Dubberly as our guest speaker to kick things off, with his talk on Service Design Principles. Hugh’s talk superbly and profoundly laid the ground work for our day-long discussion around what exactly constitutes “Mobile” ecosystems of software and service…as well as the future of interaction, going deeper into multitouch and gestural interaction. Here are some of the key points raised:

• What is Mobility? Not a precise definition (which inflames silly arguments) but shaping out the contours of what it means to “be mobile” and to “design for mobile”. Is there is a shift from device-centric attitudes towards lifestyle-based approaches, where “Mobile” refers to an evolving set of behaviors, expectations, cultural norms? So how does this impact interface design across device types and screen forms? Is there an emerging “mobile vernacular” surrounding the flow of information, delivery of services and lifestyle patterns? Hmm!
  
• Mobile “cross of pain”. Riffing on the popular cross diagrams from Richard Buchanan at CMU back in the day, we discussed the intersection of four particular touchpoints for mobile design: a) People (their expectations, attitudes, and generational factors too) b) Activity & Contexts (which shape what is relevant, salient, useful, etc.) c) Interfaces & Devices (what are the modes and means of interaction at the pixel/sensor/material level of mobile) and finally d) Systems & Services (the overarching connections to form the ecosystem, how they support human purposes in an integrated, holistic manner)
• Mobile as extension of natural self/abilities. A profound yet basic viewpoint emerged, that of the device and “mobile” in general as being something that amplifies our daily normal actions. Think of the sensors, apps, camera, voice inputs and so forth as ways to extend whatever we are trying to do (contact someone, get directions, record a moment, remind yourself, etc.). The mobile condition is ongoing, per our bodies being on the go in different spaces/places. The mobile device/software/ecosystem should reflect that dynamic, and is a personalized way to achieve our self-directed goals accordingly.
• Continuous, seamless, fluid experience. Many have seen this slick NFL Network commercial, with a football player enjoying a single game across changing contexts, with a single mutating device. It’s all one single seamless experience, regardless of device or scene and feels fluid, not disconnected or episodic. That’s one of the ultimate aspirations for a mobile experience to achieve and deliver. Lofty goal but doable!