In Part 1 we saw that the web presents an ideal vehicle for beauty, and in Part 2 I argued that beautiful design is reflective, exploring message and meaning. How can we use this knowledge to create beautiful websites?

Making the web beautiful

We are certainly making progress, and perhaps I’m being harsh on a field still in its infancy. The web is only 7,000 days old, after all. Technological improvements such as new authoring tools, better screen resolutions, more bandwidth and technical convergence will free us to experiment.

We’re already seeing fresh visceral approaches courtesy of developments such as CSS3, typographic tools like Typekit and Fontdeck, Canvas and SVG. Even the death of web-safe colours freed us to try new visceral design techniques. Better understanding of usability, better design patterns and better web education has also freed us to try new behavioural approaches, such as the horizontal, keyboard-driven navigation on Thinking For A Living. It’s too early to know whether these paradigms will stick, but it’s heartening to see previously locked-in approaches challenged.

However, the key to creating beautiful websites that our users actually love, rather than merely tolerate, is to think at the reflective level.

1. Get emotional

Appealing to emotion is an important way to create reflective design. It means we must understand people, not merely user tasks. What makes them tick? What would they never dream of asking for? How can we improve their life beyond this one visit? The focus is therefore on experience, not just usability. These days I see calling a website ‘easy to use’ as like praising a restaurant for serving edible food. It should be a given, not an exception.

One way to engender emotion is through stories – an area where what we patronisingly call ‘old media’ is streets ahead. Advertisers, writers and film makers have long known the power of narrative and created emotional content to reinforce their message. Content strategists in particular should therefore take centre stage in our quest for emotion, using not just text but other content types. Some of the most emotionally resonant content on the web today is photographic, such as Pictory or the Boston Globe Big Picture.

2. Think bigger

User and business form the classic duality of design. We’re well accustomed to solving for the needs of both, making compromises and tradeoffs where appropriate. I now believe this model overlooks a third piece of the puzzle: the ecosystem. We should design systems that are good for the surrounding web and for society.

Many experienced designers already consider this intuitively through their work, but there’s benefit in explicitly considering these issues in our design process. Are we trying to make a genuine difference, or just churning out more wireframes to keep the client happy?

3. Lead

When did you last see a statue of a committee? The classics of design have typically been created by one person with strong vision and the technical and political skills required to execute upon it. In film, this is known as the auteur theory: the director is regarded as the custodian of the creative vision and the final product is his or her realisation of it. At the least we need to appoint leaders who formulate and communicate a vision for the site.

Assuming leadership can be difficult in real business contexts and can foster problematic attitudes, but without strong leadership, clear vision and faithful execution, we have no hope of creating beauty.

4. Think long term

It’s relatively easy to make something viscerally attractive, but how can we maintain interest after the initial lust wears off? Just as in a romantic relationship, we should consider long-term seduction. The odd surprise can be rewarding, bringing joy in unexpected moments of the experience. By varying things we prevent over-familiarity and the contempt that this can breed.

Possible approaches include rewarding people who explore to deep areas of the system – a tactic frequently used by game designers – or something as simple as unannounced free shipping on your tenth order. Google’s holiday logos provide a real example of how the tiniest detail can keep users interested.

5. Notice everyday beauty

My mother, a retired teacher, told me recently of the ‘golden moment’ in education. It’s the point you always remember, when you discovered something and suddenly your worldview was shifted – that “one way valve to a new way of seeing” again. Educational theory suggests that to create golden moments, you must recognise them for yourself. So notice the world. Where’s the beauty around you?

As we previously discussed, there’s beauty all around us: art, writing, architecture, music, products, nature. We should breathe it in and learn from it. It may even be that inspiration lies close to home. Perhaps web standards specialists could take inspiration from developments in the Flash world, and vice versa. Maybe designers can be inspired by developers. We should be aware and scan the horizon to find our own golden moments.

6. Be brave

Finally, since reflective design is about meaning and message, we needn’t fear making statements. We should stand for something and convey ideals through our work: both ours and those of our clients. Surprisingly, the web design community seems reluctant to do this. At last year’s IA Summit, Jesse James Garrett asked why there are no schools of UX thought. Why indeed are there no major schools of web design thought? Our movements and sub-communities are, instead, almost entirely technique-driven. To me, it’s sad that we’re more interested in endlessly debating topics such as HTML5 v Flash, rather than exploring the important philosophical approaches that drive our work.

Caveats

There are of course some dangers to these approaches. The demands of client work mean we’d be unwise to blindly apply these rules, and there are some difficult questions left unanswered. The most important is whether beauty is always appropriate. I suspect not. When I’m filing a tax return, I don’t want the system to speak about who I am; I just want it to work. When getting the job done is more important than enjoying it, beauty is cruft. Better for designers to let the task and usability have priority.

Reflective design shouldn’t become dogma. Fortunately, when we take time to truly understand users and what they want, it soon becomes clear when it’s appropriate to strive for beauty in design.

Hero design

It would be easy to misinterpret our discussion of leadership and bravery and overestimate our authority. Designers aren’t heroes; instead we must serve our industry, our clients and our users faithfully, discarding ego. Too frequently, I see design that is more about impressing other designers than solving the problem and making the web better. There’s no beauty in hero design, only narcissism.

That said, I think web designers should appreciate that we can play an important role in society. We’re lucky enough to work on the coalface of the most exciting innovation of modern times. We’re on the brink of wonderful things. So yes, we’ve underachieved, but given the evolution of beauty and the tools now available to us, the web is an ideal vehicle for beautiful design. We’re the generation to turn that promise into action.

I hope in five years to look back on this essay and laugh. If we work hard, aim for reflective design, and believe in the power of the web, I’m convinced we can create our own beautiful design landmarks.

Three types of beauty

In Part 1 we saw that the web presents an ideal vehicle for beauty. But how will we know it when we see it? What is beauty anyway? I consider beauty to be presented in three main modes: universal, sociocultural and subjective.

Universal beauty

Universal beauty is based on timeless, globally accepted principles. It seems to hit at some innate response within us all, as demonstrated by the concept of human ‘averageness’. Here, we see a composite image of dozens of female faces created by Face Research. We might expect to see average attractiveness as a result, but this prototype is certainly more attractive than average. One theory is that prototypicality shows the mate has no defects and thus is likely to produce healthy offspring. Another theory claims that average faces are pleasing because the brain finds them easier to process. (Perhaps the average face is Plato’s ideal Form in the flesh).

Designing for universal beauty involves careful consideration of the fundamental aesthetic principles of design, such as symmetry, harmony, the rule of thirds and the golden ratio.

Sociocultural beauty

Sociocultural beauty is governed by the preferences of a particular time or place. This is most clearly seen in sexual attitudes.

Here we see Rubens’ Venus and a modern runway model: a clear depiction of changing sociocultural attitudes to beauty.

However, there are more subtle examples: fashion, music trends and even philosophical interpretations of the world all go in and out of style, regardless of their inherent universal beauty.

Subjective beauty

Subjective beauty is the wholly personal encapsulation of one’s likes and dislikes. If you like big butts and cannot lie, you’re merely exercising your right to a subjective opinion on beauty. While Rubens’ work is reflective of the Baroque era, it also reveals his subjective preference for larger models.

These three types of beauty are hierarchical. Subjective beauty can overrule sociocultural beauty: we can individually find beauty in things that society considers out of fashion. Sociocultural beauty can in turn overrule universal beauty: universally beautiful things may simply not be en vogue in a particular time or place.

Three modes of design

So how can we design for these types of beauty? Don Norman’s book Emotional Design gives a deep exploration of the role of emotion & beauty in design. Adapting an established model of cognitive processing, Norman claims design typically falls into one of three dominant modes.

Visceral design

Visceral design is aimed at our gut. We experience a visceral reaction when we bite into a sweet apple, see a stunning sunset or hear a harmonious chord – it’s entirely sensory, before the brain has a chance to shape the feeling. A positive visceral response is often called attraction – it’s what draws bees to flowers, or babies to a beautiful face.

To design for visceral response, we should concentrate on immediate properties of a system: shape, colour and form. These can make the instant impact required for a visceral reaction – we know, for instance, that visceral response to a website can occur in fractions of a second.

Visceral design was an early frontier of exploration for the web, once the technology was sufficiently mature. This early landrush of artistic, highly visual sites was helped by the advent of visually-oriented authoring tools such as Dreamweaver, which helped graphic specialists make the leap into the web arena with familiar UIs.

It is easy to belittle visceral design as ‘eye candy’, but without this immediate attraction, sites struggle to succeed in other modes of design. That said, visceral design’s clear failing is that it rewards attraction over usability and real beauty. Command-Shift-3, which describes itself as the HotOrNot of web design, has all the depth of a wet T-shirt contest. Since we can’t use the sites it features, we must judge solely on aesthetics. Visceral sites often win awards (since awards are rarely concerned with use) and appear in those ‘Top 20’ lists we all know and dread.

Behavioural design

Behavioural design is concerned with use. Does the system work? Is it easy to perform my tasks? Does it sustain flow, or make us suffer constant interruptions by not doing what we expect? To achieve successful behavioural design, we can call on our nearest ergonomist or usability specialist. She will ensure our design has appropriate dimensions, is well mapped to user mental models, is forgiving of improper use, sends clear messages about function, and so on.

No one can deny that the web usability movement has been successful. However, understanding the user’s tasks and crafting a site around them isn’t sufficient to bring us genuine beauty. The reason is that behavioural design doesn’t always trump visceral design. Social psychologists have found, for instance, that women prefer prototypically attractive men (square jaws, broad shoulders etc) for one-night stands and flings, but they choose more feminine, ‘nicer’ men for commitment: the so-called “cads and dads” theory. This pattern is particularly pronounced at certain points of the female ovulation cycle. In short, we don’t always plump for reliability; sometimes we need something more exciting.

Perhaps the usability movement has created too many dads, and too few cads. Critics often claim it has ‘made the web boring’ – and it’s true that, when misapplied, usability approaches can create very mediocre products. For a slightly daft example, look at the work of artists Vitaly Komar & Alexander Melamid, who surveyed the musical preferences of the general public. They asked opinions on instrumentation, tempo, pitch, duration and lyrical subject and assembled these into two musical extremes: the Most Wanted Song and the Most Unwanted Song.

The Most Wanted Song features a soft rock / R&B sound, using well established instruments. To quote the artists, it creates “a musical work that will be unavoidably and uncontrollably liked by 72% of listeners”. Unsurprisingly, this crowdsourced composition, designed for maximum ‘ease of listening’, is anything but beautiful.

Listening to The Most Wanted Song, we can almost understand why some people equate usability with tedium. While it can help our sites to become useful and profitable, it can’t make them beautiful. For that, we should aim at the third, most complex mode of design.

Reflective design

Reflective design reaches beyond visceral and behavioural design to look at message and meaning. It asks difficult questions. What does this system say about who I am? Does it improve my life? Am I glad I did it? These questions are subjective and complex, and our responses will vary with experience, personality, culture and even mood. But there are strong benefits to asking them. Successful reflective design makes us feel good: we show it off, tell others and repeat the experience. It can even change the way we think about things. In short, I believe that successful reflective design and beautiful design are one and the same.

Consider the Nextime Word Clock. It’s made from two cylinders that rotate so that the time can be read from the face: “Five minutes to ten” or “It’s about four”. It’s less accurate than a cheap digital watch and hence less usable – and, while it looks good, it’s not as elegant as an analogue clock. But, to me, this clock is an excellent example of reflective design. Its accuracy is appropriate for the living room (do you really need to know the difference between 2:57 and 2:58?) and its unconventional design is a conversation starter. I see beauty in the concept, and the product says something about me. It’s for these reasons, rather than usability or attraction, that I count this clock as one of my favourite possessions.

Where usability focuses on behavioural design, reflective design is more the domain of user experience. It involves truly understanding what makes people tick and what makes them excited. It involves creating something meaningful that changes perceptions. Reflective design is a relatively recent focus on the web, which is perhaps why we’ve not yet created beautiful websites. But with sufficient focus on experience, I believe we will.

Rate of change

These three modes of design – visceral, behavioural and reflective – move at different speeds, creating shearing layers (familiar from Stewart Brand’s How Buildings Learn).

Visceral trends come and go in a matter of months. Top 20 trends are quickly dated, be they illustration, fat footers or any other pattern du jour. Behavioural innovation is slower. Interaction design patterns and de facto standards (search box in the top right, logo and link to homepage in top left) emerge over the course of years and require more traction and mass support to become established. Reflective design moves the slowest of all. This is best demonstrated by ‘movements’ that define how we interact with the web – social media, the realtime web and so on – which take many years to emerge and stabilise.

Concluded in Beauty in web design, part 3.

The underachieving web

I think we’re underachieving. And I’m not alone in that belief. Armin Vit’s Landmark websites, where art thou? contended that the web design field has created nothing to rival the greats from other design fields, giving the examples of the NYC subway map, the Se7en titles and Paul Rand’s IBM logo. Jonathan Harris of WeFeelFine fame infamously contended at Flash On The Beach that there have been no masterpieces.

These acts of criticism stung the community. “But the web has changed the world!” This protectionist instinct is understandable, but while the web has indeed shaped modern life, I agree with Vit and Harris. The web’s sum is substantially greater than its parts. No one site stands as a landmark of design. Looking at some likely candidates – Google, Amazon, eBay, Facebook – we would all agree that they’ve changed how we interact with information, commerce and each other, but are they truly design classics or, instead, disruptive business models?

The web is full of cool, impressive and useful sites, but beauty is missing from modern web design. This is a surprise, given its prominence in other design fields.

Automotive design gives us beautiful cars that arouse passion and extraordinary desire. Product design also gives us 1954’s Fender Stratocaster, one of the most important cultural artifacts of the last century.

We see beauty in architecture, for example the Beijing National Stadium, which inspired a city, a country and a global watching public in a way no website has.

In visual fields, Harry Beck’s beautiful 1933 Tube map (which I’ll take over the NYC subway any day) clarified the complexity of the Underground through the metaphor of wiring. Not only is it a classic of wayfinding, but it has become part of the collective consciousness and emotional fabric of the city.

We also see a more chilling beauty in Charles Minard’s map of Napoleonic advance, made famous by Edward Tufte. The beige line represents the French army’s advance to Moscow; the black their ignominious retreat. The width of the line demonstrates the size of the army and hence the appalling human cost.

The point of beauty

But why focus on beauty? Why does it matter that other design fields lead the way? Because beauty affects us in profound ways, however we may try to resist.

Studies have shown, for instance, that attractive people are more likely to be acquitted by a jury. We transfer this lenience to content, as demonstrated in the 1960 Nixon-Kennedy presidential debates. The radio audience believed Nixon to have won the debate, while the TV audience felt the more attractive Kennedy had the upper hand. Surprisingly, this isn’t a learned bias; it seems to be hard-wired, even seen in infants.

Beauty also makes things easier to use. Our brains literally work in a different way, becoming more flexible when using a thing of beauty. This is the aesthetic-usability effect. Apple know the value of this effect more than most. The colour iMac heralded the first mainstream melding of beauty and hardware. When combined with the good user experience of the Mac OS, the iMac brought previously unengaged users to computing for the first time.

Beauty is also infectious. Because it makes us feel good, we naturally want to share it. Why do we put art on walls and take photos of sunsets? Because it allows us and others to relive the experience. This pattern of telling others about beautiful things is the cornerstone of loyalty and advocacy, powerful and much sought-after concepts.

But I believe the most powerful aspect of beauty is that it can change our perspective on the world. In the classic How Designers Think, architect and psychologist Bryan Lawson describes this as a “one way valve to a new way of seeing.” Not only could a beautiful web make our users happy, productive and loyal, but it could help to change the way the world thinks.

But can the web, an abstract, impermanent and functional medium, truly be beautiful? Let’s answer that by looking at a common vehicle for beauty: art.

The evolution of beauty

In Greek and Roman times, art (and the ideals of beauty it contained) was mimetic: that is, intended to mimic and replicate nature. This is consistent with the philosophy of the day. Plato’s Theory of Forms proposed that there exists one idealised, perfect instance of everything in the world – the perfect cow, the perfect grape – that exists on a plane that none can see. With beauty resident only in these ideal forms, art and sculpture were a means to study them. Every (literally) chiselled jaw is an exploration of the heavenly ideal. It’s from the Roman era that the word ‘art’ originates, tellingly coming from the Latin ars, meaning ‘skill’.

This style continued into Renaissance times; but while religious influence continued the thought that beauty exists in a heavenly plane, the Renaissance also introduced the earliest stirrings of humanism. From this point, beauty became apparent in things that mankind created.

As we advance into the Romantic era, art is no longer literal. Representation becomes central. Turner’s 1839 The Fighting Temeraire is beautiful but not accurate. Instead, the viewer finds joy in the colours and emotive qualities of both the scene and the meaning. This abandonment of the literal was catalysed by 19th century technology. The invention of the daguerrotype, the microphone, and the printing press some centuries previous, allowed reality to be easily replicated for the first time.

As we move into the modern era, art takes a jarring yet consistent turn. Duchamp’s concept of objets trouvés (such as Fountain) mean anything can have artistic meaning in the right context. Subjectivity dominates: it’s beautiful if you find it beautiful.

Contemporary conceptual art now sees execution as secondary. Beauty lies within the thought, while the artifact itself can be banal and everyday. Tracey Emin’s Everyone I Have Ever Slept With 1963-1995 stitched the names of former lovers, friends and unborn children into the fabric of a cheap tent. Damien Hirst’s diamond-encrusted skull (For The Love Of God) was made by technicians and interns: Hirst himself was director and project manager only. Duchamp himself permitted several replicas of his work. The idea is all.

Finally, we can examine installation art, designed for a specific space and a specific duration. It is by its nature temporary, and often interactive. 2005 Turner Prize winner ShedBoatShed (Mobile Architecture No. 2) was disassembled and reconstructed as a boat and sailed down a river. Tate Modern’s helter skelter ‘Test Site’ created enormous school holiday queues. Is it art? You choose.

Classification aside, it’s certain that many people find this work powerful.

So our understanding of beauty has broadened and shifted. Beautiful things can be abstract, temporary, duplicate and interactive.

The web is all of these.

Continued in Beauty in web design, part 2.

What makes MW2‘s multiplayer experience so rewarding? The answer is of course that the developers Infinity Ward have designed the game meticulously, in particular the maps on which the action takes place. By deconstructing these maps, we can attempt to understand the underlying gameplay design principles.

The most obvious principle is that Infinity Ward have ensured there is no dominant position on any map. Advantageous positions of course make it easier for you to kill the enemy, and harder for them to kill you. Features of advantageous positions include:

• Elevation. This reduces your exposure, improves visibility and offers a better angle for headshots on the enemy
• Cover. A solid object to hide behind means you can pop up into firing position and quickly drop into safety to reload.
• Limited access. The fewer routes the enemy can approach from, the easier to spot attackers and quickly take aim.

and so on. To make the game fair and therefore enjoyable, game designers must use these features with caution. Omitting them would simply create extremely dull environments, so MW2′s maps make subtle use of these advantageous features, coupling strong positions with serious weaknesses.

This ledge on the Afghan map gives clear long-range lines of sight but is exceptionally vulnerable from the rear. At the far end of the map are reinforced bunkers, from which the screenshot below is taken. Cover and vantage are both good, and the low light leaves the shooter cloaked in darkness, making them hard to spot at distance.

However, since these bunkers are potentially very strong points, the map designer clusters two together, so that each poses a tactical threat to the other. To make these appealing spots even riskier, explosive barrels are placed in a particularly juicy spot, further deterring a player from camping there at least until the barrels have been destroyed.

For the few spots that offer clear tactical advantage without high vulnerability, Infinity Ward has wisely made reaching them a risky proposition. The Highrise map features a second-floor window (below) with excellent angles, low light and few weaknesses; however, it can only be reached by jumping around on dangerously high and sorely exposed crane beams. I’ve had many a profitable game repeatedly picking off beam-runners too stubborn to accept that I wasn’t going to let them reach their beloved camping spot.

Highrise also boasts a very unorthodox but effective position (‘A’ below), which allows a player to surprise anyone emerging from the southern building. Position A is suspended off the building on a platform and therefore hard to notice if you’re focusing on the more obvious threats near the helipad ahead. However, this excellent spot is awkward to reach and treacherous to leave. Your only exit route is to laboriously climb up over the side, leaving the player vulnerable for a few seconds – as such, once your cover is blown at A, you’re pretty much screwed.

By balancing the maps’ positions of strength, MW2 keeps players continually on the move as hiding spots become discovered and teams move to flank their opponents if repelled in a frontal attack. It doesn’t take an expert to see that movement makes for a more exciting game than static trench warfare; indeed, movement impetus and variable pacing is a well-known tactic of game design. By running around, players cover more ground and experience greater ranges of contact, from long range to hand-to-hand. In short, players are pushed into experiencing of much as the game as possible. Map scale also follows this principle. Although the maps are generally larger than MW2′s predecessors there is still ample variety, with both compact and sprawling maps encouraging bloody scrambles, patient stealth and all gameplay tactics in between.

Through prolonged play it becomes apparent that Infinity Ward also designed the multiplayer maps not to punish players for their choice of weapon and style of play.

As we’ve seen earlier, Afghan has some excellent sniping spots; but for those more inclined for close quarters combat, the map also features twisty cave areas and this tight rocky outcrop.

For those who enjoy a sneaky ambush, the maps offer plenty of safe havens and cover from which to spring. Terminal, set in an airport, offers some novel cover spots including this flower bed.

That said, some levels are better suited to some loadouts and styles of play.

This is healthy for the game, since it prevents a strong player sticking to the weapon and tactics they’ve perfected and dominating every map. Wasteland, for instance, is a sniper’s paradise.

This sort of position is close to ideal for a sniper: sure, it’s open, but the lines of sight are immense. Given this much visibility, even a modest sniper can pick off an unprepared enemy with ease. Short range weapons here are far less useful; however, Modern Warfare 2 offers players multiple ways to use territory to their advantage. For those who don’t like the patient precision required of snipers but want to use this spot effectively, the map designers helpfully place a machine gun nearby.

In the right hands the machine gun can be just as effective as sniping, rewarding those who get their kicks by spraying bullets indiscriminately. For the sake of equality, there’s a gun at the other end too and the long grass can quickly give a well-camouflaged player cover from fire.

This interplay demonstrates that every strategy has a valid counter-strategy. If you’re facing a sniper, the maps give many opportunities to hide. To counter this, snipers can flush out hiding opponents by using thermal sights and heartbeat sensors. To counter that, players can employ perks that make them invisible to these devices. Rock beats scissors beats paper beats rock. And for those who’d like to avoid this long range battle altogether, Wasteland also features an intense and dark section of trenches. Here, I’ve planted a Claymore landmine by one of the trench entrances to trap anyone who comes this way.

These indoor areas also give vital cover from the game’s aerial attacks, earned by successful killstreaks, for example killing five players in a row. At the first warning of an incoming enemy helicopter or Harrier, there’s typically a mad panic to get indoors. Skilled opponents will of course follow, but again the game provides an alternative to the hunt. Brave players can switch to a loadout armed with anti-aircraft weapons and perks and shoot the air support down for the good of the team. Thus good play gets its reward (air support usually brings many more kills) but not to the extent that it leaves the opposition team entirely devoid of options.

Through careful design, and no doubt thousands of hours of playtesting, Modern Warfare 2′s maps reward some surprisingly different approaches: caution and risk, patience and aggression, short range and long range. Admittedly the balance will never be perfect, and Infinity Ward are continually tweaking the game to overcome new glitches and overpowered strategies. But I consider Modern Warfare 2 a great example of thoughtful design achieving some difficult goals, and being clearly rewarded by the sales figures.

Here’s an excerpt of a comic that recently did the rounds in the web design community.

You know what? I’m tired of this attitude.

Clients From Hell is admittedly pretty funny. Sometimes clients say stupid things; but hey, so do designers. I’ve said lots of them myself. But this sort of thing is different. It’s not an amusingly misguided email. Rather, it epitomises a harmful arrogance and entitlement that pervades the design community. It carries a bitter subtext that clients are idiots with no design skill, and it’s a designer’s duty to disempower them by any means possible.

And I’m tired of it. Of course clients aren’t skilled designers; that’s why they had the foresight to hire us. But you know what? They know business. They’re as passionate, committed and talented as anyone. Many of them put their livelihoods on the line to make the web happen. And let’s be blunt: they also pay our salaries.

If a web design project goes to hell this way, I usually blame the designer. He wasn’t skillful enough to make the situation work. He didn’t provide the force of argument required, couldn’t handle the politics, or couldn’t convince the client of the value of good design. On the rare occasion when the relationship with a client goes entirely rotten, the designer should end the relationship gracefully rather than passive-aggressively working to rule.

Unconvinced? I suggest you read Scott McCloud’s excellent post about criticism and the equally insightful comment from Mike L:

“The most common misconception about criticism is that one has to be on a similar skill level as the creator in order to have a valid opinion. I read stuff from many different artists from many different disciplines who cannot abide ramblings of people that couldn’t compete with them in some way. If said person is not an artist, their opinion doesn’t matter. But isn’t art, all art about communication? And who is the artist generally trying to communicate with? … My #1 critic is someone who cannot draw at all. He tells me things I can’t see because I overthink them as an artist.”

(Oh, and here’s what ‘pop’ means.)

Last week I tossed a coin a hundred times. 49 heads. Then I changed into a red t-shirt and tossed the same coin another hundred times. 51 heads. From this, I conclude that wearing a red shirt gives a 4.1% increase in conversion in throwing heads.

A ridiculous experiment (yes, I really did it) with a ridiculous conclusion, yet I sometimes see similarly unreliable analysis in A/B testing.

It’s logical and laudable that designers should seek data in our quest for verifiability and return on investment. But data must be handled with care, and mathematical rigour isn’t a common part of a designer’s repertoire.

Here’s an example from ABTests.com, a worthwhile project that I feel slightly bad to pick on.

The two versions are subtly different:

• Version A: Upload button bold, Convert button bold, Convert button has a right arrow
• Version B: All buttons regular weight, no right arrow on Convert button

Although minor changes can cause major surprises, I wouldn’t expect these small differences to improve the form’s usability. With the caveat that I don’t know the users or product, I’d even speculate that Version B could perform worse since it reduces the priority of the calls to action and removes the signifier of progression.

The designer claims that version B showed a 30.4% conversion improvement in an A/B test. Here’s why this isn’t quite accurate.

The role of chance

Any A/B test is a trial, so called because we’re observing evidence gained by trying something out. I can never truly know that there’s a 50% chance of a coin landing as a head or a tail – I can only run trials and observe the evidence. Similarly, we can never truly know that a design leads to higher conversion – we can only run trials and observe the evidence. If that empirical evidence is strong enough, we conclude that the design is an improvement. If not, we don’t.

To be valid, trials need to be sufficiently large. By tossing my coin 100 or 1000 times I reduce the influence of chance, but even then I’ll still get slightly different results with each trial. Similarly, a design may have 27.5% conversion on Monday, 31.3% on Tuesday and 26.0% on Wednesday. This random variation should always be the first cause considered of any change in observed results.

The null hypothesis

Statisticians use something called a null hypothesis to account for this possibility. The null hypothesis for the A/B test above might be something like this:

The difference in conversion between Version A and Version B is caused by random variation.

It’s then the job of the trial to disprove the null hypothesis. If it does, we can adopt the alternative explanation:

The difference in conversion between Version A and Version B is caused by the design differences between the two.

To determine whether we can reject the null hypothesis, we use certain mathematical equations to calculate the likelihood that the observed variation could be caused by chance. These equations are beyond the scope of this post but include Student’s t test, χ-squared and ANOVA (Wikipedia links given for the eager). Here’s a site that does the calculations for you, assuming a standard A/B conversion test with a clear Yes or No outcome.

Statistical significance

If the arithmetic shows that the likelihood of the result being random is very small (usually below 5%), we reject the null hypothesis. In effect we’re saying “it’s very unlikely that this result is down to chance. Instead, it’s probably caused by the change we introduced” – in which case we say the results are statistically significant. Note that we still can’t guarantee that this is the right interpretation – significance is about proof only beyond reasonable doubt.

Running the calculations on the above data shows that the results aren’t statistically significant: the evidence isn’t strong enough to reject the null hypothesis that the difference in conversion is simply down to luck. The main problem is the small sample size (128 and 108 users respectively), so I would advise the designer, Johann, to repeat the test with more users. Assuming the observed conversions seen didn’t change (a big assumption) a sample size of approximately 200 users per variant should be sufficient for significance. He could then either reject the null hypothesis or the results would remain inconclusive, in which case there’s no evidence the design has made a difference. In Johann’s defence, he recently posted that he takes the point about significance, and I’m looking forward to seeing more conclusive data for this intriguing test.

Percentage confusion

Significance isn’t the only slippery problem A/B tests face. For starters, quoting conversion improvements is always fraught with difficulty. Since conversion is usually measured in percentages (in this example, 31.3% and 40.7%) there are two ways to quote improvements. We can say that conversions increased by:

• 9.4% – the difference between the two
• 30.4% – the amount that 40.7% is bigger than 31.3%*

Any percentage improvement quoted in isolation should be challenged: which of these two calculations has been used? It’s dangerously easy to assume the wrong figure without sufficient context.

The A/B death spiral

A/B tests also suffer from a common quantitative problem, in that they tell us what but not why. I’ve written about this previously in What if the design gods forsake us. It’s wise to back up numerical tests with qualitative evaluation (eg. a guerrilla usability test) so we can make informed decisions if data suggests we need to rethink a design.

Even with backup, sometimes A/B tests are simply the wrong tool for the job. They can provide powerful insight in some cases, but in the wrong place they can be a blind alley or, worse, a weapon of disempowerment. Logical positivism and design don’t mix – not everything we do can be empirically verified – yet some businesses fall back on A/B testing in lieu of genuine design thinking. I call this the “A/B death spiral”, and it plays out something like this:

Designer: Here’s a new design for this screen. You’ll see it has a new navigation style, tweaked colour palette and I’ve moved the main interactions to a tabbed area.

Product owner: Wow, those are pretty big changes for such a high-risk screen. I tell you what: let’s test them individually to see which of these changes works and which doesn’t…

As the proverb suggests, sometimes you can’t jump a twenty foot chasm in two ten foot leaps. Cherry-picking only those design elements that are “proven” by an A/B test can be a route to fragmented, incoherent design. It may earn marginally more money in the short term, but it becomes hard to avoid a descent into poor UX and the long-term harm this causes.

Being faithful to data

Given the potential hazards, I’m concerned about the naïveté with which some designers approach quantitative testing. The world of statistics rewards an honest search for the truth, not dilettantism, and I’d advise any designer moving in statistical circles to pick up some basic stats theory, or at least partner with someone knowledgeable.

A flawed A/B test, be it statistically insignificant, misapplied or misquoted, is nothing more than anecdotal evidence. It’s the same crime as making a website red on the feedback of one user. Yet an impatient designer, seeing the example I quoted above, could quickly jump to a false conclusion: “I should remove arrows from continue buttons: it’s 30.4% better.” Perhaps this designer deserves what he gets. It’s likely he’s only really interested in shortcuts to good UX, and linkbait lists of “Twelve ways to make your site more usable.” Since he understands neither the mathematics nor the context of this trial (timescales, userbase, surrounding task) he will inevitably grab the wrong end of the stick. Nonetheless, he is out there.

Don’t let yourself be that designer.

Photo: snellgrove
* subject to rounding.

In an effort to make this year’s session a little more interactive, I pulled out an old Knowledge Management set piece:

1. Distribute post-its
2. Ask everyone to write one question they wish they knew the answer to (preferably about the topic at hand).
3. Stick the post-its on the walls. (It’s surprising how much people group them, despite your invitation to use any of the three free walls)
4. Ask everyone to read each post-it.
5. If they too want to find out the answer to a question, tell them to mark the post-it with a question mark. If they think they have an answer, mark it with a tick.

It’s not that surprising to find that a room of similarly qualified students share similar concerns. What’s more interesting is that many of them can also help to answer each other’s questions.

The purpose of this exercise is of course to show that networking and collaborating is valuable, and not just a case of awkward conversation and limp handshakes. However, having made this slightly facile point, I realised that most of the posted questions were damn smart and deserved to be shared more broadly. So here are a few that were particularly interesting, and some proposed answers from myself. I’ll throw a few more up later this week.

Please contribute in the comments if you have any opinions, particularly if they differ from my own.

Is the graphic design of a site more important than usability when initially attracting users to the site?
I say yes. Research shows users form an opinion on the credibility of a site within milliseconds of visiting it. To form a valid opinion on usability takes use, which may not happen if those impressions are negative. However, the line between the two is of course blurred, and a site can successfully convey usability through layout, visual design and information hierarchy. There are plenty of other factors that have an impact too: load times, content and proposition spring to mind.

How many hours do you work a week?
Define “work”. I’m paid for 37 hours, and most of that is spent on billable client work. But add in commuting, writing articles and conference talks, mentoring, and reading about my field and it would exceed 60. Yes, I’m aware that’s a little unhealthy. Good thing I enjoy it.

What’s the most useless skill you think we’ll learn from this course?
Probably rifling through academic papers to find an authoritative source that proves or disproves a detailed HCI argument. Truth is, not many people in industry will care. It’s more important to judge the the problem at hand and make the right design decisions based on context. HCI theory can give a strong advantage here, but you’ll need to state your case with something more real: usually how your client will make more money by following your advice.

How much do you get paid?
Not telling. But here are some approximate London figures: £25,000 is fair for a graduate-level position, rising to £35–40,000 with a couple of years of experience. Senior people should be looking at £60,000 and up (seven years and above, probably managerial responsibility). Freelance rates typically range between £275-£400/day.

What are the best design tools in HCI?
Thinking, conversation, sketching, software. In that order.

Can you be a good UX designer and a good programmer at the same time?
You can be good at both, yes. But who wants to be just good? Deep specialists tend to better than jacks-of-all-trades, and only extremely rare superheroes can be world class at both. I do, however, strongly recommend that all designers learn to code to a reasonable standard, and that all developers learn the fundamentals of design. Speaking each other’s language is the easiest way to ensure good designer-developer relationships, and one of the easiest ways to become substantially better at your job in a short time.

Do you need to draw well / be arty to be a user experience designer?
Some drawing talent helps, but sketching well is a skill that can be learned and that comes with practice. Its main value is when communicating with clients – a well-crafted sketch can simply convey more information than a poor one. However, it’s more important to develop a designer’s mindset. As Jason Santa Maria says, “sketchbooks are not about being a good artist, they’re about being a good thinker.”

To finish, two questions I don’t feel fully equipped to answer. How would you answer them?

• What’s the most interesting HCI related job out there?
• How do I get into the user’s head?

I’m working on a site that’s grown from no deal to big deal. Earlier design oversights have created user coping strategies so ingrained that I mustn’t disrupt them with my new design work.

Another reminder that you get the behaviour you design for.

Photo: Tim Bradshaw

dConstruct’s comfortable niche as the thinking person’s web conference was quickly disrupted by Adam Greenfield’s early remarks. Decrying web and UX design is a risky strategy in a room made largely of web designers and developers, yet it was a thought entirely consistent with our theme of Designing For Tomorrow. The phrase wrapped topics that have been of recent interest to us Clearlefties: ubicomp, gestural interfaces, networked devices and what lies beyond our familiar digital horizons.

Adam led us into a world where information is omnipresent and persistent, where actions stick to identities and the presentation of self is a largely forgotten luxury. A world where objects become services, shared not owned, implies a post-capitalist swing perhaps alluded to by recent economic events. As a recent and voracious reader of Everyware, I was thrilled by Adam’s talk. I’m sure the imminent podcast will reward careful re-evaluation.

Mike Migurksi provided a practical counterpoint with a case history of Stamen’s information design work, with subsequent colour commentary by Ben Cerveny. Ben’s dense, rapid idea stream was perhaps a step too far after such an analytical opening; although Stamen’s work is undeniably excellent, many felt a gap between the metaphysics and the design output, and some of Ben’s more elaborate statements seemed hard to grasp.

Brian Fling explored the mobile field with characteristic flair and pace. Focusing on the future lives of the post-millenials native to the digital age, Brian proposed that history will judge the mobile (and the iPhone in particular) as the flying car we have been waiting for. We are living through a second industrial revolution, based on the portable, personal power of bringing people closer through technology.

Next up, an elaborate Gaia theory of sci-fi and interaction from Nathan Shedroff and Chris Noessel. In an entertaining presentation, the over-used Minority Report example was only (multi)touched upon once, and Jurassic Park’s ridiculous UNIX scene was rightly used for cheap laughs. Of particular interest was the pair’s evidence that anthropomorphism can exist at non-visual levels (consider R2D2′s bleeps and Amazon 1-click servant), although, like Ben before, some other claims seemed rather hazier.

Robin Hunicke, known for her work on “the Maslow’s Hierarchy game known as The Sims”, unfortunately alienated her audience with a spoiler (albeit well meaning) for a film still on general release, and struggled to recover favour. Her West Coast bubbliness sat awkwardly at odds with her academic subject matter, which was coincidentally recapped by August De Los Reyes. Any Microsoft speaker knows he has an uphill battle to win over a sceptical audience; fortunately August’s self-deprecating humour was an instant hit. We imbue objects with intelligence (slide rules, other technological tools), so why not emotion too? Heartbroken families insist on the repair, not replacement, of their Roombas – can we conjure similarly powerful dynamics in the systems we create? August closed with Office Labs’ concept video, a surprisingly rousing vision that raised hairs on necks across the Dome.

The stage was set for a wonderful denouement from Russell Davies, who produced a performance straight from the traditions of British music hall. Russell predicted that digital buildings will give us “Blade Runner brought to you by the makers of Cillit Bang”, and that as technology matures the only way we will escape cliché is to redomain, appropriating ideas from other fields. Russell provided a marvellous reminder that, despite the intelligent contributions of the day, as an industry we are prone to hubris. We’d be daft to disregard the marvellous infrastructure our media predecessors have created.

At its best, the fifth dConstruct was simply outstanding. In its rare low points, it disappointed. As such, it’s at a crossroads. The trend has certainly been cerebral, and this year’s theme certainly encouraged abstract exploration. Early feedback says our audience is happy with this, and that the differentiation from other conferences is an important part of dConstruct’s appeal. Yet there’s always a danger of vanishing into pretension, and the conference must of course appeal to 700+ attendees.

I’m sure Clearleft won’t be taking any snap decisions. dConstruct has become part of the fabric of our company and hopefully the annual schedule, and, in line with our chosen theme for the year, we’ll be thinking carefully about what happens next. I’d love to hear your thoughts on the day and your preferred direction for dConstruct 2010.

Photos: Matt Biddulph, FriiSpray, Tom Jenkins.

To typography enthusiasts, this is like Mozart announcing a kazoo concerto. Futura is a type classic, skilfully designed by a master craftsman and demonstrating real artistry. It’s excellent for distinctive identity and brand work – so much so that Ikea had practically made it their own until now.

Verdana was created to act as body text on low resolution computer monitors. And it’s well designed for that purpose, but it doesn’t suit print work or any size above petite. At large sizes it looks plain fugly, with characters that appear juvenile at best. Use of Verdana in this way definitely constitutes bad typography.

The slight is all the greater coming from a company that has, to an extent, brought design into the lives of many people who previously believed it was the domain of turtlenecked pseuds.

Ikea’s reason was ostensibly to ensure consistent use of fonts across web and print platforms, and to ensure global compatibility across all languages. A strange choice, given that Verdana has notable deficiencies in its character set. However, it’s possible that Ikea isn’t as naive as we think. My colleague Paul Lloyd hypothesises that the switch is a deliberate ploy to make the company appear less expensive. It’s an old strategy: cheapen the aesthetic and the perception of price goes down. Plausible, at least.

By all means we can point, laugh and lament the lack of design skill at the company. However, some of the outrage has been ridiculous, particularly since we can never truly know the reasons behind the choice. Hell, there’s even a petition to reverse the change.

I believe that if companies make bad design choices that’s their prerogative. If I worked for Ikea, I would have fought tooth and nail to dissuade them from this choice – but no, I won’t sign a petition. Let them eat cake, and if design is as important as we say it is, the market will prove their mistake.

Herein lies my bemusement at the design community’s reaction. Behind the indignation, does any of us really believe that this typographic gaffe will affect Ikea’s sales? Is it really as egregious an error as we make out? Or are we merely acting out the stereotype designers fight so hard to shake off: the aforementioned turtlenecked pseud complaining that their soup isn’t hot enough?

Typography matters. Used well, it can elevate communication in astonishing ways. But, as Aegir points out, there are bigger design challenges facing Ikea and indeed the global manufacturing industry than choice of corporate typeface.

Design is about sweating the big stuff; hopefully even changing the world. Often that involves the small stuff too, but focus solely on the trivia and it’s hard to avoid becoming trivial yourself.