The clone/interact ratio should be very small, and this design encourages that. What you want is people to clone some repos and interact with them a lot, not clone a bunch of repos and never look at them again.
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.
oh well, I think it is common to clone quiet a few repositories per user. I know its one of the most frequent things I use github for at least. Copy url, git clone url to local.
It is however one of the first thing you want to do, and an important part of using github.
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.
> 99% of the time you'll just type `git clone gh:user/repo.git`, or copy from the URL bar.
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).
Agree, the ability to clone the repository should be a highly available/easily discoverable action. It will generally be the next thing the user wants to do (perhaps after forking) on first visiting a repository...
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!
My confusion is why people need a dialog to tell them what the url to clone is. It follows the exact same pattern every single time. I've never once used the 'Clone' button on GitHub, and don't understand why anyone other than new users ever would.
I really like this. One of the changes not mentioned in the article was merging the file path into the repo name at the top. Since the file path ALWAYS starts with the repo name anyway, this makes a lot of sense and eliminates redundancy.
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.
Wow good call don't know how I forgot that! Added it in now. That was one of my favorite simplifications :) I seriously love finding abstractions like that.
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.
As TFAA hints, the Branches and Tags counts don't provide any useful information, they're highly dependent on the author's coding and usage style and are orthogonal to any interesting information about both the repository itself and user engagement with the repository. Consider: Django has 38 branches and 41 tags, Rails has 25 branches and 183 tags, Symphony has 6 branches and 44 tags, Play has 4 branches and 48 tags, Flask has 15 branches and 16 tags. What did that tell you about them? Nothing.
> 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.
Language is an important factor in how hard the project will be to run/build, modify or otherwise actually work with. If it's a library for a language I don't use, I'd like to know that pretty quickly.
That's probably spelled out or trivial to infer from the readme (or file structure, top-level metadata & packaging files are generally obvious). Knowing pretty quickly I get, but the current prominent (most so for some languages with bright red-ish colors) bar takin the whole width of the screen is way over the top.
> 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.
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.
> 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.
Totally agree. The only use I see is when you're simply searching for projects/solutions and you want to quickly ascertain popularity and language. That said, I'm not sure I'll remember the color-language relationships without a lot of work that I'm not interested in performing.
I think there's a disconnect in the use case of you and the OP compared to some other people (like me). 90% of the time when I'm looking at a Github repo it's for a new project so things like language composition, number (or existence) of tags to download and clone URL are all very handy. Only 10% of the time am I looking at a project that I'm already intimately familiar with.
What's funny is that I came back to this post specifically to ask where the language bar had gone... the last couple repos I looked at were "pure" so I didn't see the usual blocky bar– just a solid stripe that I didn't think twice about. If only we could swap perception, because I really want to see the language breakdown in repos. It's quite nice when you come across a project you've never heard of before and can see immediately whether it's 100% this or that, 50% shell, or whatever. Even projects you have heard of, it's nice to get the overview, especially if you're interested in contributing by, for example, rewriting certain parts in a higher or lower level language.
According to the blog post that introduced the new design, the reason behind creating a visual representation of the repository was for identification. For a developer, often they will be working on a few different repos at once, not just one. The idea is that each repo will have a basic "signature" in the color across the top. After enough time spent on the project page, the developer will just be able to distinguish the project from one another just by the color bar.
What's worse is that the two most common languages on GitHub (Ruby and JavaScript) are represented by shades of red/orange. I almost thought one of my repositories was in some kind of error state when I first opened it in the new design.
These are good notes. You can quibble over some of the specific details and their assigned importance, but generally they show great logical enhancements.
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.
I can't even see all repositories of a user, just the "most popular" the same with gist, no quick overview anymore. I really hate the recent changes and can only laugh at this pretentious bs article.
Minor nitpick, it was Path who first started using the cover photo. Facebook did the same only a few months later, and then many other services followed.
This, like the iOS icon teardown post before it, are excellent. Tons of content. Well written.
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?
Doing the actual refactor was probably 25% of the time investment here. When I saw the GitHub launch post about the new UI I started having a few ideas about how it could be improved, so I started hacking on it in Photoshop. Usually these kinds of things just end up in a trash folder somewhere, but I was digging where it was going so I kept at it.
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.
Just make sure to jot down every thought and elaboration of those thoughts as they come to you, no matter what time of day they come. Save post-8pm for going back and hashing them out into a full-on blog post.
Extremely important. The pieces will all come to you in little bits over time, until you have enough thoughts that you can form a longer story.
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.
I believe it's an excellent investment of your time and glad you're doing it. Derek Sivers also wrote about publishing a few weeks ago: http://sivers.org/local it's very high impact stuff, we often forget that.
"And at the same time, we can de-emphasize the branch switcher since it’s so rarely used."
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!
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.
I, for one, do a lot of branch selection in Github's UI. The problem is not that this guy has made a mistake but that he doesn't seem to realise the importance of consulting the user and testing designs.
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.
The branches selector is something that is not very useful on github itself for most applications. The network graph on the other hand, is very useful.
But its something that is used. When you want to review something someone is working on its good to be able to jump into a branch and look at the commits.
Well got automatically switched to the new Github layout. I tried switch the Git URL to git protocol but was unable to do so.
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.
This is an interesting example of a 're-design' that isn't all about new colors, graphics, and everything else but just a combining of elements, some more uniform styling, and just doing something that makes sense. This goes to show every redesign doesn't have to be fancy new colors and layouts, just thinking logically about everything you need.
This also shows the importance of going beyond pretty colors into meaningful design.
As a designer that codes, i'd really like to remove most of github's grayness. They seem to do a lot of excessive bordering and gray layers. You could remove almost all of it, without making the UI harder to use.
It's a nice improvement (specially with the huge language bar gone), and the header image would look great, but I still think the two-column layout is a step back. Right-hand menus are a bit weird, and it makes everything below "the fold" left-aligned, total waste of screen area.
As someone that uses GH enterprise more than GH proper, I'll address the changes here from that perspective.
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.
It's worth noting a lot of the design decisions in the article are based on assertions about what is/isn't used.
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.
Absolutely. I actually had a section about that but had to cut it since it was getting rambly :) There are even other business concerns that go beyond just usage statistics. For example, GitHub might see the Mac app as their future, for bringing git to people who aren't familiar with the command line, in which case it would make more sense to make the Clone in Mac button prominent.
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.
Nice article and a very slightly opportunity for a couple of minor Github annoyances to come out of me. All of which I think apply both to the old and new design.
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.
- 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.
Agree, hiding clone URLs arn't good. Links are already in scroll area. And "copy to clipboard" doesn't help, it requires Flash, which isn't good at all on Linux
Thanks for blogging this. I like the overall changes of your refactor, but there are a few minor nitpicks:
- 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.
1. Ah yup that's true. The part of the "star" button that I was focused on was removing the "unstar" word since I find it really confusing. I'd rather use a depressed button to signify that I've starred something. But yup, removing the s's would be good.
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.)
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.
No, you're not atypical. If I want to look into some project closer (and that's why I'm searching or visiting particular github page in the first place, well, more often than not), then I copy git:// URL and download git repo. Real fiddling happens locally later.
GitHub's answer to this is "just copy the URL from your browser." It means using http(s) cloning which may or may not be desired, but from a UX perspective I think that it is neat.
I don't think he means that it's rarely used so much as it's done rarely by the user. When visiting a project page, users likely won't need to clone as often as they'll need to do various other things on a page.
I clone repos very often to browse the files in my editor so I didn't like the change initially (and I still don't like it very much) but then after getting used to it I felt that the clone-download section could be positioned above the right side menu which would also allow the menu to be aligned with the box that lists files and dirs.
Anyway, I liked the article even though I am not a UI person
Reducing an interface until only the absolutely necessary elements remain is one of the most satisfying tasks in design.
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.
92 comments
[ 131 ms ] story [ 630 ms ] threadEmphasize 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!
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.
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.
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/
[2]: http://www.squarespace.com/apps/
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.
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.
This also shows the importance of going beyond pretty colors into meaningful design.
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.
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.
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!
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.
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.
- 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.)
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.
Anyway, I liked the article even though I am not a UI person
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.