Hacker News new | past | comments | ask | show | jobs | submit login

>> replaced with a slim, de-emphasized icon-based navigation.

This is the same problem I had with a Gmail redesign a while back. Using icons looks nice and allows for slimmer navigation but it decreases ease of use for me. I can find things much quicker with text labels.




I have the same concern. I find it's even more troublesome with the flat/simplistic design aesthetic: it just takes way longer for my brain to differentiate one light-gray-on-white abstract symbol from another than it does to pattern match word shapes.

I've even turned on whatever Gmail lab puts the words back into the buttons.

That said, Github looks to be mitigating this issue by having full text on the root screen for the repo. Compare the sidebar here: https://f.cloud.github.com/assets/1354/660756/cc8cad9c-d714-... and here: https://f.cloud.github.com/assets/1354/660769/fe4a1a0e-d714-...

Maybe that will train my brain with positional data a little better than Gmail managed to.


> That said, Github looks to be mitigating this issue by having full text on the root screen for the repo

Oh, that's a great point. It pretty much solves my main concerns.


the menu only includes a few distinctive icons. i'm sure you will remember their order and looks over time.


My issue is that no-one should really have to 'remember' them.

When I first started using github it was straightforward as I only had to learn what the words meant (i.e 'fork', pull-request, etc). Now a new user is supposed to learn those concepts and their associated symbols. The cognitive overhead just increased.


This is a common problem that UI professionals often refer to as "Mystery Meat Navigation". http://en.wikipedia.org/wiki/Mystery_meat_navigation

It was pretty common during the 90s when screen resolutions were really low and preserving space was a big deal. We're seeing it again now because of mobile friendly responsive designs dealing with the same issue.


I'm curious how many people browse github from their smartphones. Right now I'm on my desktop and see a pretty column of unlabeled icons, right next to three inches of unused whitespace between the icons and the edge of the frame. It's a somewhat inefficient use of space...


Probably very few. The site is currently very, very difficult to use on anything smaller than a tablet.


I use the github app on my smartphone, it's quite handy though I don't know that I'd what to do hardcore source browsing or editing on it.


I'm now seeing three inches of whitespace between the footer and the body...


That takes me back. The "Web Pages That Suck" book was what got me into web design and programming.

Unfortunately, while I bet almost all designers would recognize that mystery meat is bad in the classic 90's context of using it on a homepage, its become acceptable with these sorts of interior toolbars.

So while github is not using it on the project homepage - probably because they recognize it would be MM and be awful - they are using it deeper down.


The number of times I've hit GMail's 'Spam' button rather than 'Trash' is ridiculous. Whether due to the icons or the placing of them next door to each other with no visual (apart from icon or text-label) distinction...

What would you recommend they did here?


http://i.imgur.com/FqTGSoA.png

You shouldn't have to click on icons to find out what they do. There isn't even alt text.

They should have set with devs in a room and asked them - "What do these mean to you?"

UPDATE: hover seems to work now to figure out what the button does. Not sure if this was just my browser or they literally fixed it in the past hour.


Ok, as a dev who doesn't use github much, I'll give my best guess as to what those icons mean. Respectively:

Home

Alerts

Merging

Documentation

Interactive Heartbeat Sensor, presumably using my webcam, to notify authorities when I'm having a heart attack

Graphs

Branching

Settings

How close was I?

By the way, alt text is absolutely essential for screen readers to function. Don't exclude the blind if they have reason to use your site! Blind people definitely use Github.


Glad to see GitHub getting into the telemedicine space.


That's about what I would have guessed too, except I think "documentation" is "wiki", and "merging" is "pull requests".

The icons for pull requests and branches are far too similar to each other, in my opinion.


For the pull request icon, I would use the upper torso of a stick figure pulling a rope, a la tug-of-war.


I'll take a shot too. I don't use most of the fancy features on Github, so I have almost no experience with these things.

<> - code ! - warning / danger |7 - merge a fork (or accept a pull) E]E] - I think that might be a dictionary. Look something up? _|^\_ - Heartbeat to let you know how active a project is. |+. - Charts to see activity. 4 - Fork >< - settings. Funny that it's a wrench and screw driver. Although I guess a keyboard and mouse would be a little less telling.

These seem bad because you can't get information about them before you interact. The icons are small, and kind of hard to make out (I had to turn my screen brightness up to see what was going on with that book one). But, once you get a little bit of experience with them (click them once), you'll have that icon (or just the order) ingrained in your brain. It sucks for people who aren't technical, or who are thrown into Github, but it's not bad for experienced users.

That is until next week when they decide they got the ordering wrong, and some of the icons wrong, and randomly swap and replace icons.

This kind of reminds me of the very challenging 'Is this thing I made hard to use for people who don't know what's going on?' It's a very hard problem - you, the creator, are designing and fabricating something that you want other people to use. You think you found a good way there, and you obviously found the best way because that's the way that you're going to build it. The path was obvious, we went from A to B to C back to B then to D, detoured to S for a while, didn't like the color sceheme, went back to D, then decided B was the best one. You have a lot of experience with alternate configurations, and have innate knowledge of how they work on the inside. Someone who comes up and uses D without any primer might be a little confused. Why do the colors matter here? Well, it's obvious, we went from A-B-C-B-D, it's a natural design evolution, ARE YOU TOO STUPID TO SEE IT!?!? You won't be one of my users... It's hard to distance yourself from what you're working on to see the flaws in your own design. It's very hard. It's easy to assume the knowledge you have, or the knowledge you as an organization have, will be present outside your group a priori. You don't know what they don't know, but you know what you know.

Regardless of whether or not you like the changes, Github has probably been following this 'design evolution' for a while, and they like where they're at, and assume you're smart enough to know beforehand what the icons do. Or, at the very least, smart enough to associate an icon with a topic related to git.


I have this problem all the time when using various minimal websites on my tablet. I can't mouse over for a tooltip, so if I don't recognize the icons I just have to start randomly clicking and hoping I don't end up being redirected to my mail app or something.

Finding the right balance between casual consumers of github and developers who live in it all day must be challenging, though.

EDIT: I didn't realize that the front page for a given repo shows text in the sidebar. Good on them, I like that compromise.


It's sad, I'm a product designer myself, but labels always win: http://bokardo.com/archives/labels-always-win/


> Using icons looks nice and allows for slimmer navigation but it decreases ease of use for me. I can find things much quicker with text labels.

I believe studies have repeatedly shown that users can find things with icons faster than text labels. Icons are less discoverable than text, but once you know what you're looking for, icons are faster.


The 'discovering' part of discoverability isn't something that just happens one time. If I'm not using your software day in day out then I'm likely to forget your silly icons.


It seems that, no matter how many times I look for the way to see raw text, I never remember that it's "<>".


So it is good for people who use Github all day long, but bad for people who only use it once in a while.


Right, which is exactly their stated intentions.


Maybe more that the GitHub developers also use GitHub all day long?


Yep; GMail adopting mystery meat navigation was a real step back, and it's still mildly irritating to use quite a while later. Hopefully this trend, if that's what it is, runs its course before it spreads much farther.


Aye, I really struggle with the greyscale icon menus everyone seems to think are super great these days. If they're in colour; fine, I can differentiate quickly enough. But both G+ and now GH seem to think very pale grey icons on a white background will be enough for people to distinguish them.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: