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.
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'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.
Oh, that's a great point. It pretty much solves my main concerns.
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.
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.
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.
What would you recommend they did here?
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.
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.
The icons for pull requests and branches are far too similar to each other, in my opinion.
<> - 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.
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.
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.