Software Usability Course notes for CSI 5122 - University of Ottawa Section 6: Thoughts on Mobile and Multi-Touch Usability Timothy C. Lethbridge tcl/csi5122.

Software UsabilityCourse notes for CSI 5122 - University of Ottawa

Section 6:

Thoughts on Mobile and Multi-Touch Usability

Timothy C. Lethbridge

<[email protected]>

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/Introduction.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 ‘files’

-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_guidelines/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