Ten things web designers need to do before going mobile

16 April 2009CHI*A

One

Live a mobile life

2

Start using a phone for accessing the Internet. •Use it as much as you can; don’t whip out a laptop or wait till you get home. •Try not to make it an iPhone.•If you have the means or resources, switch to other devices periodically, so you see the strengths and weaknesses of the various platforms, and don’t get stuck in a single UI mindset.

Two

Believe it’s a phone

3

It's a phone first. •Your customers might have a high end large screen phone with unlimited 3G data and/or wi-fi and a battery charger at hand ... or they might not. And you probably won't know. So: fast, responsive, light. •Add weight only when it significantly enhances the user experience. •Want more interaction logic? Make an app instead.

Three

Use mobile analytics

Desktop web tools won’t cut it

4

Use a mobile analytics package. •Bango, Admob, Flurry, Pinchmedia. •The desktop-focused packages don't understand mobile.

•Analytics are boring. Any ideas. This is a generic cool photo instead, but it sorta implies heatmap, etc. Thoughts?

Four

Know your

platform

5

Learn the capabilities of your platform. •Your developers may not already know.•For example, we were told by a developer that Android couldn't use CSS layout to do something we provided code for; they insisted on using tables. •If you only do what they say you can, you aren't serving your users.•Above: VZW doesn’t allow links in SMS messages they didn’t originate. How does this affect your install process?

•stream of consciousness: platform defines what you can and can’t do but if you don’t know what it can’t do you can only do what you think it can and your design gets smaller with each assumption - especially when developers take things way

Five

Target the devices

your users have

6

Think carefully about how to target devices. •Remember that most people do not have a high end phones. Are they target customers? You might not want to abandon them.•But don't shortchange your high end device users, either. Like personas, you might need to work with multiple types of devices.•Texting and even web are not high end features, think what you really mean by categorizing features in any particular manner; don’t just assume everyone knows what a “smartphone” means anymore.

•While not a low-end appeal, it works I think.

Six

Design for contexts of use

7

Think carefully about the users and what they are doing. •Don't just consider the "in a cafe" or "on a bus" contexts, but the "lying in bed before falling asleep" and "while watching television" contexts. (Or even, while “riding a bike”). •And of course "I don't have another device to access the Internet.” •Are your users task-based or otherwise-engaged? If you don’t know, find out.•A mobile is not used like a computer on a desk or lap. It can only capture attention for brief periods.

Seven

Understand the region and

culture

8

Remember that devices vary from country to country. •Don't assume that because a phone type is popular where you live, that it's popular where your customers live.•Devices, networks, and customers will vary from region to region.•Knowing is not the same as understanding.

Eight

Learn the implications of intermediaries

9

Learn about what impact operators, transcoders, and aggregators have.•They can change your content and may block messaging.•They can also give you access to deeper user data.

Nine

Use device repositories

10

Learn about assistive technologies. •You should know what device description repositories are, and how they can help you. E.g., DeviceAtlas, WURFL (shown)•Make your content and layout and software intelligent so it behaves appropriately based on device capabilities

Ten

Send only what is needed

11

Don't put all rendering logic on the page. •Don't, for example, pull three image versions down to the page and then render only one.

•Obviously, I don’t think much of this photo•I am not sure I love this point as stated, anyway. Something else about client vs. server, or page weight or what?

Eleven

Design with rules and patterns

Not pixels

12

(and last of all) embrace flexible design. •Abandon pixel-perfect design.•Photoshop rendering is not your friend.•Use rules, charts, themes, patterns, styles. •Use modular design principles and polymorphic objects.

Twelve

Be part of the community

13

Come to Design for Mobile•April 20-22, 2009 in Lawrence•Or visit the design pattern wiki http://patterns.design4mobile.mobi.•Or at least read some books, subscribe to blogs, etc. •Don’t live in a cave, or silo. Understand the whole mobile ecosystem.

Barbara BallardUsability, human factors, interaction design, industrial design, marketing, engineering, entrepreneurship, MBA

Product designer, product strategist, blogger

Mobilist14

P.O. Box 44-2302Lawrence, KS 66044

785 838 3003

littlespringsdesign.comdesign4mobile.mobi

15