Today, Apple did something ironic. It introduced the Magic Mouse, a mouse that integrates the usual motion of the mouse with a trackpad and multi-touch capability.
To understand the irony we have to go way back through the annals of user interface history, a history that is unkind to Apple’s repeated efforts at improving the mouse.
In the early days of GUI computing, it was common for mice to have three or buttons. The problem was there was no standardization for what each button should do. As a result, various apps used different buttons for the same basic operations.
Sun's 3-button mouse, circa 1987
I remember programming on a Sun workstation that had one of these three buttons mice. It was extremely difficult to master the basic tasks of clicking, dragging, selecting and opening. One app would train your fingers to do it one way, and another app would train them in a different direction.
Apple’s 1984 Macintosh (and the Lisa before it) avoided this confusion by limiting the mouse to just one button. Users never clicked the wrong button because there was no other button to click. Click to select. Click and drag to move something. To open an icon on the desktop, use issue a bit of Morse code, and double-click it. Dot dot.
1984 Apple Macintosh Mouse
In the early 90s, Microsoft and Apple one better. They reintroduced a second mouse button. But this time they avoided the foibles its predecessors by establishing a rock-solid standard for what the second button would do. The button would invoke a context menu on the clicked object and never anything else.
It was a welcome innovation in the progression of object-oriented UI’s that we now take for granted. You could now right-click on any object to pull up a tailored list of actions that can be done on just that object. It was a lot faster than hunting through all the menus for items commands that became available by the existence of the selection. And it brought the most used tasks to the forefront, right under the cursor.
A 2-button Mouse by Microsoft (there was a plainer white mouse that came before this model, but I couldn't find an image of it)
[The unsung hero who pushed this standard through deserves a place in the User Experience Hall of Fame. Anyone know the responsible party?]
Apple resisted this convention. Actually, different parts of Apple reacted differently. The industrial design part of Apple resisted it, never dedicating a button to context menus. But the OS software side supported the PC convention. Right-clicking worked on the Mac with third party USB mice since before the dawn of Mac OS X. It was a quirky position for Apple to take: it’s okay to have a mouse with two buttons, as long as it doesn’t have an Apple logo on it.
Apple’s hack for giving access to in-place menus was to have the user hold down the Control key and click menu. It’s always been pretty clumsy for such a common task.
Even more clumsy was the little gear sprocket button that showed up in the button bar area, introduced a few years ago. This gave the hitherto invisible context menu a visible affordance, which sounds good in theory. In practice I don’t know if people use it much. And unlike in-place menus, it’s dissociated with the object it relates to.
Apple's context menu sprocket button
Innovation in mice continued its march forward without Apple. Around 1997, in the early days of the Worldwide Web, Microsoft introduced the scroll wheel between the two buttons. You could now scroll a web browser or a word processing document without having to mouse over to the little scroll bar widget. You could keep your gaze on the article you were reading and scroll the page almost telekinetically. We’d never had to scroll so much before the web was invented, and the scroll wheel was a welcome advancement.
Microsoft mouse with scroll wheel
The right mouse button and the scroll wheel are so critical to basic productivity that any serious Mac user simply needed to buy a third-party mouse. Buying a Mac? Buy a functional third party mouse to go with it.
In the late 90′s an apparent error in Apple’s lab led to the inadvertent release of a mutant puck mouse, which must have scampered through a door left ajar. The puck mouse was perfectly round. So round that you couldn’t feel which way was up. It was very common for it to be at a slight angle when you moved it, causing the cursor to go careening off in a diagonal direction. Luckily for the puck mouse, it had a cord, so defenestration was hard to achieve.
Apple's painfully symmetric puck mouse
(Later models added a little indent so you could feel which was was up.)
So Apple stuck to its guns, suffering from its ongoing affliction of button-phobia. Form continued to triumph over function. True simplicity lost out to the appearance of simplicity (as it does on the iPhone).
I suppose a second mouse button would mean that they surrendered. Or that they were desecrating the clean lines of their laptops or and mice with another button. Never mind that brining up a context menu is such a frequent operations. (And please put out of your mind the fact that the keyboard already has about 76 other buttons for typing.) That second mouse button would kill. We’re trying to think different(ly) around here, people! (See also: Apple’s Revolutionary Laptop With No Keyboard)
Apple continued its buttonphobic ways. They even went backwards, to no visible buttons. Instead of clicking a button with your finger, you apply pressure to the top part of the housing and the whole thing rocked forward as a click.
Apple's zero button mouse
Beautiful, right? And that clear outer shell never got scratched up, because it was always kept in a desk drawer. It didn’t help that the USB cable on this mouse was only long enough to reach the port on the (also functionally challenged but also transparent) keyboard. It would not reach the USB port on the back of the noisy G4 tower under the desk. Oh, yeah, and the (transparent) wire frayed easily. Anyone with actual work to do put the mouse away and desecrated Apple’s sculpture by using a functional, ergonomic, ugly Logitech mouse.
Then came Apple’s Mighty Mouse. It too used the whole housing as one physical button switch. It had a touch sensitive area under the fingertips, and you could bring up context menus by clicking on the right side with your middle finger. If, that is, you dug into preferences and activated the feature. That’s right, at this point right-clicking is still not acknowledged as a mainstream thing.
There was just one catch: the touch panel would only register a right-click if you lifted your left (index) finger off the left area of the mouse. Without knowing this critical piece of information, and practicing it enough to be automatic, right clicking was haphazard. This was fatally unintuitive and aggravating.
Apple's Mighty Mouse
The Mighty Mouse was and is also loathed for its miniscule built-in trackball. This innovation was supposed to allow for scrolling in all directions, but would jam up with dirt after a few weeks’ use. Later Mighty Mice were cordless, so there was no saving the poor things from windows left open.
Which brings us to today, Tuesday October 20, 2009.
Apple has been adding gestures on its laptop trackpads for the last few years. Those gestures were nice refinements, but not earth-shattering. And they only worked when you were actually using the trackpad. At a desk, if you use an external mouse, the trackpad and its fancy gestures are irrelevant. On this date, Apple introduced the Magic Mouse, with, lo-and-behold, a trackpad built in. You can still drag it around like a regular mouse, but you can also twiddle your fingers on it to do other tasks.
Apple's Magic Mouse, 2009
And here we finally arrive at the irony. 25 years after the 1984 Macintosh mouse – belligerently endowed with just one button for the ostensible sake of simplicity — we have a sleek little wireless mouse that lets you not only click, not only right-click, but also scroll, pan, zoom, and swipe using invisible gestures.
Simple, right? :-)
But is it crazy enough to work?
I’m curious about how usable this integrated touchpad/button is going to be. The video certainly looks compelling. Did they solve the Mighty Mouse’s right-click problem? Will all these gestures be inadvertently triggered during regular clicking and dragging?
If it licks these problems, Apple will have, finally, trapped a better mouse.
[Update 10/22/09: Alas: "Right clicking requires a lifting of the left click finger, just like the Mighty Mouse". Oh well.]
Requisite idea to steal
Why is it that web apps don’t get to use right-click events? This goes both for AJAX-style apps such as Google Wave, and Flash and Adobe Air web apps. That’s right, you cannot right click on an object to bring up its properties. This a serious productivity limitation for SaaS apps, which are striving to catch up to the evolved usability of desktop apps. [11/17/09 Update - I'm wrong wrong wrong. Per the comments below, it is possible for AJAX and Flash/Air apps to tailor the context menu. It's just that many apps just fail to do so.]
And here is an older idea to steal a different way to pan and scroll without resorting to gestures: make use of an accelerometer.
See also
—–
Philip Haine has been using Macs continuously since the original 128k model in 1984, for the most part as a fan boi. He is founder and principal of Product Vision Associates, an innovation consultancy that helps product leaders and their teams envision and build products that are even better than Apple’s mice. He also writes the Product Vision Blog. To follow him on Twitter click here.
As for the contextual click in web apps, this is actually possible in all major browsers now days. When you right click on a webpage, your browser fires off a ‘contextmenu’ event, in addition to the standard mousedown/mouseup events, and if you hook in to the contextmenu event and “cancel” it, the browser won’t display it’s own menu, and wont steal context. There are two main problems with this:
• Webapps can’t make arbitrary chromeless windows, so the context menus they can create are always a part of the page, which means if you context-click near the edge of the window, often the menu revealed is actually clipped by the edge of the viewport, and inaccessible. It’s an implementation suckage really, but to fix it in a satisfying way nearly requires the use of a significantly different UI for the menu’s in order to indicate what they’re in relation to, without always having their corner aligned with it. A little arrow edge could do the trick there though!
• Anyone using a browser that’s a bit old won’t fire the event, so to support those users, the functionality needs to be duplicated in left-clickable UI anyway, which is why most web developers don’t bother.
There are some apps which support context clicking though if you’d like to see it in action. I often context-click in the web-ui for the Transmission bit-torrent client, and in the dropbox.com file browser interface. I think as we see the rise of rich web UI toolkits like Cappuccino, this UI metaphor will be refined for the web and become much more common place in things with the appearance of a ‘web app’.
Thanks for the info!
I was surprised when I encountered it in Google Wave the other day.
So now my next question is: why is it not used more prominently in web apps?
And what about Flash. I don’t think I’ve seen a Flash app override the useless Flash plugin menu that appears on right click.
Anyone know?
Philip
Flash doesn’t let the author entirely override that menu, but some applications do add extra items to the menu (in addition to the about flash, flash settings and the likes). You can see that on Youtube if you context click the video player, it’ll provide you a few options to copy embed code and the likes.
The reason context menus aren’t more prominent in webapps, so far as I can tell, is mainly one of expectation. You yourself just admitted only recently discovering a context menu in Wave. If an author is to put any important stuff in to a menu like that, they’ll either need to explain to every user how to use it, or duplicate the functions in left-clickable on screen objects. It’s a matter of user expectation, which is the same reason drag-and-drop based UI’s are having a hard time taking off on the web. There’s also the problem of it silently not working in older browsers, ones the author may be required to support. If you were running a commercial webapp would you really want the support burden of having several ways to do the same thing, some of which only work in recent browsers and silently don’t work at all in others?
Thanks for the info, Jenna –
I only discovered a context menu in Wave because I only just started using it.
Thanks for setting me straight. There are context menus in Google Spreadsheets also.
I think the expectations argument goes the other way. It’s common and expected on the Mac and Windows, which is why it’s annoying when it’s not there in SaaS apps.
I LOL reading this article. I totally agree with you. “True simplicity lost out to the appearance of simplicity”. Many simple and straightforward UI things that can be done in Windows, cannot be done in Mac. One example, resize on the edge of a window.
To avoid confusion of having more than one button to click, they keep it to only one button. This reason is acceptable at some point. But then they created a zero button mice
it’s very funny and silly because then (the beginner) people will be confused if they are asked to click the mouse button, “Which button? I don’t see any button”.
And then they support the area for right click, with no visible cue. This also can be confusing.
“Please click”. (And since it doesn’t seems to have more than one button, people will not be confused of which button/area to click, right? wrong!).
“OK, I clicked it, but nothing happened, only a small pop up menu appears”.
“Oh, no, you clicked it wrong, please click on the left area of the mouse, not on the right side of the mouse”.
“I didn’t know that, could I have different response if I click on the top side or bottom side?”.
Which could have been easier if from the beginning we have two buttons and we said “Click the left button”.
I like the Magic Mouse though, it is very easy to scroll (especially with momentum), and I hate Mighty Mouse, as it jammed a lot (I rather use third party mouse). If I have to improve the Magic mouse, I would give some visible marker (with different shape or color) underneath that shiny surface to show which one is left side and which one is right side. So I can say “click the left side” or “click on the
rectangle shape” or “click on the blue area”.
Idea to steal.