Download
paper prototyping n.
Skip this Video
Loading SlideShow in 5 Seconds..
Paper Prototyping PowerPoint Presentation
Download Presentation
Paper Prototyping

Paper Prototyping

166 Vues Download Presentation
Télécharger la présentation

Paper Prototyping

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

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

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

  4. What Will Not Be Discussed • HTML, JavaScript or CSS • PhoneGap • Design • Platform differences

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

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

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

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

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

  10. Standard Touch Gestures • Tap to activate • Tap to select • Drag to move • Slide for scrolling • Pitch/Shrink to zoom in/zoom out

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

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

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

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

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

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

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

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

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

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

  21. Common Problems • What to watch for: • Visibility • Random activation • Too much variety

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

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