Mobile web design

Android have published a guide to developing applications, despite being an advert for Ice Cream Sandwich, it is quite useful and provides good tips for how to design any small screen based application be that mobile apps or web sites to be viewed on handheld devices.

I’m trying to get my head around how to design things for very small screens at the moment so I found it quite useful.

  • Size of your fingers – aim to make usable bearing in mind the size of the end of your finger is 7-10mm, and you need to maintain a clear gap between each item.
  • Feedback – on interaction to try and indicate that something will happen, they suggest using percentage shades of the same colour.
  • Consistancy – across interface of the same visual clues if touching the arrow makes you move from screen to screen on one part. It shouldn’t suddenly switch to being a edit cue on another screen.
  • Describe only what is necessary – you only have a small screen and people don’t want to know the details. If you have an error message they don’t want to know that you have a parse error or some such.
  • Headline first – “Aliens have landed and you have 6 messages” rather than “You have 6 messages and Aliens have landed”.
  • Be familiar to the devices interface – don’t try and make your android app use iphone design elements, or vice-versa you should be taking advantage of your users familarity with their own device.
  • Pictures being more obvious than words -Real objects are more intuitive than buttons and menus, for icons I guess this comes down to not making people think.* They extend it into pictures being more obvious than words. Guess there is less brain action needed to go from picture of steve > steve! than from “steve the monkey” > oh yeah > steve > steve!. **
  • Only show whats necessary – don’t show whats not needed for that screen. This is ok as long as items are placed in familiar locations. You don’t want everything shuffling position when you go from page to page.

Most of this is the same as its always been but its always good to remind yourself. Sometimes I’ve ignored design reading this made me wonder how much of this is really about toys for adults.

* Never really been sure about using an envelope for an email icon but I suppose if that is what everything else uses then its the right thing to use.
**Wonder if this is the logic behind a visual search engine like Oolone.