Clearleft

Finding Steve Fossett: When UI design can be the difference between life and death

16 September, 2007  |  Tagged with thoughts, web design, Clearleft

This year’s dConstruct User Experience Design conference is mere days behind us. Having been inspired to create websites which are easier to use, I am horrified by the lack of thought behind the design of Amazon’s Mechanical Turk. Amazon’s phenomenal success as a book store has never been attributed to its frankly poor visual design. This week my criticism of it has become quite topical.

Mechanical Turk is currently in the news because it’s being used to help in the search for Steve Fossett, who went missing in his aeroplane in the Nevada desert last week. Mechanical Turk users are reviewing the latest satellite images of the area from Google Earth, looking for anything which resembles a crashed plane.

The problem, I found, is that the process is arduous and the user interface too complicated. For a start you need to be logged in to the site, although this seems pointless given that users are not rewarded for this task and forcing people to register first is a massive deterrent. Once you’re logged in, and in the ‘Find Steve Fossett’ section, you have to accept the project (or the ‘HIT’, as it’s called), then…

  1. Scroll down to the photo to review it.
  2. Scroll down further to the form.
  3. Probably click the radio button for ‘No, this image contains nothing of interest’.
  4. Scroll either to the bottom or back up to the top of the page.
  5. Make sure ‘Automatically accept next HIT’ is checked.
  6. Press the ‘Submit HIT’ button.
  7. Repeat.

Given the time-sensitive nature of the task, with a little thought this 7-step process could and should be condensed to just one-click, with an easy to understand user interface and no need to scroll or even move your mouse between each HIT. In my rudimentary test, this reduced Amazon’s 10-second per photo process to just 3-seconds per photo (most of which was just the time taken for the next photo to load).

Providing a better user interface would allow each photo to be checked in about a third of the time, in turn encouraging more people to help in the search. The overall time saving would be immense, and could literally mean the difference between life and death for Fossett.

Compare Amazon’s Mechanical Turk screenshot to my simplified Mechanical Turk screenshot (in this demo, click and hold the mouse to see what would happen if you found Steve’s plane).

Amazon's Mechanical Turk screenshot my simplified Mechanical Turk screenshot

Please comment on this article

Designing the dConstruct 2007 website

21 May, 2007  |  Tagged with web design, Clearleft

To say we at Clearleft are busy at the moment would be somewhat of an understatement. There’s only a handful of us in the office, but we’re so busy that we’ve recently had to take on a studio manager to keep track of just how busy we are. Sophie started last week. I’ve checked with her, and it seems I was right: we are busy.

Which, in retrospect, is why deciding to create four seperate designs for this year’s dConstruct conference website was possibly a foolish decision. Nevertheless, now that it’s complete and live, it’s a one that I’m glad we made, and I’m very proud of the result.

This year’s conference is about the process of Designing the User Experience, and I tried to illustrate that process with the concept for the website. We obviously wanted to retain the branding that has been built up over the last two years, so I re-used the same basic layout from last year’s site. But this year, instead of presenting one finished design the site will evolve in the lead-up to the conference. We launched it last week with a sketchy wireframe look. Next month some illustrated design ideas will get added, followed by a rough design, and as the big day approaches the site design will become complete.

The audience for the site consists largely of web designers, so hopefully the self-referential concept will be appreciated. At the very least, the unfinished look should definitely be “different” and possibly unexpected! I hope you enjoy it.

This wasn’t the first concept for the site. I was originally tentatively playing around with a technique I came up with a while ago, which uses basic CSS and HTML to create quite an unusual visual effect. Most people who saw it were intrigued as to how it worked, or indeed what exactly was going on. Unfortunately this made us realise that it was causing more of a distraction than it was providing anything of real value. Whilst that would be fine on some sites, it wouldn’t be appropriate on a site about usability! I won’t put the details here just yet, but I do plan to use it when I finally get around to designing this blog (sometime soon).
From the point of view of the web designer, the process of creating the new dConstruct site was quite a breath of fresh air. I enjoyed getting to work with a pencil and paper and taking photos of Post-Its and their shadows. I wrote and scanned fake notes to myself, deliberately spilt some old coffee on our new desks (don’t tell the boss!), and smeared a licked thumb across my pad to create some horrible pencil-smudges. It was a nice change from the rounded corners and reflections seen all to often these days.

However, while the site may look unfinished, there’s still a lot going on under the hood. The markup is semantically correct, the CSS valid even though in places it deliberately makes the layout look slightly broken. Although I hate the additional bugfixing which often accompanies it, the width is semi-liquid, with elements spreading to a comfortable max-width when you resize the browser. Jeremy was right to convince me that the extra work would be worth it for the satisfaction when the end result works so well. Naturally, the text scales without breaking the design. And, thanks to Rich’s PHP wizardry and progressive enhancement, the secret hidden Easter-egg doesn’t rely on Javascript to work.

Oops… did I say something I shouldn’t have? Ok, forget you read that last sentence. And if anyone asks, I was never here.

I will be at dConstruct in Brighton on 7th September, and I hope you will be too.

(Andy has written much more about the conference itself, which looks like it’ll be the best ever!)

http://2007.dconstruct.org/

Clear me a desk if there’s one left

12 May, 2006  |  Tagged with journal, web design, Clearleft


My new desk space, Clearleft’s office

(apologies for the atrocious title on this entry)

Yesterday I started sharing office space with Clearleft, one of the web design agencies who I regularly freelance for.

Since leaving Harrods.com to be my own boss I’ve been working from my home office, apart from the short times I spent away consulting on web projects for BT and IBM. With a baby due any time I imagine that it would get increasingly difficult to concentrate on getting things done at home, so the move to an office is A Good Thing.

Obviously when the little one is born I’ll be taking a couple of weeks off from work to get to know him, as this is very important for the bonding process between baby and parents. But apart from that, I’m now full time in my central Brighton office, and it’s all very exciting.

I’m looking forward to my time here. It’ll be good for us all to have other web designers for company, as we’re all pretty used to working alone from our home offices. And what better company for me to have? Clearleft is run by three of the most respected Web Standards experts in the UK, Andy, Rich, and Jeremy. Also sharing the office is Pete, who works for Creative Commons. I definitely got the better end of the deal there, and am grateful for their invitation to office-share. I’m sure we’ll all find collaborating on projects much easier by being in the same place.

To celebrate the new office I invested in some new shoes. Not a natural way to celebrate (my wife would disagree), but I saw them and had to have them. Feet, meet Mr Happy.

eXTReMe Tracker