Workshop Usability

695 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
695
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
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 Swipe 4 - използват се предимно от power users
  • Лесно е да скриете функционалност. Подсигурете се като предоставите нормален начин за изпълнение на операцията, а използвате жестове като команди за напреднали потребители. Често повтаряеми жестове които извършват различни операции. От твърде различни жестове. Заложете на жестове от един вид.
  • 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!

    ×