For a Windows Forms application we’re developing at work, we’re using the awesome suite of UI components from DevExpress, which among other things includes an Office 2007 style Ribbon. One thing I am sorely missing about the Ribbons API however, is extensibility. For example, for one Form I wanted to have a some kind of check box list inside a ribbon page group from which the user could select one or more items. The closest thing that the DevExpress Ribbon offers, is the Gallery control. However, it only allows you to create galleries that look like the ones in Office 2007 – for example the Style gallery…

…while what I really wanted, was something like this:

Not one to give up easily, I pushed and pulled at the Gallery control trying to find some way to customize it into what I wanted. In the end I came up with a work-around: Since each item in the gallery consists of a glyph (which is just an image) and a label, I could make the gallery look the way I wanted by rendering a custom Image that showed a checkbox (in either a checked or unchecked state) and text, and use these images as the glyphs for the items in the gallery. All I had to do then, was hook up an event handlers to the ItemClickEvent of the gallery, and swap out the glyph image of the clicked item with one containing either a checked or unchecked checkbox to simulate checking/unchecking an item. In the end, I ended up adding a bit more functionality (buttons for selecting/deselecting all items, grouping of selected items and a selection status icon) and wrapping it all up into a component that can be dropped onto a Form to convert any gallery into a checkbox list:

Its difficult to explain the functionality in words or using static images, so here’s a short video of the custom gallery in action:

I’m quite pleased with how this turned out – now lets just hope the customers like it too :)

Source Code and Demo Project

If you want to have a closer look, then you can download the source code and a demo project here (Note that unless you have DevExpress XtraBars Suite 7.3 or later installed you won’t be able to compile or run the project). It’s a bit rough around the edges still, but it functions perfectly (as you can see in the video!) :)

Designing user interfaces is something that should not be taken lightly, as it is far from trivial to make beautiful, intuitive applications. Take the redesigned Ribbon interface introduced in Office 2007, for example - Microsoft spent tons of time and money on research to get it right - they didn't just go with some random idea that seemed good - they made damn sure it was a good idea:

"So, one of the biggest reasons that we decided to do the new user interface for Office 12 is simply that, for the first time, we have the data we need to make intelligent decisions. Anything we would have done in the past would have been based more on guesswork and bias than on reality. Data is just one input to the design process, of course, but there's something extraordinarily empowering about knowing which commands people use often and which they don't. And knowing which commands are used in sequence with which other commands. And which commands are used 7x more with the keyboard than with the mouse. And how big people's screens are... and how much of the time they use Excel maximized... and how many documents they use at once... and which commands literally are never used... and which are used much more frequently by East Asian users... and on and on..." (Why the UI, part 6 by Jensen Harris)

Obviously, most of us aren't in a position to do the same - in fact where I work we don't even have any designers; all user interfaces are made by us developers. What we can do, however, is learn from the great applications around us and take inspiration from people who have threaded the path before us.

An Apple A Day...

Say one thing for Apple, say that they know how to design user interfaces. And to help developers on their platform to make applications that benefit from this, they've got a document up on their website titled Apple Human Interface Guidelines. Some of it is very OSX-specific, but there are chapters that are worth a read - especially the Human Interface Design Principles chapter, which talks about things like reflecting the users mental model...

"The user already has a mental model that describes the task your software is enabling. This model arises from a combination of real-world experiences, experience with other software, and with computers in general. (...) Before you design your application’s user interface, try to discover your users’ mental model of the task your application helps them perform. Be aware of the model’s inherent metaphors, which represent conceptual components of the task."

...being forgiving...

"Encourage people to explore your application by building in forgiveness—that is, making most actions easily reversible. People need to feel that they can try things without damaging the system or jeopardizing their data. Create safety nets, such as the Undo and Revert to Saved commands, so that people will feel comfortable learning and using your product."

...the importance of modelessness...

"As much as possible, allow users to do whatever they want at all times. Avoid using modes that lock them into one operation and prevent them from working on anything else until that operation is completed."

...and much more. If you find yourself developing user interfaces, on any platform, this is sound advice to take to heart and apply - your users will love you for it!

When it comes to user interface design, there is in fact such a thing as too easy. For instance, Have you ever tried to select a control in the Visual Studio designer only to have the IDE interpret it as a double click, going to code view and auto-generating lots of code? What about trying to double-click a file in the solution explorer, which instead resulted in accidentally moving it into some folder? These and many more similar features often turn into minor annoyances because they’re so easy to invoke accidentally.

Easy, Now!

The obvious alternative would be to make them more difficult to use. For example, the two examples above could be changed so that you had to hold down the shift key on the keyboard while double clicking the Control/dragging the file. However, that would require two hands to carry out the operation and a combination of input devices - that doesn’t sound like an improvement to me, and I bet the HCI guys would balk at it.

Are You Sure You Want To…

A common thing a lot of programs does in order to stop the user from accidentally doing something, is prompting them with a confirmation dialogue. For instance, they will often ask the user to confirm deleting stuff. “Are you sure you want to…” is probably the question programs most often ask their users. I don’t much care for this ‘solution’ – in fact, I’d go as far as saying it’s just a quick and dirty fix to avoid the vastly better (yet more difficult to implement) alternative – the elusive undo functionality.

Let Me Change My Mind, And I Will Change Yours

Let the user do whatever he may choose, but allow him to regret his choices too. Just think about the way you browse the web; you can always hit ‘Back’ if you navigate down some link that didn’t take you where you wanted to go. How would you feel if Internet Explorer or Firefox decided to remove the Back button in their next release? In fact, a major usability caveat for sites that rely excessively on Ajax, Silverlight or Flash is that they break this fundamental interaction principle of the web.

But that’s a digression best left for another time :)