The web design industry has only recently afforded content its rightful status. We were wrong to relegate content to the role of a commodity – something we could pour into beautifully-crafted templates. In our rush to rectify this balance, we mustn’t overcorrect and deprecate the role of truly creative design.

From an algorithmic perspective, the idea that style and substance are separate is appealing. It allows us to code markup and stylesheets independently, and fits the logical mindset shared by so many techies. But it’s a falsehood. Style and substance are irretrievably linked. Like space and time, they are neither separable nor the same thing – there exists no hierarchy between them, no primacy. One informs the other. The other informs the one.

It’s impossible to perceive content and presentation separately. The two combine to create something more valuable: meaning.

The same content, with very different meanings.

Some of the best-known examples of the content out design principle are blogs from today’s leading digital lights. These sites feature expert typography, harmony and balance. They are undoubtedly beautiful. They also look terribly similar. Book design is the dominant aesthetic, meaning that the content does indeed shine. However, individuality surfaces only in esoteric flourishes. The people who have made these sites are diverse and bold, but these qualities often struggle to surface.

It’s a mistake to let content drive design, just as it was to let design drive content. We mustn’t let the pendulum swing too far. If we are to go beyond mere information and style to create meaning, the two must be partners, feeding from and influencing each other.

Until we see more diversity in the sites that espouse a content out approach, I worry the movement could be too simply characterised as one of minimalism – or worse, faddishness and elitism:

The idea that content can act as the interface is noble. But sometimes you need interface. The interactivity and responsiveness of the digital medium means it excels at interface. Text can often suffice, but it possesses limited affordances. It conveys information and gives instructions well, but it’s poor at conferring mental models, creating subconscious emotions, establishing genre, and suggesting interaction capabilities: things crucial for brand-driven sites or functional applications.

Overly-literal interpretation of content out could create a web of homogeneity. A web that conveys little that a book could not, save for hyperlinks and videos. A web that fails to take full advantage of the digital medium. For all our talk of breaking free of the print design mentality, content out risks reducing the capabilities of the digital medium, in favour of fetishising the craft of print design. That would truly undermine the intent of the approach.

I no longer see sufficient distance between what’s labelled “visual design” and what’s labelled “UX design” to limit my specialism. The rhetoric of designing experiences no longer works for me. For now, this new label encapsulates my desire to work on things that people find valuable (as opposed to things that advertise value elsewhere), whatever the channel.

But no big manifesto; it’s a personal choice. They’re just words. Let’s see where they take me.

Here’s my response, edited for confidentiality. Perhaps it’ll be useful to others, and I’d also love to hear any suggestions you have.

From: [xxx@yyy.com] to Cennydd Bowles
The site looks a million times better, but unfortunately our conversion rates have actually dropped. There is certainly noise in the data and an increasingly competitive environment but […] do you have any idea why our conversion rate would be worse?

From: Cennydd Bowles to [xxx@yyy.com]
The short answer is “I don’t know for sure”. The long answer is, well, a lot longer and needs me to talk a bit about the nature and philosophy of design. Please bear with me.

Design is inherently less predictable than most other product fields, since it closely involves emotion, comprehension, taste and all those complex, deeply human attributes. That means that design is a gamble. A good designer will improve your odds, but there’s always a chance that their hypotheses (which, after all, is the most any designer can provide) will prove to be false. A solution that works in one context may fail in another. Because there’s not this replicability of process, there can never be scientific ‘truth’ in design; experiments, observation, and iteration are the only way forward.

Much to the design community’s chagrin, sometimes “good design” doesn’t provide the commercial benefits we all expect. Sometimes “bad design” performs better. If I knew why, I’d be a millionaire by now :) I’ve been bitten by this myself – design changes that were “better” by all recognisable theory and good design practice performed worse than the original design. It’s frustrating for all concerned, and embarrassing for the designer.

Figuring out the cause can be difficult too. Introspection of design doesn’t tend to work well – barring major usability problems, it can be tricky to isolate specific points of a design that cause certain actions. The design as a whole has a certain irreducible complexity. So sometimes these surprises just happen, and it’s hard to diagnose the cause. Does that mean design is a poor investment? No. But I would say that it can be riskier than, say, marketing or SEO, which are more linear: generally, put more in the funnel and more trickles out of it.

However, I do suggest seeing user-centred design as something wider than just a means of optimising a conversion rate. While there may not be a noticeable uplift in any specific metric, the raw material of design is frequently intangible: trust, loyalty, engagement, etc. These things are much harder to measure, but they still make themselves felt indirectly in other metrics: support costs, referral rates, customer retention, and so on. Separating the effect of design from these long-term figures is, of course, pretty much impossible, but the long-term aggregated data makes it clear that the effect is genuine (see Apple, etc). Strong design also gives you a better platform to innovate from, and all that good biz school stuff.

But all this philosophising doesn’t answer your question, and I appreciate that the pressures of the bottom line mean you’d hope for a more realisable output for your investment. So let me take a stab at some more direct suggestions:

Natural dip

There’s always a performance dip after releasing a new design, no matter how good or bad it is. This is probably because existing customers’ mental models of how things work have been broken, and it always takes a little time to reestablish those patterns. What can be surprising is the length of this pattern – I know of a company that allows six months to pass before they evaluate the success of a redesign, so the smoke has truly cleared. This particular organisation has a very high number of users, so the effect is naturally prolonged, but do make sure you’re confident there’s still not a temporary effect lingering.

Details

The things that could make the difference in a design might be the little details. I don’t know exactly what your designers gave you, but check to see whether you’ve overlooked small points that might reduce friction. The easiest way to do this would be to ask your designers to run a quick review on what you’ve put live, to make sure it’s working the way they expected it to.

Usability testing

The major problem with metrics is obviously that they tell you what, not why – hence the existence of this email, I suppose. A well-designed round or two of usability testing would give you qualitative data that should help you understand the sticking points. If your designers have already done this, it might be worth asking for the videos so you can go over them yourselves. (I’m not suggesting they’d underreport anything – just that the time pressures of a project mean details can slip under the radar.)

If you haven’t done any face-to-face testing or don’t want to, it might be worth throwing the site into a remote usability testing programme like usertesting.com or usabilla.com. You’ll get some cheap feedback on what’s working and what isn’t. The feedback can sometimes be variable, but as an extra source of data to investigate an issue they can be useful.

Other data

Are there other data points that might guide you to the answer? e.g. have complaints gone up or down? About what? Have you seen a conversion drop among just a particular group of customers, or particular groups of products? (As above, it’s often the existing customers who have to adjust the most, while a new design is often targeted mostly at attracting new customers, who convert well.)

Analytics config

I’ve heard of a surprising number of companies that have reprimanded their designers, saying “Hang on, what’s happened…?”, only to finally admit that their analytics software was looking at the old URLs and conversion funnels. Once or twice that’s even happened only after they’ve spent thousands of pounds to fix the non-existent problem. So it’s worth triple-checking everything is in the right order there.

I wish I could be more specific but for the reasons given that’s inherently quite difficult. What I can assure you of is that that the effects of great design will make themselves felt throughout your business, even if those effects are indirect.

Cheers,
Cennydd

Oscillation is a natural part of every system, of course, but let’s look closer. Here’s the speed at which a pendulum travels, superimposed on its motion.

At the point of largest displacement – when you’re deepest in a particular phase – you’re actually at a standstill. Only when swinging from one phase to the other do you reach your top speed.

Soon after its launch, I blogged about the information design of the tram’s timetable and fare posters, praising their skillful combination of clarity and information density.

Thinking about the project started what has become a deep interest in wayfinding and helped me appreciate the value of environmental graphic design: design that helps people navigate, communicates location identity, and shapes the idea of place.

Happily, the display’s designer Eleanor Seelig saw my post and contacted me recently to let me know that an update was in the works. I asked her for a few words about the project.

The first design was done a few months after the launch when the system was still very new to Nottingham. The brief focused on introducing the tram to Nottingham, but in a way that pitched the brand as higher class public transport. It was important to persuade people out of their cars and onto public transport by selling the benefits clearly. This resulted in a huge amount of information to include, which possibly became a struggle between usefulness and promotion. When I came to design the second version, the tram had just celebrated its sixth birthday and was now securely part of the landscape of Nottingham. In reviewing the existing design, it suddenly felt very cramped. Plenty of the information was out of date and, due to many small changes and the need to squeeze in yet more information over the years, not very clear.

You can see the new map in full at the NET website (PDF format). The update’s main goal has been to reprioritise information to suit users’ recent needs. The rapid adoption of the tram has meant that it is very familiar to Nottingham’s residents, with recent fare adjustments becoming of higher priority than line and geographical information. To save reprinting costs, some of the more rapidly-changing local detail has been omitted, and transport links have been rolled into the redrawn line map.

I knew the fare information was really quite complicated to communicate, with lots of ticket types and even different fares for different times of the day. So I used the coloured fare buttons to draw the viewer into to the fares that would be most relevant to them when standing at the stop – it’s a bit frustrating to find out how cheap a season ticket is when all you want to know is what it’s going to cost you today.

There were also several functional restraints to take into consideration. Each stop has its own timetable and because of the design of the system, this means that stops have between one and three separate panels of times. So I needed to incorporate some ‘filler’ information for certain stops. All in all, there are 46 stop boards, with 32 variations, so it’s a bit of a complicated job.

I was a fan of the open feel of the original version, and on a purely aesthetic level I preferred it to the more boxy and masculine update. I also think it’s a shame that the client has clearly pushed the design toward being a vehicle for promotion rather than information (the “Tram it!” campaign is somewhat overpowering). But generally I think this is a decent user-centred update of an excellent design.

I’m happy to see that the stem-and-leaf timetable structure is still intact and I agree with the deprecation of local information. Interesting though it was, for the majority of city residents this information was simply unnecessary.

Finally, Eleanor’s copy revisions improve the instructional tone of voice, putting a more approachable face to the service.

I felt some of the information was a little too gruff and off-putting in its tone of voice, so I rewrote the ‘Using the tram’ panel to make it a little friendlier and less authoritative.

Bravo to Eleanor and NET for continuing to demonstrate how good design can make urban transport a little more accessible. I’m looking forward to seeing how NET will update its wayfinding and information graphics with the future introduction of Lines 2 and 3.

While other teenagers chased the opposite sex and drank their parents’ cider, I played chess. Bobby Fischer was my Holden Caulfield; a gifted but flawed antihero. At university, my chess career dropped off as I caught up on the excitement I’d missed, but the mark was made, and I still play from time to time. I’ve even played a few Grandmasters, with little success.

Most people think that Grandmasters are stronger players because they “see further ahead”. It’s true that they examine branches of play more deeply than the average player, but the difference is slight. A couple of moves perhaps, but not enough to explain the gulf in skill.

Instead, the main difference is that strong players instinctively select good moves to analyse in the first place. Somehow, masters screen out bad moves without the need for deep analysis. Ask these players to explain this process and they struggle – all they can say is that they intuitively knew certain moves were more promising than others. It’s as if skilled players have developed “taste” for chess moves.

Psychologist Adriaan de Groot’s studies show that the process of playing chess is more akin to the design process than to mathematical reasoning. Both chess and design revolve around visual memory and spatial reasoning. Both involve a phase of orientation, exploration, investigation and validation. And both have enormous branching factors. The permutations of design are limited only by constraints and imagination, while the number of chess games of just three moves each numbers over nine million. De Groot explains that the discernment showed by skilled players is closely related to pattern matching. Grandmasters are thought to have learned up to 100,000 chess patterns and moves, which helps them to develop a feel for the right move in the circumstances.

So what role does taste play in the design process? My theory is that, as in chess, “taste” is simply the ability to draw on patterns and experience to help us choose better candidates for analysis. As such, good taste improves efficiency. An experienced designer doesn’t waste time on clearly ineffective solutions: typographically poor designs, bad colour choice, or unusable interaction metaphors. It follows that taste is learned, not innate. Experience, exposure, and practice give us patterns that suggest which solutions might fit which problems.

There are, however, more cautionary interpretations. Some critics and philosophers contend that taste is merely an exercise in reinforcing social hierarchy: the upper class has taste, the middle class aspires to it, and the lower class lacks it. According to this theory, “taste” is a value judgment about what is beautiful, desirable and proper in the world.

This leads us to the troubling thought that perhaps professional designers perpetuate their existence by claiming that only they possess taste. To avoid this elitist trap, we must expose ourselves to variety in design. This means embracing the low brow with the aristocratic, the kitsch with the refined, the masculine and the feminine. We should let go of the notion that only a designer can produce a tasteful solution, and revel in the ingenuity of the hack and the quick fix.

Whatever the definition, taste alone isn’t sufficient for good design. Give a Grandmaster two hours to play a game and they’ll play substantially better than if you give them five minutes. Promising solutions must still be examined thoroughly. This analysis – visual prediction, updating our approaches as we find flaws or learn more about the features of the problem – is the heart of the design process. Anyone who claims that taste alone justifies their design is misguided if not arrogant.

Postscript

Several years after graduation, I grew nostalgic for the tick of the chess clock and joined a local league. A strange thing had happened. My grade, the quantification of chess skill, had leapt from a mediocre 79 to a respectable 125 (1700 USCF, for American readers). Yet I’d not practised, kept up to date with opening theory, or played more than a handful of one-sided casual games. How, in ten years of lapsed play, had I become a better chess player?

Now I know. I became a designer.

Further reading:

• The Challenge of Taste in Design
• Style in Interaction Design
• Class and Web Design
• Photo credit: All Glass Photo

I’ve never worked in an ad agency. However, I’ve mentored and befriended enough designers in the industry to recognise many of the patterns that Peter condemns. Harmful practices such as spec work, bait and switch, and employee exploitation pervade a worrying proportion of the agency world. So the post is a heavy punch, but a fair one. And I’m glad that, ignoring a few blow-the-belt blows, the critical reaction has been constructive. Most of it, of course, comes from ad agency designers who feel hurt by the article. They have fought their corner and accused Peter of tarring all agencies with the same brush. It’s a fair counter, but to shrug our shoulders and blame the other guy doesn’t make the smell disappear.

Are all ad agencies “soulless holes”? No, but some certainly are. Can UX designers make a difference in the advertising field? Possibly. But I see it as a a quixotic endeavour, swimming against the tide of a value system that frequently causes the disempowerment of the user. So I stand by my comment that a UX designer at an ad agency is an oxymoron. I have never made a “campaign site”. Nor will I, particularly after this post. To me, user-centred design must have higher aims, and I don’t understand how a UX designer can be excited or rewarded working on advertising projects.

And this, to me, is the crux of the debate. Peter’s post is an ideological gambit, and an old one at that: First Things First for the next generation. The debate was, and is, unwinnable as it revolves around sacrosanct personal values. Those who subscribe to the worldview that “advertising as it is widely practiced is an inherently unethical and, frankly, poisonous endeavor” (for the avoidance of doubt, clearly I do – but note my italicisation) will approve of Peter’s stance. Others won’t.

So far, so idealistic, and I know well that my belief in turning design toward The World’s Big Problems will be seen as naive or elitist. But just because an argument is unwinnable it doesn’t mean it’s not worth having. Difficult, scary questions lie beneath the surface of the post, although for some readers the aggressive language caused those questions to be lost in the froth. How do we come to terms with the fact that a wide range of organisations now practise (or claim to practise) user experience design? How will this affect the perceived value of our work? Does user-centred design contain values that conflict with a capitalist society? How do we decide which projects are most worthy of our attention, and is it right for designers to play the role of ethical judiciary?

These are questions that truly matter in our industry, and I hope the conversation can move beyond personal affront and politics. If it can, then I think Peter’s role as agent provocateur will have been worthwhile, whatever your feelings about his comments.

Update: Peter’s followup post.

Whatever a mouse user is doing, he is perpetually hovering. He might be hovering over a specific control, or over several places in the course of another action: dragging a scrollbar, selecting a word, even just idling around the screen. But until he has clicked, this user has taken no positive action. A click is unambiguous: the caveman pointing at the mammoth, the dog scratching at the door to go out. It cannot be done in the course of anything else.

Hover states can provide subtle visual cues that help the user understand how something works. A faint glow around a “favourite” star. An underline appearing underneath a link. But they should not be used for anything else. Hovering does not demonstrate user intent.

Designers who pop up information panels or move page elements on hover are using flawed logic, second-guessing what users want to do before they do it. The result, which I’ve seen in countless usability tests, is that users activate these controls accidentally. You know what happens? People actually flinch: “What was that?” They return with hesitation, less confident in their understanding of the site. It’s no accident that the Twitter worm propagated through hover—accidental activation meant users spread the worm unintentionally.

You may argue that hover states save space, and you can use hover panels to display supplementary information that helps the user know whether to click. It’s a feeble excuse. If the information is important, it should be on the screen already; if not, it should be omitted. The hover compromise shows only that you were too timid to make this decision.

Another compelling reason not to hide information behind hover is that you can’t rely on it being there. The approach prioritises one mode of input—the mouse—and makes information unavailable to people using keyboards, touchscreens and screenreaders. That’s not what your mother taught you.

Please, do your part. End hover abuse now.

Addendum: If you positively have to use hover popups, at least add a delay so they only activate if the user hovers for >500ms. It’s still no guarantee of intent, but it makes it a more likely probability.

Image: digital_monkey

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.