Removing visual noise from tables and scroll panes

January 19th, 2008 | 9 Comments »

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].

Related posts:

  1. Improving decoration area support for lists, trees and tables in Substance The decoration areas in Substance look-and-feel are, in my view, one of the more powerful...
  2. Validation overlays using layered panes As shown in the previous two entries, glass panes have a few disadvantages that might...
  3. Glass panes and lightweight popup menus Matt Nathan has asked an excellent question in the comments section of the “Validation overlays...
  4. Using visual UI designers If you ever needed an argument against using a visual UI designer that enforces any...

9 Comments on “Removing visual noise from tables and scroll panes”

  1. 1 Pierre said at 11:54 pm on January 19th, 2008:

    Thanks Kirill, that’s very slick!
    Just curious though, why does the nimbus screenshot at the top of post seem to be devoid of all the “problems”?

  2. 2 Mikael Grev said at 2:08 am on January 20th, 2008:

    Excellent Kirill! You are designing better and better stuff, and this is really good! :)
    Also, I really wish that Nimbus would stop with the multi stop gradients (e.g. header gradient) . Hot in 2006, not hot now… ;)

  3. 3 wzberger said at 2:53 am on January 20th, 2008:

    Hi Kirill,

    first of all thanks for the good article.

    Some Synthetica related hints:

    The displayed table border is the default border for scrollpanes. The border appears when switching from one theme to another without an application restart. On an initial application start with Synthetica the correct table border appears.

    The wrong (scrollpane) border appears because JTable statically installs the border through the “Table.scrollPaneBorder” key. But because the border is an UIResource, on a LAF switch the original scrollpane-border will be reinstalled. A possible workaround is to override #updateUI:

    JScrollPane scrollPane = new JScrollPane(table){
    @Override
    public void updateUI(){
    super.updateUI();
    setBorder(UIManager.getBorder(“Table.scrollPaneBorder”));}
    };

    Another tip which can be used to display the upper right corner as table header:

    JTableHeader th = new JTableHeader();
    th.setTable(table);
    tableScrollPane.setCorner(JScrollPane.UPPER_TRAILING_CORNER, th);

    Cheers,
    Wolfgang

  4. 4 wzberger said at 6:45 am on January 20th, 2008:

    Related to spacing I’m not quite sure if it is a good idea to remove white lines by default because the same effect can be reached by setting the intercell spacing (JTable#setIntercellSpacing()) to zero dimension. So

    table.setIntercellSpacing(new Dimension(0,0));
    table.setShowGrid(false);

    removes the complete grid. Doesn’t matter if rows are selected or not. On the other hand it’s useful to display horizontal lines only for multiple selected rows.

    //don’t display grid but show horizontal lines when multiple lines selected
    table.getColumnModel().setColumnMargin(0);
    table.setShowGrid(false);

    Currently I think it’s better to let the user decide on how grid lines appear and to avoid to differ from the attitude of existing look and feels like Metal. If not, doesn’t this mean that you have to add extra lines of code within an application to support Metal and Substance?

  5. 5 Kirill Grouchnikov said at 11:45 am on January 20th, 2008:

    Pierre – the first screenshot of Nimbus is not a screenshot of an actual application (at least not under Nimbus LAF). It is the design that drives the development of Nimbus, and was most probably done in Photoshop or in another tool.

  6. 6 Kirill Grouchnikov said at 11:55 am on January 20th, 2008:

    Wolfgang,

    1. I’ve updated the screenshots to show what Synthetica installs as a default LAF. It still results in double border on the right-hand side, but now it is less visible (no white space). And I don’t completely agree with you about the behavior of “Table.scrollPaneBorder” – the screenshots of Substance show how it looks like *after* switch from Metal at runtime. Since a LAF should mark this property as UIResource, the new LAF is free to uninstall the old border and install its own. The trick is how to make the scroll pane border blend in with the scroll bar and the viewport so it appears as one. You can see the source of SubstanceScrollPaneUI / AdjustedLayout / SubstanceScrollPaneBorder.
    2. The top-right / top-left scroll pane corner is installed in Substance internally, without the need to the application to do it explicitly. So, it is possible to do so in LAF, and you might consider doing so in Synthetica as well if you agree that this results in better visual appearance.
    3. This specific application doesn’t have any LAF-aware grid settings. All it does is to call setShowGrid(false). It doesn’t play with column margin or intercell spacing.

    Thanks
    Kirill

  7. 7 Kirill Grouchnikov said at 3:55 pm on January 21st, 2008:

    Mikael,

    Thanks for the kind words.

    Kirill

  8. 8 Pedro Duque Vieira said at 9:54 am on January 22nd, 2008:

    Hello Kirril,

    Once again, good work on substance it just keeps getting better and better.

    Looking at the application from lawson I think some things are still missing:
    * selected line:
    + selected line has a border
    + nice gradients

    * column separator:
    + separator between columns on list content is the same has the separator of headers
    + good looking separator (instead of plain single line)

    * All borders/separators are very smooth

  9. 9 Kirill Grouchnikov said at 10:04 am on January 22nd, 2008:

    Thanks, Pedro

    The work has only started :)