• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
12. Paper Prototyping - How to create efficient touchscreen interfaces
 

12. Paper Prototyping - How to create efficient touchscreen interfaces

on

  • 575 views

Cross-Platform Mobile Development @ Telerik Academy...

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

Statistics

Views

Total Views
575
Views on SlideShare
575
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Резистивни – докосването на два проводими пласта създава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 12. Paper Prototyping - How to create efficient touchscreen interfaces Presentation Transcript

  • Paper Prototyping How to create efficient touchscreen interfacesKamen BundevSenior Front-end Developerhttp://www.bundyo.org/Telerik Software Academyhttp://academy.telerik.com
  • 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
  • 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  Pen or pencil  Sheet of paper  Imagination
  • 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
  • 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 hardware, such as mouse or stylus. Avoid  Repetition  Hard-to-do gestures  "Gorilla arm" gestures
  • 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 approximately 8-10mm  The fingernails are  A blessing for Resistive screens  A curse for the Capacitive  The inaccuracy of the touch
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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  Insert more notes between two adjacent notes (make space first)  Delete single or several notes  Play the finished melody
  • Thank You! Kamen.Bundev@telerik.com @bundyoMany thanks to Dan Saffer, whose lectures were incredible help!
  • 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# курс, програмиране, безплатно
  • 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