Can’t see the embedded flash above? [view low res | view high res]

I like the way you can see the recurring pattern of a pristine design getting gradually tweaked and cluttered until it hits tipping point, then it gets redesigned and the cycle continues.

Source: WayBackWhenMachine. (Typo amended – thanks Hanford!)

Can’t see the embedded item in your feed reader? View it here.

It’s just too easy to get sucked into the minutiae rather than maintaining a focus on the bigger picture. Plus, precise UI sketches can end up taking hours to make, so then when you begin the evaluation phase, the author is inevitably feeling defensive over their baby. And since the small details are present – the wording, layout, and so on – feedback then ends up focusing on it. You end up drilling further and further into the detail because it’s such a tempting, solid thing to talk about.

Instead of small details, this initial stage of design sketching should concern things like proposition (Does the overall idea seem useful?), concept (How does it deliver it’s value?) and context (Would it fit in with the other things the user is doing, e.g. before and after using it?)

This is where ‘boxing glove’ wireframing technique comes in. You don’t actually wear boxing gloves (sorry for the let-down), the idea is that you take measures to physically compel yourself to do very basic, very quick sketches. It’s a bit like Andy Budd’s idea of “one day design concepts“, but at a scale of minutes rather than days.

It’s simple:

1. Grab a big pad of post-it notes
2. Grab a felt tip pen
3. Sketch each page on a single post-it
4. Draw a single user-journey through the system. Concentrate on the ‘happy path’, i.e. ignore contingencies for now.
5. That’s it!

The constraints of the small paper makes it feel a bit like you’re wearing boxing gloves – it forces you to draw only the most crucial parts of the user interface. (If you want to use bigger paper, just use a fatter pen). This enables you to hammer through a user journey in a few minutes.

Another nice benefit is that this method invites participation in a way that finessed diagrams don’t – anyone can join in, no special skills necessary. If you’ve read Bill Buxton’s Sketching User Experiences, you’ll know exactly what I’m getting at here.

A few days ago Google switched to the altogether more obvious & comprehensible label “Products” and “Product Search”. Marissa Mayer, Google’s VP of Search Products & User Experience blogged:

Today, we’re making some changes to how we help users find things to buy. You may be familiar with our product Froogle (a pun on “frugal”). Froogle offers a lot of great functionality and has helped many users find things to buy over the years, but the name caused confusion for some because it doesn’t clearly describe what the product does. [read full post]

I guess this is a bit of a boring post (“Don’t use incomprehensible labels” is a basic usability guideline), but the lesson here is that even for a user-centered company like Google, once a name becomes entrenched internally and gets attached to departments and job titles, it takes ages to change it.

Another great deal from Three.

I don’t understand how anyone could see this as a good strategy. Sure, you may get a good sign up rate, but when the customers see their bills at the end of the month they are going to be seriously angry. I can only hope that this is a design mistake, not purposeful deceit.

Steven Garrity discusses web based applications over at Acts of Volition. The following paragraph caught my eye:

“The browser canvas already lives in a window, often in a tab inside that window. Filling it with another set of windows with a set of behaviour that is similar to, but not exactly like the behaviour of the base operating system windows is likely to create a variety of usability issues.”

He also mentions the One Laptop per Child interface and points out that it does away with overlapping windows.

I’ve felt for a long time that overlapping windows are cumbersome. The amount of time spent rearranging them to keep things visible outweighs the flexibility they provide. I tend to run all my apps full screen and use Alt+Tab or the task bar to cycle between them.

Within an application window the problem arises again. We are mercifully moving away from the days where people thought floating palletes and child windows were a good idea. Microsoft dumped the multiple document interface (MDI) several years ago and Macromedia has dumped floating pallets in favour of docked panels in most of it’s apps and this brings a modest improvement.

I don’t know what the ideal solution is. Tab/taskbar like solutions are better than floating windows and panels are better than floating palettes but only slightly. Maybe web style UI design is leading us to a better paradigm A well designed menu system with breadcrumbs and visual clues as to your current location in the system can feel quite comfortable for some types of application. Whether it can be adapted to tasks that are more complex than Email I can’t say for sure. (isn’t it interesting how web applications are leading us back to something that looks suspiciously like the DOS text-based interfaces that were supposedly made obsolete by GUIs?)

It will interesting to see how the new Office UI is received but that has only really tackled one problem – that of bloated menu’s and toolbars. I think there’s still room for improvement. I don’t think it will be anything radically new and it might even be a simple tweak to ideas that are already staring us in the face.

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.

I’m not quite sure whether the rest of the article has much to do with monitor sizes but he does say some interesting things about designing interfaces for casual users as as opposed to skilled users. He argues that very different constraints apply when you design for one group other another and furthermore there are fewer situations when you can assume your users will have time to become skilled in your interface than you would assume.

So even when you think you are designing a tool for people that will have the time and incentive to become familiar with your innovative, optimised design then there are many times when the user will be starting from scratch.

An example for me is Photoshop. Now Photoshop is such a huge program that there are many areas I rarely need to use. When I do use them, quite often that part of the interface has been revised since the version of Photoshop I was using when I last went there. So despite using Photoshop pretty much every day for something or the other, there are times when I am a newbie. I like to hone my skills so I will try and learn something new in these situations but in many cases the clock is ticking and I just have to get results quickly.

Everyone is both a power-user and a newbie at different times. The cases where a tool or a piece of software can guarantee it will only be used by power-users or people learning to become power-users is fairly uncommon.

So ideally software should have lead you gently in but get the hell out of the way for people who already know what they are doing. Context senstive help, wizards, tooltips and interfaces that have ways of hiding advanced features*  all help in this.

* howver hiding/changing parts of the interface to simplify things for new users can also hinder the ability to discover new features by exploring the screen as well as negating the benefits of motor memory. (i would describe motor memory in this context as the process where you learn to quickly move to the correct button/icon/control by habit much quicker than you would be able to locate it by conscious action)

The point being that people know you have to click on links so having the text ‘click here’ as the a link is like having a door with sign saying ‘this is a door’. In addition people have to read on to find out where the link will take them whereas in the second example there is an immediate connection between the link and it’s probably destination.

Well. I think it’s easy to overdo this. Metafilter is a prime example.

There is an unpleasant tendency for people to write stuff like: Giraffes have many fascinating qualities that you should know about.
(I’m not exaggerating – about Metafilter that is, not giraffes)

In fact I think links in a body of text should only be used when space is short. I would much prefer something more like…

Giraffes are blah de blah de blah de blah de blah de blah de blah de blah de blah:

• National Geographic Kids page on giraffes
• Great nature-wildlife.com giraffe page
• Wikipedia entry on the Giraffe
• Giraffes at San Diego Zoo

There. Isn’t that nicer? It interupts your flow if you’re trying to talk about something else but can’t the links wait until the end of your paragraph?

Even worse than the Metafilter disease is something I’ve noticed at Wikipedia and also at sites that use a Content Management System that tried to helpfully automatically add hyperlinks to any keywords that it spots. Look at the Wikipedia giraffe article (I must be obsessed with giraffes today)

Look at the words hyperlinked in the opening paragraphs. OK. I might want to know what an Okapi is it’s helpful to have that word linked.

But hyperlinking ‘metres’? Hyperlinking ‘animal’?
Why stop there? Maybe I need to know what ‘tallest’, ‘land’ and ‘living’ mean so link to those pages too. There’s still the words ‘all‘ and ‘and‘ left without a blue underline…

And I’ve seen even sillier examples on other Wikipedia pages. At least they don’t hyperlink to a live stock quote on every single mention of a companies name.

I heard Zeus being recommended and gave it a go. I lasted long enough to open it , type something, hit CTRL+Z and realise that this wasn’t the default short-cut for undo. This is a Windows text editor. Maybe it matches the default for Vi or another popular Unix app but my instinct was that if it doesn’t match common conventions for undo then I wasn’t going to be getting on with this software.

This reminds me that I wanted to write about the idea that testing has proved that shortcut keys do not save the user any time. I’ll dig out the reference as I think it’s a load of twaddle and easily refuted.

This means that the remaining bits of cruft in the interface stick out like a sore thumb.

So. modal dialog boxes. The ones that pop up to tell you something and block you doing other things until you click OK.

What they are popping up to tell you had better be important as they disrupt your train of thought. When you are working fast on something repetitive you find your self clicking on another area of the screen, getting that annoying ‘ding’ noise until another part of your brain manages to notice that one of the little buggers has popped up and is blocking what you are trying to do.

This is fine if the message is ‘Warning! Doing this will kill all your friends. Please turn on the ‘Allow application to kill all my friends’ preference if you wish to allow this.’

Anything less urgent than this should be communicating with you in a way that doesn’t make you stop what you are doing. A status bar message or an informational popup somewhere away from your cursor.

My favourite Photoshop rage moment is when you are

There use was rampant in the past but they happily went the way of human sacrifice and coin-operated electricity meters.

There are still some left.

(note to reader. I started writing this. Got distracted and now can’t remember where I saw the modal dialog that annoyed me in the first place. I thought I’d post this anyway as I need to up my average and someone might come along and find it for me…)