interface design
Less is More—Interface Simplification for Vending Machines
Vending machines provide an excellent and disappointingly universal study in overly complex interfaces. This brief post reflects on how the current designs are flawed, speculates on the forces behind the bad designs, and proposes a new design that overcomes current problems though an ultra-minimal interface.
Lessons from an Etch-a-Sketch—Implications for HCI
I was in one of Roger Grice’s HCI courses here at RPI last week, and he showed us the “interface of the day,” which was an online simulation of an Etch A Sketch (Etch A Sketch is a trademark of the Ohio Art Company). His point was about the faithfulness it had to the classic Etch A Sketch experience despite being merely a flash application, but I think the original itself is more interesting.
When I have asked acquaintances to think back to when they last used an Etch A Sketch, no on yet has relayed feelings of limitation and frustration with the toy. However, most interface designers would offer a list of violated principles of usability were they shown the design of an Etch A Sketch without having ever seen it before.
The controls are unintuitive; each knob controls an independent axis of movement, but why should the rotation of one move the drawing point up while an identical manipulation of the other moves it right? Even after convincing oneself that the knobs’ respective domains of motion correspond to a particular pair of rotations, the system seems to fight every attempt at controlled, planned movement. Diagonals necessitate careful consideration before starting lest an all-too-easy direction error send the little line veering off in the wrong direction, and curves? Rare indeed are those who can draw so much as a circle, let alone handle the subtlety of anything harder. Practice with an Etch A Sketch seems to yield meager advance in skill at best, despite hours hunched over that little red-framed gray canvas. As a consequence, “art” made on the Etch a Sketch is invariably of amateurish—almost infantile—quality. Yet, it has enjoyed wild popularity and still entertains countless consumers every year. How can an interface so obviously and pervasively flawed accomplish this feat?
Improved Error Dialog Box
Error dialogs seem to rarely best their progenitors from decades ago. In fact, often the modern counterparts are worse—either they offer misleading oversimplifications or they are little more than graphical wrappers for some obscure error code optionally coupled with some half-baked developers’ notes. Obviously, redesigning error dialogs won’t automatically fix this problem, but other oversights couple therewith to plague the user experience with something goes awry.
Lumiera Timeline First Draft
I’ve pulled together some drafts of my ideas for the design of the timeline portion of the Lumiera non-linear video editor (hopefully, the successor to Cinelerra).
The annotated version (explaining some of the finer points):
The un-annotated version (to show the sketch better):
Search Done Right—A *Progressive* Progressive Find
Edit: I’ve updated this intro after discovering that I somehow replaced it with some unrevised notes from my initial outline. Oops.
I was reading an argument that progressive find is the best (and only proper) search design, I think in the comments of this article. I got to thinking about what makes progressive, and occasionally modal, search optimal for certain tasks. Each has distinct advantages. Progressive find is rapid, it provides instant indication of most typos, it completes upon minimum unique string, and it can show near matches on failure (specifically, longest common initial sequence).
Modal find, however, is less disorienting, and a failed search doesn’t leave user in at some random location within the document.
I’ve noticed other issues, too. In a misguided attempt to minimize disorienting motion, most software scrolls text only exactly far enough to expose the next match for the search term. This means that except when it is already visible, exactly half the context of the search term–either everything above or everything below—ends up hidden by the edge of the viewport. Additionally, many programs depend on awkward non-central keyboard keys for searching, including the totally arbitrary F3 key. This is a pain for anyone using a laptop with shrunk-and-shifted function keys, a Datahand, or a Happy Hacker (I currently use two of those three).
With all of this in mind, I thought of what sort of search design would marry all the advantages of both designs as well as fixing my big annoyances (half-context results).
The only two interface designs ever conceived:
Let’s see who can guess the two designs I’m referring to. Here’s a hint: they’re more psychological than technical—and if you say anything involving the words “GUI,” “CLI,” “mouse,” or “wizard,” you’re way off track.
The two designs are (drum roll)…
The misused mouse, part 2: A proposal for a nearly mouseless interface.
Since I said the mouse needed to be seriously re-examined as the primary device for interacting with the user-interface (see my previous entry), it’s only fair that I give an example of a better way to do it. In this entry I explore one possible way to minimally change the interface to almost remove the mouse entirely, without increasing the difficulty of learning how to use software.
The misused mouse, part 1: The story of the mouse’s decline
Now, I am by no means hoping to abolish the mouse. Its price to performance ratio is unmatched, and the best alternative pointing device (the tablet) can’t be found for much less than an order of magnitude greater expense: hard to justify for the relatively small performance edge it offers. What I do wish to decry is the enormous reliance on the mouse to cover every possible user interface situation, failing to take advantage of other, better designs. Years of lazy design and low opinions of the user’s desire (even ability) to learn have left us with a constant testing of Fitts’ Law for such trivial tasks as saving, broken paradigms (what about a real-world button relates to replacing an old document irrevocably with the current one?), and a user experience that is more patronizing than productive.
Throw out that mouse—you upgraded to a keyboard!
Celebrating the release of Openbox 3.4, I’ve published my mouseless window management design. Of course, if you use firefox, OO.o, or the like, you’ll have to reach for the rat–that’s not my fault, though. :-D
(For those of you reading backward in time from my more recent entries calling for a more keyboard-centric user-interface, this is only one of numerous possible ways to manage window size/placement without a mouse, and not a particularly good one. It’s just what I’ve been using for a while and have gotten used to. Most problematically, it requires significant training to use.)
Fitts’ law vs. mice, tablets, & trackballs
While Fitts’ Law has been studied extensively with mice, I recently came across an interesting whitepaper comparing mice, trackballs, and (my weapon of choice) tablets.
About the New Interface Advocate
Recent Entries
- Revised and Expanded RegEx Reference Chart (v2.0)
- New Blog Design
- Less is More—Interface Simplification for Vending Machines
- Lessons from an Etch-a-Sketch—Implications for HCI
- Improved Error Dialog Box
- Lumiera Timeline First Draft
- C* Music Player Audioscrobbler/Last.fm patch
- Everybody Loves Regular Expressions!
- Search Done Right—A *Progressive* Progressive Find
- Handy scripts!
- The only two interface designs ever conceived:
- The misused mouse, part 2: A proposal for a nearly mouseless interface.
- The misused mouse, part 1: The story of the mouse’s decline
- Throw out that mouse—you upgraded to a keyboard!
- Fitts’ law vs. mice, tablets, & trackballs