Paper PrototypingPaper PrototypingHow to create efficient touchscreen How to create efficient touchscreen

interfacesinterfaces

Kamen BundevKamen Bundev

Telerik Mobile Telerik Mobile Development CourseDevelopment Coursemobiledevcourse.telerik.com

Senior Front-end Senior Front-end DeveloperDeveloper

Table of ContentsTable of Contents Paper PrototypingPaper Prototyping Types of TouchscreensTypes of Touchscreens Exercise 1Exercise 1 Ergonomics of GesturesErgonomics of Gestures Standard Touch GesturesStandard Touch Gestures Mind Your Users!Mind Your Users! Size Of The Hit ZonesSize Of The Hit Zones Desktop LegacyDesktop Legacy Overview – Detail ModelOverview – Detail Model

Table of Contents (2)Table of Contents (2) Activity ZonesActivity Zones Exercise 2Exercise 2 GesturesGestures Working With GesturesWorking With Gestures Common ProblemsCommon Problems Exercise 3Exercise 3

What Will Not Be What Will Not Be DiscussedDiscussed

HTML, JavaScript or CSSHTML, JavaScript or CSS PhoneGapPhoneGap DesignDesign Platform differencesPlatform differences

Needed ToolsNeeded Tools For this presentation you will For this presentation you will notnot

needneed PhoneGapPhoneGap

ComputersComputers

Mobile devicesMobile devices You will only You will only needneed

PenPen or or pencilpencil

SheetSheet of of paperpaper

ImaginationImagination

What a prototype means?What a prototype means? Early model, constructed for testing Early model, constructed for testing

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

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

Testing its usabilityTesting its usability

Paper PrototypingPaper Prototyping

Types of TouchscreensTypes of Touchscreens SingleSingle touch touch

ResistiveResistive

InfraredInfrared MultiMulti touch touch

CapacitiveCapacitive

UltrasoundUltrasound

Camera-basedCamera-based

Exercise 1Exercise 1

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

Ergonomics of GesturesErgonomics of Gestures GestureGesture

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

AvoidAvoid RepetitionRepetition Hard-to-do gesturesHard-to-do gestures "Gorilla arm" gestures"Gorilla arm" gestures

Standard Touch Standard Touch GesturesGestures

Tap to activateTap to activate Tap to selectTap to select Drag to moveDrag to move Slide for scrolling Slide for scrolling Pitch/Shrink to zoom in/zoom outPitch/Shrink to zoom in/zoom out

Mind Your Users!Mind Your Users! Keep in mind when prototypingKeep in mind when prototyping

Normal human finger is 16-20mm in Normal human finger is 16-20mm in diameterdiameter

The fingertips are approximately 8-The fingertips are approximately 8-10mm10mm

The fingernails areThe fingernails are

A blessing for Resistive screensA blessing for Resistive screens

A curse for the CapacitiveA curse for the Capacitive

The inaccuracy of the touchThe inaccuracy of the touch

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

Left-handednessLeft-handedness

TheThe Fitt’s Fitt’s LawLaw

The coverage of fingers and palmsThe coverage of fingers and palms

Any content under them is invisibleAny content under them is invisible

AccessibilityAccessibility

Size Of The Hit ZonesSize Of The Hit Zones Fitt’sFitt’s law again! law again!

Enough room between themEnough room between them

Reasonable sizeReasonable size

At least 1-2 cmAt least 1-2 cm

Keep in mind the activity zonesKeep in mind the activity zones

Desktop LegacyDesktop Legacy Avoid some of the traditional Avoid some of the traditional

elements used in desktop elements used in desktop applicationsapplications Mouse-overs and hoversMouse-overs and hovers

Double-clickDouble-click

Right click Right click

Can be replaced by tap and holdCan be replaced by tap and hold

Default buttonsDefault buttons

UndoUndo

Overview – Detail ModelOverview – Detail Model Overview-Detail Model is often Overview-Detail Model is often

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

StarStar

DecentralizedDecentralized

Combinations of themCombinations of them

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

in the mobile interfacesin the mobile interfaces Use it!Use it!

Avoid scrollingAvoid scrolling Each view should be designed for a Each view should be designed for a

single tasksingle task Only one entrance to a viewOnly one entrance to a view

Activity ZonesActivity Zones

Rule of the thumbRule of the thumb Order by importanceOrder by importance Order by usage frequencyOrder by usage frequency The escape hatch is in theThe escape hatch is in the

upper left cornerupper left corner Minimize the application Minimize the application

chromechrome

Exercise 2Exercise 2

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

Add product, measure and quantityAdd product, measure and quantity

Mark a product as boughtMark a product as bought

About windowAbout window

GesturesGestures Gestures are an important part of Gestures are an important part of

today's mobile interfacestoday's mobile interfaces Single touch gestures are Single touch gestures are

performed faster and with only one performed faster and with only one handhand

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

Working With GesturesWorking With Gestures The complexity of a gesture should The complexity of a gesture should

be equal to the complexity of the be equal to the complexity of the task to be performedtask to be performed

"Dangerous" operations should be "Dangerous" operations should be accessible through complex accessible through complex gesturesgestures

Best designs create habitsBest designs create habits Multi-touch gestures are like Multi-touch gestures are like

shortcutsshortcuts

Common ProblemsCommon Problems

What to watch for:What to watch for: VisibilityVisibility

Random activationRandom activation

Too much varietyToo much variety

Exercise 3Exercise 3

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

Insert more notes between two Insert more notes between two adjacent notesadjacent notes

(make space first)(make space first)

Delete single or several notesDelete single or several notes

Play the finished melodyPlay the finished melody

Thank You!Thank You!Kamen.Bundev@telerik.com

@bundyo@bundyo

Many thanks to Dan Saffer, whose lectures were Many thanks to Dan Saffer, whose lectures were

incredible help!incredible help!