HCI FOR IPHONEVeronika Irvine

PhD Student, VisID lab

University of Victoria

Technologies of the Decade

http://spectrum.ieee.org/static/special-report-top-11-technologies-of-the-decade

No. 1 Smart Phones

Cell Phone:

Texting, talking

Smart Phone

Internet browsing, e-mail, 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

iOS Human Interface Guidelines

iStore requirement

“There is no good or bad, only the same and different”

- Steve Northover

Screen Real-estate

Size iPhone 4

3.5 inch (diagonal)

640 x 960 pixels

iPad

9.7 inch (diagonal)

768 x 1024 pixels

Orientation

Portrait

Landscape

Adapt to Orientation

Designated Areas

Status Bar

Navigation Bar

View

Tab Bar

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

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

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

From Stanford course on iTunesU

Touch

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

Gestures

No click or double click (mouse actions)

Multitouch

iPhone

Pinch

Two fingers max?

Obscure display

Limited area

iPad

Chords

One user - cognitive load?

Two users

Keyboard

Virtual

Customize to activity

Email address

Web URL

Numbers

Direct Manipulation

Simulate real world interaction

Finger/hand position and movement

Rapid, incremental feedback

Visual

Sound

Vibration

Direct Manipulation

Examples

iBooks, Air Hockey Gold, Labyrinth

Augmented Reality

Overlay current environment with info

Camera, GPS, Accelerometer

e.g Yelp Monocle, Theodolite

Physicality and Realism

Resemble physical device

Follow laws of physics

Behave as expected

Uncanny Valley

Roboticist Masahiro Mori 1970

Revulsion if something looks human but not

perfect

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

Technologies

Camera

Image Picker

Accelerometer

Orientation and Acceleration

WiFi, 3G, Bluetooth

Bonjour

Technologies

Browser

Google Maps

Facebook, Twitter

Audio

Video

Behaviour

Start instantly

Minimise setup

Frequently suspended

Someone calls

Save data frequently and save state

Activity in background

Badges

Settings

Configuration

One time use

Use Sparingly

Integration with other Apps

Play music from library

Address Book

Send emails

Open documents in other apps

Tables

From Stanford course on iTunesU

Tables

From Stanford course on iTunesU

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

http://itunes.apple.com/itunes-u/iphone-application-development/id384233225

Questions?

Images in presentation: Apple iStore

iOS Human Interface Guidelines

Stanford iPhone Application Course

Screenshots from my iPad

References http://developer.apple.com/library/ios/documentation/userexperie

nce/conceptual/mobilehig/MobileHIG.pdf

http://www.stanford.edu/class/cs193p/cgi-bin/drupal/