Paper Prototyping

Paper Prototyping How to create efficient touchscreen interfaces Kamen Bundev Telerik Corporation www.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

Paper Prototyping • 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

Types of Touchscreens • Single touch • Resistive • Infrared • Multi touch • Capacitive • Ultrasound • Camera-based

Exercise 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’sLaw • The coverage of fingers and palms • Any content under them is invisible • Accessibility

Size Of The Hit Zones • Fitt’slaw 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 • 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 • 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!

Paper Prototyping