Mobile UX Primer: Principles
by udanium on January 18, 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
Design Experts on Designing Mobile UX
6 Strategies for Multi-screen UX
Mobile UX Primer: Considerations
by udanium on January 18, 2012
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 UX Primer: Intro
by udanium on January 18, 2012
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.