Paper PrototypingHow to create efficient touchscreen interfaces

Kamen Bundev

Telerik Corporationwww.telerik.com

Senior Front-end Developer

Table of Contents Paper Prototyping Types of Touchscreens Exercise 1 Ergonomics of Gestures Standard Touch Gestures Mind Your Users! Size Of The Hit Zones Desktop Legacy Overview – Detail Model

Table of Contents (2) Activity Zones Exercise 2 Gestures Working With Gestures Common Problems Exercise 3

What Will Not Be Discussed

HTML, JavaScript or CSS PhoneGap Design Platform differences

Needed Tools For this presentation you will not

need PhoneGap

Computers

Mobile devices You will only need

Pen or pencil

Sheet of paper

Imagination

What a prototype means? Early model, constructed for testing

a concept or a particular process, which can be used as a base for training.

The Paper Prototype of a software application is built as a faster method For testing the interface

Testing its usability

Paper Prototyping

Types of Touchscreens Single touch

Resistive

Infrared Multi touch

Capacitive

Ultrasound

Camera-based

Exercise 1

1. Create a paper prototype for a mobile interface for a thermostat:

Ergonomics of Gestures Gesture

Is a physical movement, that can be detected by digital device, without additional hardware, such as mouse or stylus.

Avoid Repetition Hard-to-do gestures "Gorilla arm" gestures

Standard Touch Gestures

Tap to activate Tap to select Drag to move Slide for scrolling Pitch/Shrink to zoom in/zoom out

Mind Your Users! Keep in mind when prototyping

Normal human finger is 16-20mm in diameter

The fingertips are approximately 8-10mm

The fingernails are

A blessing for Resistive screens

A curse for the Capacitive

The inaccuracy of the touch

Mind Your Users! (2) Keep in mind when prototyping

Left-handedness

The Fitt’s Law

The coverage of fingers and palms

Any content under them is invisible

Accessibility

Size Of The Hit Zones Fitt’s law again!

Enough room between them

Reasonable size

At least 1-2 cm

Keep in mind the activity zones

Desktop Legacy Avoid some of the traditional

elements used in desktop applications Mouse-overs and hovers

Double-click

Right click

Can be replaced by tap and hold

Default buttons

Undo

Overview – Detail Model Overview-Detail Model is often

used in mobile applications, since it offers clear application structure. Commonly used structures are: Flat

Star

Decentralized

Combinations of them

Strive for Efficiency Start with a full view Tap is the fastest way to navigate

in the mobile interfaces Use it!

Avoid scrolling Each view should be designed for a

single task Only one entrance to a view

Activity Zones

Rule of the thumb Order by importance Order by usage frequency The escape hatch is in the

upper left corner Minimize the application

chrome

Exercise 2

2. Create a paper prototype of a Shopping list mobile application with the following capabilities: Show product list

Add product, measure and quantity

Mark a product as bought

About window

Gestures Gestures are an important part of

today's mobile interfaces Single touch gestures are

performed faster and with only one hand

Most people do not like multi-touch and rarely think of it

Working With Gestures The complexity of a gesture should

be equal to the complexity of the task to be performed

"Dangerous" operations should be accessible through complex gestures

Best designs create habits Multi-touch gestures are like

shortcuts

Common Problems

What to watch for: Visibility

Random activation

Too much variety

Exercise 3

3. Prototype these gestures for a mobile music application: Add notes to a musical staff

Insert more notes between two adjacent notes

(make space first)

Delete single or several notes

Play the finished melody

Thank You!Kamen.Bundev@telerik.com

@bundyo

Many thanks to Dan Saffer, whose lectures were

incredible help!