Tuesday Nov 13, 2007

Designing a Color Scheme for Netbeans 6.0

Stepan Doubrava is an interaction designer located in Prague, Czech Republic. He is currently working on improving the user experience for SunStudio and other developer tools at Sun.

As NetBeans began to be a multi-language IDE, we realized it was necessary to make all the syntax highlighting in different editors visually consistent. While creating this new color scheme, I came across several different, and sometimes contradictory, requirements:

  • Lots of colors were needed for different tokens, but not so much as to make the editors look like a crazy fruit salad.
  • The colors needed to be bright and contrast enough so one could recognize the colors on various monitors, but not so bright as to irritate developers who stare at it the whole day.
  • A balance was needed between highlighting everything for expert users, or only the most important tokens for less experienced users, so that everyone could remember the meanings of all the colors.
  • The amount of bold text needed to be reduced due to it's poor readability while keeping the visual structure of the code.

As expected, I came across numerous arguments, where everyone had their own opinion on proposed colors and was eager to share it. In the end, though, we were able to agree on several points.

Here are some of those points and concepts that made it into the current design:

  1. All the spots requiring user intervention are wavy underlined. Errors (red underline), Warnings (yellow underline), Unused fields (gray underline), Deprecated (should have been brown underlined but I had to use the old syntax (black stroked) for deprecated as a trade off for the developers to accept the gray underline for unused fields. I am hoping to bring it up again in the near future.)
  2. Embedded or inactive content has a different background color. For example in HTML, code snippets in JavaScript or CSS Styles are in a sense embedded, therefore highlighted with a different background color as well as guarded blocks in Java.
  3. The selection has a light blue background but the selected text doesn't change its color.

Unfortunately, items (2) and (3) in some sense clash in the current implementation, because when embedded content is selected it has a blue background, which was different from the original intent of showing the original background + blue ... Hopefully we can improve this for the next release.

In the longer term, I believe the concepts used for these design decisions should be reviewed to address the points where we compromised, which would further fine-tune the implementation.

About

xDesign is a software user experience design group at Sun.
Follow us on Twitter : Flickr : Blog (see feeds below)

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today