Blogless

Rick Poynor, writing for ID last month, made an impassioned defense of the much-maligned visual element of the design process, an element he sees as one that designers should be willing to defend to its many critics, paramount among whom are the "design thinkers" who seek to supplant visual designers with vision-hungry corporations worldwide.

Quoting Dori Tunstall, he argues :

"There is an inherent intelligence to beauty, which is about the depth and passion we feel for the world." Design thinkers like to wax lyrical about the elegance of their strategic thinking as a form of design in its own right, as though this could ever be a substitute.

While my tendency, coming as I do from an interface design background, is to recoil at the very idea that making things look nice is somehow "good enough", Poyner does have a point, and some downright alarming quotes to back it up. Including Adaptive Path President Peter Merholz quoted as saying, “Designers like the shiny-shiny…That’s often why they got into design.” Poyner volleys:

Is an encounter with an everyday brand — a bottle of soda, a power tool, a packet of snacks — the place to go if you want to be moved, to seek education, or to grow as a person, and aren’t there better places to find those kinds of experiences?

The bad news is that both Merholz and Poyner are right. Essentially, the shiny-shiny isn’t good enough, and also all the corporate vision in the world isn’t going to help Miller Lite stir my emotions. The good news is that both of them (or at least their respective sound-bytes) are fighting straw men, the silliest representatives of design culture, visual or otherwise.

I suppose, though, that one does have to say those things, because often enough the silliest elements of culture are so often highly successful.

We don’t want the most salient representatives of our profession to be associated with, on the one hand, mindless Photoshop junkies casting drop-shadows and ripple effects on the once-powerful identities of their clients, or, on the other hand, academic blowhards, spouting rhetoric intended to, “dazzle prospective clients into believing that they are dealing with rigorous professionals who work with precise methodologies and defined, quantifiable outcomes.”

The problem, then, as I see it, is not so much the concrete philosophico-strategic position of one camp or the other (insofar as they ever exist atomically), but the general mindlessness that allows any design firm to internally justify that either a mindless visual kludge or else the Emperor’s New Clothes is a legitimate result for a consulting engagement.

Now more than ever, our clients want cool AJAX components for their sites. It seems like more often than not, we find ourselves creating whiz-bang image galleries, file upload forms, and a variety of other interactive components. These components can be tasteful and add much-needed fun to an otherwise run-of-the-mill interaction experience, so we like doing it.

One of the things we don’t like about it, however, is the ease with which web standards can be thrown out the window in the "getting it working" part of the component development. One of the most frustrating culprits is often the family of tags that are required to generate CSS-based opacity effects for interaction elements.

Now, I am generally against using Javascript to apply unsupported CSS definitions as a salvo against the mean red screen of the CSS validator. This is usually a bad idea because, among other reasons, it can fail to degrade gracefully if the user doesn’t have Javascript, and it provides a strategy to allow invalid CSS validate in cases where it really shouldn’t, it’s a little bit clunky when compared to other available methods, and frankly, introducing Javascript into the equation just to validate CSS rarely seems worth the trade-off. That said, in this situation, I think it’s legit because:

1. The opacity definition(s), while being supported by all current major browsers and darn useful, isn’t included in the CSS 2.1 spec, despite apparently being part of the jetpack-esque CSS 3 spec (::someday::), and doesn’t validate.
2. In the case of an AJAX component, you’re already requiring that your users have Javascript enabled, and hopefully you have a graceful exit strategy already in play if they don’t.
3. Your only other choice to achieve the effect you want is to use something like Flash, which is certainly worse even than invalid CSS.

So let’s take a look at how to save your opacity effects and your valid CSS using some handy DOM scripting.

Example: SmoothGallery

I like Mootools. I like its speed, and its clever implementations, and of course, its tiny size. From now until something better comes out, when I write example AJAX, it’s going to use Mootools. It rules. End of plug.

Along with the Mootools framework, I have (several times) used customized versions of JonDesign SmoothGallery, a free Mootools-based AJAX image gallery. It is a very nice little component in many respects, but, being one of these it doesn’t validate, which makes it untenable as a final client solution, at least out of the box.

By brilliant deduction, you will have already gathered that the reason it doesn’t validate is because CSS 2.1 doesn’t support a handful of opacity-related tags that SmoothGallery uses. It is full of CSS definitions that look like this:

filter: alpha(opacity=n);
-moz-opacity: n;
-khtml-opacity: n;
opacity: n;

Which lead to something like this:

Opacity: Does not compute!

To fix this up nicely, I always go in and delete these CSS definitions, and then write a little Javascript function, using the good old Mootools selectors, to apply these events at runtime:

function applyOpacity()
{
    if ($E('a.right'))
    {
        $E('a.right').setStyle("filter:","alpha(opacity=20)");
        $E('a.right').setStyle("-moz-opacity","0.2");
        $E('a.right').setStyle("-khtml-opacity", "0.2");
        $E('a.right').setStyle("opacity", "0.2");
        $E('a.right').addEvent('mouseover', function(e) {
            $E('a.right').setStyle("filter:","alpha(opacity=100)");
            $E('a.right').setStyle("-moz-opacity","1.0");
            $E('a.right').setStyle("-khtml-opacity", "1.0");
            $E('a.right').setStyle("opacity", "1.0");
        });
        $E('a.right').addEvent('mouseout', function(e) {
            $E('a.right').setStyle("filter:","alpha(opacity=20)");
            $E('a.right').setStyle("-moz-opacity","0.2");
            $E('a.right').setStyle("-khtml-opacity", "0.2");
            $E('a.right').setStyle("opacity", "0.2");
        });
    }
}

You’ll note that in addition to setting the default opacity, we have to add some events to mouseover and mouseout. This is because Mootools (currently) doesn’t support CSS pseudoselectors, so we have to replace the .n:hover definitions in the CSS with Javascript events.

Now all we have to do is call this method on domready (or on window load in more old-skool cases):

	window.addEvent('domready',applyOpacity);

Here are the final opacity effects in action, at one of our client sites, Angel Guardians, Inc:

Runtime-applied CSS opacity in an image slideshow. Look at the top left and top right corners.

And here’s the gin in your martini:

Opacity, computing!

Hopefully you can see how this abstracts to any situation in which CSS opacity is being used on elements in an AJAX component, and also to any Javascript framework. You can always use document.getElementsByClassName(’right’), or any other selector you
prefer, as well as window.onload = applyOpacity or your choice of any method of attaching a Javascript event.

As Paul discussed in a previous post, fun is a powerful way to connect with an audience. But if fun is so important, then we must ask: what makes something fun?

It’s easy to see why games like SSBB are fun. What’s not to like about getting together with a bunch of friends and beating the daylights out of each other in a frenzied orgy of color and sound? Now, contrast that with some gameplay from Grand Theft Auto IV…

“The mobster stuff is fun, but I’m just not looking for a committed relationship right now.”

I spoke with one of my friends the other day who said he enjoyed the game, but didn’t like what he had to go through to maintain relationships with his in-game associates. Apparently, throughout the game, the protagonist has to keep his friends happy, or they may not come to his aid or give him new missions. Making them happy involves answering when they call you, going out drinking with them, etc. all while you’re trying to move ahead with the game. To be honest, it sounds pretty annoying. “Is that supposed to be fun?”, I asked.

Playing The Sims is like baby sitting. For stupid, highly flammable babies.

It reminds me of the Sims, who have to continually be told to eat, go the bathroom, and not let the house burn down, or they die. Unlike GTA4, it’s not optional, it’s essentially the whole game. Well, that and buying things. I never found it to be much fun. It’s too close to real life to me. It sounds like a job. It sounds like work.

But wait a minute. The Sims is the best selling game series of all time and GTA4 just made a half billion dollars in one week; obviously these kinds of things are fun for some people. It seems that fun games aren’t just cartoony and fast-paced; they can be realistic and downright needy, too. But how can a game that sounds like work be any fun?

To answer this, it might be helpful to examine the distinction between work and play. If grinding Molten Core is fun, then it’s play; if not, it’s just work. I may be grossly over-simplifying here, but I think this is instructive. So rather than ponder what makes something fun, let’s consider the basic ingredients of play. As I see it there are two major components of a play experience:

• Lack of (unreasonable) consequences—One should be able to try and fail as much as they like, without harsh penalties. If there is no way to fail, you win all the time, and that’s no fun (like that episode of Twilight Zone). However, if failure carries too great a price, then trying is no fun. If the consequences are designed just right, it keeps things flowing; it’s motivating.
• Freedom—Play happens with the player’s choosing. This is an inherent property of games: one is never forced to play. In some of the best games, the player doesn’t even have to play in the conventional sense. The open world of Grand Theft Auto is one of the best examples of this. If so inclined, one can just drive around causing mayhem and never advance the story. Sometimes the best games are the ones you make for yourself.

I don’t consider this a guaranteed recipe for interactive fun, but I do think that, at a minimum, these are the requirements a designer must consider. Obviously, there’s more to making something fun than this, but it’s a place to start.

In general, whether designing a video game or a web application, one should endeavor to remove unneeded frustration and increase possibility for the user. Play is working with an unlimited ceiling and a comfy net to catch you. Otherwise, it’s just work– and that’s not much fun.

In this (first) installment of Less is Better, take a gander with us at a billboard for a South African utility, and a movie poster for Stanley Kubrick’s classic 2001: A Space Odyssey.

An enormous amount of negative space, clean and simple type, and the clever use of environmental elements make this billboard from South African electricity public utility Eskom, Africa’s largest producer of electricity, a shining example in a design field plagued by some of the most flatly unpleasant visual elements of our global visual culture.

This brilliant movie poster for 2001: A Space Odyssey manages to distill an incredible amount of information into a simple black rectangle: The monolith. Compare to these, which look positively garish by comparison.

I was over at a friend’s house last night, doing design research (read: drinking bourbon and playing video games), and found myself momentarily distracted from my pleasant Kentucky-style buzz by the jaw-dropping visual assault Super Smash Bros. Brawl for the Nintendo Wii.

Nintendo draws on its deep stable of characters to create a tightly branded interactive experience.

O! Insidious Nostalgia

Super Smash Bros. Brawl is a branding tour de force. Level designers Kazuhire Irie, Takeshi Suzuki, and Kou Arai have situated the game as a living history of the Nintendo product line, adopting a wide range of design styles to recreate elements of Nintendo’s extensive mythology in a way that allows the player to simultaneously:

1. indulge in the thrill of recognition
2. have an enormous amount of fun game-playing
3. be spoon-fed nostalgia for the commercial products of yesteryear, or else feel an immense need to play catch-up ("Why would they have a level from Earthbound? I never played that.") as part of a not-so-subtle upsell. All the original games are available for $4-5 directly from your Wii.

Visually meshing the old with the new, you can see the living history of 30 years of Nintendo.

These three things in combination provide an almost narcotic Gestalt effect that all branding and identity designers could learn something from. It’s branded fun.

Apples and Toadstools

Now, Nintendo is a company that is about fun. They have no choice, you might say, but to tie fun into their branding strategy. What about the rest of us? We make productivity applications, or sandwiches, or else we’re the IRS.

Fair enough. But, take a look at three really successful brands, and some of their defining choices over the last few years:

Apple, creator of PC hardware and software, operates with a branding cornerstone of consumer-grade creative applications - why? Because making music is fun. Making videos is fun. Even the most functional components of Mac OS are designed with a mantra of aesthetic giddiness that alarmingly seems to supersede all usability guidelines.

Apple’s OSX Leopard Dock results as part of a larger branding strategy to focus on the "fun" factor, often at the expense of the Apple HIG.

And of course, branded fun doesn’t end with the end user:

The Unbelievably Popular social web application Facebook brought the fun to the developer-side last year, combining, in a brilliant stroke of competitive geeksploitation, the fun of creative computer hacking with gambling and all pursuant promises of riches, by way of its Developer Challenge, which offered web application developers the chance at a $5000 prize for the best "an application…that integrates a Facebook feature with your favorite mobile components."

The Coolest Small Company in America, Zingerman’s Deli, famously keeps the fun alive on the employee-side, with their fun and funny, yet highly branded internal documentation.

A cartoon from "A Guide to Effective Telephone Service at Zingerman’s".

More is More

For my money, though, Super Smash Bros. Brawl is our master-class in the art of making a branded user experience fun. The thing that’s so impressive about this effort is not only the above laundry list of good design choices, but the absolute volume of branding packed into every conceivable unit of measure of the game-playing experience.

From the obvious use of a stable of 35 playable characters and the 41 stages representing a wide swatch of Nintendo’s history, to the fresh arrangements of classic Nintendo songs, to the 4 separate play-control styles (including the Classic controller!), every element of SSBB is branded backwards and forwards to evoke the sentiment that the history of video game fun is absolutely coextensive with the history of the Nintendo brand.

Nintendo capitalizes on its deep history, including characters and stages going as far back as its pre-NES handheld games. Check out this Nintendo Electronic Games Catalog from 1983.

And the only reason it’s not completely obnoxious - because what we’re really talking about here is a giant interactive commercial - is because it really is so fun.

The critics seem to agree. Please note also that Nintendo Power (another arm of the Nintendo advertising machine) awarded Brawl a perfect score in the March 2008 issue, calling it "one of the very best games that Nintendo has ever produced." From a corporate perspective, they couldn’t be more right. SSBB is Nintendo’s coup de grâce, if not the defining moment in the history of game-as-branding-strategy.

In classic video game economics, SSBB players earn coins by completing tasks. Presumably you can use these coins to purchase more Nintendo products.

We all know the scenario. Some movie protagonist is facing some movie antagonist, and the antagonist tells him to choose who dies, his (insert family member) or his (insert other family member). Always, always our good-hearted protagonist offers himself first. Only very rarely does this work.

Donnie Darko, because his enemy is metaphysical, chooses himself. Ontic enemies rarely allow this.

The rest of the time, our insidious villain makes some smart comment, and we’re back to square one. The Internet Explorer team’s smart response to our valiant attempt to save all our users was to provide us the conditional comments specification. Please note, the villain will never just decide to give up his evil ways at this point. Never.

Ostensibly, what Microsoft suggests is that CSS/HTML creators stop using IE Hacks in the body of their main style sheets, and instead, in the HTML, create a conditional comment which serves up an IE-specific stylesheet if the user-agent is in fact Internet Explorer. Like this:

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Ok. So there are obviously a lot of good reasons to Stop CSS Hacking, including CSS validation, sustainability, and pragmatics. They have been discussed in detail, often eloquently, and won’t be repeated. Here’s a little excerpt from the above article:

Instead of specifically exploiting bugs in a browser, bugs that will obviously one day get fixed, conditional comments are an officially-sanctioned feature of the browser that won’t ever go away. They validate, and even though they’re proprietary, when used with discretion they allow us to accomplish exactly the same thing as CSS hacks.

There are also eloquent and accurate rebuttals from a camp that enjoins that conditional comments are not only an affront to HTML standards, but also maintainability, and the common sense of keeping your hacks in one MIME type:

While "Conditional Comments" are syntactically valid, they are not standards compliant: Information that appears between comments has no special meaning, and comments will be ignored by the parser.

Given the fact that both approaches require some give in terms of maintaining your standards-integrity, and that both have pros and cons in the long-term column, and some pragmatics, I consider all these categories a bit of a wash.

Here, I thought I’d try a little thought experiment that starts with the numbers.

The Argument from Statistics

Imagine a test sample of 100 total website users. On average, you’re going to have a breakdown of user agents that looks like this (grouping browser versions):

• 53 Internet Explorer users
• 38 Firefox/Mozilla users
• 2 Safari users
• 1 Opera user

This means that 41 of your users are dealing with a browser that is reasonably standards-compliant, and 57 of them "may require hacks".

Now let’s imagine you have to hack a conservative number (say five or so) CSS definitions to get all versions of IE rendering the page right. Let’s assume that including comments for organizational and explanatory purposes, we’ve got about 40 lines of css, and about 550 bytes total. The conditional comment above adds 84 bytes to our html page.

So, in the case where you are using the conditional comment above, you’re serving 84 unnecessary bytes to 57 users, for a grand total of roughly 4.8kb of wasted bytes served. In the case where you keep your hacks inline, you’re serving 550 unnecessary bytes to 41 users, for a grand total of 22.6kb.

To put this in perspective, multiply by a few thousand users a day. Let’s say your client’s website gets 5,000 users a day instead of 100. That works out like this:

• The conditional comments approach serves ~2.4mb of throwaway bytes a day.
• The inline hacks approach serves ~11.3mb of throwaway bytes a day.

Now, 9mb a day distributed over 5000 users is not exactly what I’d call a "huge ordeal" for the users, but I think it does give some compelling evidence that conditional comments, on the balance, are actually better for users. Which, especially with all other things being more or less equal, is good enough for me.

Adaptive Path wrote a nice post a while ago answering a question they had been asked by a client. The client, showing uncommon wisdom, asked them “how they might make the most of [their - the client and AP’s] design engagement.”

This is a sort narcotic story for designers (or at least myself), who, qua Shirky’s arrogant designer, fantasize about a world where clients ask us how they could make the most of our time. Unfortunately, it’s a rare occasion when a client is going to ask you a question like that, much less be capable of hearing and internalizing the answer.

In the remainder of situations, unfortunately, our interactions with clients are going to be influenced by, if not symptomatic of, internal disorganization, a lack of project clarity, monetary shenanigans, or any combination of the three. This means more often than not, being a design professional means putting our ability to be humble to the test.

Because, regardless of whether we have a great client or a difficult one, the project’s success rests squarely on our shoulders. It’s up to our clarity of vision, and our ability to strategize and execute, to mitigate against cultural factors in play at the client site, and to provide the best solution possible within these constraints.

At the end of the day, despite any idiosyncrasies of the process, the best thing we can do - and the only reason we’re there in the first place - is to solve the problem as elegantly as we can.

Black Square, Kasimir Maelvich

We do our best to work through these obstacles by listening to our clients and presenting solutions that we think will cut through the fog.

The late, great Paul Arden offers this piece of strategy:

A CLIENT often has a fair idea of what he wants. If you show him what you want and not what he wants, he’ll say that’s not what he asked for. If, however, you show him what he wants first, he is then relaxed and is prepared to look at what you want to sell him. You’ve allowed him to become magnanimous instead of putting him in a corner. Give him what he wants and he may well give you what you want. There is also the possibility that he may be right.

Sometimes, things click, and your design is successful. Sometimes it’s not.

That oh-so-valuable design-arrogance might tend to get us irritable when an idea that we’re invested in fails to connect. But the maybe-even-more-valuable-and-much-harder-to- come-by humility should help us remember that at the end of the day, we work for our clients, and we have to trust that they know what is best for them.

The situation will arise occasionally, then, when you feel like you have provided a client with a superior solution, and they opt for another one. As a design professional, you have to realize that you’re not in the building to change their culture, to push them further than they feel comfortable going, or to argue them into making a move that they don’t believe in. You give the best solution your best shot, and if it doesn’t work for them, even if it’s for reasons you don’t agree with, you accept that.

The heart of being a professional is that even when this happens, you don’t let it stop the quality of your work. All that arrogance, assuming it comes from somewhere, comes from the fact that you can consistently solve problems. The cultural limitations of your client need to be thought of as productive constraints, not roadblocks to success. Hence: If your client doesn’t want the best thing, make the best version of the thing they want.

In April of 2003, UPS released what has since become a very hotly debated brand update. Summarily, UPS retired Paul Rand’s iconic 1961 package-and-shield logo and replaced it with “a two-tone, 3-D-look shield topped with a quasi-swoosh [and a wordmark] set in a customized version of [the common logo font] FF Dax…” (Source*)

* As evidence of how positively engaging this identity redesign was, the discussion on this article received its first comment April 7, 2003 and got its last one on November 9, 2007!

The great UPS logo debacle of 2003

The responses to this re-branding varied from declaiming FutureBrand, the New York-based designers of the new logo as glorified Paul Gaskills to flat-out declamation that “the new logo is better,” and subsequently that, “you typography/graphic/illustrator bullies need to relax.” (Ibid).

A couple of more gems from this really swell discussion, for your consideration:

The old one was stale, but it reminds us of a time when quirkiness and personality were still allowed into the world of commerce. The new one expresses absolutely nothing, and quite well. It’s the perfect emblem of this age.

The old one always reminded me of a face, and the package was like a hat with a little bow in front. It said “straitlaced efficient guys in uniforms delivering stuff.” The new one reminds me of a kid with the haircut I had in my skateboarding days. Coupled with the brass-badge look, it gives off a strange mix of incompetence and official self-importance.

However, for my money, the situation was best summed up preemptively (you heard me) by Susan Kare, most widely known as the designer of the Windows 3.0 iconography as well as for the infamous “smiling Mac” and MacPaint icons. In a 1999 issue of Fast Company magazine, she opines, “[a]t one point, some years ago, it seemed as if all the logos that had any personality - such as the winged horse of Mobil gas stations - were being replaced by death-star shapes that supposedly looked high-tech. UPS didn’t need to make that kind of update.”

Well it turned out some three and a half years later that they made it, rendering the question of whether they needed it or not immaterial.

Signal to Noise

Or so it would seem. As it turns out, UPS has provided the design culture with a rallying point against what I believe have become endemic behaviors on both sides of the design equation: Both designers and their corporate benefactors, when charged with the identity (re-)development process, too often take the “safe” road, phoning-in the de facto message-less identity (see above) instead of taking the opportunity to do some mental unpacking and come up with a better solution. What we lose in this situation is what Paul Rand stood for, the human parts of the design. What we get instead is assembly-line brands - brands with a very low risk of catastrophic failure, but also with an equally infinitesimal possibility of “standing out from the crowd”.

I believe this phenomenon to have flatly negative consequences for corporations, and I’m going to evidence that belief [quickly] with an appeal to information theory, and specifically with an appeal to the information theory formulation of the concept of redundancy.

Redundancy in information theory is the number of bits used to transmit a message minus the number of bits of actual information in the message. Informally, it is the amount of wasted “space” used to transmit certain data.

Gradients, lens flares, faux-3D elements, and overused fonts can, as a result of their relative overabundance in our design ecosystem, officially be classified as noise. This means that about 90% of the new UPS logo is “wasted space.” Whereas, with the Rand logo (and in this way, like much of his identity work), it’s all signal, baby.