The art of navigation labelling

One of the things I’ve learned with my recent Pinterest obsession is that like their capacity to create party invitations, everyday people are truly excellent at naming the buckets in which they sort their stuff.

The names people give their Pinterest boards are often really elegant and appropriate. A couple of patterns I’ve seen:

  • Use an imperative or exhortation. So rather than “Casual Fashion”, people use things like “Dress Down!”. Instead of “Winter”, there's “Keep Me Warm”.

  • Use a phrase pattern across your IA. Rather than “Yves Saint Laurent”, “Dior, etc, people use “I ❤️ YSL,” “I ❤️ Dior”, etc.

We should never underestimate the power of lists and the artful variations they can suggest. Obviously, the most mundane labels are often the best, but sometimes it might make sense to think a bit laterally and take inspiration from these kinds of sources.

In defence of mood

A designer from the Netherlands once gave a talk at our studio over lunch. Jeroen made beautiful objects in a past life as an industrial designer, but after encountering experience and service design, he gave up industrial design and ended up travelling the world, investigating how to apply user-centred design and social entrepreneurship to address poverty. I’m not particularly sympathetic to the idea that entrepreneurialism can solve structural economic inequality, but I welcomed Jeroen’s candour about the lessons he learned on his journey.

What did puzzle me, though, was his attitude to methods that predate our stereotypical user-centred design world of Post-it notes, lo-fi prototypes and co-design workshops. Bemoaning the state of design education, he declared with disgust that “in Amsterdam, there are students who still think you can design with mood boards!”

Okay. When did mood boards become beyond the pale? When did a fetish for sticky notes succeed in displacing aesthetics? This feels like user-centred design puritanism. And as the design director of a user-centred design studio, I find that mood boards are not only useful, but that mood itself is a key element that needs defending in the design process.

From method to heuristics to method

We didn’t always explicitly use user-centred design methods at our studio. Originally cast in a more classic visual communications mould, we art-directed material for progressive causes. We found that this wasn’t enough; lately, everyone’s understanding of media has shifted from a transmission-oriented model of communication to one that’s concerned with how complex ecosystems interact, which demands new conceptual tools and methods. But these new tools and methods were also very much in tune with our own take on our work: user-centred design fit our commitment to doing justice to the issues we cared about.

Suffice to say that our embrace of user-centred design a decade ago (yes, before it was cool, haha) was both a sea change and a kind of continuity. While our new media universe does bring certain issues into relief, thinking about stakeholders and their situations is not terribly new: just as bespoke tailors have always known how to ask their clients where and when they’ll be wearing certain garments before they’re made, graphic designers have always taken context into account. Across the existence of our discipline, this understanding of context slowly crystallised into the heursitic conventions of print design: this is how tables of contents work; that is best practice in typographic content hieararchy, etc.

Montage and argument

It’s true that many kinds of graphic design wisdom have ossified, and or been taken as gospel rather than seen as the outcomes of real processes of understanding. But at their best, graphic design methods might surprise UCD practitioners.

In my design practice, mood boards aren’t a superficial or arbitrary grab bag of visuals that happen to appeal to me. If you’re doing that, you’re simply being a lazy designer. Neither are they necessarily the best visual matches for how I think my designs will ultimately turn out, as an early replacement for mockups. This limits your possibilities, and renders your process too literal.

Rather, moodboards are a way of assembling material in a montage to make an aesthetico-conceptual argument. How should things feel for our users, and why? What references allow us to think through a range feelings, from the intention behind one’s graphical choices, to actual examples thereof?

For example, if I’m designing a system that empowers people to more easily increase their apartment blocks’ energy efficiency, I might assemble a bunch of references: the playfully urban, graph-like geometry of Blue Note jazz album covers and Saul Bass graphics; DIY hardware manuals; and the stationery-fetishism of the “productivity hack” subculture.

A moodboard, with my captions removed.

A moodboard, with my captions removed.

The argument: when we get together to reduce our collective carbon footprint, we can see it as our improvisatory but ever-improving action around the rhythms of self-measurement, which is rewardingly practical and efficient. We can become our own productivity porn. This is what my mood board argues about what the experience of the entire project might be, and it also supplies a blend of aesthetics that we can put into action in the project’s actual art direction.

Through montage, mood boards are good at synthesising new combinations of meaning in suggestive ways. Other things — affinity mapping the outputs of contextual inquiries, creating personas, storyboarding archetypal use cases and mapping user flows — are good at finding and modelling users’ needs and behaviours, seeing the opportunities within those, and then bringing them to life in ways that can be prodded, tested and revised. Each has advantages and limitations.

The pervasiveness of mood

But mood isn’t just the domain of visual design. Now that we’re in an era of complex media ecologies rather than the centralised messages of broadcast models of communication, the way we shape the spaces in which we make meanings with each other has become paramount. Rather than shaping and colouring “the message”, we’re more invested as designers in making spaces that are conducive to various things happening.

Our speciality as a studio is designing to enable positive social and environmental change, and I’ve always felt that a good way to approach this is allowing people to get on the same wavelength in a mutual negotiation, rather than an evangelical model, in which we convert people to a cause. It’s a way to create resonance, rather than converts. It’s a way to make spaces that vibrate in the right way. For us, creating great experience architecture is a way to make spaces for people to get in tune with each other.

This isn’t something anyone should take lightly. As Wilson Miner put it in his justifiably influential talk at Build 2011, shaping the digital spaces in which people are going to spend a majority of their time is a great responsibility:

(See the whole thing here.)

For me, the key word here is “feel”: “What do we want that environment to feel like?” Miner asks. “What do we want to feel like?”

Isn’t this one of the most important design questions of our time? And I think mood boards, amongst other things, continue to be very relevant to this.

In our world of "don't make me think"-style usability, sometimes people like to pretend that everything can be reduced to arranging elements of information in the most logical and seamless manner so that everything we do as designers becomes invisible. That’s simply bullshit. I fart in your general direction, colourless usability rationalists. Sure, not all systems or places should be in your face, but all spaces should have a mood.

So as I continue to do user-centred design for social change, there’s a great coda for me that ties most of this together. Let’s return to resonance and getting in tune as a model for communicating change in the spaces we create. The philosopher Martin Heidegger had a really interesting take on mood; he used the German word “Stimmung” to talk about it. For Heidegger, mood was not simply something we experience internally, but something that happens between people, and attached to certain spaces. It's great, then, that “Stimmung” also means "attunement" in German. Mood and attunement. Two sides of the same coin.

This is why I defend the use of mood boards.

In defence of lists

Over the last few years, I've noticed a romantic tide of content authenticity developing across web culture. You can find it in confessional commentaries that deal with our investments in life and creative work (Merlin Mann's Cranking being a common touchstone), in podcasts that celebrate doing what you love, and on the stages of design conferences where charismatic storytelling has become paramount.

I'm generally a fan of this "get excited and make stuff" scene, but we need to approach its romanticism with a critical eye, especially when it tends to enshrine a particular model of storytelling, of creativity, and of "good content" — one that privileges confessional narratives, emotional catharsis and an authentic personal voice.

A common trait of this new web romanticism has been to dismiss the "listicle" (a list-based article, like "30 Ways Your Smartphone Isn't As Cool As You Think") as a form of inauthentic, SEO-driven linkbait which, along with paginated articles that chase page-impressions, tend to crowd out a more unitary reading experience. Lists are inauthentic. They have no voice. They lack emotional gravity. They have no personality. They're glommed together. They have obvious seams. They don't contribute to a narrative. They're examples of bad writing.

A lot of this criticism can be true, but there's an important slippage happening here. What this romanticism rallies around is not "good writing" as such, but something much more like verbal charisma, which is not specific to writing at all. In fact, it is the nonlinear list form itself that is more specific to writing. As Walter Ong reminds us in Orality and Literacy, writing and list making are technologically intertwined (and yes, writing itself is an "unnatural" technology):

Orality knows no lists or charts or figures. Goody (1977) has examined in detail the poetic significance of tables and lists, of which the calendar is one example. Writing makes such apparatus possible. Indeed, writing was in a sense invented largely to make something like lists: by far most of the earliest writing we know, that in the cuneiform script of the Sumerians beginning around 3500 BC, is account-keeping. (Ong 2013:93)

Not all lists are going to be interesting, but we need to be open to the possibility that you don't have to write a confessional, cathartic inspiration piece to be considered compelling. In fact, the assumption that this should be the default setting for "successful content" on the web saddens me, and perhaps betrays the corrosive influence of TED culture, in which charisma and a certain type of narrative outweighs the hard work of opening critical questions and making vital connections. Connections that might be better made with the constellative properties of lists, perhaps.

Waves, frozen in time

I flew back to Sydney last night from an out-of-town client workshop. As our plane banked over Botany Bay, I noticed for the first time that while the waves on the water’s surface were clearly visible, they looked perfectly still. The ocean looked like a piece of textured glass, frozen in time. It took a moment for me to realise that from our height and orientation, I could see the waveforms themselves, but without the right combination of magnification and reference points (e.g. landmarks), I couldn’t see that those very obvious waveforms were propagating across the water’s surface, largely intact. So from a particular perspective, a very obvious kind of movement had been rendered invisible.

Flight from the Fire

Image: Evan Leeson, Flickr

This got me thinking about how we do social research (whether it be “design research” or any other kind): without the right framing that emerges from a combination of control points and our sense of scale, we might totally miss a vital kind of activity. Something that we think is without movement might actually be very active. Maybe a quick “zoom calibration” (push in and pull out, just to see whether you’re at the right social magnification) might be all it takes, or angling your vision slightly to find the nearest landmark. Or maybe just wait until those things naturally happen — as my plane banked over Brighton Le Sands and I saw the sand of the beach, a control point was revealed: I could see the waves ripple and break as they approached the sand. So if you keep observing just a bit longer than you’d originally intended, you might experience something like an anamorphic moment, and have your whole system of mental coordinates rearranged.

What are the frozen waves in your research landscape?

Outlines, scaffolds and wearing your structure on the inside

Bamboo scaffolding in Hong Kong

Image: Ioan Sameli (Flickr, CC)

While working on a client presentation over the weekend, a fellow designer and I angsted a bit over the relative merits of presenting work in progress to clients in a descriptive form that left our thought process in the open, versus showing a more streamlined, emblematic package. We didn’t have the luxury of deciding which to go with, but in any case, our angst reminded me of a great passage from Martin Nicolaus’ introduction to Karl Marx’s legendary Grundrisse (literally, “Outlines”), which was basically Marx’s rough draft of Capital:

The inner structure [of Capital] is identical in the main lines to the Grundrisse, except that in the Grundrisse the structure lies on the surface, like a scaffolding, while in Capital it is built in; and this inner structure is nothing other than the materialist dialectic method. In the Grundrisse the method is visible; in Capital it is deliberately, consciously hidden, for the sake of more graphic, concrete, vivid and therefore more materialist-dialectical presentation. (Source.)

It’s a cool observation that lets us honour both stages, and yet also get somewhere different. I think this transition — from obvious scaffolding to a more implicit structure via a “more graphic, concrete, vivid” presentation — also represents our awesome challenge as designers. To be true to each step in the design process, but end up with something that’s more palpable to people than a piece of “mental sausage” in a process diagram (no matter how sexy that might be at the time!).

In the Hegelian philosophy that Marx “inherited”, the term for such acts of transition is Aufheben, a German word which has no English equivalent, but that can simultaneously mean something like “abolish”, “preserve” and “transcend”. It’s easy to fold this kind of terminology into a predetermined idea of “conservative destiny” — Hegel himself did this, by all accounts, and my sympathies have usually been with philosophies that emphasise horizontal guerilla tactics instead of some grand, upward motion. But these days I’m getting a vibe from “Aufheben” that’s far more alive, less predictable and full of friction and transformation — faithful to our earlier steps, but not as some kind of veneration. Moving on, but not necessarily in an obvious direction. (This was no doubt Marx’s intention: to use Hegel to move on from Hegel’s own limits, rather than be properly “Hegelian”.) In terms of my own practice, this means having more arguments, more productive friction, and to avoid making the design process one long line of steps towards a predestined end point. Hebt auf, designers!

Meanwhile, in the alternate universe of awesome design...

I saw this boarding pass in a recent episode of Fringe:

Sexy Fringe boarding pass

Even though the shot only lasted a second, I couldn’t help but notice such a lovely piece of design fiction, which was then doubly emphasised when the next person in line gave their much crappier-looking boarding pass to the homicidal-TSA-staffperson-of-the-week:

Unsexy Fringe boarding pass

Both images: Fringe Files

(Yes, that crappy boarding pass really is there to make a statement about how readable and elegant the previous one is.)

Designers who work in film and television have a great opportunity to create an alternate, redesigned universe in which things work slightly differently, and the fact that Fringe is set in a gaggle of literally alternate universes, each with telltale differences in their everyday environments, makes this all the more delicious. Perhaps it’s design/science fiction squared.

However, it didn’t take me long to remember where I’d seen a boarding pass like this before:

Louie Mantia's boarding pass redesign

Yep, it’s former Apple designer Louie Mantia’s contribution to Tyler Thompson’s excellent Boarding Pass/Fail exercise, which in turn is part of a recent trend in speculative, non-commissioned redesigns that can be found on the web. I’ll read this charitably as an homage, or a vision of a utopia where Louie Mantia really does design our boarding passes (which I much prefer to the current iTunes icon, which he also designed).

Of course, this isn’t the first time that Fringe has snuck in a boarding pass Easter egg. Back in Season One, Lost’s Oceanic Air made a sneaky appearance.

Oceanic Air boarding pass

After Flight 815, I think Oceanic are due for a rebrand.

From degradation to enhancement: redesigning society

In his 1984 essay “Postmodernism, or, the Cultural Logic of Late Capitalism”, the Marxist literary critic Fredric Jameson wrote that

conspiracy theory (and its garish narrative manifestations) must be seen as a degraded attempt — through the figuration of advanced technology — to think the impossible totality of the world system. [My emphasis.]

That is, our culture currently lacks the clarity to map the arcane workings of the global economy, but some of our tall stories still feature some wayward, fetishistic glimmers of that impulse. This figure of degradation reappears throughout Jameson's work, always referring to an echo of a lost or unattainable whole: our critical sense of history, or an image of Utopia, etc.


Image: Wikipedia

Web designers have our own take on degradation. Graceful degradation is a way to deal with a world where different web browsers support web standards and sexy new technologies to uh, varying degrees <cough />. We design for the most complete experience, and build pages in a way that might preserve an echo of that experience in older or less capable browsers. In those dodgy browsers, the page gracefully degrades, and we exerience a still-worthwhile remnant of the lost whole — a bit like the way Jameson likes to see our radical impulses.

Meanwhile, a different design approach has emerged over the last few years, turning graceful degradation on its head: progressive enhancement is a way of designing outwards from the core content of the page. It keeps the design open to possibilities of sexiness in opportune contexts, rather than starting with a "whole" experience that must be compromised. While it might simply seem like another way to achieve graceful degradation's exact goal from the opposite direction, this newer approach is qualitatively different: because progressive enhancement doesn't presume a single, ideal state to fall back from, it deals much better with emerging landscapes and multiple contexts. For example, developing an integrated design that provides an equally "full" and contextually appropriate experience for both mobile and desktop browsers is easier with progressive enhancement.

So, if our degraded attempts at Utopia remind me of design's graceful degradation, design should return the favour: what might progressive enhancement suggest in the world of culture and politics? As a designer who hungers for progressive political change, this question intrigues me. At the very least: rather than groping for a Lost Symbol of freedom, with plenty of us being left with a "graceful", less-than-ideal experience as a fallback position from a fetishised Utopia, progressive enhancement suggests instead that a well designed experience of freedom can be built outwards from a core structure of meaning, in multiple ways, and in uneven terrain.

We should be careful not to reduce progressive enhancement in the real world to something politically unambitious, like simply “working within the system”; in web design, this would've been like sticking with table layouts and font tags in your markup “because that's what we have”. That's how ridiculous the idea of social democratic politics seems to me: you can't redesign the world with spacer GIFs. Web designers wouldn't enjoy our remarkably coherent landscape of enhancement options unless standardistas had advocated a clear break with the status quo, and so it is with redesigning society. (And yet this break wasn't a spectacular event, but rather a massive sea-change that occurred over several years of bitter struggle.)

Meanwhile, you can find graceful degradation's ambition — assuming a maximum specification, and then making do in less than ideal circumstances — in the experience of Stalinism, and that really wasn't so graceful, was it? In the absence of a worldwide socialist revolution in the wake of World War I, Stalin's defensive pragmatism of "socialism in one country" was clearly the wrong kind of pragmatism. (It's no accident that orthodox Trotskyists, who utterly opposed Stalinism, still defended the Soviet Union as a "deformed workers' state", i.e. a degradation of a canonical design.)

On the web, progressive enhancement suggests a different kind of pragmatism — one that avoids both the conservatism of continuing to use the corrupt instutitions of embedded font tags, and the defensive contortions of trying to preserve a canonical design that was specified for only the most advanced browsers. By shrewdly taking different opportunities to enhance a core structure of freedom in different contexts, an ethic of progressive social enhancement could avoid both the increasing conservatism of social democracy on one hand, and the development of regimes that try and fail to defend a canonical idea of revolution that was only really aimed at the most industrially advanced countries.

Anyway, if you take anything from this, "you can't redesign the world with spacer GIFs" is my favourite phrase from the above.