Say hello to Octicons(github.com) |
Say hello to Octicons(github.com) |
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.
That is indeed sad.
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.
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?
<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.
You should also check out Gitmarks. Someone posted the link in a reply to my earlier comment.
Every major current and previous generation browser supports SVG images except IE 8. IE 8 users just wouldn't see the icons - a reasonably graceful degradation.
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow...
I don't mean that it's pretty. I'm just saying that it's possible
At least in 90% of the cases I've seen it used, probably by some overzealous OCD person wanting to fill in _all_ the attributes.
Of course, screen readers might not respect that, in which your solution would work.
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-...
There were several posts on HN over the last couple of years where people complained about these and other issues.
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.
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.
Like Gmail's new icon-only interface? I hope not! It's difficult enough for people to figure out what Gmail's icons represent.
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.
http://uxmyths.com/post/715009009/myth-icons-enhance-usabili...
The fact that I'm forced to override font sizes for usability because sites don't respect my default settings is bad enough. When they break because of it, it becomes terrible design.
But forcing everything into the same font seems a bit excessive; I've actually seen a couple of sites make really nice use of fonts, and you can still install an extension that turns your page into an "easy reading" mode on a key press.
What do you do about fixed width vs proportional fonts?
You have to click Cmd-+ once in a while to zoom in on pages that are made by idiots.
I actually think this is the future of browsing (at least for people who do a lot of reading in-browser). Books that used non-standard fonts and colors would be laughed at (say, Papyrus on a beige background for body text), but just because it's easy to go wild with websites doesn't mean people should do it.
> Unicode code points do have names and standardized meanings, so it's not a good idea to abuse them
In my experience, I'd say about 0.5% of pages are fancy demos of things you can do with web-font support, 1% of pages use custom web-fonts but look just fine without them, and 0.1% of pages are like GitHub where they actually require a custom font. Everything else uses some "web safe" font, and often very little care is given to selecting which one. Forcing everything into the same font is an excellent solution for the 98.4% of sites that don't use custom fonts, and an decent solution for 99.4% of sites.
It should be noted that most of the "easy reading mode" extensions only work well for article-type pages, not for sites like Hacker News or Reddit.
Worst case seems to be that you go to a site and it's not quite as pretty as it might be, but still perfectly readable. I'd take that in exchange for not having to press a button to make a site more readable.
Can you give examples of the sites you're thinking of?
edit - that should be "worst case provided sites aren't using fonts to display nonstandard icons".