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

Lethbridge - CSI Section 6: Mobile and Multitouch2 Nielsen on Mobile Website Usability 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 Section 6: Mobile and Multitouch3 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 Section 6: Mobile and Multitouch4 Nielsen on Mobile Apps 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 Section 6: Mobile and Multitouch5 Nielsen on iPad Apps 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 Section 6: Mobile and Multitouch6 Lethbridge on: How to read on a mobile device 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 Section 6: Mobile and Multitouch7 Lukas Mathis on multitouch gestures as undiscoverable commands 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 Section 6: Mobile and Multitouch8 Apple’s iOS Guidelines 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 Section 6: Mobile and Multitouch9 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 Section 6: Mobile and Multitouch10 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 Section 6: Mobile and Multitouch11 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 Section 6: Mobile and Multitouch12 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 Section 6: Mobile and Multitouch13 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 Section 6: Mobile and Multitouch14 Android User Interface Guidelines - nes/index.htmlhttp://developer.android.com/guide/practices/ui_guideli nes/index.html -Much terser than iOS guidelines

Lethbridge - CSI Section 6: Mobile and Multitouch15 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