Pet Theory

I’m not so much FOR the big wait as AGAINST the many little waits.

If a site forces you to wait at every step, it had better be porn or the equivalent. Otherwise the whole experience will be stilted.

An example.

The users want content, but you don’t know what it is yet. What you should you do?

Why not be presumptuous and GUESS? And load it in the background. Amazon makes guesses for particular users all the time…why not use the same probablistic algorithms to anticipate what users will solicit in bandwith-hogging sites?

I’ve been wireframing an online mp3 player, and pondering this trivial detail: whether to use a toggle button for play/pause, or two permanent, free-standing buttons, with only their selection state being toggled.

Considerations of space militate for the first option. Why use two buttons when one will do? And the toggling nicely encapsulate the either-or logic of the button: if the player is playing, you can pause…or it is paused, you can play.

Yet I’m resisting this conclusion. Even when I had cheap Panasonic cassette player in the early 80s, the toggle button always felt awkward.

More… »

Writing the last post (on audio help) dislodged an old memory of a TV on PBS, one where a calm man with frizzy hair painted and murmured about his process at the same time. At the end of each show, one painting was complete.

Now it strikes me that audio help might be bettered murmured than delivered clear preemptory voice. That way, the user's attention can move alternately from the spoken word, to the act of painting, to the painting itself–or take in all at once…whatever works best in the moment.

Last week I attended a projection of a Breezecast at the LA Flash factory. If you had overheard the sessions, you wouldn't have been impressed. Basically, this guy hemmed and hawed and digressed and clicked happily away as he wrote some Flex-related php code.

Strange thing is, it was the best presentation of code I'd ever seen. Both because underlying his rambling monologue was a methodical mind, and because the format was perfect: he was DOING and EXPLAINING at once.

His success got me thinking:

1) This educational technique is underused. Perhaps with the proliferation of Captivate and other screen-capture technology it might even go behind explaining program-focused curriculum (learning Photoshop). Perhaps there might be a way to create excellent videos that can be proctored (the proctor writes code or answers questions during the session). And perhaps the medium for this format would be…Flash.

2) Voice has an odd quality. It can mix with anything…music, painting, reading…it's the kind of peanut gallery that accompanies everyone's world, tracing the thoughts trying to make sense of it. So, for instance, I think voice+pics generally works better than text+pics. With voice, you don't have to GO AWAY from the thing you are learning, whether a program or a back swing or whatever (a singing lesson?).

Here is a 3d-based site, my old ad agency, that gives you verbal instruction after a nearly unforgiveable splash page.

I wish in this case that the graphics of the site itself moved more in synch with the voice (go HERE, do it LIKE THIS). As it is, voice loses its mix-in potency and becomes a kind of spoken text.

I resent Jakob Nielsen because he is always right, and that is the worst, most infuriating habit.

Take a look at his latest directive at webmonkey. Or just peruse this summary (quoted from the article) of his current complaints about web pages:

* Links that don’t change color when visited
* Breaking the back button
* Opening new browser windows
* Pop-up windows
* Design elements that look like advertisements
* Violating Web-wide conventions
* Vaporous content and empty hype
* Dense content and unscannable text

Flash designers should take these complaints especially seriously, because more than your average HTML designer, they deserve them. How often do you see Flash sites that color visited links…I mean, how hard is that? And how often is a useful back button implemented? (I’m not talking about the exotic browser-integrated “frame label” hack, I’m talking about a Flash back button that actually recalls saved states….not easy, but easier with Flash than HTML.)

So Jakob Nielsen should keep scolding. My only counter-complaint is that his complaints are too specific and HTML-oriented. I’d generalize his specific irritations: a user should be able to orient themselves, yes, God yes. That may be accomplished through back buttons and visited links…but if you have a good design, perhaps you can accomplish otherwise….and if you accomplish it very well, you don’t even have to abide strictly by “Web-wide conventions.” I mean, that’s why Flash is cool, right?

I thought about Nielsen the other day when I let my 6-year-old nephew draw using my Cintiq. I explained the presets to him ONCE and he started drawing and pressing the presets.

I wonder what will be usable for him, ten years on? I’ll bet a lot of carefully designed, Nielsen-friendly sites (meant to hang on to awkward, older users) will make him impatient–and I hope Nielsen will be around to measure this novel round of impatience.

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.

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.

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.