1. Software Usability Course notes for CSI 5122 - University of Ottawa Section 6: Thoughts on Mobile and Multi-Touch Usability Timothy C. Lethbridge http://www.site.uottawa.ca/~tcl/csi5122

2. Lethbridge - CSI 5122 2012 Section 6: Mobile and Multitouch2 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

3. Lethbridge - CSI 5122 2012 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

4. Lethbridge - CSI 5122 2012 Section 6: Mobile and Multitouch4 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

5. Lethbridge - CSI 5122 2012 Section 6: Mobile and Multitouch5 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

6. Lethbridge - CSI 5122 2012 Section 6: Mobile and Multitouch6 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

7. Lethbridge - CSI 5122 2012 Section 6: Mobile and Multitouch7 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

8. Lethbridge - CSI 5122 2012 Section 6: Mobile and Multitouch8 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

9. Lethbridge - CSI 5122 2012 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

10. Lethbridge - CSI 5122 2012 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

11. Lethbridge - CSI 5122 2012 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

12. Lethbridge - CSI 5122 2012 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

13. Lethbridge - CSI 5122 2012 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

14. Lethbridge - CSI 5122 2012 Section 6: Mobile and Multitouch14 Android User Interface Guidelines -http://developer.android.com/guide/practices/ui_guideli nes/index.htmlhttp://developer.android.com/guide/practices/ui_guideli nes/index.html -Much terser than iOS guidelines

15. Lethbridge - CSI 5122 2012 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