Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Paper Prototyping How to create efficient touchscreen interfaces <ul><li>Kamen Bundev </li></ul><ul><li>Telerik Mobile Dev...
Table of Contents <ul><li>Paper Prototyping </li></ul><ul><li>Types of Touchscreens </li></ul><ul><li>Exercise 1 </li></ul...
Table of Contents (2) <ul><li>Activity Zones </li></ul><ul><li>Exercise 2 </li></ul><ul><li>Gestures </li></ul><ul><li>Wor...
What Will Not Be Discussed <ul><li>HTML, JavaScript or CSS </li></ul><ul><li>PhoneGap </li></ul><ul><li>Design </li></ul><...
Needed Tools <ul><li>For this presentation you will  not  need </li></ul><ul><ul><li>PhoneGap </li></ul></ul><ul><ul><li>C...
<ul><li>What a prototype means? </li></ul><ul><ul><li>Early model, constructed for testing a concept or a particular proce...
Types of Touchscreens <ul><li>Single  touch </li></ul><ul><ul><li>Resistive </li></ul></ul><ul><ul><li>Infrared </li></ul>...
Exercise 1 <ul><li>Create a paper prototype for a mobile interface for a thermostat: </li></ul>
Ergonomics of Gestures <ul><li>Gesture </li></ul><ul><ul><li>Is a physical movement, that can be detected by digital devic...
Standard Touch Gestures <ul><li>Tap to activate </li></ul><ul><li>Tap to select </li></ul><ul><li>Drag to move </li></ul><...
Mind Your Users! <ul><li>Keep in mind when prototyping </li></ul><ul><ul><li>Normal human finger is 16-20mm in diameter </...
Mind Your Users! (2) <ul><li>Keep in mind when prototyping </li></ul><ul><ul><li>Left-handedness </li></ul></ul><ul><ul><l...
Size Of The Hit Zones <ul><li>Fitt’s  law again! </li></ul><ul><ul><li>Enough room between them </li></ul></ul><ul><ul><li...
Desktop Legacy <ul><li>Avoid some of the traditional elements used in desktop applications </li></ul><ul><ul><li>Mouse-ove...
Overview – Detail Model <ul><li>Overview-Detail Model is often used in mobile applications, since it offers clear applicat...
Strive for Efficiency <ul><li>Start with a full view </li></ul><ul><li>Tap is the fastest way to navigate in the mobile in...
Activity Zones <ul><li>Rule of the thumb </li></ul><ul><li>Order by importance </li></ul><ul><li>Order by usage frequency ...
Exercise 2 <ul><li>Create a paper prototype of a Shopping list mobile application with the following capabilities: </li></...
Gestures <ul><li>Gestures are an important part of today's mobile interfaces </li></ul><ul><ul><li>Single touch gestures a...
Working With Gestures <ul><li>The complexity of a gesture should be equal to the complexity of the task to be performed </...
Common Problems <ul><li>What to watch for: </li></ul><ul><ul><li>Visibility </li></ul></ul><ul><ul><li>Random activation <...
Exercise 3 <ul><li>Prototype these gestures for a mobile music application: </li></ul><ul><ul><li>Add notes to a musical s...
Thank You! <ul><li>[email_address] </li></ul><ul><li>@bundyo </li></ul>Many thanks to Dan Saffer, whose lectures were incr...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Role of IT in Mangement by Prof. Amit Chandra - GSBA College
Next
Upcoming SlideShare
Role of IT in Mangement by Prof. Amit Chandra - GSBA College
Next
Download to read offline and view in fullscreen.

Share

Workshop Usability

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Workshop Usability

  1. 1. Paper Prototyping How to create efficient touchscreen interfaces <ul><li>Kamen Bundev </li></ul><ul><li>Telerik Mobile Development Course </li></ul><ul><li>mobiledevcourse.telerik.com </li></ul><ul><li>Senior Front-end Developer </li></ul>
  2. 2. Table of Contents <ul><li>Paper Prototyping </li></ul><ul><li>Types of Touchscreens </li></ul><ul><li>Exercise 1 </li></ul><ul><li>Ergonomics of Gestures </li></ul><ul><li>Standard Touch Gestures </li></ul><ul><li>Mind Your Users! </li></ul><ul><li>Size Of The Hit Zones </li></ul><ul><li>Desktop Legacy </li></ul><ul><li>Overview – Detail Model </li></ul>
  3. 3. Table of Contents (2) <ul><li>Activity Zones </li></ul><ul><li>Exercise 2 </li></ul><ul><li>Gestures </li></ul><ul><li>Working With Gestures </li></ul><ul><li>Common Problems </li></ul><ul><li>Exercise 3 </li></ul>
  4. 4. What Will Not Be Discussed <ul><li>HTML, JavaScript or CSS </li></ul><ul><li>PhoneGap </li></ul><ul><li>Design </li></ul><ul><li>Platform differences </li></ul>
  5. 5. Needed Tools <ul><li>For this presentation you will not need </li></ul><ul><ul><li>PhoneGap </li></ul></ul><ul><ul><li>Computers </li></ul></ul><ul><ul><li>Mobile devices </li></ul></ul><ul><li>You will only need </li></ul><ul><ul><li>Pen or pencil </li></ul></ul><ul><ul><li>Sheet of paper </li></ul></ul><ul><ul><li>Imagination </li></ul></ul>
  6. 6. <ul><li>What a prototype means? </li></ul><ul><ul><li>Early model, constructed for testing a concept or a particular process, which can be used as a base for training. </li></ul></ul><ul><li>The Paper Prototype of a software application is built as a faster method </li></ul><ul><ul><li>For testing the interface </li></ul></ul><ul><ul><li>Testing its usability </li></ul></ul>Paper Prototyping
  7. 7. Types of Touchscreens <ul><li>Single touch </li></ul><ul><ul><li>Resistive </li></ul></ul><ul><ul><li>Infrared </li></ul></ul><ul><li>Multi touch </li></ul><ul><ul><li>Capacitive </li></ul></ul><ul><ul><li>Ultrasound </li></ul></ul><ul><ul><li>Camera-based </li></ul></ul>
  8. 8. Exercise 1 <ul><li>Create a paper prototype for a mobile interface for a thermostat: </li></ul>
  9. 9. Ergonomics of Gestures <ul><li>Gesture </li></ul><ul><ul><li>Is a physical movement, that can be detected by digital device, without additional hardware, such as mouse or stylus. </li></ul></ul><ul><li>Avoid </li></ul><ul><ul><li>Repetition </li></ul></ul><ul><ul><li>Hard-to-do gestures </li></ul></ul><ul><ul><li>&quot;Gorilla arm&quot; gestures </li></ul></ul>
  10. 10. Standard Touch Gestures <ul><li>Tap to activate </li></ul><ul><li>Tap to select </li></ul><ul><li>Drag to move </li></ul><ul><li>Slide for scrolling </li></ul><ul><li>Pitch/Shrink to zoom in/zoom out </li></ul>
  11. 11. Mind Your Users! <ul><li>Keep in mind when prototyping </li></ul><ul><ul><li>Normal human finger is 16-20mm in diameter </li></ul></ul><ul><ul><ul><li>The fingertips are approximately 8-10mm </li></ul></ul></ul><ul><ul><li>The fingernails are </li></ul></ul><ul><ul><ul><li>A blessing for Resistive screens </li></ul></ul></ul><ul><ul><ul><li>A curse for the Capacitive </li></ul></ul></ul><ul><ul><li>The inaccuracy of the touch </li></ul></ul>
  12. 12. Mind Your Users! (2) <ul><li>Keep in mind when prototyping </li></ul><ul><ul><li>Left-handedness </li></ul></ul><ul><ul><li>The Fitt’s Law </li></ul></ul><ul><ul><li>The coverage of fingers and palms </li></ul></ul><ul><ul><ul><li>Any content under them is invisible </li></ul></ul></ul><ul><ul><li>Accessibility </li></ul></ul>
  13. 13. Size Of The Hit Zones <ul><li>Fitt’s law again! </li></ul><ul><ul><li>Enough room between them </li></ul></ul><ul><ul><li>Reasonable size </li></ul></ul><ul><ul><ul><li>At least 1-2 cm </li></ul></ul></ul><ul><ul><li>Keep in mind the activity zones </li></ul></ul>
  14. 14. Desktop Legacy <ul><li>Avoid some of the traditional elements used in desktop applications </li></ul><ul><ul><li>Mouse-overs and hovers </li></ul></ul><ul><ul><li>Double-click </li></ul></ul><ul><ul><li>Right click </li></ul></ul><ul><ul><ul><li>Can be replaced by tap and hold </li></ul></ul></ul><ul><ul><li>Default buttons </li></ul></ul><ul><ul><li>Undo </li></ul></ul>
  15. 15. Overview – Detail Model <ul><li>Overview-Detail Model is often used in mobile applications, since it offers clear application structure. Commonly used structures are: </li></ul><ul><ul><li>Flat </li></ul></ul><ul><ul><li>Star </li></ul></ul><ul><ul><li>Decentralized </li></ul></ul><ul><ul><li>Combinations of them </li></ul></ul>
  16. 16. Strive for Efficiency <ul><li>Start with a full view </li></ul><ul><li>Tap is the fastest way to navigate in the mobile interfaces </li></ul><ul><ul><li>Use it! </li></ul></ul><ul><li>Avoid scrolling </li></ul><ul><li>Each view should be designed for a single task </li></ul><ul><li>Only one entrance to a view </li></ul>
  17. 17. Activity Zones <ul><li>Rule of the thumb </li></ul><ul><li>Order by importance </li></ul><ul><li>Order by usage frequency </li></ul><ul><li>The escape hatch is in the </li></ul><ul><li>upper left corner </li></ul><ul><li>Minimize the application </li></ul><ul><li>chrome </li></ul>
  18. 18. Exercise 2 <ul><li>Create a paper prototype of a Shopping list mobile application with the following capabilities: </li></ul><ul><ul><li>Show product list </li></ul></ul><ul><ul><li>Add product, measure and quantity </li></ul></ul><ul><ul><li>Mark a product as bought </li></ul></ul><ul><ul><li>About window </li></ul></ul>
  19. 19. Gestures <ul><li>Gestures are an important part of today's mobile interfaces </li></ul><ul><ul><li>Single touch gestures are performed faster and with only one hand </li></ul></ul><ul><ul><li>Most people do not like multi-touch and rarely think of it </li></ul></ul>
  20. 20. Working With Gestures <ul><li>The complexity of a gesture should be equal to the complexity of the task to be performed </li></ul><ul><li>&quot;Dangerous&quot; operations should be accessible through complex gestures </li></ul><ul><li>Best designs create habits </li></ul><ul><li>Multi-touch gestures are like shortcuts </li></ul>
  21. 21. Common Problems <ul><li>What to watch for: </li></ul><ul><ul><li>Visibility </li></ul></ul><ul><ul><li>Random activation </li></ul></ul><ul><ul><li>Too much variety </li></ul></ul>
  22. 22. Exercise 3 <ul><li>Prototype these gestures for a mobile music application: </li></ul><ul><ul><li>Add notes to a musical staff </li></ul></ul><ul><ul><li>Insert more notes between two adjacent notes </li></ul></ul><ul><ul><ul><li>(make space first) </li></ul></ul></ul><ul><ul><li>Delete single or several notes </li></ul></ul><ul><ul><li>Play the finished melody </li></ul></ul>
  23. 23. Thank You! <ul><li>[email_address] </li></ul><ul><li>@bundyo </li></ul>Many thanks to Dan Saffer, whose lectures were incredible help!

Views

Total views

1,157

On Slideshare

0

From embeds

0

Number of embeds

12

Actions

Downloads

14

Shares

0

Comments

0

Likes

0

×