Flickr's Breakthrough

thu31aug2006—35w243d66%— 04h36m00s—0utc

2 days ago I had a major breakthrough in Domburi‘s interface. I had been racking my brain for several days for a simple, elegant way to provide all the new functionality I had dreamt for it, but the standards I’d set made the task daunting:

Simple and easy to understand

Instructive Interaction: Making Innovative Interfaces Self-Teaching, by Larry L. Constantine and Lucy A. D. Lockwood was very useful in crystallizing my ideas on the subject.

Building (or at least not interfering) upon earlier knowledge

We’ve been using (web) GUIs for decades now, patterns have emerged. To waste them a silly thing would be. Right-click contextual menu, buttons, selection methods, drag & drop, and general link behavior (from one-click-activation to middle clicking on a link to open it in a new tab) are useful patterns we learn early and should be respected.

Consistency

I wanted to have the same interface for thumbnails and full-size images, just like Imagery works now (with almost the same toolbar for both cases).

Minimally intrusive ((as in hidden)

I’m obsessive with claiming the precious few screen real state I’m able to and profoundly detest what Edward Tufte once called “administrative debris.” The goal is to see at a glance as many images (and nothing more!) as it is usefully possible.

Even onhover interfaces must be extremely discreet, not only for conceptual clarity, but because rendering times can make for a jarring experience.

Visual

On the other hand, even if keyboard shortcuts and other tricks & gimmicks are more efficient, I believe it’s crucial for users to be able to get a visual overview of their options.

Modeless

Modes ^WP can be useful and uncannily efficient — I love Vim — but they take a huge cognitive load to understand and use, and many, many hours of practice for them to become second-nature. They’re prone to frustrating mode errors ^WP too.

Textual

Text is always a good thing, text and icons can sometimes be an improvement, but icons alone I usually find confusing and useful only for the most trivial of cases. The big problem with text of course is all the space it demands.

I dabbled for a while with tool palettes like those of Adobe Photoshop but in the end sweared off modes of any kind, even graphic ones.

I tried expanding the weird text-toolbar I currently use in Imagery but it proved too constraining.

Jensen Haris’s Office User Interface Blog sent me reeling into the possibilities of ribbons and contextual tabs (GUI innovations in upcoming Office 2007), but though interesting and definitely appropriate sometimes, they can be brutal overkill for such a simple application as Domburi.

In the end, it was clear to me that what was needed was a contextual menu of some sort and a way to activate it graphically (since I wasn’t willing to break the right-click, and other keyboard/mouse combos reeked of inelegance).

I finally found my solution in a little known interface innovation from Flickr (who introduced it only recently in a May 16, 2006 redesign).

They call it a “person menu” but it’s not the menu itself what interests me, it’s the way it’s activated: you hover over someone’s (otherwise undefiled!) buddy image and this obvious sidebutton appears; you click on it and your options to manipulate the image are presented.

This is a natural evolution of the pulldown button (), of course, but it allows for a revolutionary array of possibilities. I’ve been playing with the idea for 2 days now and am ready to nominate the onhover sidebutton as one of this decade’s contributions to our shared GUI alphabet: a visual, yet non intrusive, way to activate a context-menu. I’m using it everywhere in Domburi now (the idiom is evolving some impressive refinements!) and it has simplified things further than I thought possible. In the prophetic words of Jeff Han: “the interface just disappears.”

Exciting times!