Jungledragon Blog

In this post I will explain the JungleDragon button bar, which is a button bar that applies to an image. I will detail how it works, why it was designed that way and how it was made. Perhaps there is something you can reuse.

How it works

This is  what the button bar looks like below an image:

The button bar is a context menu of actions one can apply to the image above it. Each button has a number of states. For one, there is the invisible state. Perhaps silly to mention, but the button bar will only show a button when it is relevant. This can be based on the authorization of the user, but also the state of the image.

Next, there is the hover state, where a user hovers over a particular button:

There is also a disabled state, for example when a user has already applied the action. An extra explanation is given using a tooltip:

Finally, there is the active state. It looks similar to the hover state but the interaction is different. In this example, the user has clicked the image to toggle zoom mode. Although the zoom button was not clicked, it was activated indirectly:

Design considerations

There are many ways to design a button bar like this, so hereby I will explain my reasoning behind it. We web developers tend to default on standard icon sets such as Silk for our icons. As nicely as those icons look, I still decided to chose a different path, here’s why:

• I believe that content matters most, and that content should stand out, not icons. Perhaps this is a personal preference but I dislike how bright colorful icons curse with an otherwise consistent user interface style. especially when most of your audience will simply view content and not apply any action on it.
• Look at real world icons, such as traffic signs, airport signs and such and you will see that most of them are monochrome, using two colors with a high contrast for optimal legibility.
• Icons are ambiguous. A star icon could mean “rate this” or “add to favourites”. What is the agreed icon for a “history”? To be sure that the user understands the icon, it makes sense to supplement it with text.
• Standard icons sets typically do not have different states (normal, hover, disabled, active).

All in all I believe I had good reasons to go the custom path, so let’s see how it was done.

How it’s made

It’s simple to create a button bar like this, but there’s some interesting clues to share nevertheless…

For one, I did not create the icon illustrations myself. I grabbed them from the jQuery UI theme page. For each icon that I needed, I cut out just the icon (not the box around it) and paste it into my button box template in Photoshop. If that page did not provide the icon I needed, I would use an icon search engine for my needs.

Next, the text. It would be ideal if we could make the icon button text part of the HTML. At the same time, we do not want it to take up too much space. Unfortunately, browsers suck at rendering fonts at such a small size. Therefore, the texts are part of the icon images. In order to make the texts look as clear and crisp as they do at such a small font size, we need to use a pixel font. I used PF Arma Five for it. It is important to realize that pixel fonts are designed for one size only, in this case 8px. Therefore, do not apply any effects on it in Photoshop and do not change the font size.

Finally, integrating the result into the web front-end. The default way would be to simply cut out the images and refer to them in our web pages. However, given the number of buttons and their states, this could easily lead to a dozen or more HTTP requests. An additional problem is that when we do not preload all states, the user may have to wait for an image to be loaded when they hover a button.

This is easily avoided by using a spriting technique. Instead of loading dozens of icon images, I only load one:

Next, I use CSS background image positioning to show the correct part of the icon. The result is a single HTTP request for the entire button bar and no load times for the hover states. If you are new to this technique, I can recommend this introduction.

Main buttons

Whilst on the subject of buttons, I want to share the improved look of the action buttons I use in forms:

It is created using this technique. I love the result. What’s also nice is that the color is controlled in CSS. The shadows and shine effect are an overlay. It also looks the same in Internet Explorer, which is notoriously bad in button rendering. However, there are downsides to this technique:

• The markup is not pure. It uses a href links instead of input or button HTML elements. Unfortunately, there is no other way to make a button look this nice in IE.
• One consequence of not using a normal submit button is that submit behavior that you rely on will stop working. For one, you will have to use Javascript to submit the form upon clicking the link. If Javascript is disabled, you’re out of luck.
• Another consequence is that hitting ENTER to submit a form will not work. A cheap trick to work around this is to include a input button or image of type submit, and make it invisible through styling.

I’m still in doubt about this one. It feels dirty, even though JungleDragon needs Javascript to work anyway. Still, the result is beautiful. Once again it is Internet Explorer who makes the web miserable.

So, what do you think about my approach towards buttons? Do my design considerations make sense?