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.
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.
It was actually useful to have a very obvious indicator that your repo was private and nobody else could see it.
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.
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.
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 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-...
[2]: https://github.com/blog/1135-the-making-of-octicons#comment-...
This seems like the wrong approach - shouldn't characters have semantic meaning? It also doesn't seem accessible. Screen readers wouldn't know what to do with these invented characters. <img> tags at least have the alt attribute.
<span class="mini-icon notifications"><span>Notifications</span></span>
.mini-icon.create:before {
content: "\f030";
}
.mini-icon span {
display: none;
}
Hopefully the 'create' one uses f003, which apparently lies in PRIVATE_USE_AREA [0]
.mini-icon.create::before {
content: "\f003";
}
This fad is supremely annoying.
And <a> tags have the title attribute.
Does any screen reader actually read the value of a title attribute on a link containing text? I doubt it. Instead it would descend into the <a> tag and try to read the text therein.
In a perfect world you'd be right, or perhaps even in a world where IE hadn't held the entire Internet back 10 years.
I'll give it a try in a few days, but just a question: what happens if www.codeshelver.com dies tomorrow (assuming they save shelved repos on their server) or their Safari extension be buggy and it removes/corrupts all my precious repos (assuming it's the extension that saves the repos)? Will I lose everything?
https://chrome.google.com/webstore/detail/dbjampjhnhcfjgcapn...
For an example of when it's appropriate to use a custom font for an icon, I use a custom font for U+1F50D Left-Pointing Magnifying Glass in the search button on my website. Github uses U+F22E [INVALID] instead for their search icon.
SVG is a terrible technology with absolutely no support for scaling to small sizes (no hinting).
That being said, since it seems like you're incorporating these metaphors into other parts of the site--like I notice the book icon by the repo name now--maybe the metaphors will eventually stick. But in the meanwhile it has been a little confusing.
Hmm. Icons aren't like underwear in needing to be changed regularly.
Further, I'm not immediately able to interpret many of the visuals. E.g. With some hovering effort, I see that right arrow away from a book supposed to stand for "Log Out" and, oh, it's an open door, not an open book. Not sure if these were meant to be shared (license?) but those so interested should be sure to checkout Font Awesome too.
I do love GitHub. New icons? Meh.
Edit: I could be nuts, but they are printing in slightly different colors now, whereas just an hour ago they were all gray. Somebody at github just made my day.
Also, the entire design has terrible contrast. It's just dark on dark on dark. And every color has been stripped out.
Ugh.
http://en.wikipedia.org/wiki/Svg#Support_for_SVG_in_web_brow...
I like thinking up icons just like any advanced UI/UX guy, but rule number #1: if there's a standard you use it. Even if that means using something as archaic as floppy disk for Save.
But that's just me doing my best to read the side of the pencil in the photo, but it looks like the one!
I don't know things work at GitHub, but our ideas are scrawled on random papers, whiteboards, and windows. We also never seem to have a perfectly posed pencil anywhere in sight.
Either way, I still love GitHub!
However, I generally favor text options: if there was a no-icon option I'd probably choose that over icons.
My nits:
Advanced search looks like a settings icon, though.
Admin-tools doesn't seem to relate. (A 60s rocket ship? huh?)
Notification looks like an A with some sound at small resolution instead of the radio tower.
However I don't care about the icons so much, what I want is:
- better notifications / activity stream
- like button
- improved diff (highlight only the changes inline if a line changed slightly)
"Some would say that a repository is storage — a place where you store your code — somewhat like a box."
So why isn't the icon a box? Why instead spend the rest of the paragraph justifying the book icon? It might be understood well enough by the Github designers, but the metaphor isn't universal enough to be recognisable at a glance.
This is made worse because the icon for 'readme' and 'wiki' are also books. That could be confusing without the text.
The other example is the icons for watching. 'Add' tends to be represented as a plus icon. In this case 'watching' has a plus icon in it, while 'unwatch' has a cross icon. This doesn't appear to make sense.
One might wonder why, when there are present and available dichotomies (open eye, shut eye), there's such a mix and match of metaphors.
There's always going to be pushback when doing a UI revamp, and today I'll be that guy. Running Linux/Nightly.
Tweet them, or something.
Bitbucket looks great still.
>generally like the octicons, except (a) some are too detailed, and (b) the colored bkgrds are confusing. (still a fan!)
Then again, I'm pretty sure GitHubbers will be watching this thread. ;)
I find these new icons confusing as well. It took me a long time to figure out the one icon was an eye with a "X" on it for "unwatch". Not sure why the branches in "your fork" travel upwards as well, as I've never seen a source control diagram do that.
And my default user/organization/project icon is no longer an octocat but a book with a fork on it. I miss the octocat.
I think this is a classic problem when a graphic designer doesn't have enough meaningful real work to do :)
Edit: I have also noticed that they have removed the button to see the watchers on a project (it's just a toggle button now). To see that list now you either have to enter the URL directly or go on your dashboard and click on the watchers icon there on whatever project you're looking for.
I agree the idea is very good. Are flat icons a current design fad?
They just to just be an icon and a number, now I see an icon/text button. Also, I can't see a list of watchers/forks by clicking on them now.
Site looks great.