mobile 2.0 & usability · mobile application (native) !! mobile web site !! full web site,...

38
Mobile 2.0 & Usability Presented by Scott Weiss [email protected] 4 th December 2008

Upload: others

Post on 25-Aug-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

Mobile 2.0 & Usability

Presented by

Scott Weiss

[email protected]

4th December 2008

Page 2: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

2

!"#$%&'$()*&+),%#-.&/*%0-*)1#*)2&

world’s oldest, largest user experience consultancy&

!!"#$%&'()"*"+,,-".('%/0'1)%'2"2'(3&1"4%56'((351$7("

!!"872'()"*"84'%$91&"05191.5.(7:"(310'";<=;"

!!">$).%'?@1)'&%$)'2"A')B52(C")557(C"$12")%$3131&"

!!"@1)'%1$951$7"'D4'%9('"E3)B"750$7"4%'('10'"

!!"@F8"0'%9G'2"5H0'("I@F8"<,,;J+,,,K"

Global Reach – USA, Europe, Asia

Local Presence - Human Factors International is located in London

with a dynamic team of specialists in usability and user experience design

Minneapolis

San Francisco

Fairfield

Chicago Baltimore

New York

Boston

Mumbai

Bangalore

Pondicherry

Singapore

Shanghai

London London Hamburg

Page 3: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

3

Design

•!Information Architecture •!Iconography

•!Skins

Research

•!User Testing

•!Expert Reviews •!Ethnography

•!Focus Groups Training

•!Certified Usability Analyst

•!Full suite of design and usability courses

Guidance •!Institutionalisation of Usability

•!Executive Mentoring

Usable. Experience. Design

Usability

User Experience

Persuasive Design

Page 4: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

4

Not Mobile 2.0

Page 5: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

5

Not Mobile 2.0

Page 6: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

6

Not Mobile 2.0

Page 7: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

7

Not Mobile 2.0

Page 8: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

8

Not Mobile 2.0

Page 9: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

9

Not Mobile 2.0

Page 10: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

10

Mobile 2.0?

Page 11: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

11

Mobile 2.0

•! Social Components

!! Networking

!! Chat, instant messaging, commenting...

!! Uploading photos and text (user-generated content)

!! Presence

•! Localised Content

!! Awareness of place

!! Sharing of place content

•! AJAX

!! Highly interactive widgets

!! Animation

!! Exact placement of graphics & widgets

!! “Same page” UI (rather than lots of round-trips)

Page 12: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

12

Usability

•! Ease of use

•! By design

!! Know your user

!! Iterate designs before coding them

•! By research

!! Ask users what they like and do not like about your concept

!! Prototype the concept

!! Ask users to do things with the prototype

!! Observe their struggle and iterate the designs

Page 13: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

13

Mobile + Social Networking = ?

Benefits Challenges

Location-Awareness Privacy

Camera Availability Low Photo Quality

Constant Availability Input Awkwardness

Frequent Access Short Access Times

Page 14: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

14

Mobile Products in the Market

•! Nokia’s Ovi

•! Google’s Dodgeball

•! Facebook Mobile

!! Mobile web, SMS, and photo upload features

•! MySpace

•! Gypsii

!! gypsii.com/m

!! Windows Mobile, Blackberry, and S60-based location-aware social networking

•! BuzzCity’s MyGamma

!! http://mygamma.com/

!! WAP-enabled mobile social networking

Page 15: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

15

Mobile Facebook

•! Three UI’s available:

!! Mobile application (native)

!! Mobile web site

!! Full web site, adapted to mobile

Mobile (native):

•!Attractive/clean

•!Out of date with Facebook

account

•!No stickiness

Mobile Web:

•!Straightforward, sloppy

•!Fewer features than desktop

site

•!No advertising

Desktop Adapted:

•!Messy, with high graphics

•!Most desktop features

•!Full advertising

Page 16: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

16

Mobile Facebook

•! Three UI’s available:

!! Mobile application (native)

!! Mobile web site

!! Full web site, adapted to mobile

Mobile (native):

•!Attractive/clean

•!Out of date with Facebook

account

•!No stickiness

Mobile Web:

•!Straightforward, sloppy

•!Fewer features than desktop

site

•!No advertising

Desktop Adapted:

•!Messy, with high graphics

•!Most desktop features

•!Full advertising

Page 17: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

17

Mobile Facebook

•! Three UI’s available:

!! Mobile application (native)

!! Mobile web site

!! Full web site, adapted to mobile

Mobile (native):

•!Attractive/clean

•!Out of date with Facebook

account

•!No stickiness

Mobile Web:

•!Straightforward, sloppy

•!Fewer features than desktop

site

•!No advertising

Desktop Adapted:

•!Messy, with high graphics

•!Most desktop features

•!Full advertising

Page 18: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

18

Gypsii

!! Downloaded the link to my Blackberry

!! Couldn’t log in...

Gypsii: Sign In Gypsii: Surf Around

Page 19: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

19

MyGamma

F3&1"L4" M51)'1)"F$A47'"

!! Signup was straightforward

!! First step was to text ‘GAMMA’ to 82772

!! Got the link, went to the web site.

!! The video tells the rest...

Page 20: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

20

Mobile Social 2.0 Tips

•! Focus on the user experience first

!! What do mobile users want from a social networking product?

!! How will their use differ from their desktop use?

!! Design the mobile site

!! And test it thoroughly!

•! Then think about monetisation

Page 21: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

21

Localised Content and Usability

30245*6&#*&%#7)48.&.2#9&)*7&

$*-025)"20&:;<&,)*&"0&

=-$.%-)1*6&=#-&%>0&$.0-&

<#(01(0.&?0#?20&9)*%&%#&

2#,)25.0&9>0-0&%>04&)-0&!"#$!&

-)%>0-&%>)*&9>0-0&%>04&)-0&

!22#9&$.0-@0*%-4&#=&,5%4A&

*056>"#->##7A&B/;&,#70A&

5*%0-.0,1#*A&#-&.020,1#*&=-#(&)&

()?C&D-&0E0*&"4&2)*7()-F&

Page 22: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

22

A Particularly Good Example: AroundMe

Page 23: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

23

Page 24: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

24

Page 25: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

25

A Particularly Good Example: AroundMe

Page 26: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

26

A Particularly Good Example: AroundMe

Page 27: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

27

Page 28: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

28

Page 29: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

29

Page 30: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

30

Page 31: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

31

Page 32: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

32

AJAX and Usability

G5HH4&6-)?>5,.&

)*7&)*5()1#*&

,)*&>570&

700?0-&

$.)"525%4&

90)F*0..0.&

Page 33: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

33

Pinch & Stretch Nightmare

Page 34: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

34

Inconsistent UI

•! “Back button” functionality inconsistently available

•! Contact editibility only occasionally available

•! Moving from section to section awkward

Page 35: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

35

WebKit

•! http://webkit.org/

•! Used as the browser foundation by Safari, Nokia,

Android...

•! Open Source application framework upon which a

browser can be built

•! An open source project run by Apple

•! Components

!! WebCore

!! JavaScriptCore

!! Drosera

!! SunSpider

Page 36: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

36

The WURFL: Wireless Universal Resource File

•! http://wurfl.sourceforge.net/

•! XML configuration file that contains information about

capabilities and features of many mobile devices

•! Device data repository about mobile phones

•! Open source, free, and voluntary

•! Accessed by API at run time

•! Fosters community among developers

I$,)&;)..)*5&

Page 37: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

37

dotMobi

•! Mobile domain to support XHTML sites that conform to

the .mobi standard

•! At its heart, a marketing campaign, but one oriented

toward quality user experience and brand trust

•! Provide tools and services to enable best-in-class

usability:

!! Emulator tool at http://mltd.mobi/emulator.php

!! Page and site test tools at http://ready.mobi

!! mobiForge developer community at http://mobiforge.com

!! Best practices: http://mobithinking.com/sites/mobithinking.com/files/

dotMobi_Mobile_Usability_Best_Practice.pdf

!! Site builder tool at http://site.mobi

!! Device Atlas at http://deviceatlas.com

•! Database of mobile device information

•! Accessed via API at run time

Page 38: Mobile 2.0 & Usability · Mobile application (native) !! Mobile web site !! Full web site, adapted to mobile Mobile (native): •!Attractive/clean •!Out of date with Facebook account

Human Factors International

16 Albemarle Street

London W1S 4HW

Phone: +44.207.290.3430

HFI Offices:

Baltimore, MD, USA

Bangalore, India

Boston, MA, USA

Fairfield, IA, USA

Hamburg, Germany

London, UK

Mumbai, India

Pondicherry, India

San Francisco, CA, USA

Singapore

Contact:

Scott Weiss, Executive Director, London

[email protected]

+44 (0) 207.290.3432

Thanks!