90 percent of everything : Usability Blog

Written by Harry Brignull

Here I have put together a slideshow of the social aspects of the OLPC UI. I gathered the stills and information from the OLPC wiki. (The video is a mock-up of how the UI would work, if it were implemented yet). The Sugar UI is very adventurous- no other desktop in the world gives social interaction such prominence. I just hope they have done, and intend to do lots more user testing. It’s too bad they haven’t done any user testing yet! The intended user-groups need to try out these laptops and give feedback on the things they don’t find easy or useful to use. After a few design iterations, then the laptop might be ready to ship.

There is also a YouTube version here although the quality is not so good.

This is a piece of work I was involved with a while ago as part of an academic research group at Sussex and Nottingham University. It’s a large multi-user wall display designed to be used by small groups of people in community spaces like common rooms. Check out the video or read more about it here.

This post is a collection of my concerns about the usability of the OLPC (One Laptop Per Child, aka the “Hundred Dollar Laptop”) and how well suited it is to its target user groups. If you haven’t seen it, take a look at the video, or if you want to read more about the UI concept (named “Sugar”) from the horse’s mouth, read about it here.

Involvement of the users

Building a UI is like making a pair of shoes. Creativity is all well and good, but ultimately they have to fit the person you are making them for or they aren’t walking anywhere. While lots of hard work has gone into the UI design so far, it seems they are getting ahead of themselves and chasing their own dreams. The whole ‘breaking away from the desktop’ smacks heavily of academics who have finally found an outlet for their wacky ideas. Creativity is of course very important, but it has to be tempered within the requirements of the target audience. You gather requirements by speaking to the target audience, testing your designs on them and generally involving them in the design process. I wonder exactly how much of this is going on. The eToys application, for example, currently seems very raw and most appropriate for teaching programming to educated kids.

Transferability of skills.

The Sugar UI seems weird and back to front to us now, after a lifetime of traditional UIs. What will a traditional UI seem like to kids who grew up with the Sugar UI? Weirdly upside down? It reminds me of that psychology experiment you can do with prism glasses. These glasses make everything look upside down. Wear them for long enough and everything seems the right way up - until you take them off and then the world seems upside down without the glasses. You have trained your mind to look at everything in a upside down way. Is the OLPC Sugar UI like prism glasses?

What kind of foundation are we giving these kids when they eventually get faced with a ‘normal’ desktop?

Are the collaborative concepts half baked?

The community features of the OLPC seems to re-invent some of the tried and tested techniques we already have. Traditional list style presence indicators and discussion boards are very effective. The graffiti wall ‘do anything’ style discussion board offered on the OLPC has popped up many times in the past but never caught on. The concept is quite lovely but in practice the result is often very messy and anarchic. Structure helps, it doesn’t hinder.

One size doesn’t fit all

Maybe it’s just me but there seems to be some real vagueness about target audience. Who is it really for? And what are they actually going to use it for? The difference between an 8 year old and an 11 year old is huge. So is level of literacy. Computers aren’t a silver bullet to education. At best they can be considered a small but important lynchpin. Where in the bigger picture of educational policy will the OLPC fit? An old saying comes to mind: Give a man a fish; you have fed him for today. Teach a man to fish; and you have fed him for a lifetime. Well, give a man an OLPC and … what exactly?

Is the UI Patronising?

I can’t help thinking that the Sugar UI talks down to the users. It seems to be saying “You aren’t ever going to be able to cope with the computers we use in the west, so here, have this special one with cut down features!”

I’ve heard that users will also have access to the command line. I don’t see this as a solution, it’s almost like giving them a soldering iron and saying look - once they used the device fully for a few years and outgrow it, they can solder some new functionality onto the motherboard. Some middle ground is needed here.

Google Book Search behaves strangely when you use search terms that contain characters with diacritics (OK. I’m showing off. I mean accents)

It would be nice to report this but Google shares something in common with that other megacorp in that it doesn’t make it easy to report a bug.

So if you’re searching for a phrase with accents try it with and without to make sure you don’t miss relevant results.

The makezine blog has a great guide on how to try out the OLPC (One Laptop Per Child) system yourself on Windows, but if you cant be bothered, I have put together a video clip of the OLPC UI in action. I’m amazed to see how unusual the UI is. Apps are full-screen by default, and the black border shown around the sides (see screen grab) is a menu that pops over the content when you move your cursor to the side of the screen. And that’s just the start of it…

It’s really not what I expected at all- I have opinions about interface familiarity and transferable skills… What do you think? Please post your comments!

>> WATCH OLPC USER INTERFACE DEMO VIDEO

Now Internet Explorer used tabs that means there isn’t a major browser on the market that doesn’t use them.Tabbed browsers work nicely when used with a mouse that has a wheel or (a third button) for the following reason.

You’re on one of those pages that has loads of content including links to things you’d like to read some more of. Wikipedia articles are a good example of this kind of page. You don’t want to stop reading but you want to open the interesting links and come back to them later.

So you just middle-click on anything interesting and it opens in a tab behind the window you are reading and doesn’t interrupt your flow. Lovely. My whole browsing style centers around this and I’m sure it’s a fairly common usage pattern amongst other internet addicts regular web users.

Then some git creative web designer comes along and for some bizarre reason decides he needs to do the links as javascript links or even more bizarrely decides that Flash is the ideal tool to create a web page. So your middle clicking doesn’t work because it’s not a normal HTML hyperlink.

Before tabbed browsing I had a similar problem as I would always use Ctrl+Click to open the link in a new window and then switch back to the window I was reading. As much as I hated it when people broke this I accepted that it probably ‘power user’ behaviour and I couldn’t refer to claims about breaking basic usability standards.

Similarly when Firefox, Safari and Opera were the only tabbed browsers in common usage then it seemed churlish to claim that breaking this behaviour was as bad as breaking - oh, I don’t know - the back button.

But now tabbed browsing is fairly universal and I feel justified in stating that middle-clicking should become a standard expected piece of web browser interaction and sites that break it are making themselves user-hostile in a small but significant way.

Plus it really gets up my nose.

Look at IE 7’s tabs. They use more pixel space than Firefox, they are bright blue and they have Aqua-style 3D beveling. They are basically shouting off the rooftops “Hey, look at me, here I am, great new tabbed browsing!”

Is this really a good thing?

Alan Cooper refers to this kind of everyday “screen dominating” application as having a “sovereign posture“. He says sovereign applications should have subtle controls that fade into the background.

“The implications of sovereign behavior are subtle, but quite obvious once you think about them. The most important implication is that the users of sovereign programs are experienced users. … seen from the perspective of the entire relationship, the time the user spends getting acquainted with it is small. From the designer’s point of view, this means that the program should be designed for optimal use by experienced users and not for first time users.”

What the IE 7 designers have done is used design principles that are more applicable for “Transient posture” programs. To quote Alan again:

“A transient posture program comes and goes… The program is called when needed… The salient characteristic of transient programs is their temporary nature. Because they don’t stay on the screen for extended periods of time, the user doesn’t get the chance to get intimately familiar with them. Consequently, the program’s user interface needs to be unsubtle, presenting its controls clearly and boldly. The interface must spell out what it does…”

This is interesting stuff. So is the design of the IE7 tab area bad? Or is it an effective way of showing newcomers that these tabs exist? But then does it become too ‘in your face’ for users as they become experienced? Could some clever design satisfy both kinds of users?

In his recent blog post, Paul Adams got me thinking about metaphors, and how useful they are in explaining usability in a hurry.

A friend recently asked me for some advice to help him “improve” his website. The site involves selling advertising space for employers to post jobs. This is how the conversation went:

Me: “On the jobs page, the search box should be made bigger, since it’s
the site’s main offering”

Site owner: “But the search box is right there! How could you miss it?”

Me “Some people will miss it, so they wont get to search, they wont find the jobs that fit their criteria”

Site owner: “That’s just a small visual tweak. How is it going to change anything…? It’s so minor it’s barely worth the effort to change it…”

(Conversation continues like this for 20 minutes)

It’s easy to assume that people you talk to understand usability principles, and you can jump in too deep too quickly. At the time I thought my friend was being very difficult. Actually the fault was all mine. The problem with this conversation was in my assumptions, not his misunderstanding. Whenever you start a conversation about usability, it is always wise to first work out where the other party is coming from.

Usability doesn’t involve hugely complicated concepts (to quote Steve Krug “It’s not rocket surgery”), but if you haven’t spent time thinking and reading about it, usability is something you experience in the “doing”, it’s not something you theorize about. My friend uses his website so often and is so familiar with it that the search box is perfectly prominent for him, and he assumes that it would be for other people too.

About half an hour into the conversation I came up with a metaphor (well, borrowed one) that helped him suddenly understand what usability was all about:

Bad usability is like a leaky pipe.

A large number of potential users go in at the start, but whenever they hit a usability problem, some of them drop out, like small drips out of a leaky pipe. The trouble is that a consistent small drip from a number of places can create huge loss over time.

I know it’s pretty ungroundbreaking as metaphors go, but for getting the point across, it seems to hit the nail on the head. (Image modified from here).

DV247.COM - fairly standard e-commerce site. I ordered something on Friday and on Monday started to wonder what day I needed to stay in for collection. Here’s their order status page:

Now I couldn’t see any indication here of whether it had been shipped or not. I was expecting a status column or even a little legend that tells me what the types of status are and what they mean. DV247 does have this and it’s what gave me the clue required to solve this Soduku-like puzzle. The trouble is it’s buried on their help page which is on another part of the site entirely.

This is the trouble with documentation. It’s usually some distance away from the thing it’s documenting. So you have to decide you need help, stop what you are doing, figure out where the documentation is, work your way through the categories and contents to something that looks like it might answer your question and then figure out how to get back to what you were doing.

Of course instead of this I just looked up their number, picked up the phone and tried to ring up and ask them. I’m lazy like that.

Some thoughts:

1. Do you really need a ‘help’ section on your website? If you’ve made such a pigs ear of your site design that you even need to document things then document the things themselves right there on the page next to them
2. You shouldn’t need to explain to your customers how to work out the delivery status of their order. It’s such a basic task it should be so obvious that even someone like me can figure it out.
3. If you get lots of phone calls from customers asking you questions about stuff that should be easy to find on your website then this may be a clue that there’s something up with your website. And don’t forget all the calls you don’t get because that customer gave up and buggered off to one of your competitors…

Anyway - going back to the order status, here’s the relevant info from their help page:

“We advise all customers to Log-in to our site and view their order status records. Your order status will change from ‘New’ to ‘Confirmed when item/s are picked from our warehouses to dispatch. The status will change once more, to ‘Shipped’, when one or more of your ordered items has been dispatched from one of our warehouses.”

So the answer to the puzzle is this. You see that little word ‘new’ on the top line of the order? That’s the bit that tells me it hasn’t been shipped yet. I didn’t even see that word when I was looking for my order status!
Am I just Mr Thicky, here? Would anyone else have figured that one out without looking it up in help?

Pac man pie chart joke (via Boing Boing)