Here’s one:
The form above is an absolute mess. The colors are bad, needlessly distracting your attention from the task at-hand. The controls are misaligned, and the tab order is not ordered at all (you’ll have to trust me on this one – I moved some controls around after saving the form, and forgot to reset the tab order – have you ever done that?).
What’s with the navigational overload at the bottom of the form? Sure, tooltips help the user know what the buttons do, but come on!
A standard Windows icon in the upper-left corner tells me that no icon was assigned to the form, and (though you can’t tell from the screenshot) the maximize button and close button are both disabled.
How do you close the form? With the close button in the navigation area, of course!
Any guesses as to which button is the close button?
Even worse, I copied the style for the form shown above from an actual online tutorial for building Visual FoxPro applications!
Here’s another ugly form from another ugly app. This one is from one of my apps. I figure if I’m going to point out other ugly apps, I should be fair and point out my own as well:
Not nearly as bad as the form in the earlier image, is it?
- It’s got an icon.
- It can’t be resized, minimized or maximized, but that’s OK – after all, at least the minimize and maximize buttons have been removed, right?
- The tab order is set properly, so no problem there.
- The “Read more about Quick Add” uses the Windows color for a link, and when you click the link it opens the help file to the correct entry.
- Once some search terms and a search name have been entered, the Search button becomes enabled. This prevents me from prompting the user with a MESSAGEBOX(), alerting her to the need to enter a phrase, etc.
Overall, I thought the form had a nice “Windows 7-feel” to it. Professional, polished, functional. Sweet!
But, within three days I heard from a customer, complaining about how ugly it was (you may need to click on the image to see it full-size):
See the title bar? The user has told Windows to set the dpi to 150% (or 144 dpi), possibly because she has a super-large monitor and just wants the text to appear larger. Or, maybe she has sight problems and needs the text to be larger.
Windows did its job and made the title bar and close button larger, but the rest of the form is a little blurry. This is because Windows 7 used DPI Virtualization to draw the form. DPI Virtualization makes the form bigger, but can cause the objects on the form to “blur” if your app is not DPI-Aware. I’ll discuss DPI-awareness later in this series.
Still, there’s something really ugly about this form. Have you noticed it yet? Let’s take a look at the next screenshot:
Windows XP, Vista, 7 and 8 all include the high contrast themes, for accessibility reasons.
If you do not design for all possible Windows themes, you may will eventually get a support call from someone who uses a high contrast theme. I mentioned in an earlier post that beauty is in the eye of the beholder – when we add accessibility into the equation we move beyond beauty right into functionality.
It is much easier to design for high contrast themes and higher DPI settings upfront than it is to redesign later.
What’s ugly to me may be beautiful to someone else. Or, what’s beautiful to me may be ugly (or unusable) to another.
“Beauty, like supreme dominion, is but supported by opinion.” – Benjamin Franklin, Poor Richard’s Almanack (1741)