6 ms·

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

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.

pirateking 15y ago
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.
jonursenbach 15y ago
FWIW, the icons you have problems with have always been in use on Github.
- Pewpewarrows 15y ago
  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.
southpolesteve 15y ago
The technical implementation is interesting, but from a usability perspective, I found these icons to be pretty terrible
AznHisoka 15y ago
I don't like em either, but they're giving me free icons I can use for my website, so I'm all good!
- SkyMarshal 15y ago
  Does it matter if they're free if you don't like them?
- daxelrod 15y ago
  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]. [1]: https://github.com/blog/1135-the-making-of-octicons#comment-19570 https://github.com/blog/1135-the-making-of-octicons#comment-... [2]: https://github.com/blog/1135-the-making-of-octicons#comment-19573 https://github.com/blog/1135-the-making-of-octicons#comment-...
kijin 15y ago
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.
- amirmc 15y ago
  The redundancy is a little irritating. 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.
  - kijin 15y ago
    > Perhaps that's because Github would like to switch from text to icons eventually? Like Gmail's new icon-only interface? I hope not! It's difficult enough for people to figure out what Gmail's icons represent.
    - Sevein 15y ago
      Well, the differences between them are quiet significant! Gmail's icon are too horsey.
    - steve-howard 15y ago
      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!
    - regularjack 15y ago
vailripper 15y ago
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.
exogen 15y ago
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.
- Chris_Newton 15y ago
  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.
  - aGHz 15y ago
    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.
    - Chris_Newton 15y ago
SkyMarshal 15y ago
>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.
kstenerud 15y ago
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.

pirateking 15y ago

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.

jonursenbach 15y ago

FWIW, the icons you have problems with have always been in use on Github.

Pewpewarrows 15y ago
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.

southpolesteve 15y ago

The technical implementation is interesting, but from a usability perspective, I found these icons to be pretty terrible

AznHisoka 15y ago

I don't like em either, but they're giving me free icons I can use for my website, so I'm all good!

SkyMarshal 15y ago
Does it matter if they're free if you don't like them?
daxelrod 15y ago
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]. [1]: https://github.com/blog/1135-the-making-of-octicons#comment-19570 https://github.com/blog/1135-the-making-of-octicons#comment-... [2]: https://github.com/blog/1135-the-making-of-octicons#comment-19573 https://github.com/blog/1135-the-making-of-octicons#comment-...

kijin 15y ago

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.

amirmc 15y ago
The redundancy is a little irritating. 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.
- kijin 15y ago
  > Perhaps that's because Github would like to switch from text to icons eventually? Like Gmail's new icon-only interface? I hope not! It's difficult enough for people to figure out what Gmail's icons represent.
  - Sevein 15y ago
    Well, the differences between them are quiet significant! Gmail's icon are too horsey.
  - steve-howard 15y ago
    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!
  - regularjack 15y ago

vailripper 15y ago

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.

exogen 15y ago

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.

Chris_Newton 15y ago
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.
- aGHz 15y ago
  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.
  - Chris_Newton 15y ago

SkyMarshal 15y ago

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

kstenerud 15y ago

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.