Monday, July 28, 2008

If Your Soft Keys Are Labelled 'Menu' and 'Options', What Should You Expect?

Just spotted Punchcut via some blog post or other, a 'mobile UI specialist' allegedly. Clicking on their mCommerce showcase link you are presented with a series of screenshots which show they are approaching from a graphic design point of view, with no real clue about mobile UIs:

So what's wrong here?
  1. Why is 'Buy' written on every track name next to a button like icon? That's real estate that could be used to show, maybe, longer track names (conspicuously absent from these examples but very common in real life)? Because this doesn't look like a touch screen app, so they perform no other logical function - just clutter which would make sense on a desktop but useless and confusing here.
  2. The soft keys are labelled Menu and Options, respectively. What's the difference? Does Options display something that isn't a menu, and if so what exactly? Which would you press if you actually wanted to buy a track?
  3. How do you switch between the sections along the orange strip along the top - and why is the current one highlighted in such a low contrast way, which would be invisible on many screens? How do you move up and down the track listing on the second shot? Is the blue highlighted bar the track being played, or the selected track? It's all thrown together to look good in a screenshot, but it isn't clear how it would actually work in an interactive context - which is supposed to be what these guys are experts at.
Mobile is becoming a fashionable area to work in, but it takes a lot more than Photoshop skills to design a good mobile UI - in fact I'd say Photoshop is probably the last thing a mobile app designer should be allowed near, as it encourages rigid pixel-by-pixel thinking which doesn't port well.