PowerPoint Presentation - SEG 2100 Software Design II

flosssnailsMobile - Wireless

Dec 10, 2013 (3 years and 4 months ago)

63 views

Software Usability

Course notes for CSI 5122
-

University of Ottawa

Section 6:

Thoughts on Mobile and Multi
-
Touch Usability


Timothy C. Lethbridge

<
tcl@site.uottawa.ca
>

http://
www.site.uottawa.ca
/~
tcl
/csi5122

Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

2

Nielsen on Mobile Website Usability

http://www.useit.com/alertbox/mobile
-
usability.html


Tested websites using


Diary studies
-

14 people


User testing 48 people


Heuristic evaluation to 20 sites



The Mobile User Experience is Miserable



Average task success rate 59%, compared to 80% today



Screens too small for content


Awkward input


Slow


Sites not optimized for mobile access



Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

3

Nielsen on Mobile Website Usability
-

2

Mobile
-
enabled sites:


Success rate 64% on mobile
-
enabled vs. 53% for full sites


38% on Feature phone


55% on non
-
touch smartphone


75% on touchscreen phones


Use auto
-
sense to ensure mobile version of site appears


Plus links:

Full site


/

Mobile site



Go to m.mydomain.com



Site today actually take longer for key tasks than WAP phones of
2000


But that is because today

s phones provide full access to web
content, not just a few key items


Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

4

Nielsen on Mobile Apps

http://www.useit.com/alertbox/mobile
-
apps
-
initial
-
use.html

People have many more than they use


Intermittent use


Don

t make people register as a first step


They won

t


Don

t make people set up an account


even to buy

Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

5

Nielsen on iPad Apps

http://www.useit.com/alertbox/ipad.html


Key differences from the phone


Normal websites actually work


Toolbar works better at the top


Many apps have low perceived affordance


Lack of buttons that

stand out



Inconsistent behavior


Tapping a picture does many different things


To continue reading


Scroll down? Swipe left? Swipe up?


Low discoverability and memorability


Accidental activation

Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

6

Lethbridge on: How to read on a mobile
device

http://tims
-
ideas.blogspot.com/2010/11/reading
-
text
-
on
-
ios
-
instapaper
-
tilt.html

Three approaches compared:


iBooks
-

swipe


Globe and mail
-

flick or Spreed


Instapaper
-

flick or
tilt


Works very well, and is very relaxing

Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

7

Lukas Mathis on multitouch gestures as
undiscoverable commands

http://ignorethecode.net/blog/2010/05/25/gestures/

As an example, he cites matching the size of two objects
in iPad version of Pages


Use both hands


Select the object to resize


Drag a selection handle


As doing this, touch and hold another object of the
desired size


Life one or both fingers when

match size


appears


He suggests built
-
in tools to help demonstrate all
available gestures

Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

8

Apple

s iOS Guidelines

http://developer.apple.com/library/ios/#documentation/
userexperience/conceptual/mobilehig/Introduction/Intro
duction.html


-
Embrace the platform and general UI principles

-
Clearly define your audience

-
Scrupulous attention to detail

-
Use IOS technologies

-
Use some custom artwork

Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

9

Apples iOS Guidelines:

The platform


-
Different resolutions

-
From 640x960 down to 320x480

-
UI elements instead measured in points

-
On iPhone 4 one point equals 2 pixels

-
On other devices it is 1
-
1

-
Minimal target area 44x44 points

-
Device orientation

-
Respond to gestures, not clicks

-
Tap, drag, flick, swipe, double
-
tap, pinch open, pinch
close, touch and hold, shake

-
Help is and should be minimal

-
Think in terms of both web apps and regular apps

Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

10

Apple

s iOS

Human interface principles


-
Aesthetic integrity

-
How well the appearance integrates with its function

-
E.g. keep decorative elements subtle

-
Consistency

-
Direct manipulation

-
Feedback

-
E.g. subtle animation

Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

11

Apple

s iOS

Human interface principles


continued

-
Metaphors

-
E.g. on
-
off switches, flicking photos, spinning wheels to
make choices


-
Good:





Bad:




-
Keep users in control

-
Canceling, confirming, predictability

Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

12

Apple

s iOS

User Experience Guidelines


-
Elevate the content people care about


-
Think top
-
down, and give users a logical path


-
Make usage obvious


-
User
-
centric terminology


-
Downplay

晩汥l



-
Enable collaboration

Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

13

Apple

s iOS

User Experience Guidelines


2

-
Downplay settings

-
allow in
-
app configuration


-
Handle orientation changes


-
Start instantly

-
E.g. display a launch image that is a snapshot of what the screen
will look like when the user can interact


-
Be prepared to stop by saving state down to the finest detail


-
Put the toolbar in the top on an
iPad

Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

14

Android User Interface Guidelines

-
http://developer.android.com/guide/practices/ui_guideli
nes/index.html


-
Much terser than iOS guidelines







Lethbridge
-

CSI 5122 2012

Section 6: Mobile and Multitouch

15

Windows Phone 7 guidelines

Some highlights


Minimum hit zone of objects: 9m / 34 pixels


But make it larger in cases where

-
Element is frequently touched

-
The result of error is severe or frustrating


Can go as low as 7mm wide if longer than 20mm


2mm separation between elements


Hardware buttons cannot be overridden


Camera / back / start / search


Panorama applications