Removing visual noise from tables and scroll panes

January 19th, 2008

I am not a professional designer, but i’m always ready to learn from people who have a finer eye and more experience than me. Last week i posted a screenshot of the newly redesigned enterprise application from Lawson (designed by frog design). As i hinted in that entry, some of the visuals are planned to be added in the next releases of Substance look-and-feel. Well, you don’t have to wait too much, at least for one of the visuals of this application.

First, here is a screenshot of the table component from that application:

and here is the table design from Nimbus:

There are a few interesting and subtle details here, all contributing towards very clean and elegant visuals of a table wrapped in a scroll pane:

  • Continuity of the table border and scroll bar border
  • Continuity of the table header, extending to the top-right corner of the scroll pane
  • Continuity of the striped background
  • Continuity of the selected background

Let’s see how such a table looked like in the previous Substance release (4.1 code-named Lima):

Non-native font rendering aside, there are quite a few problems:

  • Even though the table grid is turned off, there are still white separator lines clearly visible on striped rows and especially on the selected row
  • Too many lines on the table header – each cell has its own border
  • Extra border to the right of the scroll bar results in additional visual noise
  • The selection background doesn’t extend to the perceived table bounds on both sides

So, how does it look under the latest 4.2 drop that is scheduled to be the RC build if no bugs are found until Monday?

This addresses quite a few of the issues (continuity, borders, background, scroll pane corner component, native text rendering), and the end visual result is much cleaner. And here is the same table under right-to-left orientation:

Still few things to be addressed in the RTL mode, such as the location of the sort icon and the alignment of the default text renderers.

How does Substance fare against the competition? The same application under Nimbus from the latest 6.0u10 drop (obviously it is still work in progress):

While largely faithful to the design, there’s the off-by-pixel discrepancy where the table header meets the scroll bar, wrong foreground color of selected cells and too little vertical space for the rows (see how the icons “touch” the rows above them). The RTL mode breaks the visuals of the scroll bar and introduces more off-by-pixel’s in table header and scroll bar:

How about Synthetica? Here is the same application under Synthetica Blue Ice:

It has most of the same issues as Substance did in version 4.1, including the extra white lines on selected row, double border on the right hand side of the scroll bar, table header that doesn’t blend with the outer border and too little space on the left hand side of header cells. The RTL mode doesn’t have additional problems:

The Substance screenshots above were taken under the Nebula skin which uses some of the color schemes from the Nimbus design. Obviously, the same visual noise reduction applies to all other Substance skins. Here is the same application under the Business skin:

and the RTL mode:

These changes are available in the latest 4.2dev drop of Substance. The release candidate is scheduled for January 21st (this Monday) and the release is scheduled for February 4th. If you find any bugs, you can post a report on the project mailing lists, issue tracker or in a direct mail [kirillcool yahoo com].