Not Your Parent’s Mobile Phone: UX Design Guidelines For Smartphones

Advertisement

In your pocket right now is the most powerful “remote control” (as Drew Diskin put it1) that has ever existed. It is no ordinary remote control. It can harness everything that all of the previous mass media2 (television, radio, Internet, etc.) can do. People aren’t using them just for simple entertainment or for phone calls. They have become the hub of our personal lives.

Smartphones are what younger generations know as just phones. The iPad (aka the tablet) is giving your grandma’s PC a run for its money. You certainly are holding some amazing futuristic technology in your hands. It will be even better tomorrow, though, so why does it matter to us or to users? Moore’s Law3 tells us, in effect, that these things will continue to become capable of more than anything our minds can think up.

Two smartphone users4
(Image: Denis Dervisevic5)

It’s no longer just about the evolving power and capabilities of these devices. It’s about us and how we, too, are changing. The user’s expectation of a great experience is the new standard. It falls to us as UX professionals to apply our skills to make this happen on the vast array of devices out there. It’s not always easy, though. The mobile realm has some unique constraints and offers some interesting opportunities. While covering all of the nuances of mobile UX in one article would be impossible, we’ll cover some fundamentals and concepts that should move you in the right direction with your projects.

Mobile Constraints

The mobile realm has many constraints. Here are several of them, along with thoughts on what to keep in mind as you come upon them.

Form Factor

The most obvious constraint going from desktop to mobile is screen size. Mobile screens are smaller. A lot smaller. You need to seriously consider this when designing and developing your application. Antony Ribot6 makes a good point in his presentation, “Mobile UX: The Intricacies of Designing For Mobile Devices7,” when he says, “Mobile is not about making things smaller.” It’s much more than that. We need to consolidate what’s on the screen. Boil the application down to the most critical functions and content, and then lay them out strategically in the available screen space. For example, action buttons should go in the lower third of the screen, where they are most easily tappable.

Input Methods

Another obvious constraint is the absence of or difference in certain input mechanisms, and the addition of others. First, there’s no mouse. No mouse means no hover states. It also means that there must be some other means of clicking and navigating content. In most cases, this other means is the user’s finger. This difference in input method can be quite exciting because it opens the door to new possibilities with various gestures. Many standards are forming around these new gesture capabilities: pinch to zoom, swipe to scroll, etc. Take the time to include support for these gestures in your application. In addition, think of new gestures that you could add to enhance interactivity.

Discovering new gestures can be a powerful experience for users. It adds a sense of excitement, mystery and achievement — “Hey, I just figured out something new!” Take care, though, not to change the function of standard gestures unless you have a very good reason to do so, or else you will cause unnecessary confusion and frustration in users.

Gesture Card8
(Touch Gesture Cards (PDF): Luke Wroblewski9)

One other caveat: consider the type of application you’re developing before getting too fancy with gestures. If it will be highly utilitarian in nature, then keeping things simple and straightforward would be best. If the application is for a specific task, then users will want to complete it as quickly and easily as possible. They don’t have the time or desire to discover new interactions.

Technical Constraints

While the capabilities of these devices improve with each new release it, keep in mind their limitations. Things like battery life and processing power are important to consider. Draining the battery or bringing the device to its knees with memory leaks or processor-intensive operations is a surefire way to destroy the user experience. This is why testing on the device early and often is imperative. Simulators cannot be trusted.

Data Transfer and Pricing

This will not be an issue for users who have unlimited data plans or who work on Wi-Fi networks. Unfortunately, unlimited plans are becoming increasingly rare. So, be sensitive to the amount of data you are transferring to and from your application. Keep the sizes of assets to a minimum, while maintaining quality. Don’t transfer data unnecessarily. For example, implement delta updates whenever possible (i.e. update only the data that has changed since the last transfer).

Food Sense - Responsive Web Design10
(Images: Mediaqueri.es11 and Food Sense12)

Much has been said recently about Responsive Web Design. This approach does create some challenges with minimizing data transfer. Jason Grigsby13 has a very good write-up on the specifics14. To summarize, CSS media queries — part of the magic sauce of responsive design — do almost nothing to lessen the overhead of data transfer to mobile devices. Resizing or hiding unwanted images still requires the full images to be downloaded to the browser. In addition, resources such as JavaScript libraries might be downloaded to mobile devices without even being enabled for users.

Good General Practices

What follows are some good general principles to keep in mind when designing and developing mobile applications.

Mobile First

Luke Wroblewski has a great post on the “Mobile First15” methodology. In a nutshell, focusing on mobile first puts your mind in the right place. It forces you to focus on and prioritize the most important features and content in your application. It also extends your abilities by offering new tools and services that are not available in a traditional desktop environment. By approaching your project with the mobile-first mentality, you will start off on the right foot.

Behaviors and Archetypes

Build on the behaviors and archetypes that your users are already accustomed to. This will go a long way to reducing the learning curve of your application. If your application responds predictably to a user’s interaction, then the user will immediately become more comfortable.

This applies to more than general behaviors and archetypes. You will want to use design patterns that are specific to your target devices. This means building multiple interfaces for various devices and platforms, which is extra work; but it will pay off in the long run because users will appreciate that your application behaves in the manner they’ve come to expect from their device. For example, iOS design patterns dictate that tabbed navigation be located at the bottom of the screen, whereas Android devices have it along the top.

As with most good UX principles, if done properly, the user won’t even notice, while their increased comfort level will encourage them to continue exploring the application. Which brings us to our next practice.

Encourage Exploration

The more that users feel comfortable with and enjoy your application, the more likely they will explore it. You may want to lead them down certain paths or provide a few cues or coach marks16 on how certain things work, but still allow your users to “discover.” I’m not suggesting that you make the application complicated or ambiguous; rather, for example, if there are multiple ways to perform an action, one more obvious and traditional and the other a quick and easy gesture, then the user might come to prefer the second option once they discover it. Such solutions improve the overall experience if they prove to be quicker and more efficient than traditional interactions.

Provide Immediate Feedback

We’ve all witnessed our less computer-savvy peers clicking violently and repeatedly on a button trying to force it to do whatever they so desperately want to achieve. Touchscreens only add to this anxiety because they don’t provide that tactile response that we’ve been conditioned to expect from tapping on a keyboard or clicking with a mouse. Providing some indication that the application has registered the user’s interaction is critical, whether it’s a small bounce at the end of a scrollable region or a subtle color change at the tap of a button. This not only compensates for the lack of tactile response, but assures users that something is happening even if the screen isn’t updating immediately due to slow network traffic or some processor-intensive operation.

Context

Person using a tablet at home17
(Image: S. Diddy18)

Another glaring difference between mobile and desktop applications is context. With a desktop application, you can be relatively certain that it is being used in a particular environment. With mobile, all bets are off. This gives us some exciting opportunities: location-based services, on-the-spot social networking, the opportunities are vast.

It also raises some unique problems. Do your research to determine the context in which the majority of people will be using your application.

If you’re targeting on-the-go users, then you’ll want to build the application for speed: bold, obvious, stripped-down selectors and a streamlined workflow. If your application is more akin to a breakfast-table browser, then content will probably be more important to the user, but they may have only one hand free to navigate, while the other cradles their morning coffee. These are just two examples; the point is that your mobile application could be used in any number of contexts, and you will need to take the time to figure out how to provide the best experience to the user in their context.

One other thing to consider is the device(s) that you are targeting. Research suggests that a majority of tablet owners use their device mostly at home. Only 21% take their device with them on the go, compared to 59% of smartphone users who consult their device while out and about.

Ideate in the Wild

Crowd of people19
(Image: Niall Kennedy20)

I’m borrowing this one directly from Rachel Hinman21 because she is spot on. The best way to determine context and to conduct research is to immerse yourself in the environments in which your application will be used.

Hang out where your target audience hangs out. If possible, do the things they do, go where they go. This will serve a couple purposes. First, it could give you ideas for great applications to build. Maybe you’ll observe common pain points and come up with a solution to alleviate them. Or, if you already have an idea for an application, you could gain valuable insight into how the application might be (or is being) used in the wild. We’d be surprised quite often by the difference between how we intend for our application to be used and how it is actually being used. This information can help us iterate our ideas and continually improve the application.

Conclusion

The way mobile devices are being used is changing all the time, and users are increasingly expecting exceptional experiences from the applications they use. While the mobile world has many constraints, its many more opportunities make building mobile applications a worthwhile venture. Keep in mind the constraints, and focus on mobile first when beginning your project.

Remember that innovative features and cutting-edge design aren’t as valuable to users as we may think. Users are concerned with getting the information they need through a sometimes limited connection, or perhaps getting accustomed to typing on a screen without any tactile feedback. Not everyone has an iPad… yet.

Talk to real people, follow common archetypes, and keep the context of your target users in mind. These guidelines should help you create a great experience in your mobile application.

Additional Resources

Design patterns:

Design guidelines:

Mobile statistics:

Article sources:

(al)

Footnotes

  1. 1 http://www.crn.com/news/networking/212500632/web-tool-of-the-future-your-phone.htm
  2. 2 http://www.slideshare.net/fling/mobile-20-design-develop-for-the-iphone-and-beyond
  3. 3 http://en.wikipedia.org/wiki/Moore's_law
  4. 4 http://www.flickr.com/photos/denisdervisevic/4568726847/in/photostream
  5. 5 http://www.flickr.com/photos/denisdervisevic/4568726847/in/photostream
  6. 6 http://twitter.com/#!/ribotmaximus
  7. 7 http://www.slideshare.net/ribot/mobile-ux-the-intricacies-of-designing-for-mobile-devices-presentation
  8. 8 http://www.lukew.com/touch/TouchGestureCards.pdf
  9. 9 http://www.lukew.com/touch/TouchGestureCards.pdf
  10. 10 http://mediaqueri.es
  11. 11 http://mediaqueri.es/
  12. 12 http://foodsense.is/
  13. 13 http://twitter.com/#!/grigs
  14. 14 http://www.cloudfour.com/responsive-imgs-part-2/
  15. 15 http://www.lukew.com/ff/entry.asp?933
  16. 16 http://pttrns.com/coachmarks
  17. 17 http://www.flickr.com/photos/spence_sir/5470303560/
  18. 18 http://www.flickr.com/photos/spence_sir/5470303560/
  19. 19 http://www.flickr.com/photos/niallkennedy/668454536/
  20. 20 http://www.flickr.com/photos/niallkennedy/668454536/
  21. 21 http://twitter.com/#!/hinman
  22. 22 http://pttrns.com
  23. 23 http://mobile-patterns.com
  24. 24 http://www.androidpatterns.com
  25. 25 http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
  26. 26 http://developer.android.com/guide/practices/ui_guidelines/index.html
  27. 27 http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx
  28. 28 http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics
  29. 29 http://www.slideshare.net/ribot/mobile-ux-the-intricacies-of-designing-for-mobile-devices-presentation
  30. 30 http://www.lukew.com/ff/entry.asp?1259
  31. 31 http://www.springbox.com/insight/post/Getting-Started-with-Mobile-UX-Design.aspx

↑ Back to topShare on Twitter

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    You guys are posting less and less coding tutorials. UX is fine but it’s getting way too much in my opinion.

    • 2

      Francisco Inchauste

      October 6, 2011 8:23 am

      @Florian We are actually trying to post more coding related articles than before. If you go to our Coding section you’ll find several articles posted each week. We do the same for the UX Design section, as well as the new WordPress section.

      Thanks for your comment!

  2. 3

    Why post links to iOS and Android design guides while leaving out the extremely detailed (and award-winning) Windows Phone design documents? Even if you don’t like the company, they’ve still produced remarkably high-quality information on mobile look & feel and interaction.

    • 4

      Francisco Inchauste

      October 6, 2011 10:35 am

      @Ted Thanks. We’ve added a link to the Windows Phone guidelines.

      Additionally, we have been working on an article dedicated to designing for Windows Phone and introduction to the Metro interface. Should be published soon!

    • 6

      Yea i’m sorry but what gives? So the company doesn’t have the best reputation, but the WinPhone is pretty amazing. The more I use it and compare with both the android and the iphone, the more I like it and feel the others are clunky and outdated. Smashing Magazine has done a lot with giving info and resources to it’s readers for the iphone and the android – but there’s some serious slacking going on with the WinPhone.

  3. 7

    Nice article Tim. Definitely things to keep in mind when doing my next web app. Thanks!

  4. 8

    I really dig Hinman’s research methodology. It’s like an anthropological experiment!
    I also agree with starting a design concept within the constraints of mobile application first. It just leaves so much more breathing space down the road.

    Cheers

  5. 9

    Great article. I came to a similar conclusion that approaching mobile first is a great way to focus your efforts on the key functions of your site. Also I found its a good way to get stakeholders engage with trimming down the list of functions: Provide them with the flexibility of web and it can be hard to get them to prioritise functions. Present the situation in a mobile context and they are driven to pick out the key functions.

    *Obviously there are differences between the desktop and mobile particularly regarding what the user is trying to achieve, but I found this is still a useful technique.

  6. 10

    Norman Harebottle III

    October 7, 2011 5:51 am

    Looks like the iOS Design Guideline link is dead, try this one http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html for the iOS Human Interface Guidelines section for JUST UX related guidelines.

    • 11

      Dude you could’ve psseerd *67 before you dialed the number so it would say Private’ on the caller ID screen.

  7. 12

    It helped me . Thanks

  8. 13

    I think your UX Articles are great. With the field becoming more and more wide spread, it gives me an opportunity to share these articles with some of my coworkers so that they can learn the basic concepts without needing to have me engaged on all projects at all times.

  9. 14

    That’s sweet! I’m an iPhone user, but also ecixted to see if the Windows Phone 7 is gonna change the game at all.

  10. 15

    Last night, my future sister-in-law told me about her “phablet.” It’s smaller than the iPad mini, but wider than the average smartphone. It’s a phone and tablet (stylist included). It was a smack-in-the-face reminder not to limit yourself to certain break points, remember to think future friendly, and always, always *always* be on the lookout for new technology. It’s cheesy, but we live in such a COOL time.

    Thanks for the article!

    ~Steph
    studiofj.com

  11. 16

    As a web designer turned mobile designer I wonder what the next form factor will be. Wearables could be a game changer… or maybe just another distraction. No matter what comes next the fundamentals will always be the same. Thank you for the insightful article.

    -AC
    designedthought.com

  12. 17

    I really liked the section when you discuss about the environment of the user. Really inspiring!

↑ Back to top