GUI: Colored Buttons - Attributes vs Styles
I like deep GUIs.
What do I mean by that? Here's an example: I like the Apple iphone. In fact,
for the most part, the iphone looks and feels like the kinds of apps I prefer to design. But, maybe that's just my Amiga Computer background leaking out.
By deep GUI, I mean a graphical interface that provides additional
information via visual hints or clues.
For example, in the image below, which button looks more like a delete
action will take place:
The color of the button is not critical to its operation. It's just a
visual aid, much like the syntax coloring you see in a good code editor.
It is what I call a significant visual clue because we as humans
recognize color quite well. It differentiates the button as something
special. If I had just changed the rounding at the corners it would not
be as effective.
IMO, it's silly to ignore this color dimension of our human preceptive
abilities. (If we were cats, then it would be fine.) We should use it - wisely, of course.
Now, assuming that we can change the color of a button, how do we
indicate this in the GUI?
This question is not as trivial as it seems. In R2 VID and in the
default button style of new R3 GUI, you can write:
button "Delete" maroon
That's how I got the button for the image above.
But, some of you strictly-by-the-book GUI experts will recognize that I've
violated an important rule. I've broken the abstraction barrier. In the
line above, I added a visual attribute (maroon) to an abstract concept
(button). It would be like using the B tag in HTML to stress a word. Oh no! It's verboten! Although... a whole lot of people do it... because it's convenient.
You may ask, is that a good practice? My answer would be that it depends
on your application. If you're writing a tiny reblet for some quick project
or to give away to friends on the net, I'd say: no problem. But, if you're
designing a commercial application for an important client, I'd advise for
you to be more disciplined.
More disciplined? What do I mean?
Well, quite simply, you can easily abstract the above into a new style (our GUI subclass) of button.
Which can be defined as easily as:
button-critical: button [
facets: [area-color: maroon]
The advantage is that now all of your critical buttons will be the same
color and you can easily modify all of them in one place, the style
You might have another button defined for Cancel that gives you a
different color indication, and would be written as:
And also, this kind of button need not even contain text, because the
text would be included in its definition.
button-cancel: button [
facets: [area-color: gray]
In conclusion, I think that a good design allows both methods. For the
quick app, users can throw in the color. For more serious apps, define
the style. Just like defining a function, it's easy, and will save you