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

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

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

Types of Touchscreens Single touch

Resistive

Infrared

Multi touch Capacitive

Ultrasound

Camera-based

Exercise 1

1. 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 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

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 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

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

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 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

Thank You!Kamen.Bundev@telerik.com

@bundyo

Many thanks to Dan Saffer, whose lectures were

incredible help!

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен 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

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