Good idea, but, sorry, don't like 'em. Neither the execution nor the conceptualization.
The execution is too detailed. Details, regardless of how pixel-perfect they are, do blur upon quick glance, and the more details there are, the more it looks like a gray blob. The execution is also inconsistent - why the book is 3D, but the rest is flat? Except for the coffee mug that is neither.
The conceptualization is off too. The fact that they need to explain an icon is a red flag. Why book? They answer that with 5 lines of text. Why wrench and a screwdriver, when a gear is a visually simpler icon that is widely understood? Why the Logout arrow implies that someone walks in through the door? Why is the letter A transmitting, when it's actually about receiving?
So not to sound like a complete ass, here's what I would've used instead - a gear for preferences, a "power off/on" symbol for logout, a simple blank page with a plus sign for "new", some sort of inbox or even an envelope for "notifications". Just keep it simple and don't overthink.
Completely agreed. The icons are not only excessively detailed for their small size, but also sit rather awkwardly in relation to the rounded-rectangle container. The top right corner of every Github page now looks like the notification area of an old Linux desktop with an amateur-designed theme.
Every minor redesign Github has released over the last couple of years increasingly reek of "designed by programmers". But Github deserves better than that. Please get real designers.
I could tell what buttons did simply from the text (and they were useful) e.g 'unwatch', 'your fork' etc. Now there's more space taken up with the text and the icon.
The icons don't seem to provide additional info in any way. Perhaps that's because Github would like to switch from text to icons eventually (with text+icons in the interim)? I hope not, as it would mean way too many things for people (esp novices) to get their heads around.
I'm still pissed that Gmail's icon redesign wastes tons of space and is only marginally better when I put it in compact mode. I'm on a 14" laptop here, not all of us are carrying around 22" monitors in our pockets!
Just off the top of my head, stacking row upon row of toolbars and metadata on top of every repository, so the first real file is actually 500px down the page. Also, excessive use of icons where text labels would be much clearer, as other commenters have said.
There were several posts on HN over the last couple of years where people complained about these and other issues.
I think people on HN complain way too much about Github's design. Sure you can nitpick this stuff, but Github has always had above-average design. Your comment about design-by-programmer is not really warranted in the context of the monstrosities that the term originally applied to. If you want to hold Github to a higher standard because they have such a great product then fine, but there's no need to be so disparaging.
Github's design is not and has never been terrible. And furthermore, hiring a "real designer" will not solve the problem because the core issue is that Github is a complex product; throwing a designer in there who doesn't understand the nuances of how git is used in the wild is not going to help. There are many different audiences and many different conflicting problems to be solved. The reason there's so much meta information stacked at the top is because the meta information is more commonly used then the file contents in most cases. I agree it's not the most intuitive, but on the other hand there's not an obviously primary role for this page and things are reasonably well organized and delineated based on purpose. I've used almost every single link there and there's not much that doesn't deserve to be front and center.
As for the icon redesign, they are trying to establish a visual language so that the masses of information they are publishing are more readily digestible. This is not something that happens overnight, instead you have to use the icons for a while before they sink and start to pay dividends. I'm not saying Github is successful, but I think people on HN and indeed the Internet in general are way to quick to criticize redesigns based on first impressions.
Also, excessive use of icons where text labels would be much clearer, as other commenters have said.
As a non-designer, I always use text labels in my applications because I can't make good graphics/icons, but it always seems like the applications lack polish because of it. I guess there is a happy medium to be found between no icons and the strict only-ambiguous-icons like Google switched to with Android 4 and their recent web property redesigns.
I have to upvote this unfortunately. I visited the Github site this morning for the first time in a while, and encountered the new icons. The new book, notifications, and door icons were not immediately obvious to me and I had to hover over to see what they were. I guessed what the wrench represented, but due to the uncertainty caused by the other icons, I had to double check what it was for as well. I actually didn't even realize that the icon with a "+" on it was a book.
>So not to sound like a complete ass, here's what I would've used instead - a gear for preferences, a "power off/on" symbol for logout, a simple blank page with a plus sign for "new", some sort of inbox or even an envelope for "notifications". Just keep it simple and don't overthink
Great point, especially about using + for new. They don't need to abstract the concept of a repository, they just need to abstract the concept of the Create/New action.
Their users will of course know it means to create a new repository, rather than a MS Word Document, email, sandwich, or whatever, simply based on context.
They've gotten into their heads that they need to create a new design language for version control concepts. And perhaps that's true for the Fork and Merge buttons, which are actions unique to version control, but not for everything. Create, Logoff, Notifications, etc. are not unique to version control at all. Just reuse what everyone is familiar with for those.
It's unfortunate, because from a technical and aesthetic standpoint, these icons are mostly rock solid, and they deserve some praise for that.
But from a human/usability standpoint (what actually matters), I agree that they are indeed a failure. Let's hope they're ready to use that technical prowess to iterate.
But from a human/usability standpoint (what actually matters), I agree that they are indeed a failure.
From a human/usability standpoint, most icons used in user interfaces are failures.
Not sure you believe me? Quick! Name five icons you often use in a piece of software you use regularly: your browser, IDE, spreadsheet, graphics package, whatever.
Now name five more.
If you’re like most people, you probably came up with the first five easily enough. Back, refresh, stop, home, forward. Save, print, bold, cut, paste. But by the time you were getting toward ten, were you starting to struggle?
Now consider that many of these applications line up rows of 10, 20, or even more icons, which all look rather non-descript and blurry at typical sizes anyway. Some applications have several such rows, some at different sizes, some horizontal, some vertical. That’s an awful lot of screen space for something that most users won’t use, at least not without doing the mouse-hover-tooltip-no-it’s-not-that-one-maybe-it’s-the-one-over-there thing.
Oh, and here’s the kicker: of the icons that do get widely used, only a tiny number are truly iconic pictures that are recognisable! A lot are just an arbitrary marker in a predictable position, and it’s that context that the user recognises.
The strength of icons lies in recognition, not recollection, so your experiment doesn't prove anything. Essentially, I have no idea off the top of my head what the <arcane image processing tool> icon looks like in Photoshop, but put me in front of an open Photoshop and I'll recognize it in a split second.
A lot of this has to do with placement, yes, but I'm sure even without that, you can scan a mass of icons much more easily than a mass of text.
My comments aren’t based on a quick thought experiment alone. There’s a substantial body of empirical data showing that icons aren’t always as good a UI choice as their popularity might suggest. For example, see:
I dunno. They look fine to me. The book will take a bit of getting used to (what icon would better represent a repository anyway?). The rest just sounds like nit-picking.
No, they haven't. GitHub only recently changed their top toolbar layout to include those icons, and today expanded them with even more indistinguishable-at-a-glance ones.
Agreed. I use 16px icons in my projects. Comparing these icons to the Glyphicons I'm using currently, the glyphicons are vastly more clear, especially at the smaller size.
Sorry, but I don't think they're giving you free icons to use for your website.
The article says Octicons are "a custom icon font for use on GitHub.com and GitHub products". In their companion Making Of post, they answer a question about licensing [1] by saying "The font is for GitHub use only." [2].
The execution is too detailed. Details, regardless of how pixel-perfect they are, do blur upon quick glance, and the more details there are, the more it looks like a gray blob. The execution is also inconsistent - why the book is 3D, but the rest is flat? Except for the coffee mug that is neither.
The conceptualization is off too. The fact that they need to explain an icon is a red flag. Why book? They answer that with 5 lines of text. Why wrench and a screwdriver, when a gear is a visually simpler icon that is widely understood? Why the Logout arrow implies that someone walks in through the door? Why is the letter A transmitting, when it's actually about receiving?
So not to sound like a complete ass, here's what I would've used instead - a gear for preferences, a "power off/on" symbol for logout, a simple blank page with a plus sign for "new", some sort of inbox or even an envelope for "notifications". Just keep it simple and don't overthink.