How to create efficient touchscreen interfaces Kamen Bundev Telerik Corporation Senior Front-end Developer

 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

 Activity Zones  Exercise 2  Gestures  Working With Gestures  Common Problems  Exercise 3

 HTML, JavaScript or CSS  PhoneGap  Design  Platform differences

 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

 Single touch  Resistive  Infrared  Multi touch  Capacitive  Ultrasound  Camera-based

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

 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

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

 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

 Keep in mind when prototyping  Left-handedness  The Fitt’s Law  The coverage of fingers and palms  Any content under them is invisible  Accessibility

 Fitt’s law again!  Enough room between them  Reasonable size  At least 1-2 cm  Keep in mind the activity zones

 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 is often used in mobile applications, since it offers clear application structure. Commonly used structures are:  Flat  Star  Decentralized  Combinations of them

 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

 Rule of the thumb  Order by importance  Order by usage frequency  The escape hatch is in the upper left corner  Minimize the application chrome

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 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

 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

 What to watch for:  Visibility  Random activation  Too much variety

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

@bundyo Many thanks to Dan Saffer, whose lectures were incredible help!