Pet Theory

This spring I went to Rome for my honeymoon (first time to Rome, first time getting married).

There I met an old acquaintance, the Ugly American…and this time, it was me!

Perhaps you’ve met him: he doesn’t bother adapting himself to the locale, he expects everyone to speak English, and when they decline, he thinks increasing his already-loud volume will smooth things over.

He surprised me in Vatican City. We went without a guide, on a lark–a bad idea, as it turned out. We were confused. For instance, in the morning, people line up outside the walled city. There are two lines, one for individuals, one for groups, but it’s not clear which is which. There are no placards, maps, concierges, etc. Inside, the same total lack of hinting holds. There is no way to know that you have go through the Sistine Chapel to get to Saint Peter’s church–unless you already know, of course.

Now, who am I to suggest that the Pope nail up placards on these marble walls? Who am I to expect that I can amble into a 15-centuries-old holy place without any guide and get my bearings?

I must be the Ugly American. I was fuming.

That experience made me re-evaluate the Ugly American. The Ugly American is presumptuous and rude, of course…but anyone truly interested in interface design is in a real sense catering to the Ugly American in all of us.

Why shouldn’t everyone just understand me? Why shouldn’t things just work? Why can’t a single person become a publishing phenomenon? Why not do your banking from the comfort of your den?

“Why not?” A rude question–and sometimes a useful one, too.

Like every other person who has ever surfed the web, I view pop-ups with total disdain. Mostly I ignore them…but given the opportunity, if I had all of them gathered in one place, and my forefinger on the right trigger (Firefox?), my disdain would be positively genodical.

This pop-up racism, I admit, is not entirely rational. On occasion, there are rational reasons to depart from the design you've committed to, and require the user to deal with a whole new z-layer of design.

Here's one example at harpers.org. It's basically a "click to enlarge" interaction (scroll down the central column to the first picture, then click TWICE), with a perfect implementation.

Notice that 1) the pop-up appears in reaction to user desire, where the user clicks, and 2) it can be un-popped with the same click. Sweet…I think I'll invite a pop-up to dinner…and even let one of them marry one of my daughters.

There are many details that grate on me: the slow drop down menus, the ugly gray gradient background, the pictures with people wearing sunglasses that I can barely see, the labels that use all caps, the small, blurry font, the lack of a true home page (just a splash-page picture of a girl with wild hair, which, truthfully, would mollify me some if I could get back to it), and the totally boring implementation of the backwards/reflection/different view theme.

But what really gets me down about the site is the way the use of Flash actively detracts from my experience of the site.

1) It's slow. Each navigation entails the same transition animation. In the beginning, this animation acts as a preloader…but then, once the content is loaded, I STILL need to wait. WHY?

2) It's repetitive. How many times do I have to see the same transition animation? It gets old quick.

3) It's confusing. I want to see sunglasses. Where are they? The searches often yield nothing. It's not clear what I had been searching for. Once I make selections, I still need to press GO. Once thumbnails are loaded, I need to scroll (and the scrolling sucks). If I press the thumbnail, I get a medium-sized picture. Then I can press various buttons to get an even larger picture in a pop up (!), or some meaningless measurements, or (the button with the refresh symbol!) I can rotate a smallish 3d image of the glasses (talk about burying the lead).

It feels like every poorly designed site–arbitrary and disempowering. I always feel like I'm a dizzy, drunken trail of clicks away from where I want to be.

Thing is, I'm not some useability prude or text-obsessed Slashdot geek…I actually believe in the potential of Flash. This site could make shopping for sun glasses pleasurable and efficient. It does not…in fact, its html version is heads-and-shoulders easier to use.

I was trying to explain to my skeptical sister-in-law why I quit my proofreading job and started up with Flash.

When I explained Flash to her, she said: "Have you seen the Ray-Ban site?" Then she groaned and made quick, couple-ish eye-contact with my brother, as in "What silliness is your brother up to now"?

Later I went to the site. And the truth is, I was embarrassed.

The animation that plays every time you return to the homepage (or do any repeated action) is a crime against design so blatantly hideous that I would hesitate to mention it were it not epidemic.

In the words of an unhinged David Byrne: Say something once, why say it again?

Most transitions should be handled in Flash without animation, because most transitions are driven by perusals and not commitments, and for perusals, animation is laborious.

Let's say I'm mousing over a menu; why not have text or images come up immediately, on rollover? If your design is logical (where does the material come up?) and your programming suave (you've loaded in the background), this immediacy will free users to look around (focusing here and there, backing out with ease) without having to commit.

But let's suppose the user commits and selects; even then, the question should be asked: why animate? It's useful, because at least if know why you're animating, you'll have an idea how to animate.

Let's say the content that loads is melancholy, perhaps a slow blur tween can calm the user and prepare him to squeeze out copious tears…for comic content, perhaps bounciness, elasticity…for corporate efficiency, exact, efficient motion.

Of course, the meaning of transitions often resides in the logic of the interface itself rather than any content per se. Transitions can orient the user. An event happens, the state of the interface changes, and the user is supplied with a visual correlative of this change.

Let's ignore the fact that 95% of the time, designers use this visual correlative just because they can (animations for the hell of it, dude!), and focus on a few ways that animations can orient users.

1) They can make emerging graphics less (not more) prominent. (As thumbnails load, the user might already be looking at a thumbnail…so the currently loading thumbnail should materialize like a docile child waiting to speak, fading in rather than popping in).

2) Morphing shapes can retain references to consistent layout elements while changing according to state. (The back button used to be on the green square…now it's on the green rectangle…the shape is different, but the same).

3) To anticipate content before the content is loaded. (Preloaders should combine standardized and custom elements, if you ask me.)

There are other reasons–though not so many as "LA Flash" designers assume–to use animated transitions.

Keep in mind that these animations should play quickly if they are intended to be an integral part of the user's interface experience. A plurality of our neurons are devoted to processing visual information, which we do faster than PlayStation to the power of xBox. If you are using an animation to orient the user, the user is probably going to be oriented (or not) in milliseconds.

A rule of thumb: since we see before we verbalize, the visual cueing we give users should be accomplished in less time than it would take them to internally articulate it ("oh…that's still the back button"). Otherwise, the normally slow verbal part of the brain gets to the finish line, has some gatorade and takes a squat before the normally speedy visual component of the brain finishes up. And that's perverse.