HCI FOR IPHONE. Veronika Irvine PhD Student, VisID lab University of Victoria

Transcription

1 HCI FOR IPHONE Veronika Irvine PhD Student, VisID lab University of Victoria

2 Technologies of the Decade

3 No. 1 Smart Phones Cell Phone: Texting, talking Smart Phone Internet browsing, , entertainment, games Hardware Touch screens, display quality, tiny camera lenses Memory and processor advancements GPS, Radio antennas, accelerometers, image sensors, microphones Software Operating System that supports third party applications Off-load data storage and processing to the cloud Network Infrastructure Increasing wireless bandwidth WiFi, 3G, Bluetooth

4 ios Human Interface Guidelines istore requirement There is no good or bad, only the same and different - Steve Northover

5 Screen Real-estate Size iphone inch (diagonal) 640 x 960 pixels ipad 9.7 inch (diagonal) 768 x 1024 pixels Orientation Portrait Landscape

6 Adapt to Orientation

7 Designated Areas Status Bar Navigation Bar View Tab Bar

8 Designated Areas Status Bar Info about device and environment Very top (regardless of orientation) Think twice before hiding Navigation Bar Hierarchical navigation of views e.g. Genre, Artist, Album, Song Bar title shows current view name Directly below status bar Small number of controls

9 Designated Areas Toolbar Controls related to current view Bottom of View Don t crowd Tab Bar Switch between views Bottom of Screen Maximum number of tabs is 5

10 Images for Bars 20 x 20 pixels for Tool Bar or Navigation Bar 30 x 30 pixels for Tab Bar Standard icons Pure white Alpha transparency Automatic Drop shadow Use anti-aliasing

11 Touch From Stanford course on itunesu

12 Fat Finger problem Fat Finger Worries: How Older and Younger Users Physically Interact with PDAs (2005) - K.A. Siek, Y. Rogers and K.H. Connelly Finger obscures display Touch multiple targets at same time Size of target No smaller than 44 x 44 pixels Target feedback E.g. Grow in size when selected Virtual Keyboard Algorithm based on word and context

13 Gestures No click or double click (mouse actions)

14 Multitouch iphone Pinch Two fingers max? Obscure display Limited area ipad Chords One user - cognitive load? Two users

15 Keyboard Virtual Customize to activity address Web URL Numbers

16 Direct Manipulation Simulate real world interaction Finger/hand position and movement Rapid, incremental feedback Visual Sound Vibration

17 Direct Manipulation Examples ibooks, Air Hockey Gold, Labyrinth

18 Augmented Reality Overlay current environment with info Camera, GPS, Accelerometer e.g Yelp Monocle, Theodolite

19 Physicality and Realism Resemble physical device Follow laws of physics Behave as expected

20 Uncanny Valley Roboticist Masahiro Mori 1970 Revulsion if something looks human but not perfect

21 Collaboration and Connectedness Application across multiple devices e.g. Measure distance between two devices e.g. Geney, Supporting children's collaboration across handheld computers Mandryk et al

22 Technologies Camera Image Picker Accelerometer Orientation and Acceleration WiFi, 3G, Bluetooth Bonjour

23 Technologies Browser Google Maps Facebook, Twitter Audio Video

24 Behaviour Start instantly Minimise setup Frequently suspended Someone calls Save data frequently and save state Activity in background Badges

25 Settings Configuration One time use Use Sparingly

26 Integration with other Apps Play music from library Address Book Send s Open documents in other apps

27 Tables From Stanford course on itunesu

28 Tables From Stanford course on itunesu

29 Tools Interface Builder (free) Register as an Apple ios developer (free) Drag and Drop editor for application Simulator for iphone and ipad Mac OSX only iphone GUI PSD (pay what you want) Photoshop template Multiple platforms? imockups for ipad ($9.99) ipad only itunesu Stanford iphone Application Course

30 Questions? Images in presentation: Apple istore ios Human Interface Guidelines Stanford iphone Application Course Screenshots from my ipad References nce/conceptual/mobilehig/mobilehig.pdf