Pet Theory

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.

Last week I used Flickr for the first time (obviously I follow the trends rather than make them).

What a design!…fast, easy, imparting a brimming sense of possibilities while remaining clear and directed. Really, it’s delicious.

So being a partisan I immediately wondered why it wasn’t done in Flash. Apparently, it was, originally. Here’s an interview with the lead developer.

Flickr began as a UI for IMing that included photosharing. Since the emphasis was on providing a visual context (dragging and dropping, windows, avatars?) for instant communication, Flash seemed like the natural choice.

However, after the photosharing aspect caught fire, the Flickr team responded quickly, dropping Flash and creating the site as it is, which allows users to build photo journals that other users can view anytime, “asynchronously,” as the techno-literate say.

So Flash was no longer necessary, and, to boot, had two flaws 1) security and 2) USERS COULD NOT LINK TO POINTS OF INTEREST IN THE SITE (so, for instance, they could not email friends to point them to photos of their vacation that they had just posted).

After absorbing this anxiety-producing point, I decided to provide URLS for each part of my coming playground site. (And learn Flash Vars, so the site can handle homing-in URLs).

I want to to be talked about, don’t you? Isn’t that the ages-old vanity behind this new-fangled thing, Web 2.0, social networking, viral marketing, community-building, whatever the latest catchphrase is?

I've seen commercials for a new Adam Sandler vehicle, Click. It looks like a comedic work-up of the 3-wishes fairy tale, with reality being paused, played and speeded up like a DVD. The back-flap of my Netflix envelope has a Click ad with the tagline: What if you had a universal remote…that controlled your universe?"

Wow–a major Hollywood comedy that depends on interactive interface for its framing metaphor. I must be blogging on the right topic. Perhaps Uma Thurman will call and ask me to consult for her next project. I'm all ears, Ms. Thurman…

Consider for a moment how different Click is from The Matrix. Clicks sounds like it is centered on USER-control over images of reality, whereas the Matrix centers on SYSTEM-control over the user.

I'd guess that The Matrix is actually the end of the line, culturally, that starts with Hal in 2001, in which computers are viewed with suspicion as alien powers that might invade your life and soul….and that Click represents the start of a new line in tech-featuring movies, in which people are familiar with computers, and indeed see them as tools of pleasure and self-expression.

Flash can do at least 2 things better than HTML: 1) create interactive experiences, and 2) create moving pictures (tweens, animations, video).

That's great. Now let me point out that Flash's two great powers are more than not antagonists, and their clash distorts and cripples many a swf.

The example of 1st-person shooters is misleading here, because the experience of ACTING and the experience of SPECTATING are fused in the intensity of 3D immersion into life-and-death scenarios.

Off this peak, spectating and acting are often at cross-purposes. It can be hard to "do" while you "watch," and to "watch" while you "do." Watching a movie while you play racquetball is a bad idea.

Of course, we multi-task all the time, and I believe there are literally infinite ways to fashion experiences that mix the two so that they complement each other…but I don't believe that designers blind to this elemental conflict will be the ones who create these new experiences.

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.

At Flash sites, the busiest forums discuss code rather than design.

This is odd considering the number of Flashers who straddle the developer/designer divide.

One explanation: 1) It’s hard to discuss interfaces in a way that can be represented in a forum. In fact, it’s hard to prototype interaction period. (In order to discuss an interface, you basically have to build an interface…at which point you are committed.)

Another explanation: A lot of design is proprietary: your client would not care a whit if you post a snippet of code you are using on her site…but she sure as hell would care if you offered its design for public scrutiny.

I’m not sure how to overcome these obstacles. As it is, I don’t bother posting in the sitecheck forum. Once people show their sites, all the major decisions have been made, and the only polite thing to do is niggle.

The designs I've been playing around with lately have all put navigation controls at the bottom of the screen (like the Mac Dock).

I was wondering why. A hypothesis: As I've become more comfortable with computers (I'm a late convert), I've started using keyboard shortcuts extensively, so in placing controls at the bottom of the screen, I am in essence putting them within "hand's reach," as if the proximity of the pixel-created buttons to my flesh-and-blood hands mattered.

Before, when I was less comfortable with the keyboard, it might have made more sense to put navigation up high…perhaps because the controls would meet a horizontal eyebeam..or users start reading at the top. (A web page being a "page," after all).

I think, however, that even inexpert users long to touch computers directly, rather than have their interactions mediated via the mouse.

Last year I bought a Cintiq. Given that I was scraping by, it was a huge expense, and totally unjustified except in the sense that I know I'll be doing Flash or something Flash-like for the rest of my life.

I've used this device to help me learn to draw…and, BTW, to impress anyone who happens to come by my apartment.

Here is the inevitable result: Peeps are fascinated by their ability to touch screens directly…and WITHIN ONE MINUTE, they will make this mistake: with the Wacom pen in one hand, they will press the screen WITH A FINGER of their other hand, as if it were an ATM screen.

Clearly, touching is primordial.

When I was considering a Cintiq, I asked an illustrator at an ad agency where I was working what he thought. He was against Cintiqs for 2 reasons: 1) your hand gets in the way (it's like actual drawing this way…your hand blocks the picture you're working on), and 2) your hand gets tired (again, like actual drawing…it's quicker to jerk a mouse with your wrist).

I love my Cintiq and you'll have to pry it from my cold, dead hands, as Moses used to say, but I found out that the illustrator was spot-on…and think touchable interfaces will always be limited.

Still, as a designer, I'll design with the urge to touch in mind; it matters even when there is no touching.

Neilsen has started to track people's eye-movements to explore user experience.

Take a look at one fascinating result (a picture of a web site with areas of user interest indicated in varying intensities of orange)…

The upshot: users tend to scan text more than images, and favor text positioned at the top and the left. Boxed material may be ignored if it resembles an advertisement.

This article got me off on a speculative tangent: How does mouse movement relate to eye movement?

I know for myself that sometimes I stop the cursor and just let my eye roam; other times, my cursor lurks right behind my eye-beam, ready to act.

So what are possible design implications?

The go-it-alone eye-beam is inevitable for designs that simulaneously offer a lot of information (reading nytimes.com, my eyes dart, my hand just scrolls).

However, for more interactive designs (and especially oft-used applications), it could be helpful to encourage the camaraderie of eye and hand:

1) Actions like button presses will be quicker if the cursor is already shadowing the eye-beam.

2) Visual callbacks will be more intuitive if the eye does not have to travel to register them (you press a button, the results play nearby).

Anything else?

In my last post, I suggested centering and tightly packing buttons in order to promote muscle memory for repeated navigations or combinations of actions.

This sketch shows a collection of such buttons, which are obviously too packed to label.

So how will the user know what button does what? It seems like I should go back to interface school, no?

Well…no, thank you very much. There is a logical solution to this problem: create a textbox, which I'll call "hotbox" just to be perverse. When the user rolls over the button, you can throw label text into the hotbox:

Before you knuckle-dragging traditionalists protest that I am trying to perfect perfection (the button, the label, a marriage appointed on high!), let's just consider the advantages of this scheme:

1. You can throw more descriptive text into the hotbox than can fit comfortably in a label.

2. Writing and graphics are cleanly separated.

3) It is easier to remember buttons based on location and performed action rather than text.

It's like a very easy game of concentration. The first time, you flip the card over (roll over). Afterwards, it is easier to remember "there, where I rolled" than home>company>info, especially it is "there, where I clicked."

Remember when you were in college and you were trying to find that line to quote? You knew it was on the upper left hand corner of the page, near the end of the first paragraph…but you had no idea what chapter it was in.

I'd argue that remembering points on a two-dimensional grid is more more natural–and faster–than climbing down the "string" tree: this category>that category, unless you're a descendent of Immanuel Kant, of course.

Category hierarchies are more convenient for people placing information than for people extracting information, so don't mistake your convenience for the convenience of the user. (As Yahoo did, to its detriment.)

4) Getting rid of labels frees up space for more buttons, so it prevents tedious drilling down.

5) The hotbox can be multifunctional. It could be the voice not only of the buttons, but tool tips, help, etc. That way, the user always know where to look for reaction, if she wants it.

(Perhaps optional text should be in a ligher, low-contrast color, so users can ignore it.

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?

At the hugely fun animation-themed LA Flash meeting two months ago, I was stunned by the lightning speed with which the presenters jumped around the Flash IDE. They were interface acrobats, as supple as the lemur monkeys swinging on the fake trees at the San Diego Zoo.

Memorized keyboard shortcuts are faster than pointing and clicking, of course. And a series of consecutive keyboard commands works in conjunction with muscle memory: Before an animator even thinks Select All–>Copy–>Delete–>Paste in Place, his fingers have signed, sealed and delivered it.

That got me thinking: can designers take advantage of muscle memory in point-and-click interfaces, especially interfaces built for a lot of back-and-forth, revision, searching (RIAs)?

In the Minority Report-like future, it'll be cake: Tom Cruise's hands will dance on a hologram, and plot-driving relevations will pour forth…but now?

One thing to do is to make sure controls are closely adjacent; I doubt tracks in muscle memory will be laid down if users must mouse over miles and miles of pixels to get to the next button. A tightly packed mass of buttons, on the other hand, would facilitate quick action and muscle-like memories.

A design generated from this sole consideration would place the controls at the center of the screen and relegate content to the periphery, like this:

It's true that the mass of buttons could be placed more conventionally at the left or the bottom…but then, what if pressing the center buttons called forth new submenu buttons? These too would have to remain adjacent to the original mass, and if the original mass is not at the center, the submenus might spill over or crowd the boundaries.

Note that the division of content into this tic-tac-toe pattern does not squeeze content into boxes that are smaller than normal (most pages are already broken up anyway)–and keeps 8 "tabs" open permanently, a strength for a working/searching interface.

Here's an example of an appropriate use of animation:

Let's say you're designing a list of items (an item including a picture, a price and whatnot), and users can delete from or add to the vertical list.

Obviously, the list starts at the top. But let's say the user deletes the top element…what should happen? Should all the elements of the list simply be shifted?

Here, animating the shifting makes sense, to make it obvious that 1) the format remains the same, but 2) the items have shifted places.

The alternative is to leave the user confused: did I make a change? Is the list the same, or different?

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.

I was watching the season finale of 24 and it noticed the titles use linear motion…words come in a steady velocity, hit their mark, and with a resounding thump, stop dead in their tracks. It's exactly what homo-sapien physics would predict: an object comes to a sudden stop, and its energy is released as sound.