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.


Blogger Hampus Jakobsson said...

Good one!

5:30 pm

Blogger Matt said...

Going to comment by referring to the original comment number.

1.There are 2 focuses on the track listings, from what I can tell. The yellow speaker icon represents that that track is playing a preview, while if you hit right on the 5-way, it would put the BUY text in focus.

That would be why each track says BUY, just like each one has a speaker icon. If you could make either the LSK or RSK a dedicated BUY call to action, you would still have the problem of playing tracks.

I think Punchcut was trying to give both options of preview and buy into one screen, which requires the user to toggle between the two modes.

2. It may be a constraint of some sort. I would expect BACK and OPTIONS.

3. The top strip is fairly obvious to me. You hit up on the 5-way, and it puts the strip in focus. L/R selects the menu.

I do think the focus is a bit low contrast, but it isn't that bad. They could have increased the text size a couple of points on the text in focus to help, or darkened the background behind the focus item a bit.

I think the blue bar is very obvious. The example there shows a user with the audio preview in focus, and the screen to the right shows the audio playing in context. That's a good move, instead of taking you to a new screen.

And your point about it being "thrown together to look good in a screenshot" is correct. Perhaps they should have put up a working demo. But that's what you get with screenshots.

I can figure out, for the most part, how it would work just by looking at a few screens...

9:54 pm

Blogger raddedas said...

Hi Matt,

Thanks for the comments - I think you are probably right about their intentions, and certainly not everything in the UI is bad. However I'd say there are still some pretty fundamental flaws still...

Consider your conflicting mapping of the 'Up' key in your suggested key map in points 1 and 3 - sometimes, pressing up might take you to the header bar to change sections, but at other times up must be moving you up and down a list. Kind of stupid to have to scroll to the top of all tracks in an album to be able to change section... I'd also personally claim that the left/right selection for buy/play was a pretty poor UI choice, but i'd need to play with it myself to see more.

The soft key mappings appear to be entirely custom and rendered within the app (as much as you can tell from a photoshop mockup) implying that the constraints are in the head of the designer - certainly on any platform i've coded for you could put whatever you liked on the soft keys. I've seen some pretty tragic constraints placed by operators, particularly US ones, so maybe this is an external requirement for a specific customer - but there are times when you have to tell your customer to stop being so bloody stupid (nicely, with justification), and I wouldn't a flawed example bang on the front of my showcase page personally...

The blue bar is quite obvious except for one thing - it is sitting above the track listing in the 2nd shot, with the next track partially covered - is that a menu you can scroll up or down, and if so why isn't it visually a single list? If it's not some sort of linear list, what is the active area; what kind of key mapping is going on here?

I certainly do agree it's not all bad - there are probably some lovely touches, but if the fundamentals are wrong it's still a fatally flawed design IMHO.

I've never met anyone from Punchcut, they aren't remotely competitors of mine and I am certain they are not the only offenders so it's maybe mean to pick them out, but bad UI design does annoy me :)

10:40 am

Blogger Matt said...

I don't really think going up a few clicks is TOO bad. I mean, it's only 4 tracks on there, would be pretty quick to get to a main menu item. It's a tough choice... they made the top main menu persistent, which is nice, instead of drilling down a level and losing it, but you do have to navigate to it this way.

Thinking of the Play/Buy toggle another way... if you had to select the song, then go to a new screen (or have it expand in place), I guess it could start the preview. But then you would have to select a Buy selection at some point. You don't gain any clicks with the toggle, and you get to see that the tracks are purchasable.

You are right though, nothing like trying it out to see if it works.

>The blue bar is quite obvious except for one thing - it is sitting above the track listing in the 2nd shot

So they expanded the focus on the list item a bit, and when you commit to playing the track, it expands fully. This is a good tactic... it expands in place.

Anyway, good debate, but I think some of yours and my own comments are entirely subjective :)

11:19 pm


Post a comment

<< Home