The History of Apple Mice in Pure CSS

http://codepen.io/joshbader/details/fKjra?preview_height=600

by ianstormtaylor • 13 years ago

115 80 13 years ago

troygoode• 13 years ago

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...

LanceH• 13 years ago

Yea, mouse ball that can't be cleaned, thanks Apple.

nwh2• 13 years ago

Soak some toilet paper in alcohol, run the mouse upside down over it, then admire the smear of black dirt that comes off the roller.

nwh2• 13 years ago

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

judk4• 13 years ago

Ah, the bad old days of launching products that demoed well instead of worked well.

pedalpete• 13 years ago

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).

leoc4• 13 years ago

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.

Samuel_Michon9• 13 years ago

Most of them are off, actually. Look at the button on the ADB II mouse.

Xixi• 13 years ago

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.

dzhiurgis2• 13 years ago

I kinda like the 360 scrolling.

rz2k• 13 years ago

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.

doomlaser• 13 years ago

Looking at them like this reminds me how terrible they are -- ergonomics isn't Apple's strong suit. Give me a cheap Logitech mouse any day of the week.

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.

gurkendoktor• 13 years ago

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.

oneeyedpigeon5• 13 years ago

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.

dzhiurgis2• 13 years ago

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.

mistercow5• 13 years ago

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.

calinet63• 13 years ago

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.

mwfunk• 13 years ago

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.

lostlogin2• 13 years ago

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.

leoc4• 13 years ago

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.

leoc4• 13 years ago

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 .

unsignedint• 13 years ago

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...)

Samuel_Michon9• 13 years ago

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

oneeyedpigeon5• 13 years ago

Do you have any evidence for those assertions?

calinet63• 13 years ago

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).

RexRollman• 13 years ago

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.

mistercow5• 13 years ago

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.

snogglethorpe• 13 years ago

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 ... ^^;

jameshart• 13 years ago

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.

mistercow5• 13 years ago

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.

judk4• 13 years ago

Remember that Apple's official brand identity was "hipster", for many years

"Think different." Not "Think Better".

badman_ting2• 13 years ago

blech

stbtrax• 13 years ago

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.

bbx• 13 years ago

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.

Samuel_Michon9• 13 years ago

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.

damon_c• 13 years ago

It's good mouse training and thus it is relevant to the content of the presentation.

(even more annoying on a tablet)

cleverjake• 13 years ago

It'd be neat to make a click state on the first few that had a button

INTPenis• 13 years ago

Attention, this Pure CSS website requires Javascript.

dingdingdang• 13 years ago

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.

itafroma• 13 years ago

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

mikeg8• 13 years ago

This was the most amazing thing I've seen on the web. Not even kidding, my mind is blown right now.

Aardwolf• 13 years ago

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.

Kiro2• 13 years ago

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.

badman_ting2• 13 years ago

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.

kaoD• 13 years ago

I see  in many mice. Is it supposed to be Apple's logo? It looks like box(F8FF) to me.

ancarda• 13 years ago

Yes, it'll show up on a Mac as Apple's logo.

http://imgur.com/GS6E3gi

threedaymonk• 13 years ago

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...

oscargrouch• 13 years ago

Did you mean: "Xerox PARC mouse" ?

The History of Apple Mice in Pure CSS

Related Stories