Designing the Mobile User Experience

Jose AlvesInteraction Designer, UX&D

“Understanding and patience of the mobile ecosystem is one of the most crucial skills of the mobile designer.”Brian Fling

Legacy

1894 - Gugliemo Marconi invents the radio.

1971 - James Fergursson discovers the “twisted-nematic” LCD.

1980 - Motorola presents the first portable radio - "DynaTAC”.

1876 - The birth of the telephone.

1980 - Nintendo Game & Watch console.

2000 - Sharp releases the first camera phone - J-SH04.

2000 - Samsung develops the world's first TV phone - SCH-M220.

2001 - The debut of the ipod.

2003 - The first mobile phone with a cursor - NEC FOMA N2051.

2007 - Apple introduce’s the iphone.

• 1996 - GSM (Global system for mobile communications) phones in 103 countries. • 2000 - 10 million i-mode users (Japan). • 2002 - 1 million mobile phone users worldwide.• 2008 - 3.0 billion mobile phone users worldwide (prediction for the end of this year).

Staggering Numbers

• More mobile phones than humans.• Every second 4 babies are born on Earth and 32 mobile phones are sold.

Fragmentation

“Designers face a proliferation of capabilities that make the early (mobile) web look like a playground.”Joe Shepter, “The Pulse of Modern Design”

• About 2500 phone models.• About 500 different operators. • More than 25 browsers.• About 14 different screen sizes.

• Different markup languages. (WML, XHTML, ...)• Different operative systems. (Symbian OS, Windows Mobile, Mac OS, ...) • Plethora of user agents.(A user agent is a client application used with a particular network protocol, e.g browsers, email clients, mobile phone, ...)• Varying code practices, urls, ...

Too much to handle by yourself!

• There is no write once, run everywhere. • We need some help from handset detection.(With handset detection you can customise your website so it is optimised for a specific mobile phone)

Mobile vs Desktop

• Limited display.• Users attention may be distracted. • Increase need for clarity.(Screen is smaller, but things have to look bigger) • Power management.(e.g. Too many animations might draw battery)• Text input is a pain.(sms is the only mode widely accepted)• Navigation model is different.

Direct Manipulation vs Indirect Manipulation

• One item on the screen has focus.• You use soft keys as an intermediate device to move the focus to the item you want and click it.

Indirect Manipulation

• You just tap/click anything directly.

Direct Manipulation

Methodology

• Do Nothing. (SSR - Small screen rendering)• Programmatically reformat. (strip images and styling)• Handheld stylesheets. • Mobile specific site/app.

Complex

Simple

Slower Faster

Mobile Specific Site

Stylesheets

No Styling

SSR

Value

Method Comparison

Implementation

Browser Experience

Mobilise It, Don’t Miniaturise It

“... treats the mobile environment and technology as a subset of the desktop environment.”Barbara Ballard

• It’s a repurpose of existing content.

Miniaturisation

“... precisely targets mobile user needs, making (the) best possible use of technology.”Barbara Ballard

• Content and context specific.

Mobilisation

Context is King

• What is contextually relevant.• Mobilise content not only the layout.

“If the mobile site design only replicates an existing high web site the result will range from suboptimal to completely unusable.”Morten Hjerde

Fundamentals

http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.htmlhttp://sender11.typepad.com/sender11/2008/04/more-on-mobile.html

Screen

LandscapeMulti-scape

128X128

128X160

176X

208/220

240X320

320X480

640X

200/360/480

800X

352/400/480

96X65

Portrait

Font Families

• Different OS use different fonts. (e.g a 240x320 screen Series 40 phone uses font heights of 16, 20 and 24 pixels, this equals a point size of 16, 21 and 25)• In a phone web browser you can specify the font size. (bbc.co.uk uses arial point size 11, 12 and 13)

http://sender11.typepad.com/sender11/2008/01/prototyping-mob.html http://patterns.littlespringsdesign.com/index.php/Mobile_Typogr

aphy

Font Sizes

• One handed interaction(most of the phones)• Two handed interaction(e.g Sony psp)

Physical Interaction

• Clickable scroll wheel.• Mini joysticks.• Click Wheel.• Stylus.• Voice Input.• Soft Keys.• Key Pad.• Touch Pad.• Touch Screens.• Multi-Touch Screens.• Gestures.

Interaction Techniques and Elements

• Most devices sold today are WAP 2.0.(XHTML, not WML)

Browser

What does that mean?

Instead of

• However, XHTML/CSS support is inconsistent.

• Test on as many devices as you can.• Don’t use emulators.

Usability Testing

• Context is important.(As realistic the experience as possible)• Are standard usability techniques still valid for mobile?• Paper prototyping.(really particullarly usefull for early evaluations)• Make users test on their actual device.• Capture screen, body, face.

http://www.slideshare.net/barbaraballard/mobile-usability-testing/ http://www.littlespringsdesign.com/testing/

"Most usability testing regimes assume the context of a person facing a computer, the luxury of the person’s full attention, and a comfortable environment with minimal distractions. Information appliances, on the other hand, need to work in low-attention situations, or where the user’s attention needs to be fleetingly channeled through the appliance while walking, talking, or any of the multitude of other day-to-day activities that would be routinely classed as distractions.”David Pereira

Best Practices

• W3C proposed recommendations. (http://www.w3c.org/TR/mobile-bp/)• W3C mobile web initiative. (http://www.w3c.org/Mobile/) • Input by mobile developers, operators, manufacturers. • Mobile design resources. (http://patterns.littlespringsdesign.com/index.php/Main_Page)

Where Are We Heading

• Touch is the new click.• Gestural Interfaces.(http://www.unwiredview.com/2008/01/08/first-glimpse-inside-nokia-s60-touch-going-beyond-multi-touch/)(http://www.designinggesturalinterfaces.com/)

• Sensors everywhere.(Adam Greenfield, “Everyware: The dawning age of ubiquitous computing”)• Browsing is out, experiences are in.• “Icons are dead”, content is the interface.

"When it comes to design for mobile devices, it’ tempting to take an ostrich-like approach: Hide your head in the sand and behave as though nothing is happening. Unfortunately, in the not-too-distant future, more people will be using mobile devices to access the Net; and no interactive designer will be able to ignore them."Joe Shepter, "The Pulse of Modern Design" (August 2005)

Thank You.

Resources

• http://sender11.typepad.com/• http://www.smallsurfaces.com/• http://www.janchipchase.com/• http://www.m-trends.org/

• http://www.receiver.vodafone.com/• http://www.forum.nokia.com/

Web

• Matt Jones and Gary Marsden, "Mobile Interaction Design”• Cameron Moll, "Mobile Web Design"• Barbara Ballard, "Designing the Mobile User Experience" • Christian Lindholm and Turkka Keinonen, "Mobile Usability: How Nokia Changed the Face of the Mobile Phone”• Studio 7.5, "Designing for Small Screens"

Books

• http://www.flickr.com/photos/trenchcoatjedi/2896368951/• http://www.flickr.com/photos/o-ren/3028013048/• http://www.flickr.com/photos/shadda/2100736671/• http://www.flickr.com/photos/14017121@N03/2405415702/• http://www.flickr.com/photos/stevetoronto/2670405539/

Images