Designing for
touchscreens
A few things i’ve learned while working on
touchscreen interfaces.
Throw away your
preconceptions
A touchscreen is not like a usual device.
Don’t rely on your design “habits”.
A touchscreen is
not an iPhone.                   (or an Android)




All touchscreens are not created equal.
Multi-touch,...
but it might not be
a desktop either...
Tablets, handheld devices, kiosks, tables...
The touchscreen landscape is still ev...
Imagine the use cases
What kind of hardware? Which OS? Screen size?
Will the app mostly be used seated, standing,
running,...
Dumb it down.
Don’t forget accessibility basics.
Remove any unnecessary or distracting elements.
Use clear call-to-actions...
Self-explaining
& consistent icons
With no tooltips available, you should not confuse
your users.
Use common conventions, ...
Use even more
whitespace
Prevent accidental triggers by design.
Provide the user with
visual feedback
Did this button register my tap?
Is the page loading?
Have i selected the right inpu...
You might have to
make some trade-offs
Ex: What happens when CSS3 is not supported?
Think about your lowest common denomin...
Use progressive
enhancement
Your app should be usable by everyone. Just make
it even better for those with the right techn...
Use conventions
when they apply.
but don’t hesitate to throw them away when they’re
not relevant or mess with your users.
Questions?
Thank you.
http://www.gregone.com
http://www.biggerthanpixels.com
@gregone
More on the subject...
Luke Wroblewski - Touch gesture reference guide
Lukas Mathis - Detail in interface design
John Hick...
Upcoming SlideShare
Loading in...5
×

Designing for Touchscreens

3,623

Published on

A few things i have learned while working on touchscreen interfaces.

Published in: Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,623
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Designing for Touchscreens

  1. 1. Designing for touchscreens A few things i’ve learned while working on touchscreen interfaces.
  2. 2. Throw away your preconceptions A touchscreen is not like a usual device. Don’t rely on your design “habits”.
  3. 3. A touchscreen is not an iPhone. (or an Android) All touchscreens are not created equal. Multi-touch, quick response, modern browser, device-specific form elements, predictive keyboard, sound & visual feedback... Don’t take it (all) for granted.
  4. 4. but it might not be a desktop either... Tablets, handheld devices, kiosks, tables... The touchscreen landscape is still evolving.
  5. 5. Imagine the use cases What kind of hardware? Which OS? Screen size? Will the app mostly be used seated, standing, running, on the loo...? Will the screen always be lighted correctly? Do i know the type of users?
  6. 6. Dumb it down. Don’t forget accessibility basics. Remove any unnecessary or distracting elements. Use clear call-to-actions. Use large inputs.
  7. 7. Self-explaining & consistent icons With no tooltips available, you should not confuse your users. Use common conventions, pay attention to detail.
  8. 8. Use even more whitespace Prevent accidental triggers by design.
  9. 9. Provide the user with visual feedback Did this button register my tap? Is the page loading? Have i selected the right input? Why does this look like a christmas tree? Use feedback for actions & use inline validation wisely.
  10. 10. You might have to make some trade-offs Ex: What happens when CSS3 is not supported? Think about your lowest common denominator.
  11. 11. Use progressive enhancement Your app should be usable by everyone. Just make it even better for those with the right technology.
  12. 12. Use conventions when they apply. but don’t hesitate to throw them away when they’re not relevant or mess with your users.
  13. 13. Questions?
  14. 14. Thank you. http://www.gregone.com http://www.biggerthanpixels.com @gregone
  15. 15. More on the subject... Luke Wroblewski - Touch gesture reference guide Lukas Mathis - Detail in interface design John Hicks - Icons for interaction
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×