ORM Concepts, Entity Framework (EF), DbContext Telerik Software Academy Telerik School Academy.
How to create efficient touchscreen interfaces Kamen Bundev Telerik Corporation Senior Front-end...
-
Upload
silvester-campbell -
Category
Documents
-
view
238 -
download
7
Transcript of How to create efficient touchscreen interfaces Kamen Bundev Telerik Corporation Senior Front-end...
Paper PrototypingHow to create efficient touchscreen interfaces
Kamen Bundev
Telerik Corporationwww.telerik.com
Senior Front-end Developer
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
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
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
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