We have UX technologies like WPF and Silverlight (and of course, Flex/Air/Flash/etc.) that can really push beyond the existing User Interface and Experience with enough flexibility and ease of creation. So as I've said before, it is high time that we start rethinking of the most basic elements of the UI and UX.
Now only a small fraction of this can be wrapped up into a component you can buy from a vendor. No, this has to be done more or less on a case-by-case basis. 3rd party controls can go only so far. Of course, this is why you need a good designer on your team. Sure they are very few right now, especially with WPF, but there are a few good ones. :)
So what am I exactly talking about? Here are a few examples. And while I am aiming for a WPF/XAML implementation, they are more or less platform independent concepts and can be implemented on almost any platform worth its salt.
Don't forget - what I talk about here is only a single angle of looking at things - there are many and the more you explore them, the more customized and more powerful UX you can create for your users.
- Rethinking the Button
- Super Shadow and Physical Focus
- Non-Modal, Connected Status Display
- Real World Simulation
For this part, let's talk about...
Rethinking the Button
The essence of the button has remained the same since way before we had graphical user interfaces. In DOS it was a flat colored rectangle with text on it, in Windows 1.0 it was a rectangle with text on it, in Windows 3.1 it was a beveled rectangle with text on it, in Windows XP it was a nicely shaded rectangle with text on it, and now in Windows Vista it is an animated rectangle with text on it. And this applies to other operating systems as well. Sure, there are small variations here and there - and skinners go far in making unique buttons - but the basic paradigm remains the same.
Few people have been able to come up with new ideas for the button. Many of them failed. But one of the shining examples of such advanced User Experience has been Kai Krause. I’m going to show you a new method of creating buttons that I’ve come to call “Menu Killers”. These are based on some of his philosophies.
For our example, the basic premise is a Product menu system. The required commands are: Open Product Dialog, Add New Product, Add Note, and Configure. These are some of the most typical commands you see in daily programming. Most of the time, these are a row of buttons or a menu. Sometimes even an Outlook-style vertical command bar. But we’re going to do it a bit more graphically.
First we get a designer to come up with icons for each command.
The icon that represents the overall category of these commands, Product in this case, is kept bigger than the rest. The other three icons are about ¼ of that one, and are laid around in a semi-circle on the right hand side (or the left hand side, depending on the language/culture requirements, not to mention Tablet PC's right-handed/left-handed settings!)
The box represents the products and OnClick will bring up the main product dialog (or page, if you’re using a page navigation structure). The plus sign, the note icon, and the tools sign are common and clearly recognizable icons that represent the other three commands. Picking out the most recognizable icons is the important part.
But sometimes visuals are not enough. You can use the tried and trusted tooltip for each button. Or if you want to have something a bit more unique, you could place a label or textblock right under the main icon (the box). The label would, when idle, display the name of the section - “Products” in our case. But when you hover the cursor over any of the other icons the label text changes to show that particular command’s name. The figure below shows the Add Product command being highlighted.
Visual feedback is very important. The user should immediately know what control he or she is targeting. To provide good visual feedback the Opacity of all controls should be dialed down to 60% or 70%. On mouse hover, it should animate (or simply pop) to 100%. Coupled with the text label, it would be ample visual feedback.
This is just one example of using the Menu Killers. If you have more commands, you could form an entire circle of icons around a main icon. If you require a shallow hierarchy, you could have a secondary level of sub-commands as shown in the figure below.
Adding a third level is not recommended. You will also notice that the top level commands are dropped down to 40% opacity when a secondary level appears. This helps identify the hierarchy in a very visual, non-textual way. To add some extra coolness, you could have the secondary level crawl out of the parent icon one by one.
TIP: Always keep your animations quick. Slow animations look cool at first, but in regular usage these lengthy animations become cumbersome. Movement and fade animations should be between 0.25 and 0.5 seconds. Fade out animations can be kept up to 1 second, but no longer than that.
I leave you with a few more examples of how this design pattern can be used in other scenarios. Experiment and you will find many uses for it.
Back / Next
A very simple back next design. The back button is bigger as it is more commonly used.
Locked Network
A network has been locked. The lock icon can be used to unlock it with a password dialog, while the info icon provides more information about the situation. This design demonstrates an overlapped grouping.
WPF CODE
The code used in the "Menu Killer" buttons can be found here.
TO BE CONTINUED... (Part 2: Super Shadows and Physical Focus)