The History of Apple Mice in Pure CSS(codepen.io)
codepen.io
The History of Apple Mice in Pure CSS
http://codepen.io/joshbader/details/fKjra?preview_height=600
11 comments
I absolutely agree that their mice suck, but I think the Magic Trackpad is hard to beat. The keyboards aren't too bad either. The glossy screens are another ergonomics nightmare though.
With Apple's short keyboard form factor, I can have the alphabet, the "mouse" (trackpad) and the arrow keys all in comfortable reach. Feels much better than my old setup with a vertical mouse & Microsoft ergonomic keyboard.
With Apple's short keyboard form factor, I can have the alphabet, the "mouse" (trackpad) and the arrow keys all in comfortable reach. Feels much better than my old setup with a vertical mouse & Microsoft ergonomic keyboard.
All of the Apple trackpads are pretty incredible. Coming from the PC laptop world, I used to hate trackpads and thought of them as highly inferior devices. I thought the epitome of mobile mousing was the ThinkPad TrackPoint (to keep this discussion PG rated...) and I detested trackpads with a vengeance.
Turns out no one had made a good one yet. I got the first unibody MacBook Pro and started to prefer the trackpad over any mouse.
That thing is a glorious input device and incredible proof that the fine details really do matter in HCI. The difference between a standard PC trackpad and the Apple Magic Trackpad is slight, but the improvement in the experience is exponential.
Turns out no one had made a good one yet. I got the first unibody MacBook Pro and started to prefer the trackpad over any mouse.
That thing is a glorious input device and incredible proof that the fine details really do matter in HCI. The difference between a standard PC trackpad and the Apple Magic Trackpad is slight, but the improvement in the experience is exponential.
Agreed, they're my favorite keyboards and the trackpads in general (including the Magic Trackpad, which has weaned me off mice altogether) are fantastic. Mice are definitely one area where it seems like the accusations of going with form over function actually hold some water. I'm not sure why this one particular peripheral (especially one that has been so central to their products) has gotten so little love over the years.
For example, I actually loved the Mighty Mouse. However, it only takes one attempt to use the weird squeeze buttons on the sides (one on each side, and they have to be pressed simultaneously for it to do anything) to pretty clearly see that those side buttons were an ergonomic nightmare. The means of triggering a right-click were also pretty insane- you had to make sure that you weren't touching any part of the left side of the mouse when you clicked it. I get the engineering tradeoffs that required it to be implemented in this way, but it was really nonintuitive and wasn't documented anywhere as far as I could tell. Lots of people just did ctrl-click for right clicking instead of using the mouse, it was such a hassle.
The only saving grace there is that right clicking isn't nearly as fundamental to most Mac UIs as it is on other platforms. It's surprising how many people use Macs every day and don't even know that there is a right click, even though I can't imagine using OS X without it. I pretty much just ctrl-click these days when not using a trackpad or a third-party mouse.
For example, I actually loved the Mighty Mouse. However, it only takes one attempt to use the weird squeeze buttons on the sides (one on each side, and they have to be pressed simultaneously for it to do anything) to pretty clearly see that those side buttons were an ergonomic nightmare. The means of triggering a right-click were also pretty insane- you had to make sure that you weren't touching any part of the left side of the mouse when you clicked it. I get the engineering tradeoffs that required it to be implemented in this way, but it was really nonintuitive and wasn't documented anywhere as far as I could tell. Lots of people just did ctrl-click for right clicking instead of using the mouse, it was such a hassle.
The only saving grace there is that right clicking isn't nearly as fundamental to most Mac UIs as it is on other platforms. It's surprising how many people use Macs every day and don't even know that there is a right click, even though I can't imagine using OS X without it. I pretty much just ctrl-click these days when not using a trackpad or a third-party mouse.
I wish Apple would release a full-size wireless keyboard. I can't stand the smaller one with that annoying fn key and tiny cursor keys. Also, I wonder if Apple will ever cotton on to the fact that quite a lot of us use the '#' symbol from time to time.
Other than that, I love their keyboards.
Other than that, I love their keyboards.
Typing with this keyboard right now: http://matias.ca/laptoppro/mac/ Much better keyboard than Apple's own wireless thingy.
Looks good but it weighs around 2 pounds! There are lighter laptops ;-)
Glossy screens are just a matter of preference and your typical environment. There's no denying that as long as you're in a low glare setting, colors look better on a glossy screen. The question is just whether that's the kind of environment you usually work in.
Who works in a setting with neither light bulbs nor direct sunlight?
There is like one spot on my couch at the perfect time of day when my setting is low glare.
And watching movies, which I do, on a TV.
There is like one spot on my couch at the perfect time of day when my setting is low glare.
And watching movies, which I do, on a TV.
>Who works in a setting with neither light bulbs nor direct sunlight?
You can have bulbs all you like. They just need not to be in the cone in front of the screen where they will reflect distractingly. I usually use my computer while sitting on my bed. Bedside lamps don't cause problems, and there are no lights behind me, so it's fine.
In fact, I very rarely notice glare on my screen.
You can have bulbs all you like. They just need not to be in the cone in front of the screen where they will reflect distractingly. I usually use my computer while sitting on my bed. Bedside lamps don't cause problems, and there are no lights behind me, so it's fine.
In fact, I very rarely notice glare on my screen.
Radiology department checking in.
Magic Trackpad is amazing. And 'crazy gestures' actually save you so much useless mouse movements once you customise them - close tab, reopen tab, switch between tabs, refresh, previous page, next page.
Don't forget the rear USB slots on the iMac. If you have to plug in multiple times a day you go bat shit crazy. And if, heaven forbid, you tilt the screen to change the angle (in tall) the cable must be free. If someone has pushed the desk back as jammed the cable against the wall, tilting the screen pulls the power cable out. Great stuff.
Both ADB mice were pretty pleasant to use, apart from the softness of the ADB II's mouse button.
Control-click has worked as a straightforward substitute for right-click on Macs for a long time now.
Interstingly it was Microsoft that really introduced "ergonomic" mouse shapes, with the "Dove bar" mouse http://www.ideo.com/work/mouse-for-microsoft/ and then the Microsoft Mouse 2.0.
Control-click has worked as a straightforward substitute for right-click on Macs for a long time now.
Interstingly it was Microsoft that really introduced "ergonomic" mouse shapes, with the "Dove bar" mouse http://www.ideo.com/work/mouse-for-microsoft/ and then the Microsoft Mouse 2.0.
There's an image of "Carrera", the Microsoft Mouse 2.0 with an interview of (one of?) its designer(s) at http://www.affectivedesign.org/archives/151 .
The MoMA collection page http://www.moma.org/collection/object.php?object_id=3436 gives Steven T. Kaneko as the designer, actually.
Apple branded mice have had right click functionality since 2005 [1]. However, only a minority of OS X users uses a mouse, and an even smaller group uses contextual menus on a regular basis.
[1] http://en.wikipedia.org/wiki/Apple_Mighty_Mouse
[1] http://en.wikipedia.org/wiki/Apple_Mighty_Mouse
The two button ability is nice, and convenient at times.
Everyone is missing the point, though. Having 1-button as the default (as it is in OSX) forces developers to make better UI decisions. Plain and simple.
When you can hide the complicated stuff in complex right-click actions and middle-click sub-actions and various other hidden UIs, people tend to do it, because it's easy and doesn't require too much thought.
When you have to assume that the user has only the "Point" and "Click" actions, and not an ever-deepening rabbit hole of right-click, middle-click, side-click, etc. etc. then you have to think a little harder about how you design your interface. You might add things as top-level buttons, or make a more useful interface on the primary click.
You might say this leads to too much variation in the UI space, since there isn't a standard way to deal with operational complexity, but I highly disagree. It leads to UIs which are better thought out, where more of the action has to be exposed and discoverable rather than hidden. It forces developers to make some difficult decisions about the complexity itself, too, which generally leads to simpler if not just better-realized apps. Even just the fact that you have to think a little harder about your UI is enough; a second-order effect that is clearly visible in the end result and the reputation of OSX and its apps.
All of this because Steve Jobs didn't let them tack on the extra buttons. Because he kept the primary interface simple. Because he knew it wasn't just about clicking, but about the whole ecosystem of software for which the mouse API was core. It was not just a mouse, but a genesis of software UI decisions.
Think like that, and you start to understand the single button and why it's actually important. Then you still go into settings and enable right-click... because if you're reading this, you are not like the majority of users (I mean, seriously, that's day one of HCI 101).
Everyone is missing the point, though. Having 1-button as the default (as it is in OSX) forces developers to make better UI decisions. Plain and simple.
When you can hide the complicated stuff in complex right-click actions and middle-click sub-actions and various other hidden UIs, people tend to do it, because it's easy and doesn't require too much thought.
When you have to assume that the user has only the "Point" and "Click" actions, and not an ever-deepening rabbit hole of right-click, middle-click, side-click, etc. etc. then you have to think a little harder about how you design your interface. You might add things as top-level buttons, or make a more useful interface on the primary click.
You might say this leads to too much variation in the UI space, since there isn't a standard way to deal with operational complexity, but I highly disagree. It leads to UIs which are better thought out, where more of the action has to be exposed and discoverable rather than hidden. It forces developers to make some difficult decisions about the complexity itself, too, which generally leads to simpler if not just better-realized apps. Even just the fact that you have to think a little harder about your UI is enough; a second-order effect that is clearly visible in the end result and the reputation of OSX and its apps.
All of this because Steve Jobs didn't let them tack on the extra buttons. Because he kept the primary interface simple. Because he knew it wasn't just about clicking, but about the whole ecosystem of software for which the mouse API was core. It was not just a mouse, but a genesis of software UI decisions.
Think like that, and you start to understand the single button and why it's actually important. Then you still go into settings and enable right-click... because if you're reading this, you are not like the majority of users (I mean, seriously, that's day one of HCI 101).
Not all programs are designed to be used my grandmas or chimpanzees.
By this logic, why don't we all use one-button keyboards?
By this logic, why don't we all use one-button keyboards?
We do. The iPhone and iPad have a single physical button. This forces the OS to have a flexible, on-screen keyboard which changes state depending on context and utility, effectively advancing the state of text input.
On top of that, most phones now have excellent voice input, so you can skip the keyboard altogether.
All of this because we made devices without keyboards at all. Necessity is the mother of invention.
On top of that, most phones now have excellent voice input, so you can skip the keyboard altogether.
All of this because we made devices without keyboards at all. Necessity is the mother of invention.
Because it's all about trade-offs, and a one-button keyboard is a ridiculous trade-off.
Do you have any evidence for those assertions?
Sure: over 70% of Macs sold are notebooks. The only Macs that come with Apple branded mice are the iMac and Mac Pro.
http://venturebeat.com/2009/01/26/notebooks-now-make-up-over...
http://venturebeat.com/2009/01/26/notebooks-now-make-up-over...
Just because a computer doesn't come with a mouse, that doesn't mean that the user isn't using a mouse. I've got a MacBook Pro and alternate between wireless Logitech mouse and touchpad depending on what I'm up to.
I'm not saying that everyone does the same, but if you want to prove your assertion that most Mac users don't use mice, you'll need something more compelling than the fact that they don't ship with one.
I'm not saying that everyone does the same, but if you want to prove your assertion that most Mac users don't use mice, you'll need something more compelling than the fact that they don't ship with one.
Last year, Tim Cook said that 75% of all Macs sold are notebooks[1]. Not all Mac desktops come with a mouse. Of course, people can buy a mouse, be it for their desktop or notebook. Or they can buy a tablet, trackball or external trackpad.
For mouse use on the Mac to be the most used input method, over one third of Mac notebook users would have to permanently use a mouse instead of the built-in trackpad. You can go to any Starbucks, airport, or school to see that that is not the case.
[1] http://www.macworld.com/article/1167850/apple_revenue_profit...
For mouse use on the Mac to be the most used input method, over one third of Mac notebook users would have to permanently use a mouse instead of the built-in trackpad. You can go to any Starbucks, airport, or school to see that that is not the case.
[1] http://www.macworld.com/article/1167850/apple_revenue_profit...
Not sure that usage at a coffee shop or an airport is particularly useful. Like I've said, I regularly use a mouse as my primary choice over the trackpad. But if I was going out and about, I'd almost certainly not bother taking my mouse with me.
As I've said, I'm not saying that most Mac users do regularly use a mouse (although every single Mac user I've ever talked to about it at work regularly uses one). But to demonstrate whether it's true or not, laptop sales figures and anecdotal evidence based on people's habits at coffee shops isn't particularly compelling.
As I've said, I'm not saying that most Mac users do regularly use a mouse (although every single Mac user I've ever talked to about it at work regularly uses one). But to demonstrate whether it's true or not, laptop sales figures and anecdotal evidence based on people's habits at coffee shops isn't particularly compelling.
Of course, sold != in use. Another assertion, but in my experience, desktops have a much longer lifetime than laptops. I think 'most used' is a bit of a diversion, since that's almost certainly the keyboard.
Nice sampling method!
Do you have a better idea where to find a lot of Mac notebooks in one place? (Besides in Apple Stores, that is.)
It's also a good way to show that Mac users wear shoes while using Macs at all times: just visit any Starbucks, or airport or school, nobody's using Macs barefoot.
Did you happen to hear the term "selection bias" before?
Did you happen to hear the term "selection bias" before?
Do most Mac users typically use their Macs all gathered together?
[deleted]
Colour me surprised.
Of course, some of those notebook owners will also use a mouse. And I'm speaking as a Mac Mini user with an Apple branded mouse, but I guess your original point probably stands.
I wish I didn't have such a reliance on the mouse, but since transitioning from PC to Mac, one of the few persistent problems has been keyboard shortcut support. I can't tell if I've failed to learn sufficiently, or if it's just lacking, but certain applications - e.g. Finder - just seem to be impossible to navigate without a pointing device.
Of course, some of those notebook owners will also use a mouse. And I'm speaking as a Mac Mini user with an Apple branded mouse, but I guess your original point probably stands.
I wish I didn't have such a reliance on the mouse, but since transitioning from PC to Mac, one of the few persistent problems has been keyboard shortcut support. I can't tell if I've failed to learn sufficiently, or if it's just lacking, but certain applications - e.g. Finder - just seem to be impossible to navigate without a pointing device.
> certain applications - e.g. Finder - just seem to be impossible to navigate without a pointing device.
Here you go: http://i.imgur.com/uYDokqn.png
Here you go: http://i.imgur.com/uYDokqn.png
Have you installed Alfred[1]? (or Quicksilver[2]).
I find I use these (Alfred now, formerly Quicksilver) to open the right finder window first time, eliminating the need for most uses of the controls on the windows.
(also, once you install one of these you'll never need to open the /Applications directory again.)
[1] http://www.alfredapp.com/ [2] http://www.blacktree.com/
I find I use these (Alfred now, formerly Quicksilver) to open the right finder window first time, eliminating the need for most uses of the controls on the windows.
(also, once you install one of these you'll never need to open the /Applications directory again.)
[1] http://www.alfredapp.com/ [2] http://www.blacktree.com/
Arrow-keys to move around, cmd+o to open and cmd+shift+g to go to a specific directory - what else do you need?
I always suffer problems when trying to move from the left-hand pane (e.g. where drives, bookmarked locations are) to the main pane.
Most items on the Finder Sidebar have their own keyboard shortcuts and are available from the Go menu. Here’s an overview: http://imgur.com/Ho0lfrt
Here are some other solutions: http://superuser.com/questions/90378/
Here are some other solutions: http://superuser.com/questions/90378/
cmd+up takes you to the parent directory. (my most-used finder shortcut.)
What about the prove for usage of contextual menu? I'm pretty sure people use it quite regularly especially when they are browsing the web, editing text in word processor, post processing images with Photoshop or editing video in Final Cut Pro.
I for one, use it everyday to open links in a new tab. Cmd+click doesn't work on every website you know.
I for one, use it everyday to open links in a new tab. Cmd+click doesn't work on every website you know.
This is entirely my own empirical evidence (I worked tech support in a design house), but mac users seem to use keyboard shortcuts more than contextual menus. E.g. opening links in a new tab is command+click or alt+click, depending on the browser.
I've worked a lot with FCP (and other editing suites) and PS, and everyone I see, especially pros, seems to make heavy use of keyboard shortcuts and modifiers, rather than fishing around in menus.
I've worked a lot with FCP (and other editing suites) and PS, and everyone I see, especially pros, seems to make heavy use of keyboard shortcuts and modifiers, rather than fishing around in menus.
Most Mac users don’t use Photoshop or Final Cut Pro. Most Mac users are not power users. Many don’t know about browser tabs, let alone how to open new ones with keyboard shortcuts or contextual menus. Savvy users use keyboard shortcuts to copy and paste text in a word processor, not so savvy users go to the Edit menu for every action.
(I have no proof for any of this. I have watched all kinds of people use computers for 25 years, in all kinds of settings.)
(I have no proof for any of this. I have watched all kinds of people use computers for 25 years, in all kinds of settings.)
Almost everyone I know who are using Macbooks are also using Magic Mice (me and everyone at my job included).
What's funny is that I actually liked what is considered the worst Apple mouse in history: the hockey puck mouse. For some reason, I just liked it.
I liked it too, but there were two versions. The first version I think is what gave it a bad rap because it was difficult to find the front of the mouse by feel. The second version had a big divot in the button and solved that issue.
I disagree on the point of ergonomics. In terms of convenience, two buttons are nice. But the single-button pro mouse never gave me any wrist pain, which was unusual for the time.
I use a 2008 iMac at work, and there is a lot to be said for ergonomics overall... Including placement of optical drive and SD card (they are located on the right side -- and since optical drive is a trayless type, I almost inserted SD card on the optical drive other day, which would have been catastrophic as I don't think it'd be easy to take it out...) and USB port placement (it's all on the back...)
Though I don't like the one-button design, the original Mac mouse was actually really nice, it just felt really solid and responsive, much better than the Logitech optical mice of the same era (which in my experience tended to be really flimsy and temperamental).
I suppose it's sort of been all downhill since then, but Apple deserves some credit ... ^^;
I suppose it's sort of been all downhill since then, but Apple deserves some credit ... ^^;
The original mac mouse had a very heavy mouseball - it was my first mouse, and I remember switching from it to flimsy, plasticky PC mice when I first encountered them at university felt very strange - they lacked the inertia I was used to.
Remember that Apple's official brand identity was "hipster", for many years
"Think different." Not "Think Better".
"Think different." Not "Think Better".
blech
Wow, I forgot how much I disliked the original iMac hockey puck. That said, my least favorite of these (taking into account their contemporaries) is the Mighty Mouse - that little ball was awful.
Oh, and this visualization is of course very slick. I was not expecting to be as wowed by the animated transitions as I was...
Oh, and this visualization is of course very slick. I was not expecting to be as wowed by the animated transitions as I was...
The one that came after the hockey puck wasn't much better. I haven't used an Apple mouse in a long time, but I was always amazed at how a company known for design could do so poorly with the most important input device (for desktop).
Everybody hated the iMac hockey puck as you call it, but I actually quite liked it, the reason being that it was quite heavy!
I've been using a mighty mouse at work recently (after a stupid incident involving coffee...), and let me just say this: that little ball in the middle is an unmitigated disaster.
I've been using a mighty mouse at work recently (after a stupid incident involving coffee...), and let me just say this: that little ball in the middle is an unmitigated disaster.
The scrolling ball needs to be regularly cleaned by turning the mouse upside down and rolling it on a clean piece of paper.
When it is dirty it will seem like it is broken and only track in one direction.
When it is dirty it will seem like it is broken and only track in one direction.
The hockey puck mouse got a nice introduction though, check the applause Jobs gets when he shows it off — http://youtu.be/0BHPtoTctDY?t=6m25s
Ah, the bad old days of launching products that demoed well instead of worked well.
The shape of the (first-gen) ADB mouse looks a little bit off, though maybe that's just a result of the projection being used.
Most of them are off, actually. Look at the button on the ADB II mouse.
Is there a better way to navigate this page rather than clicking tiny tiny circles? I got a little frustrated after clicking 3 of them.
You're right. The problem with these little circles is that, in order to navigate, you need to horizontally move a precise amount of pixels without moving to far away vertically. It's also an issue considering this type of navigation is meant to be used rapidly, going from one circle to another. You usually end up clicking all the circles and not just one.
That's why, when I can, I tend to trigger the navigation on hover and not on click. Google does that as well. It's much less frustrating because it doesn't require to exactly stop on a circle but rather just go through it, and it helps quickly trigger all the circles in a fluid sequenced motion.
That's why, when I can, I tend to trigger the navigation on hover and not on click. Google does that as well. It's much less frustrating because it doesn't require to exactly stop on a circle but rather just go through it, and it helps quickly trigger all the circles in a fluid sequenced motion.
Or you could use links with meaningful labels instead of mystery meat tiny tiny circles. If you make the text large enough, you’ll have solved several problems at once. Also, make sure users can navigate using their arrow keys.
It's good mouse training and thus it is relevant to the content of the presentation.
(even more annoying on a tablet)
(even more annoying on a tablet)
Their mice aren't very good. And the current one in particular, the one you can do gestures on, is no exception. However, I really like the trackpad and the current keyboard. It's exactly what I want in a keyboard.
The problem with the mouse is that it's hard to do gestures on something that isn't stationary. I've always had a thing for a particular model of Microsoft Intellimouse but it's about ten years old now and getting hard to find, and mine was starting to go on the fritz. But I've been using the trackpad for about six weeks now and I really like it.
The problem with the mouse is that it's hard to do gestures on something that isn't stationary. I've always had a thing for a particular model of Microsoft Intellimouse but it's about ten years old now and getting hard to find, and mine was starting to go on the fritz. But I've been using the trackpad for about six weeks now and I really like it.
Attention, this Pure CSS website requires Javascript.
Exactly this, why the "pure" label when obviously not? The main reason for me to click through to this thing was exactly that; I love seeing people push an individual tech like CSS on its own: there's nothing tech-wise news worthy in oldschool js/css solution like this.
I don't think that level of cynicism is warranted: the individual mice are, in fact, styled via pure CSS. The small amount of JavaScript that's used is a convenience method to toggle which mouse is visible[1], and the work that was done here does not change in any substantive manner without it. If all the mice were displayed simultaneously side-by-side it'd be equally impressive.
[1]: http://codepen.io/joshbader/pen/fKjra
[1]: http://codepen.io/joshbader/pen/fKjra
> If all the mice were displayed simultaneously side-by-side it'd be equally impressive.
Then that should be what happens when javascript is disabled.
Then that should be what happens when javascript is disabled.
Why?
I'd wager most of us are happy with the concept that it's being presented on CodePen with a bit of helper JS so that the target audience (developers who are unlikely to disable JS, or are happy to enable it for a site like CodePen) can better appreciate the demo.
I'd wager most of us are happy with the concept that it's being presented on CodePen with a bit of helper JS so that the target audience (developers who are unlikely to disable JS, or are happy to enable it for a site like CodePen) can better appreciate the demo.
[deleted]
Very cool but am I the only CSS hacker who is fat, has a big Unix beard and drinks Jolt Cola? Josh Bader looks like a rockstar.
This was the most amazing thing I've seen on the web. Not even kidding, my mind is blown right now.
Why not the history of proper mice (= with 3 or more buttons). They went a long way. It could be the history all the way from that first wooden mouse, through the first scrollwheel, through the optical mice, to a modern gaming mouse.
I see in many mice. Is it supposed to be Apple's logo? It looks like box(F8FF) to me.
I see what looks like a Hebrew letter nun. It's a private use character, so there's no real guarantee about what it will look like. I'll refrain from making a sarcastic comment about the Apple-centric world-view of Apple users!
http://www.nikcub.com/posts/unicode-uf8ff-aka-the-apple-logo...
http://www.nikcub.com/posts/unicode-uf8ff-aka-the-apple-logo...
Yes, it'll show up on a Mac as Apple's logo.
http://imgur.com/GS6E3gi
http://imgur.com/GS6E3gi
[deleted]
It'd be neat to make a click state on the first few that had a button
Bizarrely, Apple's dedication to the "simple" idea of not having a second mouse button results in far more uncomfortable and unintuitive interfaces, featuring an ever increasing melange crazy gestural shortcuts.