The New Sourcetree Design Is Horrendous (and broken)

Last updated: February 19, 2016

When it comes to GIT clients, you can’t really fault Sourcetree by Atlassian. It handles the basics of Git, allows you to visually merge/rebase your repositories, handle conflicts like a boss and more.

But we need to talk about the redesign they just launched across both Windows and Mac OS platforms in version 1.8.1.

Given the previous design of Sourcetree was not exactly the prettiest application out there or modern looking, usability wise it definitely ticked all of the boxes for me personally. What happened?

Falling into the trap of everything must be flat, WHY CAN’T WE MAKE IT FLATTER trend of removing shape and definition from interfaces, Sourcetree finds itself entering a bad neighbourhood with new shoes on.

I realise I have a choice and I could use the command line (which I do) I work on multiple repositories and the convenience of being able to switch between them is reason enough to use Sourcetree, especially when it comes to merge conflicts.

Also worth noting that the design for OS X actually does not look bad. If you’re fortunate enough to be a Mac user, you get a nice polished looking app with a few UI quirks, still a dumpster fire on wheels, but better than the Windows version.

The Windows version is like the ugly step sister from a fairytale who wants to go to the prom, but nobody wants to take her.

Iconography

The latest version of Sourcetree sees the icons adopt this pseudo pencil drawn look where every icon looks thin and transparent. This in itself would not be so bad if it weren’t for the fact the background is grey, so you get these light grey outlines on a grey background. You can see them fine, but they get lost. The text is a dark grey at least.

Current version

sourcetree-icons

Previous version

sourcetree-icons-old

Yes, the old version looks like an early 2000’s software application, but at least it was usable. It is the simple things. The biggest for me is the push/pull notification icons.

Because the new icons lack any colour, it isn’t immediately apparent what is what. It is a minor nitpick, but the first thing that I noticed when I opened up the new version.

In the older version the colour and definition of the icons was an important part for me moving around the application, not things are just confusing. Not impossible, just confusing.

Typography

While typography has only been tweaked a little bit, to add to the confusion there is now a lack of true visual separation and hierarchy. Take for example the left hand branch pane which shows you your branches, etc.

Take a look what what one of my repositories looks like with one branch. Pay close attention to the active branch styling which is just bold text. Now look at the heading above it “Branches”

sourcetree-branch-pane

This just messes with my head so much. When I look at the following, my eyes don’t know where to focus. Even though the branch name text is smaller, because it lacks any kind of indent which gives it visual hierarchy my eyes focus on “Branches” or “Remotes” before finding their way to the branch.

Don’t get me started on the iconography in use here. The same washed out, colourless and thin icons make an appearance. The proportions of the icons also look way too big, especially the file status icon which looks like a giant monitor on a little stand.

Tabs

Yet another misstep in the design bastardisation of Sourcetree. The new “flat” tabs just look horrible. Maybe I am not the majority here, but it is not uncommon to have 2 or more repository tabs.

The previous design had visually distinct and separate tabs so your eyes could easily see what tab was what. With the new design they threw in their horrible dark blue branch colour, light font weight text and a pipe to separate the tabs.

Then it gets worse. The tabs have unproportionate padding on them so the pip rubs up right against the side of the button. The close “X” icon seems way too big so it throws off the vertical alignment of the button text slightly (only obvious on an active tab).

When the tab is not active, you see this stray looking orphan pipe sitting over to the right of the button. They even put a pipe separator on the last button which just looks weird (presumably to show the end of the tab bounds).

Conclusion

This is a classic case of some overzealous designers who wanted to pursue a design trend and execute it poorly.

Were the designers given only a couple of days to work on a redesign or was this something they planned for months in advance? It looks like an early stage development prototype.

I could literally keep going on, dissecting and performing an autopsy on Sourcetree, but I think I pointed out the obvious issues with the latest design. It isn’t even just the UI issues, for the first time in a very long time Sourcetree crashes for me either randomly or during certain tasks like merging.

I regret updating to 1.8.1. Until they fix the UI issues, especially in the Windows version, I guess I will explore alternatives and make do with the command line.

I can forgive the newly introduced crashing bugs if they revert that UI and then fix the bugs. You know a UI is really broken when bugs that cause the app to completely crash bother you less.

As per the official Tweet from Sourcetree themselves, you can download the older versions. The links are provided as follows for your convenience: OS Xhttps://t.co/kkmVfvKMxA and Windowshttps://t.co/j0tSDPZEmC

It seems Atlassian acknowledge the issues themselves openly on Twitter, but this is unacceptable. Considering how widely used Sourcetree is and Atlassian’s reputation for being the foundation of modern development workflow, it just is not acceptable. Who tested this? Who designed this? Who approved this for release?

Liked it? Take a second to support Dwayne on Patreon!
 

Dwayne

 

7 thoughts on “The New Sourcetree Design Is Horrendous (and broken)

  1. I concur, I actually thought something was wrong with my computer when I installed it. I couldn’t believe that what I saw is what was intended.

    The only thing that I that I think that I like are the colored status icons next to the file / repository names. But that’s probably because it’s the only color on the entire interface.

  2. I haven’t used it for ages, but i updated to see what the fuss was about and it prompted me to register with Atlassian in order to use it. Why the hell should I need to log in to their servers in order to use a git client?

  3. The original Sourcetree did ask you to register after a certain time period, but I agree that forcing you to login to an Atlassian account upfront is a bit silly for a Git client. I am thinking it might be time to explore alternatives, Atlassian can’t seem to put out a Sourcetree release that does not manage to break everything terribly. Check out the comments over at the Atlassian Answers site, people are mad.

  4. Agree completely. Total UI misstep. It does appear changes are coming though, the most recent update brought cleaner tabs back, and I believe slightly darker icons … but still, not fantastic. The hollow folder icons for the repo bookmarks are also painfully non-distinct and muddling to use.

  5. The worst thing about it (as you can see in your screenshots) is that they’ve removed Git Flow from the navigation bar – and there’s no way to get it back. It’s really unbelievable.

  6. Well, even if this is about the new UI, I have to mention another git GUI: GitKraken.
    It’s another UI, I know, but it helped me in leaving SourceTree.
    I’ve still have SourceTree installed but GitKraken works MUCH faster (win 7 with a large repo) and allows me to avoid console for almost same tasks that I used to do with SourceTree.
    And when I have to I can still open SourceTree 😉

    And I agree about the same issues you mention about the UI in SourceTree….

Leave a Reply

Your email address will not be published. Required fields are marked *