Paper Prototyping            How to create efficient touchscreen interfacesKamen BundevSenior Front-end Developerhttp://ww...
Table of Contents   Paper Prototyping   Types of Touchscreens   Exercise 1   Ergonomics of Gestures   Standard Touch ...
Table of Contents (2)   Activity Zones   Exercise 2   Gestures   Working With Gestures   Common Problems   Exercise 3
What Will Not Be Discussed HTML, JavaScript   or CSS PhoneGap Design Platform differences
Needed Tools For this   presentation you will not need   PhoneGap   Computers   Mobile devices You will   only need  ...
Paper Prototyping What a prototype means?   Early model, constructed for testing a concept    or a particular process, w...
Types of Touchscreens Single touch   Resistive   Infrared Multi touch   Capacitive   Ultrasound   Camera-based
Exercise 11.   Create a paper prototype for a mobile     interface for a thermostat:
Ergonomics of Gestures Gesture  Is a physical movement, that can be detected   by digital device, without additional har...
Standard Touch Gestures Tap to activate Tap to select Drag to move Slide for scrolling Pitch/Shrink to zoom in/zoom out
Mind Your Users! Keep in mind when prototyping  Normal human finger is 16-20mm in diameter    The fingertips are approx...
Mind Your Users! (2) Keep in mind when prototyping  Left-handedness  The Fitt’s Law  The coverage of fingers and palms...
Size Of The Hit Zones Fitt’s law again!   Enough room between them   Reasonable size     At least 1-2 cm   Keep in mi...
Desktop Legacy Avoid some of the traditional   elements used in desktop applications   Mouse-overs and hovers   Double-...
Overview – Detail Model Overview-Detail Model is often used in mobile applications, since it offers clear application str...
Strive for Efficiency Start with a full view Tap isthe fastest way to navigate in the mobile interfaces   Use it! Avoi...
Activity Zones Rule of the thumb Order by importance Order by usage frequency The escape hatch is in the upper left co...
Exercise 22.   Create a paper prototype of a Shopping list     mobile application with the following     capabilities:    ...
Gestures Gestures are an important part of todays mobile interfaces   Single touch gestures are performed faster and    ...
Working With Gestures The complexity of a gesture should be equal to the complexity of the task to be performed "Dangero...
Common Problems What to watch for:   Visibility   Random activation   Too much variety
Exercise 33.   Prototype these gestures for a mobile music     application:      Add notes to a musical staff      Inser...
Thank You!                 Kamen.Bundev@telerik.com                          @bundyoMany thanks to Dan Saffer, whose lectu...
Paper Prototyping    курсове и уроци по програмиране, уеб дизайн – безплатно     BG Coder - онлайн състезателна система - ...
Free Trainings @ Telerik Academy Cross-Platform   Mobile Development    http://mobiledevcourse.telerik.com   Telerik Sof...
Upcoming SlideShare
Loading in …5
×

12. Paper Prototyping - How to create efficient touchscreen interfaces

763 views

Published on

Cross-Platform Mobile Development @ Telerik Academy
Telerik Software Academy: http://mobiledevcourse.telerik.com
The website and all video materials are in Bulgarian
Content:
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
Activity Zones
Exercise 2

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
763
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Резистивни – докосването на два проводими пласта създаваtouchсъбитие. Много по-прецизни, но не поддържатmultitouch и изискватпо-голям натиск.Капацитивни – докосванетоизползвавърхът на пръста за да провеждаелектричество и да създадеtouchсъбитие. Поддържатmultitouch, както и почти не изискват сила на натиск. За съжаление не особенопрецизни и товатрябва да се имапредвид при създаването на интерфейси.Останалитевидове не саизползваничесто и няма да се спираме подробно на тях.
  • 20 минути.Термостатътуправлява две температури и допълнителнопоказвасегашната температура.
  • Ергономика – наука за дизайн на оборудване и уреди, за да бъдат удобни за човешкото тяло, движения и познания.Gorilla arm жестове – хората не са приспособени да държат ръцете пред лицето си правейки малки жестове, не е проблем за кратка употреба, но не и в интерфейс, подобен на този във филма Специален Доклад (Minority Report).
  • Ако няма начин, могат да се ползват iceberg targets – използвайки мястото около бутоните за разширяване на активната зона.2 и 3 – Имайки предвид тези две неща и това че телефонът най-често се гледа под ъгъл, често активната зона е леко изместена надолу, за да подсигури по-голяма точност.
  • Левичарите често са пренебрегвани в мобилните операционни системи.Fitt’s Law – времето необходимо за да стигнете до определен интерфейс елемент е правопропорционално на разстоянието до него и големината му. Пол Фитс, 1954За целта информация, която е важна за определен интерфейс елемент, трябва да се поднася на място, което се очаква да е видимо, например отгоре или поне от ляво (левичарите биха възразили:) Съответно елементите да са поставени на място, възможно най-близо до потребителя.Хората с увреждания е добре да се имат предвид, но ако са целева аудитория трябва да се предвидят и промени в интерфейс дизайна – по-големи шрифтове, контрастни цветове. Достъпността може да се подобри чрез haptic feedback и говорен синтез.
  • За 4 - Потребителите по-лесно могат да натискат интерфейс елементи които са близо до пръстите им. Поставяйте опасните интерфейс елементи извън тези зони на достъп. Ще говорим за тях по-късно.
  • Default бутони се избягват в мобилните приложения, понеже често няма фокусирано състояние на бутоните. Освен когато има поддръжка на хардуерна клавиатура.
  • Плосък – съставен от няколко последователни свързани изгледа (като wizard)Звезда – всички изгледи са свързани към главният.Децентрализиран – всеки изглед е свързан със всички останали (например чрез табове).
  • Оставете по-маловажната информация за детайлите.Има и изключения - ако се налага твърде често - значи може да се оптимизира и част от информацията да се премести във външният изглед.Най-вече в детайлните изгледи.Така се избягва отклоняване на вниманието.По-добрата структура ще избегне объркването.
  • По-важните интерфейс елементи трябва да са по-лесни за достигане без да е необходимо потребителят да се пресяга.Важните елементи трябва да са по-големи и да привличат внимание.Често използваните интерфейс елементи да са лесни за достигане – долу в ляво, по-рядко използваните – горе в дясно.„Опасните“ елементи като изход, потвърждение или отказ да са най-трудно достъпни – горе в ляво.Намалете ненужните части от интерфейса – оставете място за съдържанието.
  • Почти всеки днешен смартфон е с touchscreen и позволява multitouch. Това позволява използването на разнообразни жестове във вашето приложение. Но всъщност не всичко е толкова розово.
  • 3 - например Nokia N9 Swipe4 - използват се предимно от powerusers
  • Лесно е да скриете функционалност. Подсигурете се като предоставите нормален начин за изпълнение на операцията, а използвате жестове като команди за напреднали потребители.Често повтаряеми жестове които извършват различни операции.От твърде различни жестове. Заложете на жестове от един вид.
  • 12. Paper Prototyping - How to create efficient touchscreen interfaces

    1. 1. Paper Prototyping How to create efficient touchscreen interfacesKamen BundevSenior Front-end Developerhttp://www.bundyo.org/Telerik Software Academyhttp://academy.telerik.com
    2. 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. 3. Table of Contents (2) Activity Zones Exercise 2 Gestures Working With Gestures Common Problems Exercise 3
    4. 4. What Will Not Be Discussed HTML, JavaScript or CSS PhoneGap Design Platform differences
    5. 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. 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. 7. Types of Touchscreens Single touch  Resistive  Infrared Multi touch  Capacitive  Ultrasound  Camera-based
    8. 8. Exercise 11. Create a paper prototype for a mobile interface for a thermostat:
    9. 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. 10. Standard Touch Gestures Tap to activate Tap to select Drag to move Slide for scrolling Pitch/Shrink to zoom in/zoom out
    11. 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. 12. 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
    13. 13. 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
    14. 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. 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. 16. Strive for Efficiency Start with a full view Tap isthe 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. 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. 18. Exercise 22. 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. 19. Gestures Gestures are an important part of todays 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. 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. 21. Common Problems What to watch for:  Visibility  Random activation  Too much variety
    22. 22. Exercise 33. 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. 23. Thank You! Kamen.Bundev@telerik.com @bundyoMany thanks to Dan Saffer, whose lectures were incredible help!
    24. 24. Paper Prototyping курсове и уроци по програмиране, уеб дизайн – безплатно BG Coder - онлайн състезателна система - online judge курсове и уроци по програмиране – Телерик академия форум програмиране, форум уеб дизайн уроци по програмиране и уеб дизайн за ученици ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NET http://mobiledevcourse.telerik.com програмиране за деца – безплатни курсове и уроци ASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC безплатен SEO курс - оптимизация за търсачки алго академия – състезателно програмиране, състезаниякурсове и уроци по програмиране, книги – безплатно от Наков курс мобилни приложения с iPhone, Android, WP7, PhoneGap уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop Дончо Минков - сайт за програмиране free C# book, безплатна книга C#, книга Java, книга C# Николай Костов - блог за програмиране безплатен курс "Качествен програмен код" безплатен курс "Разработка на софтуер в cloud среда" C# курс, програмиране, безплатно
    25. 25. Free Trainings @ Telerik Academy Cross-Platform Mobile Development http://mobiledevcourse.telerik.com Telerik Software Academy  academy.telerik.com Telerik Academy @ Facebook  facebook.com/TelerikAcademy Telerik Software Academy Forums  forums.academy.telerik.com

    ×