1 / 23

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!

omar
Download Presentation

Paper Prototyping

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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!

More Related