A Loose Heuristic for Mobile Design

Back in July, in the picturesque city of Madison, WI, a group of enthusiastic and dedicated UX professionals got together for a conference known as UXMad. One of the speakers, Hampton Catlin, gave a talk outlining the “6 Rules of Mobile Design.” I’d like to share his original six with you, along with some modifications of my own, as a Loose Heuristic for Mobile Design.

Hampton’s list of design principles for the mobile web is based on his experience designing Wikipedia Mobile as well as his work over at Moovweb. Here’s a brief summary:

I. Simplicity is a requirement

Given the constraints of mobile design – screen size, bandwidth, processor speed, etc. – cluttered pages are not an option. Each element, image, or option on the page adds to the number of resources required on page load as well as the number of things a user has to process.

II. Balance brevity and comprehension

Oftentimes the gut reaction to “get rid of everything non-essential” is actualized as “get rid of everything.” The obvious problem with this approach is lack of context – something that’s required for comprehension. Simplicity, then, is the delicate art of taking away while leaving just enough for comprehension. Hampton’s example, taken from his iterations of Wikipedia Mobile, displays this concept beautifully:

III. Understand, then optimize, your core value proposition

The better we understand our users, the better we can provide them with access to the features and/or content they desire. That much is obvious; however, mobile users may want different features and/or content than desktop users. For example, when working on Wikipedia Mobile, Hampton optimized data retrieval. He eliminated the ability to edit and create content, two things readily available on the desktop version of the site.

IV. “Where” is more important than “who”

Environmental Psychology studies how our surroundings influence us. This could not be more true for mobile. Instead of tailoring things to users it’s better to focus on their context – what they’re trying to do right now and what we can do to facilitate that.

V. Assume terrible dexterity

Designing interfaces with (small) elements placed close together is a recipe for disaster. Hampton suggests to give it to a young/drunk/old person and see how they do. Apple’s Human-computer Interaction Guidelines suggest that touch targets, at a minimum, be 44px by 44px.

VI. The footer is a dead zone

When’s the last time you actually scrolled all the way to the bottom of a mobile site? Was there anything worthwhile down there? If your answers were “I don’t remember” and “No,” congratulations! You’re a typical mobile web user. Catlin argues against putting content in the footer for this exact reason. Why waste time on content that will never be seen?

My edits and additions

Hearing Hampton’s talk served as a catalyst for ideas I’ve had floating around my head for months now. I’ve always known there were serious differences in mobile design. Here’s my take:

Combine rules I and II

Hampton’s 2nd rule (brevity vs. comprehension) isn’t much of a rule. While rule #1 suggests simplicity as a requirement, rule 2 simply explores simplicity as a design principle. Keeping these separate feels superfluous.

Mobile users want one thing

Emphasizing our core value proposition gives us a better experience overall, but I suggest taking this one step further. Mobile users often want one “thing” as soon as possible. My corollary to rule III? By making the path to that one thing as clear and efficient as possible we save users time.

Assume distracted, disrupted, and intermittent use

Mobile users spend about 70 minutes/day on the mobile web; Hampton suggests these are in tiny doses of 3-5 minutes at a time. They’re almost always doing something else, meaning their attention is divided, and, at any moment, an urgent matter can distract them. We need to take these into consideration in our design and ensure things are easily recognizable.

The state of our websites/applications should be immediately apparent. Operations shouldn’t rely on things that might be easily disrupted by connectivity issues, such as session variables.

Good experience is a subset of performance

Performance is absolutely crucial to a good user experience. The most elegantly designed website is useless if the user has to wait several seconds for each page load. There are several other posts with further details on how to improve mobile performance.

Provide access to the “desktop” version

Regardless of how many hours we’ve poured into our mobile designs, some users will have a knee-jerk reaction. Others may locate things faster using the conventional (read: not mobile-optimized) solution. Failure to provide a link back to the full versions of our sites may lead to frustration, and nobody likes frustration.

Test on as many devices as possible

Unfortunately, the mobile device market is intensely fragmented. My experience shows that all devices have their quirks and that means some users may be left out to dry. There is, of course, a limiting factor of how many can feasibly be tested, but some is always better than none. Use market data to guide your testing decisions.

Conclusion

There you have it. Think of these guidelines like you would think of a Heuristic Evaluation – put your design up on the wall next to it and weigh the pros and cons of each suggestion. But please, don’t take this as canon – the world of mobile web is diverse and full of interesting use cases. Adapt, amend, maul, and destroy as appropriate.

About the Author

Brad Orego

Brad Orego is an aspiring Experience Designer, Web Developer, Entrepreneur, and Dancer currently living in Madison, WI. He’s fascinated by the integration of virtual and physical worlds, and strives to create technology which improves everyday life. He currently works as the UX Lead for Nextt, and runs a startup called Trinker. Keep up with him on Twitter or his personal website.

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Nice summary. Goto desktop version is not only needed in case of optimizations, but due to features/content.

    Google’s very guilty of this, his mobile version of search is unnecessarily stripped of features I use on daily basis (search in my language, list only X time old, search in forums etc.), which is very frustrating. So I would say one should try to keep the functionality user is used to in desktop version – and if it’s not possible to include it on the functionality’s primary screen, consider linking to some “advanced” mobile-optimized page, where these extra options would be.

    • That’s a great point about the content differences. Mobile versions are inherently crippled (or, at the very least, have a different interaction style), and sometimes you can’t offer all of the content on a mobile site. Rule #3 speaks directly to your gripe with Google’s mobile site.

  2. Great post, really helpful info…

    One question though, you mention “provide a link back to the full versions of our sites” which makes sense — do you have any tips or suggestions on the best place to put the link?

    Thanks :)

    • There seem to be two common places to put it: all the way at the bottom (e.g. m.ikea.com, m.stanford.edu) or all the way at the top (I actually can’t find examples of this right now, but I know I’ve seen it).

      Personally, my approach is to condense any of the main navigation of the page into a single control (i.e. a drop- or slide-down menu) and put it in there. This way it’s space-efficient yet it lets your users get to it quickly (versus having to scroll the entire length of the page).

  3. Lots of my clients want websites with all the bells and whistles but I always try to make each site as simple as possible, or create clean layouts. This is a really helpful post :) Thanks!

    • What I’ve found is that it’s a lot easier to get clients to understand the different contexts and use cases associated with mobile. After that, they tend to back off wanting a full feature set because it’s obvious that’s not the best approach.

      I’m glad this was/is helpful :D

  4. Good post – I especially agree with the importance of location and context when designing for mobile. I’ve found assuming a distracted and disrupted use is more true for phones than tablets – which are used during leisure time and in more stationary conditions more and more. All in all, good pointers. Thanks!

  5. Hey Brad,

    This article is definitely helpful in understanding approach to good mobile UX. I’m a technical recruiter in Chicago and my only focus is front end development. I like to be as knowledgeable as possible when talking to hiring managers about design/dev. I do have one question: do you think one person can be very skilled at Javascript and also be a designer or should these roles be kept separate?

    • There’s certainly nothing wrong with your designers knowing how to code. In fact, it’s really helpful to have someone that can speak both languages. I’m personally one of those people – classically trained as a Comp Sci major, but drawn to the design side of things through my studies in Psychology.

  6. Great information on these mobile requirements. You’ve kept it appeasing & useful. Examples used clearly help to improve my design skills for the end user.

  7. One other important issue for mobile design is this is not a smaller desktop and you have a total different approach. I think designing for “one thing” is very due to the serial and sequential aspect of mobile.

  8. Thanks for this I really like your idea love it all.

Related Posts