Designing for Touch
Fingers and thumbs turn desktop conventions on their head. For designers creating finger-friendly touch interfaces, there are entirely new conventions to learn and old ones to discard. The good folks at .net magazine indulged me by letting me grace their website with a slew of guidelines for touch design.
Great mobile designs do more than shoehorn themselves
into tiny screens: they make way for fingers and thumbs,
accommodating the wayward taps of our clumsy digits.
The physicality of handheld interfaces take designers
beyond the conventions of visual and information design‚
and into the territory of industrial design. With touchscreens
there are real ergonomics at stake. It's not just how
your pixels look, but how they feel in the hand.
The article explores the ergonomic differences of designing for phones vs tablets, iPhone vs Android, native vs web. A few of the things you'll learn:
Place primary tap targets in this thumb-thumping hot zone.
This rule of thumb applies to tablets, too, except that the thumb zone is different because we hold it differently.
Stacking controls in a touch interface should always be avoided, especially at screen bottom.
On iPhone, put app controls at screen bottom.
On Android, put app controls at screen top.
For the web, put navigation at page bottom (as opposed to screen bottom).
For the iPad, it depends.
The closer you squeeze buttons together, the larger those buttons should be.
