Monday, 8 March 2010

Where I'd put the buttons

Recently during the Ubuntu 10.04 (Lucid Lynx) testing cycle, Canonical introduced new branding and themes. The themes are really nice, still a little rough around the edges, but come launch date they will be slick. However, sneaked into this re-branding was a change that was initially thought to be a mistake.


The window controls moved.


The window controls (Minimize/Maxmize/Close) moved from the right hand side of the window, to the left hand side of the window. Not only that, but minimize and maximize swapped places; just to confuse everyone that little bit more.
Now, the problems with this have been discussed many times over the last week so I'm going to be a bit more constructive on the matter. I'm going to explain what they should have done in my opinion (!).

Now, let's get a few things straight. Firstly, if a button is at the corner of the window it is easier to hit. Secondly, if a button is destructive, it should not be next to a common action (in case of a miss-hit). Thirdly, I'm going to ignore right clicking, and double clicking on the title bar, these things are visually non-discoverable you need to find them by accident, and just cause you know about them doesn't mean everyone does. Got it? Good.
 
The Close Button

This is the one. This is the real cause of the complaints from users. There are two things special about this button.
  1. It's destructive. The only really destructive of the three.
  2. It's the most used. Of all the buttons it's the only one that must be there.

(Note, obviously, most used is dependent on user habits which is why we need usability testing - which I haven't done. But according to my logic it must be used at least once, which is more than the other two.)
Why is it the only one that must be there? Well, because you can use the taskbar to minimize or switch applications or you can resize the window to fullscreen. You cannot (in a easily discoverable way) close all windows without that button being there (before anyone says it; not all windows have menus).
So, because it's destructive, it should be well away from other common actions on the window. Let's take a look at a window shall we:

So, where do we put the close button? Well, the left hand side has a bunch of common actions, so we should probably steer clear of that side (take note Canonical!). That leaves anywhere right of the Help menu... as an applications can have many menus and can be resized so they are smaller, it would make sense to put it as far away as possible – so yeah on the right.
Now, onto usage, because the close button is the only action that must be performed, it makes sense to have it in a corner, that way you can hit it more easily. So, let's put that one there:

So cool, that's that one done, now let's move onto the next one...

The Maximize Button
So, arguably this is the next most important button, the reason? Well, you minimize to get to windows behind the one you are using, which you can do with the taskbar. Maxmize can only be done by drag-resizing (a pain) or right clicking (non-discoverable). So, after close it's pretty important. So, where do we put it? Well, a corner would make sense, but what if we put it next to the close button anyway? Well, there you've broken one of my rules above, you've put a common action next to a destructive action. So, let's just put maximize on the other corner:
Now the final button (or is it?)

The Minimize Button
So, this one is easy. It's a non-essential, non-destructive button. So, following logic it can go anywhere that's not next to a destructive item. Well, that just leaves next to the maximize button, but it doesn't need a corner so let's put it the other side:

There, for balance you should probably choose a theme with a centered title. But still, this layout makes more sense. You reduce the risk of closing something accidentally, and the most used items are in the corners. As a side effect you also keep two related options (minimize and maximize) close together.

What About the Menu Button?
I'm a bit ambivalent about this one, I'm not really sure where it belongs. The other three buttons change the size of the window (or make it go away) and don't pop-up a menu. It doesn't really fit with the others, (also the functionality is available on right-click, albeit undiscoverable). If I was to choose a position, I'd put it next to minimize, but I think it's arguable whether it needs to be included at all.

Conclusion
I'm no usability expert, but if I was to redesign the location of the buttons, (which, I'm not sure they need redesigning and breaking that muscle memory) that's where I'd put them. Also it has the pleasant side-effect that the close button doesn't move from the “normal” arrangement. I'd be happy if Canonical changed to this way, at least there is some obvious logic behind it... obvious logic makes me happy.


7 comments:

  1. I say long life to fluxbox, where you can put the buttons where you want! (and add other cool ones such as "make sticky"). But I agree, what is the purpose of this big change?

    ReplyDelete
  2. HPE6-A41 dumps Awesome blog. I would love to see true life prepared to walk, so please share more informative updates. Great work keeps
    it up.

    ReplyDelete
  3. Thanks for sharing. I found a lot of interesting information here. I found the exact information that I was looking for. A really good post, very thankful and hopeful that you will write many more posts like this one.
    Source: professional SEO service.

    ReplyDelete
  4. You may drag the text boxes around to resize and move them. If you're using a mobile device, tick "allow drag/drop" in the More Options area first. With the Add Text button, you may create as many new text boxes as you desire. Next to where you input your content, you can change the font color and outline color. The gear icon next to the text entry allows you to further change the font for each text box. All fonts installed on your device, including the default Windows, Mac, and online fonts, including bold and italic, are supported by Imgflip. For all devices, there are over 1,300 free typefaces. You can continue reading in Gameroof for more info.

    Adam,
    https://games.lol/project-drift/

    ReplyDelete
  5. This is a really good read for me, Must admit that you are one of the best bloggers I ever saw. Thanks for posting this informative article.
    Source: O2hair.

    ReplyDelete
  6. I started using essay writing service Check This Out last year and my grades have improved immensely. My essays always delivered with all the sources were used and cited properly, it reads well, and it's free of errors. I really love their services and hope that I'll always be able to afford them.

    ReplyDelete
  7. Put the Buttons is a post that provides a perspective on website usability specifically concerning the aspects of button placement and arrangement on the website. This shows that when a button is placed in another location, it can make a huge difference in usability. If you are also improving your professional appearance, you might take the help of a cv writing service in pakistan
    to frame an attracting resume that will catch the employers’ eye.

    ReplyDelete