Using DevExpress controls to get a great looking UI

Mark Miller has been honing and refining his talk The Science of Great UI for a while now, and I've been privileged to see him in action presenting it several times. Every time he does it, he adds something new (or takes away something old) so it's always fresh, relevant, and up-to-date. Luckily for all of us, he's writing a series of blog posts here on what to look for in a well-designed screen so that we can all understand what's good or bad about a particular user interface or user experience.

Heck, even I'm learning the ability to "see" what's good or what's bad, and am applying it to my own website as well as critiquing the various visual aspects of DevExpress' controls, frameworks, and — next week — the new website.

For fun — and also because, apart from a blog post a while back which showed off the feature with a set of "ransom demand" images, we haven't talked about our options for formatted text in our WinForms controls — I decided to mock up a configuration dialog that follows a couple of the principles that Mark talks about in his series: Clarity and Information Relevance. I'll use the formatted text feature to show this off.

The config dialog I decided to use as a basis for my experiments was a panel from Adobe Photoshop that deals with Image Settings.

First thing to do, is to decide on the colors. Since I want to be consistent in the color scheme (and don't have time to do a full skin), I decided on three colors (all RGB):

• Background: 223, 223, 223 (a light gray, like the original)
• Foreground: 80, 80, 80 (a dark gray, but now it's done, I think almost too dark)
• Bolded foreground: 16, 16, 16 (almost black)

Second, which font? I went for Calibri 10pt this time.

Then it was a case of dropping controls on the form, turning off the look-and-feel options (and setting the style to flat). Obviously, for a blog post like this, I don't have the time or resources to mimic the exact look of the original, especially with the track bars, but that's not what this is about.

For the first check box, I set the Properties.AllowHtmlString option to true and then set Text to this:

<color=0x101010><b>Zoom</b></color> and
<color=0x101010><b>Crop</b></color> photos to fill grid cells.

Notice that for the bolded words, I'm setting both the color (the bolded foreground from above), and also the bold attribute.

The Text property for the other two check boxes looks like this, again explicitly setting the color and bold for the words with most relevance.

<color=0x101010><b>Stroke</b></color> photo border
Cast a <color=0x101010><b>Shadow</b></color> behind images.

Note also the way the original designer not only bolded the relevant words, but also capitalized them for that extra bit of emphasis.

Again, because of time constraints, I just used one of the built-in styles for the check box itself (Style4), rather than going for the Mac-looking check box of the original. Unfortunately, it's a little "heavy" for my taste.

The rest of the dialog was just a case of dropping items on the form and setting the colors and font choices. Not having a dial control, I left out the final angle setting.

I think there are two points to take away from this. The first one is about information relevance or clarity. Not everything in this config panel is equally important. The end-user, on being presented with this, is not really interested in the nice English text but is instead interested in the almost-black words and data. At a glance, we can see Zoom and Crop is off but Stroke and Shadow are on. We can see the values for opacity, offset, and radius immediately. The rest of the form just blends into the background (it's lower contrast), but is still very legible if we really need to read it.

The second point is that we need to update some of our look-and-feel .

Free DevExpress Products - Get Your Copy Today