November 2nd, 2009

Control alignment in Substance 6.0

Last week i have written about improving the visuals of text components, comboboxes and spinners in the 6.0dev branch of Substance look-and-feel library. Today, it’s time to talk about the micro-design of these components – aligning perceived boundaries, text baseline and other visual elements of user input controls.

I have started looking into the precise micro-design around three years ago, with the main inspiration coming from JGoodies Looks library developed by Karsten Lentzsch. The micro-design looks at how the controls look like when they are placed next to each other – do they have the same perceived height, are the texts aligned on the same line etc. While these issues do not directly affect the business functionality of your application, they most certainly contribute to the overall polish and end user experience. Since then, the work in Substance has grown into complete support for resolution independence – scaling the entire visuals of all supported controls based on the current desktop font settings.

With the recent redesign of the visual appearance of user input controls in the next Substance release, there were two major changes that required revisiting the implementation:

  • Uneditable comboboxes now have appearance identical to that of buttons. This means that the button visuals should now be micro-aligned with those of comboboxes and, by extension, with those of all text based controls.
  • Editable text based controls have double borders. The outer border is lighter and blends with the container, and the inner border is darker, creating the inset look. The perceived vertical bounds of these controls is delineated by the inner border.

Let’s look at a few screenshots. All the screenshots in this entry will show the same collection of controls – text field, formatted text field, password field, spinner, editable combo, uneditable combo and a button. Here is how these controls look under the latest 6.0dev drop of Substance:

https://substance.dev.java.net/release-info/6.0/alignment-substance-business.png

And here is the same application, with grid lines delineating the perceived bounds of the controls (red) and the text baseline (green):

https://substance.dev.java.net/release-info/6.0/alignment-substance-business-overlays.png

Here, the perceived bounds and the texts are perfectly aligned. It’s important to note that the actual bounds of text fields as compared to that of button is different – the text field is two pixels higher than the button. However, since those two pixels are painted with a color much closer to the containing panel background, the perceived bounds of the text field is defined by the inner darker contour.

This visual alignment is consistent across all Substance skins. Here are the controls under Dust Coffee:

https://substance.dev.java.net/release-info/6.0/alignment-substance-dustcoffee.png

https://substance.dev.java.net/release-info/6.0/alignment-substance-dustcoffee-overlays.png

and Graphite:

https://substance.dev.java.net/release-info/6.0/alignment-substance-graphite.png

https://substance.dev.java.net/release-info/6.0/alignment-substance-graphite-overlays.png

Now let’s see how Substance 6.0dev fares against other core and active third-party look-and-feels – all under Windows Vista with the font settings specific to the relevant look-and-feel.

We’ll start with the default Metal / Ocean:

https://substance.dev.java.net/release-info/6.0/alignment-metal.png

The guider lines highlight the problematic areas:

https://substance.dev.java.net/release-info/6.0/alignment-metal-overlays.png

Button is one pixel taller than combos, and combos are quite a few pixels taller than text fields / spinners. Also, even though technically the bottom spinner button is aligned with the bottom edge of the spinner, the perceived alignment is off by one pixel (since the colors used on these two parts have inverted brightness). Finally, the dot characters of the password field appear to be 1-2 pixels too high.

Let’s look at the native Windows look-and-feel:

https://substance.dev.java.net/release-info/6.0/alignment-windows.png

Apart from the archaic usage of Tahoma 11 (and not the platform Segoe UI 12), there are two visual problems. The top border of the spinner control is cut off (see UI guidelines for the correct visuals), and there are extra pixels around the corners of the uneditable comboboxes. Let’s look at the guider lines:

https://substance.dev.java.net/release-info/6.0/alignment-windows-overlays.png

The text baselines are perfectly aligned, and the only issue is the one-pixel difference in the height of button and combo.

Let’s look at Nimbus – the new addition to 6u10+.

https://substance.dev.java.net/release-info/6.0/alignment-nimbus.png

Before looking at the guider lines, notice how the bottom edge of the arrow button on the editable combobox does not visually align with the much lighter bottom edge of the control itself. The visual result is that the button looks much heavier, appearing to “hang” off the right side of the control. The same applies to the bottom edge of the spinner. Let’s now look at the guider lines:

https://substance.dev.java.net/release-info/6.0/alignment-nimbus-overlays.png

Here, the controls heights are inconsistent. While the button has the same height as the text fields and spinners, the comboboxes are two pixels shorter. Also, the star characters on the password field appear to be 2-3 pixels too high.

Now let’s look at JGoodies Looks. First, the Plastic XP skin:

https://substance.dev.java.net/release-info/6.0/alignment-jgoodies-plasticxp.png

The guider lines show that everything is pixel-perfect:

https://substance.dev.java.net/release-info/6.0/alignment-jgoodies-plasticxp-overlays.png

Now let’s look at the Plastic skin:

https://substance.dev.java.net/release-info/6.0/alignment-jgoodies-plastic.png

Here, most of the texts appear to be too low, and this is confirmed by the guider lines:

https://substance.dev.java.net/release-info/6.0/alignment-jgoodies-plastic-overlays.png

Note how the button text baseline is one pixel higher than the rest.

Finally, let’s task a look at Synthetica. We’ll start with the Base skin:

https://substance.dev.java.net/release-info/6.0/alignment-synthetica-base.png

Overlaying the guider lines:

https://substance.dev.java.net/release-info/6.0/alignment-synthetica-base-overlays.png

Shows that the button is 2 pixels higher than the rest of the controls. However, everything else looks perfect, including the bounds and text baseline.

Next, the newly added Black Eye skin:

https://substance.dev.java.net/release-info/6.0/alignment-synthetica-blackeye.png

Let’s overlay the guider lines:

https://substance.dev.java.net/release-info/6.0/alignment-synthetica-blackeye-overlays.png

Here, we can see that the button is much taller than the rest of the controls, and the spinner is 2 pixels shorter than text fields and combos. Also, the star characters of the password field appear to be 3-4 pixels too high.

The last skin to analyze is the Orange Metallic:

https://substance.dev.java.net/release-info/6.0/alignment-synthetica-orangemetallic.png

And the guider lines:

https://substance.dev.java.net/release-info/6.0/alignment-synthetica-orangemetallic-overlays.png

Here, we can see that the buttons are taller than the combos, and the combos are taller than the text fields and spinners. Also, the star characters of the password field appear to be 3-4 pixels too high. Finally, the button font is bold, while the rest of the controls use plain font.

If you’re interested to see what Substance 6.0dev can bring to your application, take it for a spin. Stay tuned for the next entry which will talk about control alignment in Substance across different font sizes.