A couple of weeks ago I was asked to comment on what the proliferation of touch interfaces would mean to the future of web interfaces. Here’s a short resume of ten tips to consider when designing web interfaces in 2011.
1 The end of click here
If writers and content owners did their jobs properly this wouldn’t be here, but we we still have poor web copy littered with click here links. It makes even less sense on a touch device – and writing – touch here, touch me, touch me here seems rather inappropriate. So don’t do it, it’s a disease.
2 Give me more space
Fingers are fat, much fatter than a cursor. So links and buttons need more space, other wise it’s hard to touch the right element. If elements are close together make sure there is space on the screen to do a zoom gesture.
3 Be more forgiving
If you’re touching elements that might be close together, mistakes are going to happen, so ensure key interations & decisions can be cancelled or confirmed before doing something critical. And make those choice buttons (Yes, Cancel) far enough apart to be clear where you touch and avoid unfortunate mistakes.
4 No more hover
Think about it, hover doesn’t exist on a touch device, its a touch or not. So key interactions that require a hover should be removed. I learnt this the hard way trying to remove a recent bogus wallpost from facebook – it was impossible on my iPhone – app, mobile site, desktop site all failed. So if you have important hover states for key functionality make sure a touch device has an alternative way to access it. Better still design away your hover states.
5 Say goodbye to the fold
Ok so the fold is an archaic term from a bygone era that has no real place in web design… Well it has even less place with touch. As devices scale the page to fit, or allow different orientations, any indication of a fold line moves a lot. Use this to your advantage, consider how any kind scrolling adds to the experience, leading the eye.
6 Flexible layout
Don’t assume all content should be housed within a 960pixel grid, understand how it might best work with the screen size it has available. Yes it makes the design process harder but it makes the outcome better.
7 Grids and the power of suggestion
Our brains like order and identifiable pattern. A grid of squares makes it very clear where to touch without the need for extraneous explanation or detail. We immediately see it as a choice, as a key pad, something to touch. As a result the simple interfaces elements of iOS devices are now migrating to desktop machine OSes like the upcoming Lion.
8 More visual, less text
Touch makes more use of the visual. So avoid using lots of copy for instructions and make each visual element work much harder.
This should also help eradicate the experience disease of adding What’s this? links next to features. In a touch world your new features need to be immediately understood. If not – go back and rethink.
9 More application like
There has been a big shift to stripped back apps on touch devices – bits of software that do one thing very well. This trend coupled with enhancements in HTML5/CSS3/JavaScript has meant web interfaces are much richer and application like. Designing your Web UI to feel more like an application gives it greater purpose and helps it feel useful and relevant.
10 Prototype
Even though it’s possible to imagine how you’ll interact with a web design using a touch device, you’ll never really know until you try it. So instead of creating final polished designs on a mouse based machine, create designs, transfer to a touch device and prototype until it’s perfect.
