slate blog

After using Basecamp some today, I realized something – the header for slate needs a redesign! Well, I’ll be honest – I’ve been wanting to simplify slate’s header for some time, because it’s just too big.

Ground zero (dot zero)

I’m about to show you something horrible. Something utterly terrible. You will cry, possibly laugh, and may even go blind. I’m about to show you what I’m tagging the zero dot zero version of the header. This is the header from slate before it was even slate!

Yeah, isn’t that just terrible? I think it is. For starters, the whole “links surrounded in brackets” thing is lame and so 90’s. The dangling tabs are really bad as well – I honestly have no idea why I thought that would be cool. And what is up with that gradient? Uggh!

Current version

Alright, so really, anything should be an improvement, you know? Here’s the header we’re currently using (as of version 0.3.3):

As you can see, I fixed those nasty dangling tabs, and gave them a makeover. The gradient is gone and the account-related links are on the right. We’ve essentially had this header for the life of slate. That is to say it’s time for a change. :-)

Bleeding edge

Here’s a screenshot of the latest and greatest from a mock-up I built today:

I made a number of changes here to better organize everything. Yes, I realize this looks very much like Basecamp – what can I say, I was inspired ;-)

First off, we’ve dropped the whole tabset for sites, opting instead to display the title of the current one right next to slate. This emphasizes the current site, clears up some vertical space, and allows the secondary tabset to be promoted. Switching sites won’t be quite as fast now, but it’s still pretty simple: click “Choose a site” in the top right and you’ll get something like this:

For the majority of users that are only associated with one site, this one even be a problem. Interestingly, this solves the problem of users with multiple sites as well, because it’s possible to run out of room in the sites tabset. I like when new solutions eliminate old problems all by themselves.

On to the tabs. First, we’ve added a Dashboard tab. Previously this would have been handled by clicking the current site’s tab. Now, users can click the Dashboard tab or the site title in the header.

The Files tab replaces the Resources tab from before, making it much clearer. We’ve moved the Users tab over to a new section on the right, along with a Settings tab (previously Properties) and a Help tab. The idea here is that the tabs on the left are essentially content-related sections, and the tabs on the right are more site management-related.

These changes will undoubtedly be a bit awkward/confusing at first, but I believe we’re on the right track now in improving usability in the site. Feel free to share your thoughts about the headers, including any horror stories regarding that despicable zero dot zero edition.