Paul Annett

Every summer the Clearleft office buzzes with the excitement in the lead-up to dConstruct, the web design conference we organise here in Brighton. Preparations are well under way for this year’s event, which is on 5th September, with two days of exclusive workshops leading up to it.

For the last few weeks I’ve been designing the new website, which was then lovingly built by Natalie. Being intimately familiar with the brand, I really enjoy designing the dConstruct site each year, but as an in-house project we never have as much time to devote to it as we’d like. The site is normally an evolution of previous years’ designs rather than anything completely new, but this year I took the move to highlight the excellent list of speakers in huge type right there on the homepage. It’s they who ’sell’ the conference, so they really should take pride of place, and the treatment used is quite striking and bold.

For any typophiles reading this, the font for the main speakers list is Alte Haas Grotesk bold, a kind of distressed, slightly weathered-looking Helvetica Neue bold.

One thing I’m particularly fond of with this year’s site, is that we’re encouraging people to mash-up their own photos with the dConstruct buttons. I’ve made this really easy to do, and you don’t even need to open Photoshop! Just insert the web address of one of your own photos into one of the code snippets provided towards the bottom of the buttons page, replacing http://url.to/photo.jpg. Your photo will then slot itself neatly behind the conference info. You can see this in action at the top right of this page, where I’ve used a photo of Toby at the play park.

The theme of the conference this year is ‘Designing the Social Web’, so rather than go the predictable route of giving the site a ’social networking’ feel (think Facebook, Flickr, Edenbee, Last.fm), my idea was to extend the website beyond its boundaries into the social space elsewhere on the web. Our buttons are more socially inclusive, in that people could personalise them with photos of their friends or family, which they perhaps already share on social networking or photo sharing sites. The buttons can then be completely customised fit the design of any site. I can’t wait to see a wide variety of visuals used on dConstruct buttons across the web!

If you do use our code to create your own button design, please add a screenshot of it to the My dConstruct Button group on Flickr!

The conference itself looks like a real treat as usual, and I’m looking forward to it hugely. 600 tickets sold out in 6 hours last year, so if you’re planning on coming make sure you hit the site for your ticket as soon as they go on sale!

Clearleft is creating a desktop application for web designers. We put the holding page live at Silverbackapp.com last week.

There was no fanfare - I just told a few friends to check it out, but the word spread like wildfire and within a day it had received 25,000 visitors!

The response was overwhelming and unexpected - not just from web designers excited to find out more about our application, but also from those eager to find out how the clever pseudo-3D background effect works (this effect is only visible as you resize the browser window).

In response to their requests, Vitamin have now published my tutorial How to recreate Silverback’s Parallax. Go read it! But if you don’t, feel free to join the other people who haven’t read the article either, but are still leaving comments at the end of it.

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).

Please comment on this article