Pet Theory

When I was a kid, my older brother taught me a few blues chord progressions on the guitar so he could solo soulfully over me. I accepted this division of labor because my deficient sense of rhythm and pitch was immediately, painfully obvious.

I remembered this last week when I hooked up a USB keyboard to my computer and fired up GarageBand, because all of a sudden I had unexpected musical hope.

For me, the program’s killer feature is a graphic view of the notes (each note is an elongated rectangle). When I hit a key, I can really see the note–how high it is, how long I hold it, how it compares to other notes. So far, this goes a decent way towards overcoming my handicaps.

I’m surprised, because what had seemed necessary (my dorky-white-guy fingers pouring out music), seems dramatically less so, because I’ve found an alternate, more visual route to the sound.

I can strike notes, listen with my feelings, adjust the notes (users can change their duration and frequency by dragging them), then start the process over again. Since I just want to compose custom music and sounds for Flash files, that I’ll never perform from a park bench doesn’t bother me.

Think, act, see result, think, act, see result. Etc. A feedback loop is common enough (play, work, learning, interfaces, life) but my little adventure this week definitely brings home the idea that technology keeps changing the prerequisites for entering particular loops.

My soloing older brother is a case in point. He was never good at basic math. So what did he become? A sickeningly rich accountant. Apparently, whatever he does (he’s explained it, but I can’t comprehend), it now requires a different kind of quarter to get the pinball machine lit up and ready to go.

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?

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.