Usability

There are 13 posts filed in Usability ().

Usability test of the iPhone yields interesting result

The swedish usability consulting firm inUse did a usability review of four mobile phones including Apple’s iPhone, the HTC TyTN, Sony Ericsson W910i, and Nokia N95. Users performed common tasks such as making a call by dialing a number manually and then by calling a person from the address book, change volume during a call add a new contact to the address book, create a new calendar event and more.

The result should be useful for those who are trying to convince their IT department:

Stunning. The iPhone has introduced a new interaction paradigm to the world, in an uncompromising way that proves that “less is more” when it comes to true user experience.

Some other interesting quotes from the report include:

Most of the subjects did not mention the HTC at all when speaking of which device they would prefer. […] Only one of the users was able to carry out all tasks [on the HTC] without the assistance of the test leader and all five users had severe difficulties with at least three of the tasks.

What is it then that makes the iPhone different? Most importantly, it has removed one level of abstraction by allowing the user to act on objects using the finger directly on the phone’s surface. The difference between this and having to press keys on a keyboard and watch the screen to see what happens is striking.

The full report is available in PDF from the inUseful blog.

UI Inconsistencies…

Consistency is important when designing interaction with user interfaces. Consistency makes it possible to re-use what you learned in one application in another. Unfortunately there are many application developers that invent their own interaction principles, even when their is an established praxis. But, it is even worse when someone who established the praxis provides an inconsistent user experience. Yes, that means you Apple.

Case in point: zooming in and out of a document:

  • Safari: Apple +/-
  • Keynote: Apple </>
  • Preview.app: Apple +/-
  • iPhoto: Alt 1/2

At first I thought that Apple +/- was for increasing and decreasing text, but in that case Preview.app is inconsistent. Oh well, moving on…

Prism – web apps as desktop apps

When people started making applications available in the browser a number of interaction challenges appeared. How do you launch a web app compared to a desktop app? How do you prevent people from navigating away from your app? The Mozilla people have been hard t work with Prism – basically a customized version of Firefox, which lets you create desktop apps pre-configured to load a certain URL at startup. The desktop app is launched like any other application. Pretty sweet as the user experience becomes more consistent. You can also customize the application icon and other parameters. Continue reading →

Interacting With a Stockholm Public Transport Ticket Vending Machine

This will be a field day for industrial designers and usability experts. The new ticket vending machines for the Stockholm public transport system have been met with a lot of criticism lately. People are finding them difficult to use and apparently there are very few tickets sold. On top of that they look like the machines seen in parking lots. Oh wait, they are apparently from the same manufacturer.

Stockholm public transport has a tradition of being late to the 21st century. Pre-paid tickets are still paper based and stamped by the bus driver. Previously you could buy them directly from the bus driver. However, robbery prompted the public transport authorities to remove all cash handling from the bus drivers, hence the increased need for outdoor ticket vending machines.

So, how do you interact with these machines?

SL ticket vending machine

  1. You start in the middle and press a blue button one to three times to tell the machine if you want a ticket for zone A, A and B or A, B and C.
  2. Move down and press the second blue button once for a regular ticket or twice for a reduced price ticket.
  3. Now it’s time to swipe your credit card on the top left side of the machine.
  4. Move back to the center and press the green button once.
  5. Ticket appears to the left.

Complaints mainly focus on the illogical placement of buttons (4, 1, 2 if you read top to bottom). In between pushing the buttons you have to look at the two line dimly lit LCD display to see what you are supposed to do next.

I am guessing most people buy a regular priced ticket for zone A (the city center). This involves pressing three buttons. Maybe the most common scenario could be reduced to “press a zone button and swipe your credit card”? Why does it have to be difficult?

I remember the pleasant experience of the Tokyo subway system. On some machines, all you did was to push a button representing your destination on the map, dump a fistful of coins into the machine and it would hand you the ticket and spare change in an instant.

Update: We won the World Usability Day design contest with a redesign of this machine. The design proposal and background is here (only in swedish).

Installing an e-ID in 47 Simple Steps (Not Counting the Eternal Loop)

(Please note that this post is from 2007 and things have become much better).

When you are on parental leave you have to register which days you are away fro work with the Swedish Social Insurance Agency. To access the online services of an agency you have to have an electronic ID. In Sweden this is a locally installed certificate issued by your bank or large telecom provider.

In my case my identity is checked by my bank and then I am forwarded to Telia, which handles the process of generating the ceritificate and installing the appropriate software on my computer. What could have been a simple well guided procedure is instead an exercise in ambiguity and a complete lack of usability:

  • The process involves 47 (!) steps,
  • an eternal loop (yes, really),
  • require you to install a new browser,
  • configuring the same browser to run in Rosetta mode and
  • a revoked server certificate (for the server that generates my certificate!).

I seriously doubt that non-programmers manage to install and use one of these certificates. Let’s go through the steps required to install an electronic ID in Sweden:


  1. We start at the the Social Insurance Agency and choose the login link.
  2. To login you need an electronic ID. Fair enough. I am redirected to the electronic ID information page.
  3. The electronic ID info page tells me to get an ID through my bank.
  4. I visit my bank and login.
  5. My bank seems to have done their homework. It is easy to find the e-ID link.
  6. To prove my identity I use the device provded by the bank.
  7. After proving my identity my bank informs me that they will redirect me to Telia, the once-was state-run monopoly telco.
  8. Telia greets me with a wizard-like interface that looks like a standard Windows 98 dialog window. It is, however, a regular HTML page that someone forgot to test in Safari.
  9. Clicking the “Next” button displays a text informing me that I have the wrong web browser. This service only works with Firefox. Okidokee.
  10. I visit the Mozilla website and download Firefox for my platform.
  11. We start again by visiting the bank with Firefox this time.
  12. History repeats itself.
  13. I once again prove my identity to the bank and…
  14. …get forwarded to Telia.
  15. The welcome page looks familiar. However, someone forgot to test this in Firefox. The text is now in Times Roman and barely readable.
  16. Telia asks me to accept their tems and conditions. Ok.
  17. I am now informed that I am using an Intel Mac. For my e-ID to work I have to “activate Rosetta”. A step by step instruction tells me to set Firefox to run in Rosetta mode and then restart Firefox. Am I supposed to do this now? The instructions continue and tell me that “software for Linux has to be installed manually”. And then there is a “Next” button. Thank you for narrowing ot down to three choices in this step. I decide to go with the first instruction.
  18. I set Firefox to run in Rosetta mode.
  19. And then I restart Firefox as per the instructions.
  20. Firefox is restarted (rather sluggish due to running it in Rosetta mode) and page is displayed. The page says that an “unexpected error has occurred. Try again in 10 minutes”. I wait 10 minutes and reload the page, same result. No further instructions. Maybe I have to start the proccess again?
  21. So, I go back to the bank for the third time.
  22. I prove my identity o them again and get redirected to telia again.
  23. Hello! You look familiar.
  24. I accept the terms and conditions again and click the “Next” button.
  25. A new page appears and a warning message from Firefox asking me if I want to install a security module named Net ID. The text in the wizard talks about downloading stuff for Linux to my desktop. Do I have to do both? I accept the Net ID install question even if “libiidp11.dylib” sounds scary.
  26. After clicking OK Firefox displays an alert informing me that a “new security module has been installed”. I click OK. There is still a text that tells me to download something to my desktop and run it there. Should I, or was it just installed for me? I decide to skip that and click the “Next” button instead.
  27. Ok, now I have to choose a password for my e-ID. Looks like everything was alright in the previous step then. I enter a password and click the “Next” button.
  28. A progress bar appears. My e-ID is being created it seems. When the progressbar completes I click the “Next” button.
  29. A message appears saying that my ID and the required software was successfully installed. Sounds nice. It also tells me that since I am using Firefox I have to restart the browser. There is also a button which says “Complete process”. Should I restart the browser now or click the button? I choose to click the “Complete process” button.
  30. The layout tells me that this isn’t part of the previous wizard. The text starts with an introduction to what e-IDs are and then goes on to tell me that I have to “upgrade” my e-ID. There is also a button that says “upgrade”. I click the “upgrade” button.
  31. Bang! Firefox displays a certificate warning. Has the site been hijacked? Hard to say. What are the odds that a certificate issuer is using untrusted certificates on their own site? Low I guess. I decide to go with Firefox’ recommendation and trust the site for this session.
  32. I am back in the fake Windows dialog interface again. This time it says that it will guide me through an “upgrade” of my e-ID and software. Sounds ok. I click the “Next” button.
  33. The next dialog looks familiar. The text tells me to download software to my desktop for installation if I am using Linux but the Firefox confirmation dialog asks if it is OK to install a security module. Must be the software upgrade so I click OK even if “libiidp11.dylib” sounds scary.
  34. Firefox displays an alert: “the security module already exists”. Does this mean the upgrade wasn’t needed? What do I have to do? I click OK and then I click the “Next” button.
  35.  Getting tired of describing each step…
  43. Win!