12. Paper Prototyping - How to create efficient touchscreen interfaces
-
Upload
telerik-software-academy -
Category
Education
-
view
105 -
download
0
description
Transcript of 12. Paper Prototyping - How to create efficient touchscreen interfaces
![Page 1: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/1.jpg)
Paper PrototypingHow to create efficient touchscreen interfaces
Kamen Bundev
Telerik Software Academyhttp://academy.telerik.com
Senior Front-end Developerhttp://www.bundyo.org/
http://mobiledevcourse.telerik.com
![Page 2: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/2.jpg)
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
![Page 3: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/3.jpg)
Table of Contents (2) Activity Zones Exercise 2 Gestures Working With Gestures Common Problems Exercise 3
![Page 4: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/4.jpg)
What Will Not Be Discussed
HTML, JavaScript or CSS PhoneGap Design Platform differences
![Page 5: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/5.jpg)
Needed Tools For this presentation you will not need PhoneGap
Computers
Mobile devices
You will only need Pen or pencil
Sheet of paper
Imagination
![Page 6: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/6.jpg)
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
Paper Prototyping
![Page 7: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/7.jpg)
Types of Touchscreens Single touch
Resistive
Infrared
Multi touch Capacitive
Ultrasound
Camera-based
![Page 8: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/8.jpg)
Exercise 1
1. Create a paper prototype for a mobile interface for a thermostat:
![Page 9: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/9.jpg)
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
![Page 10: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/10.jpg)
Standard Touch Gestures
Tap to activate Tap to select Drag to move Slide for scrolling Pitch/Shrink to zoom in/zoom out
![Page 11: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/11.jpg)
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
![Page 12: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/12.jpg)
Mind Your Users! (2) Keep in mind when prototyping
Left-handedness
The Fitt’s Law
The coverage of fingers and palms Any content under them is invisible
Accessibility
![Page 13: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/13.jpg)
Size Of The Hit Zones Fitt’s law again!
Enough room between them
Reasonable size At least 1-2 cm
Keep in mind the activity zones
![Page 14: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/14.jpg)
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
![Page 15: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/15.jpg)
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
![Page 16: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/16.jpg)
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
![Page 17: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/17.jpg)
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
![Page 18: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/18.jpg)
Exercise 2
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
![Page 19: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/19.jpg)
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
![Page 20: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/20.jpg)
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
![Page 21: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/21.jpg)
Common Problems
What to watch for: Visibility
Random activation
Too much variety
![Page 22: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/22.jpg)
Exercise 3
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
![Page 24: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/24.jpg)
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?
Paper Prototyping
http://mobiledevcourse.telerik.com
![Page 25: 12. Paper Prototyping - How to create efficient touchscreen interfaces](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c83f914a795985748b456c/html5/thumbnails/25.jpg)
Free Trainings @ Telerik Academy
Cross-Platform Mobile Developmenthttp://mobiledevcourse.telerik.com
Telerik Software Academy academy.telerik.com
Telerik Academy @ Facebook facebook.com/TelerikAcademy
Telerik Software Academy Forums forums.academy.telerik.com