nr 2 Oct 09

How fine is your design?

Written by Ethan Marcotte. 4 comments

The line between a successful design and a clever one is fine. Are you willing to make the ultimate sacrifice and hit the delete button on that work of pure genius to give the client what they want?

You sit on a grassy hill­side, a few friends on either side. A sweep­ing val­ley spreads itself out before you, a bowl of deep greens and browns set against the cloud-​​flecked sum­mer sky, a warm breeze rustling the tree­tops and your hair, the grass wrapped through your fin­gers. The view, the day, the expe­ri­ence is noth­ing short of per­fect, and you close your eyes in the warm sum­mer sun – you can’t be sure, but you’re pretty sure your friends close their eyes, too.

And then you pull out the chips.

The bag doesn’t open eas­ily, and the crin­kling breaks the calm like a skater through thin ice. After a few sec­onds of nois­ily tear­ing through the foil, suc­cess at last: you pop a few chips into your mouth, crunch­ing loudly as the onion flavour­ing does ungodly things to your breath. Still, you couldn’t care less what they do to your breath, much less your over­all health – they taste amaz­ing, and you’re not above lick­ing your fin­gers a bit to get at the last bits of savoury flavour.

The third or fourth time you shove your now-​​greasy fist into the bag, you realise your friends’ eyes aren’t closed any­more: after your impromptu snack­ing fit, they’re star­ing at you with equal mea­sures of annoy­ance, shock and dis­gust. The view, the moment, the expe­ri­ence you shared – gone. And all for a few hand­fuls of salted starch.

Still. They did taste amazing.

To whom does design address itself: to the great­est num­ber, to the spe­cial­ist of an enlight­ened mat­ter, to a priv­i­leged social class? Design addresses itself to the need.

— Charles Eames

Dis­pens­ing some wry advice to a young pupil, the writer Samuel John­son once quipped, “Read over your com­po­si­tions, and where ever you meet with a pas­sage which you think is par­tic­u­larly fine, strike it out”. Now, most read­ings of the quote focus on the won­der­fully sar­cas­tic con­tra­dic­tion in the sen­tence: that your favourite pas­sages should be the first on the editor’s chop­ping block. But the larger, more seri­ous ques­tion is one of intent, that you should avoid keep­ing any­thing “which you think is par­tic­u­larly fine” in your final draft.

Granted, John­son was speak­ing of the writ­ten word and the impor­tance of edit­ing – and in all like­li­hood, he was just try­ing to rid him­self of a pesky admirer – but his advice res­onates with design­ers. Whether design­ing a site, an appli­ca­tion, even a sin­gle web page, the suc­cess of our work is mea­sured solely by how well it meets the goals of its users; as Eames said, “design addresses itself to the need”.

Sounds easy when he says it, of course, but the rest of us mor­tals know what a bal­anc­ing act it can be to cre­ate some­thing at once aes­thet­i­cally pleas­ing and intuitive.

The cos­tumes had to serve the choreography.

— Colleen Atwood

My first “real” encounter with the inter­net was in the mid-​​1990s, when I moved off the dial-​​up binges of local BBSes in north­ern Ver­mont and on to the wider web afforded me by my college’s T1 line. Faced with actual band­width for the first time, I was like a hyper­ac­tive kid in a candy store, devour­ing URLs and tuto­ri­als as fast as my copy of Netscape 3.0 Gold could down­load them.

One of my ear­li­est design heroes was Dream­less Stu­dios, a design col­lec­tive formed by Eric Dinyer and David DeCh­eser. Span­ning mul­ti­ple media, from illus­tra­tion to inter­ac­tive design, broad­casts and books, their port­fo­lio was a peren­nial favourite of mine. An ama­teur designer such as myself found a lot to love about their work. In those early days, most of my online efforts were pretty fee­ble attempts to ape the ele­ments of their work that inspired me most – the ten­sion between sweep­ing, tex­tured orna­ments and tightly set bitmap fonts, the richly sat­u­rated palettes.

A few weeks ago, while begin­ning work on this arti­cle, I redis­cov­ered links to a few favourite sites from that era, includ­ing Dream­less. Reac­quaint­ing myself with old, for­got­ten sources of inspi­ra­tion was tremen­dous fun, though it’s inter­est­ing to see the dif­fer­ence a decade can make in your tastes. Much of what I admired dur­ing that era skewed to a focus on aes­thet­ics, rather than their users’ needs.

For exam­ple, in the Dream­less store, where one can pur­chase prod­ucts that fea­ture their design work (and pre­sum­ably earn them a slight refer­ral fee from Ama­zon), much of the nav­i­ga­tion is custom-​​designed, JavaScript-​​driven scrollbars—which, while snap­ping attrac­tively into the rest of the Dream­less site’s aes­thetic, don’t actu­ally work if JavaScript is dis­abled, and won’t respond to the mouse wheel or keyboard.

This isn’t a crit­i­cism of Dream­less’ port­fo­lio; years later, I’m still in awe of what they pro­duce. Rather, it’s a reminder that our work is a part­ner­ship between designer and user, pro­ducer and con­sumer. Ideas con­ceived dur­ing the design phase need val­i­da­tion not from our own assess­ments, but from our users, oth­er­wise, we’re just being “clever”.

Hypo­thet­i­cal ques­tions get hypo­thet­i­cal answers.

— Joan Baez

At the end of July 2008, a new search engine named Cuil launched, claim­ing to index more web pages than Yahoo, Microsoft and Google com­bined. Founded by some for­mer Google employ­ees, Cuil was her­alded by the tech media as a pos­si­ble “Google-​​killer”, a site that could pos­si­bly unseat Google from its dom­i­nant posi­tion in the search market.

Of course three months’ later Google is still alive and well. In fact, Cuil has received no small amount of crit­i­cism since its launch, as it often returns incom­plete or bro­ken search results – which is, of course, less than opti­mal for a search engine, much less a so-​​called “Google-​​killer”. A search for this author’s own name, or the name of his weblog, returns noth­ing rel­e­vant for pages; search­ing for “Web Direc­tions” fares a bit bet­ter, though ran­dom images are occa­sion­ally asso­ci­ated with dif­fer­ent entries.

But putting the cur­rent state of the site’s func­tion­al­ity aside for a moment, Cuil’s design is worth dis­cussing. Given its ex-​​Google pedi­gree and aspir­ing com­peti­tor sta­tus, it’s inter­est­ing to note how each of its design deci­sions seem dia­met­ri­cally opposed to Google’s. The black home­page, the multi-​​column lay­out, the faux-​​frameset lay­out, incor­po­rat­ing images into search results: taken in total, this is about as close to an Oedi­pal com­plex as a site’s design can get. That is, it would seem that Cuil’s design isn’t look­ing to dis­tin­guish itself as a unique entity, as much as it is try­ing to dis­tin­guish itself as not-​​Google.

There isn’t much con­sid­er­a­tion shown for the user; the inter­face isn’t poor, by any stretch, but it’s loaded down with unhelp­ful ele­ments. One exam­ple of this is the col­umn tog­gle on the bottom-​​right of the screen, which allows the user to change the lay­out of the search results from two to three columns via JavaScript. Pre­sum­ably, this is to accom­mo­date lower screen res­o­lu­tions, so that users brows­ing at 800x600 aren’t forced to use a lay­out designed for 1024x764, and vice versa.

How­ever other, bet­ter solu­tions than JavaScript exist: if Cuil had ditched a table-​​based lay­out for a CSS-​​/​float-​​driven one, they could have come up with a resolution-​​independent lay­out that reflowed as the win­dow size changed; or, at the very least, it’s easy enough to detect the size of the browser with JavaScript, and change the lay­out when it reaches a cer­tain size. Ask­ing the user to do the work doesn’t seem like the most empa­thetic approach, rather we’re left with an idea that seems borne out of nov­elty, rather than an attempt to address a need.

Who­ever said that plea­sure wasn’t functional?

— Charles Eames

A few weeks ago I stum­bled across www​.bartle​bogle​he​garty​.com, which had been recently redesigned. Nor­mally, I rank the all-​​Flash sites of global adver­tis­ing firms right next to Darth Vader and tax forms, but BBH had my jaw on the floor. The design is gor­geous, of course, but once I got past the ini­tial visual impact, I found myself return­ing to the site fre­quently over the next few days.

The BBH home­page is aes­thet­i­cally strik­ing, to say the least. The sheer amount of white space is almost a design ele­ment in and of itself, forc­ing the eye toward the few items on the page: the sheep trot­ting casu­ally across the bot­tom of the screen, the sleek logo­type, and of course, the three-​​dimensional globe spin­ning slowly in the cen­tre of the page. The most promi­nent ele­ment on the page, the globe is essen­tially a more stylised ver­sion of the text nav­i­ga­tion beneath the logo: as the user moves their mouse across the globe, it spins in that direc­tion, with sky­lines of the dif­fer­ent coun­tries grad­u­ally com­ing into view, famous land­marks in promi­nent relief.

But what saves this ele­ment from being just another super­flu­ous, over-​​designed Flash wid­get is the way that it inter­acts with the text nav­i­ga­tion above it. When the user places their mouse above a par­tic­u­lar region of the globe, two things hap­pen simul­ta­ne­ously: the city is ringed with a par­tic­u­lar colour, and its name is sim­i­larly high­lighted in the nav­i­ga­tion above; if the user opts instead to use the hor­i­zon­tal nav­i­ga­tion above the globe, mou­s­ing over a country’s name will cause it to glow on the globe. To me, this per­fectly resolves the bal­ance between art and inter­face: the user decides which nav­i­ga­tion ele­ment to use, the three-​​dimensional globe, or the text links across the top, but the design leaves both mod­els as an option, while sub­tly rein­forc­ing the con­nec­tion between them when­ever the mouse hov­ers over a link.

Design is directed toward human beings.

— Ivan Chermayeff

In the end, the line between a suc­cess­ful design and a clever one is pretty fine. Much of our work is based on assump­tions, some bet­ter researched than oth­ers – we cre­ate per­sonas, inter­view our clients, and so on. But in the end, those assump­tions need to be acknowl­edged as such, and ulti­mately vet­ted by real-​​world users. No mat­ter the design ele­ment we’re work­ing on, we need to con­sider if we’re serv­ing our users, or sim­ply being clever.

If it’s the lat­ter, maybe it’s time to strike it out.

Further Reading

• Charles Eames
• Samuel Johnson
• Colleen Atwood
• Get Netscape Navigator 3.0
• Cuil Exits Stealth Mode With A Massive Search Engine
• Cuil might just be cool enough to become the Google-killer in search
• Ivan Chermayeff

Comments on this article

1. Written by Keith Bell on the 18^th of January

   

   Quick note: the link to BBH is mis­formed and the name is mis­spelled. Should be http://​www​.bartle​bogle​he​garty​.com/

2. Written by Guy Leech on the 18^th of January

   

   Thanks Keith, I’ve fixed that up.

3. Written by Tigdh Glesain on the 20^th of January

   

   Great arti­cle but you may wish to revisit the spelling of Dream­less Stu­i­dos on the right hand col­umn (O:

4. Written by Guy Leech on the 20^th of January

   

   Ahh, good catch. I’ll fix that right up.

Copyright 2008–2012 Web Directions Conference Pty Ltd