Skip to main content

Listening to the users part III - theme transitions

Posted by kirillcool on May 31, 2007 at 9:31 PM PDT

It all started with a simple request - have Substance not paint rollover state on buttons. I could have dismissed it by simply saying that this goes against the library design, and having one request in 2+ years that the library exists hardly justifies additional setting (making the implementation more complex, the documentation more verbose and in general going further down the wrong side of the user happiness curve). However, going into further dialog about why exactly is this feature needed, uncovered much more serious problem that needed to be addressed.

For most applications, people prefer subdued colors, and there's only so many variations of saturation and brightness that you can play with to distinguish between possible states of controls. In general, there are four different flags on a button model for "active" state - rollover, select, press and arm (the last one is relevant for the menus). And now, you find yourself with much more states that you can reliably handle with only one color scheme (rollover selected, rollover unselected, pressed selected, pressed unselected, selected, and you can even go further into pressed selected rollover and pressed selected non rollover). And this is really what has been bothering my user - being unable to distinguish between a selected and rolled over toggle button, especially on such a low-saturated theme as orange of Office Silver.

The Office itself solves this problem by using more than one color scheme for active (rollover / selected / pressed) states. A selected toggle button is painted orange, a rolled over toggle button is painted yellow and a selected and rolled over toggle button is painted dark orange. Starting from this, i spent the last five weeks completely rewriting the entire background painting, including support for custom themes for every component state and proper animations between the states. Here is an example of state transitions under the new implementation of Office Silver skin. The right column shows the model state at each moment, and you can follow the color transitions from selected (light orange) to selected rollover (dark orange) to pressed selected (reddish orange) and back to rollover unselected (orangish yellow). Note that on the checkboxes and radio buttons, the transitions also involve animating the color of the checkmark:

But why stop at animating the background color only? What if you want to have black text on light background in a regular state, but light text on dark background in an active state? You should animate the foreground color as well to provide the smooth and pleasing visual transition - and this is what is done in the brand new Nebula skin which uses the colors of the Nimbus LAF (except the brown colors of the progress bars). Watch what happens when the buttons are pressed:

Note that the transitions apply not only to the "traditional" button controls such as push buttons, toggle buttons, check boxes and radio buttons, but to much wider range of controls - tabs, sliders, scroll bars, menus, menu elements etc. In addition, the same settings apply for rollover and selection effects on lists, tables and trees. Looking back, it has been a great feature request from the user. Thanks, Greg.

Related Topics >>