GUI episode 9 – a new hope

GUI episode 9 – a new hope

Tuesday, December 10, 2019 Pablo Santos best practices 2 Comments

Yeah, ok, maybe I went too cinematographic with the title.

We are redesigning the GUIs for the upcoming Plastic 9.

We'd like to share with you what we have and get some very early feedback, to ensure the improvements really make sense.

What's your first impression? Anything you miss? Do you like it overall?

Many more screenshots inside 😉

To tab or not to tab, that started everything

I find myself closing tabs in Plastic more often than I'd like to. That's the primary reason why the Linux and macOS GUIs don't use tabs. But we are not happy without tabs there either, because the "up to 4 panels" solution is not perfect either.

"Reduce clutter" is also something we keep in mind all the time. For newcomers, the GUI has far too many visible options with too many buttons. We need to do some cleanup and keep what really matters the most.

So, we were struggling trying to find a better solution, and we'd like to find something consistent across the 3 platforms. And here's what we came up with:

These are extracted from 3 different high-fidelity mockups Fernando, our resident designer, prepared together with Dani, our GUI maestro. We basically need to understand how it will look like across the 3 platforms, and whether it makes sense to you.

The idea that motivated everything is a Visio that looks like this:

I personally like the idea of differentiating the 3 main tabs even more, with different font color, and then paint the "dynamic ones" (short lived) in a different color to make crystal clear that they're something else.

The rationale is: when you open a clean GUI, you see 3 tabs that you will use the most often: Pending Changes, Branch Explorer and Workspace Explorer. You can do almost everything from those three tabs. In fact, even Pending Changes and the Branch Explorer by themselves are probably 90% of what you need to do. It is good to have these views always in the same place. No need to think about where they are, no need to start closing things to clean up. They'll be always there, in the same position.

I've been placing my views in the current GUI manually this way for a few weeks and I find it extremely helpful.

Our goal is to also modify the current macOS and Linux GUIs to resemble this new tab strategy. Currently they have no tabs, but we think this new approach is better one.

No left panel: "new tab", browser fashion

In our quest to reduce clutter, we thought we could get rid of the main actions on the left. This will be probably be shocking to many (we'll have a fallback mechanism, old habits die hard), but good for the non-experts.

Then, how would you list branches, or code reviews?

Enter the "new tab":

The goal is to make it self-explanatory, with short descriptions of what each action is (views, as we call them).

Here is some Balsamiq-made art (thanks Dani) explaining how the thing is expected to work:

Accessing recently closed tabs

This is also a small detail (and a well-known pattern) that we think can greatly help users: Recently closed tabs.

A place you can call home

Home is also one of the great additions we made when thinking about new users, and any non-expert who doesn't know all the gory details of Plastic. We want a place where you can go to learn how to do common actions without having to read the entire manual (and heck, I wrote the 300-pages book! 😉).

It is still a work in progress, by the way, and one of the places where we need to think about more. So, most likely the final version will have different options, but the overall idea will stay.

Workspace status area

Just in case you didn't notice, we also redesigned the workspace status area. This area is the first thing in the window, the bar where you see info about the current branch, a way to switch to different workspaces, and so on:

• First, this area will have a little bit more vertical space, so that it can show extra info about the working branch. You see the description of the branch nicely placed behind the branch name.
• We'll also shorten some of the info we display now: the server won't show the full name, just the bare minimum to differentiate it.
• Then, the path of the workspace is also shortened and displayed together with the "switch workspace" selector.
• And very likely, we'll show some info about what needs to be pushed or pulled when you're working distributed.
• There is a hamburger menu to display things like the about, settings, and so on.
• And, everything will be self-explanatory with points to get more info, as you can see in the following mockup:

Dark theme

A dark theme won't be the first thing we'll deploy, because we need to do some cleanup first, but here is a preview of what we'd like to come up with:

Overall, we'd like to modernize the look and feel of the GUI.

Feedback welcome

I'm writing this with users like you in mind. You're using Plastic on a daily basis and you know what you really miss and what you'd like better. Of course, nothing in this post should convey the idea that the GUI looks is the most important thing to us. We just want to improve the UX, make it friendlier, more modern. Our roadmap is still full of core improvements, the kind of things that really make Plastic different than the Perforces and Gits of the world.

As I said, the goal is to share our design now, in its infancy, so you can influence its design, to share what you like and what you don't, so we can act accordingly. Use the comments here, or the following forum thread to discuss your thoughts.

Thanks!

Pablo Santos

I'm the CTO and Founder at Códice.
I've been leading Plastic SCM since 2005. My passion is helping teams work better through version control.
I had the opportunity to see teams from many different industries at work while I helped them improving their version control practices.
I really enjoy teaching (I've been a University professor for 6+ years) and sharing my experience in talks and articles.
And I love simple code. You can reach me at @psluaces.