Archive for May, 2012

A solution to the “ribbon vs toolbar” conundrum? (How Microsoft should’ve done ribbons?)

The “ribbon vs toolbar” debate polarises PC users, perhaps more than any other issue. It seems (from my recent research) maybe half the world like the ribbon and hate the toolbar – and vice versa.

While doing some app UI design recently, I tried to find a way to heal the rift:

  • Have a ribbon-like structure, rather than vertical menus, but on each ribbon, group the most commonly used items together first, under the label ‘Main’;
  • Then have an extra ribbon/toolbar – I’m going to name it ‘Main Toolbar’ for now – which just shows all of those groups of most commonly-used items, the ‘Main’ sections, all together on one ribbon – and voilà – it does what the old toolbars used to do.

So, say, here’s a wireframe of our first ribbon, for a ‘Docs’ (or ‘File’) menu/ribbon (by the way, don’t worry about this pic going “under” the right-hand WordPress column):

It looks similar to a Microsoft Ribbon; it’s just the menu, spelled out as icons and text, across the screen.

Note that the first group, at the left end of this ribbon, is itself labelled Main, and it’s the most commonly-used Doc/File actions – New, Save etc

(Incidentally, I’ve placed all the more advanced commands under the sub-title “Advanced”, to indicate to normal users that they should not worry if they do not understand these commands. So now there’s a nice left-to-right progression, from the main, everyday commands, through less used ones, to the advanced, power-user ones.)

Here’s the ‘Format’ ribbon/menu, say:

Again, its most common items are grouped on the left – Style (“Heading 3”), Font settings. B/I/U etc.

So Docs/Insert/Format/Tools are like using a ribbon; it’s your menu, laid out graphically, left to right.

But there’s another ribbon/menu/toolbar (whatever!), at the top right, that I’ve called ‘Main Toolbar’, and it’s like this:

It’s made up of the ‘Main’ sections of ‘Docs’, of ‘Insert’, of ‘Format’, and of ‘Tools’.

It’s like a 2-line Toolbar, i.e. with the old-fashioned toolbar benefit that all the things you’re most likely to want are now always on-screen.  (And not that dissimilar to a typical Apple Mac toolbar, by the way, which is 1 line of icons & text, rather than two.)

But it feels like a ribbon too, and it’s part of a combined toolbar/ribbon system:

1) Now if it so happens you’re a toolbar fan: fine, you click ‘Main toolbar’, and there’s a conventional toolbar, and it’s made up of all those ‘Main’ sections from each menu. And while we’re now in ‘toolbar/menus mode’, you can tap a menu and use it, and it then goes away and the ‘Main toolbar’ reappears. (Eg, click Insert, then Bullets – and you’re back with your Toolbar.)

2) But if you want to use it in a ribbon-like sense, you just tap any of Docs, Insert, Format, or Tools, and then tap on the document (sorry it’s only one line high in these pics – the line starting “Hi folks”), and now you’re in ribbon-world. You can stay there forever if you like: it’s now a ribbon UI. You tap Docs, Insert, Format, or Tools, and it stays displayed. (There’d be some minor graphical change to indicate  ribbon world vs toolbar/menu world.)

3) And in both worlds – ribbons, and toolbar/menus – you can tap the name of the currently displayed menu/ribbon/toolbar – to make it all go away and maximise screenspace. (Handy for tablet UIs, say.) When it’s like this, you can display Docs, Insert, Format, or Tools, and if you use them, they then go away again, returning you to your desired “maximum screenspace” state. So they’re now pop-ups. (Or if you bring one of them up but then click  on the doc, then you’re saying “back to ribbon mode please”.

(Here’s an animated Powerpoint wireframe of the whole thing. Click wherever you like.UI idea 5a – remember that if you’re a Toolbar person, and bring up the Toolbar, then if you now use one of the menus and pick something from it, you’re returned to the Toolbar being displayed. But if you prefer to use it ribbon-stylee, ie bring up a ribbon/menu then click on the document, it now acts like a ribbon, and ribbons now stay displayed.)

So… It always does what you want, and if it ever did do something that you didn’t want, it’s always just one obvious click to make it go back to what you do want – if you like toolbars, and it’s not there for some reason, click ‘Main toolbar’ and off you go. Or if you like ribbons, and it’s gone away, click the ribbon you want, then get on with editing your document.

A little icing on the cake of course (especially for power users) is that you can swap. So if you’re doing a bit of everyday editing: ‘Main toolbar’. And if you’re doing a load of file-based stuff, say, click ‘Docs’ and get on with it.


Well, by all means tell me what you make of it. But it does let both toolbar fans and ribbon fans continue pretty much as before. It also lets users have the same UI across desktops and tablets – which is great for them (one UI) and is also a major trend in the biz (Microsoft are bringing out a new Windows 8 system soon that, much like Apple’s Lion and upcoming Mountain Lion, will move further towards converging the smartphone / tablet / PC ‘experience’ as people like to call it. That said, Microsoft are plainly going even more down the Ribbon road in Windows 8, with Explorer getting one, so this issue, of lots of people now being used to ribbons, isn’t going away.)