Jonathan has posted 7 posts at DZone. View Full User Profile

UI Oddities #2 – NetBeans

08.04.2010
| 5396 views |
  • submit to reddit

Todays UI oddity is small, but important, and it’s something that has irked me ever since I started using NetBeans (when I joined the JavaFX team last year). Despite me picking on NetBeans here, this problem is common in many applications, and largely goes ignored or unnoticed by developers. I wanted to point it out as it is a very easy UI crime to commit, and one that can sometimes take a lot of effort to fix. Fortunately, in the cases below it would be trivial to fix.

In NetBeans you often get dialog windows like the one shown below. The problem is simply that the header area has a 1 pixel wide gray border around all four edges. This looks nice to delineate between the white of the header and the light gray of the main content area, but it looks really bad on the north, east and west sides of the header. Fortunately this is easily fixed.

To back up my point, look at the screenshot below, which is again NetBeans, but a different dialog without the additional border on the north, east and west sides of the header. In my opinion it looks considerably cleaner:

The only negative aspect is that the two border colours differ between the top dialog and the bottom dialog, but this again is an easy fix and just a matter of defining the default colour for header borders.

Finally, I wanted to point out another common example of bad borders, and was fortunate enough to find the following screen in my NetBeans install:

This screenshot nicely shows the problem of nested borders. Look at the centre ‘Expanded Text’ tab. Inside this tabbed area is a rich text editor with its own border, but it is also wrapped within the border of the tabbed area. This looks untidy and cluttered. It’s also worth nothing that the space between the inner and outer borders differs on each side. In my opinion the inner border (the rich text editor border) should be removed in this circumstance. It would lead to a visually less cluttered and cleaner dialog in a small way.

So, in summary, be careful of borders in your software. It’s very easy to put components together and not really notice that borders are being duplicated like this. Finally, even though this is a NetBeans UI Oddity, it’s very common all across the software world, so I’m not picking on NetBeans here :-)

From http://jonathangiles.net/blog/?p=867

Published at DZone with permission of its author, Jonathan Giles.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Harris Goldstone replied on Thu, 2010/08/05 - 1:07am

Did you create a bug report or enhancement request to fix this?

Wai Ho replied on Thu, 2010/08/05 - 8:22am

Since he join the JavaFX team (that's what he says above), he's in the same organization as NetBeans. So, he can probably fix these things himself...

Behrang Saeedzadeh replied on Thu, 2010/08/05 - 8:42pm

Nice catch! It's great to see that NetBeans has a pixel ninja now on board. A long time ago I started fixing NetBeans' LnF in OS X using MacBeans: http://my.opera.com/behrangsa/blog/macbeans-0-1-released Fortunately the NetBeans team started addressing the issue shortly after, but NetBeans still needs a lot of suchlike minor but very important GUI imporvements to look more solid and professional.

 

Hantsy Bai replied on Thu, 2010/08/05 - 11:05pm

I think NetBeans team does not care about the UI problem, if u switch to Metal theme, u will find the UI compoent is very different in some windows.

I have report some UI style problem of the progressbar(and beg to provide united UI to all progressbar), but no response now.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.