1. How to create efficient touchscreen interfaces Kamen Bundev Telerik Corporation www.telerik.com Senior Front-end Developer

2.  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

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

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

5.  For this presentation you will not need  PhoneGap  Computers  Mobile devices  You will only need  Pen or pencil  Sheet of paper  Imagination

6.  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

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

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

9.  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

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

11.  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

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

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

14.  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

15.  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

16.  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

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

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

19.  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

20.  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

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

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

23. Kamen.Bundev@telerik.com @bundyo Many thanks to Dan Saffer, whose lectures were incredible help!