Refactoring GitHub's Design
ianstormtaylor.com
ianstormtaylor.com
WRONG. This is why designers shouldn't be "redesigning" stuff they don't use.
Branching and merging with ease is what makes distributed scm's so much better than the previous generation. Why would one want to de-emphasize this?
And let's talk about what really used. Github is great for viewing code easily and making comments. So what did they do to the code view div in the latest redesign? They made it smaller! Unbelievable!
So now I have to use a Chrome plugin to fix it: https://github.com/sauravc/github_wideload
These "designers" aren't entirely to blame though. A lot of what the author suggested makes things better. Unfortunately, coders are a tough crowd to please.
I don't mean to pick apart your comment but since you started off with a big bold nasty "WRONG" I don't feel so bad.
First, "branch and merging with ease" has nothing to do with "distributed SCM" tools. The branching model in Git is great of course but Mercurial for instance has a far different branching strategy. Bookmarks, which mimic Git branching, were added much later.
Second, while I do a lot of branching in Git, that has nothing to do with the branch selector on the Github UI.
Now, something that DOES, is the branch selector in the Pull Request screen which wasn't mentioned by the author but IMO should've been because that's the single worst part of the Github redesign.
My thoughts exactly.
Local branches tend to be a feature of distributed SCM tools, so I'd say you're wrong.
If you don't discuss and test then you'll make a mistake. Unless you're Facebook, your company cannot ride roughshod over your customers.
It's a shame he didn't add the language colour bar into the final comparison screenshot. I thought that was one of the best changes. It's quite jarring where it is right now.
edit: The one issue with this redesign is it clearly goes against a philosophy which GitHub has recently embraced: quickly seeing the status/overview of a repo. Moving the Commits, Branches, Tags, and Contributors from up top to the right sidebar definitely reduces some clutter, but it makes them much less of a focus. And I'm pretty sure this is something GitHub wouldn't want.
Regarding the "seeing the status/overview of a repo" I completely understand, and I think it's a genius way forward for GitHub. I touched on that towards the end with the user-uploaded backgrounds. But basically, I left my version of the refactor at the stage right before adding in the repository's identity. After refactoring away all of the distracting elements, there's much more room to play with creating a really solid identity concept for repositories, instead of the hacked together one we see today.
> It's a shame he didn't add the language colour bar into the final comparison screenshot. I thought that was one of the best changes.
I thought not including it was an excellent choice: aside from providing a jarring dash of colour it is a complete waste of space, if you interact with the repository you probably know which language(s) it is coded in, and if you don't you probably don't care.
The languages used are often one of the first things I am interested in when investigating a new project.
I don't care about language per se, but I do care about managing the operational complexity of our stack. The programming language is a relevant factor on that score. A project in a new language may require new staff expertise, a new interpreter, a relatively high number of new dependencies, a relatively high investment in new monitoring systems, etc.
That said, I don't like the language color bar so far, because I'm having trouble confidently identifying which color is which language. For example: the reddish/orangish color space has JavaScript, Ruby, and the various JVM languages. The appearance of these various reds and oranges frequently shifts due to f.lux and differences between the three monitors I commonly use at work and home. Maybe I'll learn the colors better as I get used to the new repository format, but then maybe I won't.
In practice, I look first at the project description and the beginning of the README to see how the project describes its own strengths and weaknesses. Many projects describe their major language choices and runtime requirements as a part of that description, so I never look at the language color bar unless I need to.
And even if they don't clearly spell those out in the readme, metadata/packaging files are usually at the top level of the library.
It makes no sense. Especially when you consider that you already likely know the primary language the project you're looking at is written in.
but regarding the rest of the design, I think its a huge improvement.
Why? How? I just can't fathom what use they could be outside of pointless wankery.
1. Pushing the branch changer off to be so subtle hurts. I change branches, a lot. Browsing code and changing the branch is something I frequently do on GH.
2. Lack of clone url is annoying. If all I have to do is click Clone and that's it, then I can live with that.
3. Clown, Download, and Watch are too far down the screen. I usually have a big screen, but not always, and I have my monitors maximized.
4. The ordering of the links on the right are odd. I click Watch, Clone, and Download far more than Contributors. Still, the ordering is off. Pulse is at the top, but we start off with Code? With very little thought, I'd order them Code, Commits, Pull Requests, Issues, Branches & Tags, etc.
5. The Wiki link is hidden. It really should have a better place. While the rest of the links on the right relate directly to code at some level, the Wiki does not. It's documentation mostly. Being disregarded like it is, it should be removed. Either that, or found a better home.
6. Stars and Forks should be Star and Fork. They are labels for buttons that perform an action, not state.
7. Code, I assume, takes up a lot more space! Yay!
8. The top is clean, making it easy to see exactly where I'm at.
These are just initial thoughts. Overall, the design is more open. I think for me, the layout of some of the interactions need to be thought out a bit more, and need to take into consideration more than just your basic free github user.
I have a question for Ian: How do you find time to do such in depth teardowns and UI refactors of other people's apps? Actually let me re-phrase that: How do you justify spending time on these blog posts instead of focusing on your own application?
Maybe it's just a calculated cost you incur to get traffic? Even so, how did you determine this to be the highest value activity as a start up cofounder?
You value some things because you enjoy them, more than you value other possible uses of that time.
As for writing the article, we actually like to encourage each other to write interesting articles on our personal blogs. One thing to keep in mind is that you'll be most productive when you're inspired to write, so if I get inspired to write something mid-day, unless there's a super important Segment.io deadline I'll just take a detour for an hour and write down my thoughts. And we try to remain open to each other doing that, instead of seeing it as "wasted" time. @calvinfo did the same with his recent article on Node's new streams too: http://calv.info/an-introduction-to-nodes-new-streams/ — since they are timely topics we like to get them out as soon as possible.
It's not without personal gain either, there are definitely traffic benefits, although I haven't looked into how much traffic actually gets from my own site to our Segment.io's site, let alone signs up. There are also hiring benefits I assume (we're only just starting to hire Javascript folks) from putting yourself out in the community.
Mostly I just enjoy it, so I do it ;) I usually write these after 8pm or so when I switch from working on Segment.io to doing whatever else I want (half the time it's still working on Segment.io haha).
I also wish more designers would write about this kind of stuff, so I like to do it myself too. I'd love to get more process information about how other startup designers think.
I wouldn't worry too much about keeping it fresh... I had a long period of silence from October to March while I was head down on product. Although I did feel guilty about it the whole time...
I think the "after 8pm" part is the secret sauce of not feeling guilty about how you're allocating your time. You've found a chunk of time that you really shouldn't be working on your startup anymore...and it's a time slot where most people are wasting time watching TV, drinking, etc. Keeping productive at that time is awesome.
I like this so much, I might give 8pm blogging a try.
To manage it, I keep a _drafts folder in my Jekyll [1] repo which I quickly switch to and from using the project switcher in Sublime. And I use Squarespace Note [2] to jot down ideas from my phone if I have one while I'm going to sleep.
[1]: http://jekyllrb.com/
Does it bug anyone else that the Github commit count tops out at 1000+ commits making it completely useless after that point? A repo last updated date would be more useful (I know I only have to scan the directory modified dates but a consolidated one would be nice).
It would also be great if they could show the unmerged branches at the top of the branch selector and allow branches to be kept but marked as obselete so they weren't offered with the other unmerged branches but could be kept rather than completely deleted.
My final wish would be for a couple of things bitbucket has in its diff views, namely side by side diffs and the option to show additional lines around the diff to give greater context. Bitbucket is sorely missing Githubs great network view though.
Cloning a repository happens rarely, but in the old interface
it was one of the first things on the page.
Anyway, I liked the article even though I am not a UI person
Which is fine - it makes reading through the design process more interesting and insightful.
It would be interesting to compare that with actual usage statistics that one assumes github have (to one degree or another) and see if some of the differences in the design are due to flawed assumptions in the article.
The other piece I cut was talking about how not only do advanced users only need certain features, but there are also features that only new users need, like walkthroughs and things. It gets really hard to visualize all of those decisions in a flat mockup.
But yup I totally agree, trying to redesign an interface that you don't own is always going to be very hard and error-prone. Although GitHub is probably one the interfaces that most of us would have the most success with based on how heavily we use it.
Emphasize the cloning/interaction interface at the same ratio that you want people to use the respective features.
Many people are simply consumers, clone a repo and then all interaction with it is local via normal Git usage. This group may really be larger than any other group. It seems a mistake to make life harder for what might be the majority of users.
That said, I much preferred the refactored design and its visual simplicity. It makes the new Github design look cluttered by comparison.
Much more so, as far as I'm concerned, than the ratio of various languages within the repository whose level of uselessness is only overtaken by the number of tags in the repo.
No, that's what YOU do 99% of the time. Do you think that accurately reflects 99% of GitHub's users? I know it doesn't reflect what I do (and I am a developer).
Also, the idea that he needs to change the clone URL box so that it can autofocus is wrong. In fact, his current workflow for cloning is flawed:
> "my current workflow for cloning of double-click to select + cmd-c"
He just needs to click _once_ on the button to the right of the URL, which has a 'copy to clipboard' tooltip pop-up. He even showed this icon in his UI wireframe sketch.
Perhaps it isn't noticed much by people because developers may have flash turned off, which is the mechanism used by GitHub to access the clipboard?
To be honest, I didn't know about the feature for a long time, and used to do the same thing - select URL then command-C to copy it - myself. It was actually something I found out about from the GitHub blog post about the recent re-design!
Our disagreement is to be expected - no two people completely agree about an interface - but it is extremely disappointing that he makes no mention of testing on real users (or at the very least, speaking to them) in order to gauge whether these features really are unimportant. If you want to know the reason why so many site redesigns are unpopular with users, here it is: you didn't test them.
I'm not trying to take this to absurd conclusions like "every change has to be tested" but the central idea of this guy is faulty: design of the user interface, like design of software, is NOT to be done by anyone in isolation. You need to involve real users in major changes before they happen.
I hope Github ran user testing before they released these changes.
To add to the language bar discussion - I rarely care about the languages in my own repositories (or repositories I'm watching or have starred). This is one of the new features that I enjoy for repository review, but if I'm in a repo I actually use, I rarely care about any of the data here (including commit numbers, tags, branches, contr.) Rather than moving this data about the page, I'd like to be able to remove it entirely based on circumstance or settings.
- Why did you change "Star" and "Fork" to "Stars" and "Forks"? The before and after have different meanings.
- The colour bar is missing from your final design. You mentioned in a comment that you forgot to add it and then added it, but I still don't see it :).
- The right side navigation section is prematurely cut off at "Settings".
- Your "Clone" and "Download" buttons could use some more whitespace between the text and icon.
2. Nope didn't forget it. My final design isn't "final", it's just at a point in the refactoring. The next step would be to figure out how to add in more of an identity to each repo. I tried to mention this towards the end of the article when talking about the background image idea.
3. It's hard to show in a flat mockup, but the idea for that would be that hovering it would have an animation that slightly dropped the divider down, and clicking would open it all the way. But it could totally be an over-optimization, in which case the 3-4 extra list items could just always be visible.
4. Ah, I just took the same style as GitHub. (Actually one of the cool parts of the refactor process was that GitHub's markup is so self-evident that lots of the pieces were made by just changing class names and then re-screenshotting the GitHub interface itself.)
Ians:
- got rid of the color indicator
- got rid of the separation lines
- is truncating the list
- has three identical buttons where there were two
- has more indirection. Cloning is autofocused for me, it takes one click+cmd-c. Also, when I'm scanning the page for a way to clone by URL, I'll find the actual URL much faster than the button that says "Clone".
I like the general idea of the redesign, but I think it would make the sidebar much worse.
When I first saw github, the option of choosing ssh or git protocol, as well as http, helped to establish it's credentials as a company that "gets it" when it comes to technology. As developers that tends to be important to us because it suggests that other features are going to work the way we expect.
I think the new design is lacking in a number of areas that the old design got exactly right. The git log tells you quickly when the last update was made, but without hiding the tree view too deeply.
My preference would be for the features of the old design to be restored as best as possible, even keeping the new design as a whole. I would also like to see something like the Android application's interface, including the "news feed" like view added to the web interface.
There's one thing missing that I always wanted to have: put the contents of the README file _above_ the file listing. The truth is, many people in Github don't use the Pages feature and rely instead on the README being the main project page containing the description, instructions, etc. And sometimes you have to scroll a bit to get to that information. If the README was on top, the main project page at github.com would be given the importance many projects give it.
Variations of this idea: let the code be on top but only after a single click to expand the repo contents, unless the project lacks a README file. In that case expand the repo contents directly.
I've only used github for a week or so, so I'm not really attached to its interface, and I tend to only interact with it through the github client. On a bit of a tangent, the github client feels awkward and strange. For one thing, it doesn't follow the normal conventions of the OS I'm on. It doesn't even have a menu strip. I'd much rather make a new repo with file -> new repo, have push pull commit etc be in appropriate submenus on the menu strip, and so on, but this thing just throws stuff all over the place willy-nilly, sometimes I don't know if I'm even able to do something and it turns out I have to double-click, things like that. Committing and pushing with gitextensions from inside VS feels nicer.
I really think interface design for desktop apps hit its peak a while ago before everyone was obsessed with stripping things down to the bone. Every update I see menu options and configurability widdled away from applications like Firefox, which is on the track to becoming the one-size-fits-all Chrome. If you want some evidence for that, hang around some channels on irc.mozilla.org.
Another thing is that when I look at screenshots of youtube from a few years ago, it's astounding how much they got right back then that's gone now. The tracking bar has no place hovering over the video obscuring it, the five star system was great but had to be replaced with a binary yes/no, there was a button to start over instead of having to click on the start of the tracker bar, it goes on.
I've used applications from the late 90s or around that period before. They were great. Menu strips were chuck full of stuff, buttons everywhere, just great design to me.
Too many applications are being stripped of any useful feature that's not absolutely essential (or made to have the feature available only through obscure shortcuts / ini files / etc) and it's a development that I greatly disapprove of. I'd rather not have my Microsoft Word replaced with Google Docs.
One thing bothered me. He said it took a double click and cmd+c to copy? That's not true at all. Single click auto selects. I think the hiding the of the URL is kinda lame because the URL _was the design element_ for "clone" for so long. I see the URL and I know I can click it to select, CMD+C, paste it into my terminal.
Ian certainly has some valid points, but in the end, I think he's not appreciating the full-range of use cases that everyone has. Github has a lot of different kinds of users. Enterprise development flows are a bit different than the open source ones. And those are the flows that bring in the money.
Though, I'm sure they use Github enterprise, so maybe he does appreciate that use case as well.
I think I was one of the few (perhaps?) who did not like the new redesign of github. I did not like the content above that red/color bar at all. It is that much real estate taken away from me to see the code/commits/documentation of the page. I often use last commit and all commits to compare and see what is going on. I also quickly switch branches on the UI to compare stuff. The current github just feels its a always one extra click or I am searching for something. Somehow it doesn't feel minimalistic at all.
Ian's redesign makes it elegantly simple and minimalistic.
Now I understand the issue with design :P
Now I think the GitHub redesign is okay - but i also think "absolutely" is too strong of a word. The "usual tasks" for "most people" should be part of the UI IMO. Many products go with "absolutely vital" and then the UI sux because you don't get the buttons u needed, in the name of simplicity.
This also shows the importance of going beyond pretty colors into meaningful design.
No. It does not happen rarely. I do it all the time.
(I realize that other commenters have expressed the same sentiment among other things, but for me this is the key element to emphasize.)
But, I came to say: Is the branch lister/switcher really one of the least-used parts of github? It's one of the parts I use the most, actually!