Saturday, April 14, 2012

The Pleasure of a Simple Early Morning Interface

Here's an example of UI text and design that warms my cockles. This is an automatic coffee-maker in the lobby of the Mark Spencer Hotel in Portland, Oregon.


All in all, especially given the initially intimidating array of controls, it is actually pretty easy to get what you came for: a cuppa joe "grilled to your order."

Granted, the interface is biased toward left-to-right readers, but your eye may be drawn first to the bright blue LCD screen at the upper right, which prompts you to "select drink." This box acts as status text, changing as you make your selections.

There is helpful, concise, instructional text, in a different color from the options (for the non-colorblind), with nice big numbers.


Group boxes contain your drink options. Minor point, I don't think the select/scroll arrows are necessary design-wise, you ought to be able to get the job done just by pressing the desired choice (especially when you just have two choices, such as hot versus cold drink). Also they probably could have reduced the number of lines around the boxes.

The "OK button" is large, clear ("Start") and color-coded green for Go.

The one thing I'd pick at is the pair of buttons (Clean and Program) above the Start and Cancel buttons. Very few people should use these, and I think a better placement would be under Start/Cancel just to clarify that they're not in the standard order of navigation.

Wednesday, April 04, 2012

The Embarrassment of Insufficient UI Text


I discovered the following user-interface at my local Jewish deli.  Each booth has a little Windows touch screen, from which you can perform various tasks while awaiting your meal, including viewing their menu and, for those with no inner resources, as John Berryman would say, playing video games.  

One of the games offered seemed just too intriguing (especially in the context of a family restaurant!) to resist: it was called “Dress the Waitress.”

To begin with, the screen did not respond very well to my taps and presses.  But more importantly, the UI text (or lack thereof) deserves our attention.

Upon my tapping the “Dress the Waitress” menu icon, a picture of a waitress appeared, shown wearing a standard black “waitress” outfit, and carrying a tray of cocktails in each hand.

Strangely, the title of the game now appeared as “Dress the Doll.” Anyway, large magenta buttons on the right side of the screen let me know I could change such attributes as her skin color, eyes, hair, blouse, skirt, stockings, and shoes.

I tapped “Blouse”: accordingly, a sort of dialog box opened on the left side of the screen, displaying a variety of tops.  Assuming since it was a touch screen that I should tap an item to select it, I tapped a modest blue top. 

Instantly the pigeon-toed waitress's was stripped down to her red underwear. 

Hmm. I tapped the blouse again, to no avail.  I double tapped.  I tapped some other blouses.  I tried dragging a blouse into the figure.  Nothing.

I tapped Cancel – at least THAT worked! – and then tried putting stockings, and then trousers on her ... again, neither tapping nor dragging achieved anything.  So I knew that it wasn’t just a glitch in the Blouses dialog box.

But, I thought, was I doing something wrong? Was the touch screen broken? Was the game broken? Was my finger insufficiently electrostatic?  I had tried tapping with several fingers, with both tips and pads... nothing restored her outfit. 

There were no instructions on the screen, no error messages or prompts. 

What seemed by all appearances to be a fairly clear interaction (assuming the user has used a touch screen before) not only produced an unexpected and undesired result, but refused to be further amended except by cancelling altogether.

FAIL.

Please forgive the dreadful photo, I had only my cellphone camera at hand.