Category Archives: Interface design

Prototyping rich internet applications (RIAs)

Commenting on a thread on the IxDA discussion list, Jared Spool points us in the direction of this fantastic low-fi example for communicating about a rich internet application.

http://commoncraft.com/video-wikis-plain-english

I certainly like the power of the stop-motion video, but as with any form of interactive prototype if it means going away from your core skills it means unnecessary time learning the tool you’re using to create the prototype.

Office and the beast

The recent post by Phil Barrett, Using the Microsoft Ribbon without anyone getting hurt, reminded me of my first experience using Microsoft Office 2007.

I was in remote New South Wales conducting field research (almost literally!) and had been given a laptop on which to conduct the research. It is always a joy not using your own equipment, but I was running usability tests on a working prototype and needed a machine with a server in a hurry, so I was given “the beast”!

The beast

The Beast

The beast doesn’t look quite so beast-like in this thumbnail, but let me explain…

The beast is an Acer Aspire Gemstone Blue 8930G. It has the byline “Wider than Wide!”, a more accurate description of the product would be “Heavy as Hell”. Light it isn’t.

(it feels like quite a liberty to call something with a 18.6″ screen and that is difficult/impossible to find computer bags for a laptop – maybe if I was a giant it would be both portable and fit on my lap!)

Besides the weight, there are a couple of other issues with the product (this is even before I got to using MS Office 2007):

  1. The laptop has a bizarre trackpad that provides no tactile feedback as to the edge of the trackpad area. This meant that my fingers kept on brushing the fingertip recognition scanner that is oh so handily placed just beside the trackpad. Brushing the scanner causes a “fingertip recognition has not been set up on this machine” message to come up every time – quite disrupting when you’re touch typing – grrr!
  2. Every second time I started the machine rather than the Windows environment I was placed in some Acer multimedia environment that enabled me to select between the different modes the machine can operate in. Unfortunately there was no obvious way (not to me anytime) of exiting the environment and booting into Windows – so I invariably ended up rebooting the machine and hoping that it would just magically boot into Windows rather than the multimedia environment (never will anyone have been so pleased to see Vista starting up!).

So to MS Office 2007…

Where did Save As go?

As the above description of the machine I was using suggests, I wasn’t exactly working at maximum speed anyway, but then I started using MS Office 2007.

I understand (or at least think I understand) the supposed logic of the MS Ribbon, i.e. exposing the most likely functions a user may require based on the task they are undertaking. But for a product like MS Word with such a variety of tasks is it really possible to do this? Can you really second-guess all the things a user may want to do at any point in time? It certainly failed me.

The task: I was updating my “on the road” notes and wanted to save the document I was working on with a new name, i.e. Save As.

word-2007

Where has the File menu gone? It took over 10 minutes before I managed to locate the feature (clue: you find it by clicking on the circular Office logo in the top left corner – intuitive eh!).

The combination of the Acer laptop and MS Word 2007 reduced my productivity considerably. What should have taken me 15 minutes, ended up taking around 45 and included much, much frustration.

I like Phil’s note that there are products you can buy that remove the Ribbon, personally I’ll be sticking to Word 2003.

Better ways to login

Excellent post at Cooper Journal discussing Better ways to login.

The article goes into great detail discussing the pros and cons of issues such as what to use for a username and password retrieval. Then gives case studies of the solutions used by many leading internet sites. Then gives recommendations for the ultimate login system. To quote:

Some users genuinely prefer to use a username, others prefer email. The system should allow users to create a username or use an email address as their login ID.

Allow users to add as many email addresses as they like to their account. It gives them flexibility in communications and verification.

I like the flexibility this suggests, but I have always been a big fan of email address – it just seems the simplest solution to me (and you know I like simple!).

I remember conducting numerous usability tests on ISPs back in the day. At the time each service (Freeserve, BT, etc) required the user to create a unique username. This simple requirement often created quite a significant barrier to users continuing the registration process:

  • People would get very passionate about wanting a meaningful username and would spend a long time thinking about what it should be.
  • People would get frustrated when the username they wanted wasn’t available.
  • People wouldn’t know techniques for how to make a simple change to their preferred username to make it something unique.
  • If people can’t use their preferred username, i.e. the one they use for every other system, then they are likely to forget the username and rely upon the forgetten password process.

The article offers good food for thought and I’ll certainly consider it in more detail the next time I have to give recommendations on a login process.

Mozilla Firefox 3: Upside-down tabs

I just installed Mozilla Firefox 3. Rather than all the excellent new features, the thing that really struck me was that the tabs were upside-down.

I wonder why they did it that way? I can see that the tabs have a relationship to the things above and below the tab area, but them being upside-down (and thus non-conventional) makes me stop and think about the tabs rather than doing what I was already doing.

Don’t get me wrong, I am not suggesting this is going to cause “real users” usability issues. Rather I think this is something that us in the usability design community will get deeply analytical about.

Universal buttons: Now my washing machine thinks its a DVD player

My new washing machine has a Play/Pause button just like my DVD player/stereo.

img_0193.jpg

This trend towards universal control icons/buttons (or butcons as Mr Cooper would have it) certainly makes the washing machine more intuitive for me, but what about if your previous washing machine looked like this?
old-wash1.jpg

The new interface strikes me as revolution rather than evolution. Yes the language may be similar, but the interaction is completely different.

Where the old interface is all pull/push, knobs and physicality, the new interface is just buttons. The old interface gives a sense of the mechanics behind the interface (which if you’re interested to read more about, see How stuff works – where the image comes from), where the new interface controls could be from an iPod (kind of!).

Usability testing the new machine

I wondered how my iPod-less, slightly luddite, 20th Century mother would cope with the new controls? So I did some guerilla usability testing of it with her. A brief summary of the issues she encountered is as follows:

  • She tried to twist the push button display that changes program, i.e. she tried to interact with the new device in exactly the same way as the old device.
  • She spent 2 frustrating minutes trying to work out how to get the setting back to the previous program, i.e. synthetic back to cotton, before deciding “something is broken”.
  • She didn’t comprehend how these programs affected the temperature controls (not pictured).
  • She attempted to pull the change program push button to start the wash.

In summary, the interface failed for her.

Of course people learn and adapt, and personally I feel that convergence of interaction and common controls has much to be said for it, but as interface designers it is wrong to assume that just because something makes perfect sense for us and touches on familiar cultural reference points, that it will be intuitive for all.

The root of the problem

I think the root of the problem is that LG have tried to make the interface look like the old style machines, but the reality is that it works completely differently. This faux similarity  is the issue. The push button change program control on the new machine looks too much like the old tactile knob that people can twist back and forth. The position and style of the new change program push button gives the new machine a familiarity that is self defeating.

Maybe LG are targetting the “iPod generation” with these new machines – I can almost hear the marketing meeting now – “I want you to create an iPod experience to make washing clothes enjoyable!”.

I am still none the wiser as to what “Pump” or “Quick 30” mean on my new machine, but then again what did all those 15, 12, 9, … numbers mean on the old displays?

Thinking along these lines I stumbled across Bill DeRouchey‘s History of the Button site, well worth a read.

Lightbox usability

Modal dialog boxes, i.e. windows/dialogs that once opened must be closed before the user can continue, have always been a bit of an usability no-no.

The biggest problems being that the user either doesn’t notice the modal dialog has appeared, or doesn’t realise that it requires their attention before they can continue.

During usability testing I’ve seen first-hand the frustration that can be caused by modal dialog boxes. Thus I’ve always diligently tried to define interaction solutions to avoid/minimise the need for modal dialogs. But the clever Javascript Lightbox code seems to have put an end to these problems.

picture-1.jpg

As you can see from the above example on the BBC’s site, the Lightbox technique leaves the user in no doubt what they need to do before they can return to the main window.

I haven’t yet conducted any usability testing on this kind of Lightbox dialog, but my guess is that it will test far better than traditional modal dialogs.

Update

I see that Jakob Nielsen named the Lightbox his “interaction design technique of the year” in his Year’s 10 Best Application UIs 2008. Nice to get there before the Dane.

Car stereos

I’m currently spending a lot of time in borrowed cars as I make my way around New South Wales conducting research at a whole host of schools. Sitting in the passenger seat as NSW’s many kilometers click by can be a tad dull – and I’ve found myself fiddling with the car stereo quite a bit.

I was very taken by the Loud button on this stereo inside the Ford we were driving.

Loud button

The label reminds me of Nigel Tufnell explaining why his guitar amp goes up to 11 in This is Spinal Tap (“it’s one louder”).

I did a straw poll in the car as to what they felt the button might do. The suggestions were:

  • It will kick the bass in like a “Mega Bass” button like handheld stereos sometimes have
  • The people who want to use it will know what it is.

I am not so keen on the second answer. I pressed the button to find out what it would do and hey presto nothing. We tried turning the bass down really low and then pressing it, but still nothing.

I investigated the manual. This is the only reference to the Loud button in the manual.

Manual

Ah – so Loud means loud. The richness of insight offered is truly overwhelming.

The only conclusion we could draw is that the button wasn’t working!