Category: General Stuff

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!

It’s been a rather hectic & intense year with travel, summits, workshops, etc. Many achievements “unlocked”, so to speak. However, it’s also good to sit back and itemize the critical lessons learned in the course of all the madness of the past year. Here are my top lessons which I will try to carry forward into the new year…

• Don’t go actively seeking to mentor someone; just let it happen naturally. People should seek you out, not the other way around. (yet, gently let folks know you are available!)
• Not everyone responds to your instinctive passion for design excellence the same way. Gotta be sensitive to others’ personal and professional motivators and calibrate yourself accordingly, particularly in difficult situations.
• Always verify someone’s assumptions before suggesting a design idea. You might be wrong, and be unnecessarily intruding into a space not your own.
• Know when to be efficient, and when to be messy. It’s a balancing act that takes care and sensitivity.
• Always clarify who’s exactly the driver/owner/contributor (DACI) first, don’t just jump in. Suss out the situation first (and verify with key folks), even if it takes more time. A variant of “measure twice, cut once” when it comes to organizational issues.
• Especially in firedrill mode, try your very best to be calm, constructive, and optimistic in offering peer design feedback, or even general design strategy advice.
• Assume constant regular communication / education / repetition because everyone is swamped and rapidly context-shifting from project to project. People often forget what you advised or delivered, so don’t get worked up over it. Just gently remind.