Through the development of the Localization Server project, I decided that it is important that we use icons instead of boring text links especially that we need to communicate lots of different things and provide action buttons for multiple options in a small space.
We do not (yet?) have a graphics artist to help out here, so it turned out that whatever icon set we choose, there will be some problem with the icons size, the exact set of icons available, their color, and so on. So it occured to me that we have a huge set of symbols already in the Unicode character set which Drupal is using, so why not use those as icons?
GMail's labels, Mint's Peppermill site and others already use a trick to wrap a few tags with specific margins to get a rounded cornered button feel, and putting a Unicode symbol in as text makes for a useful button. It is definitely not as perfect as specially tailored icons, but it allows for a few neat things. Let's see...
- Scalable: Since we are using borders for "rounded" corners, and text as symbols, when you resize text in your browser, your buttons are equally resized.
- Recolorable: With the CSS used in l10n_server, you only need to specify background and text colors in one place, and the buttons are recolorable as you wish.
There are some negatives to admit though:
- Less bytes? Actually, our solution uses three nested tags, so while it does not require an image, it requires this nested tag structure to be repeated when a button is to be added to the page. So it might not consume less bytes compared to using images (when the image is loaded from the local browser cache).
- Limited set of icons? Although the Unicode set allows you to choose from quite different symbols, this set itself is still limited. It cannot be extended in any way, and in fact, local font availability might not be so rosy. We also had some issues with one Windows machine not having a proper Unicode font to use, but thankfully documented a solution for the problem. Telling website visitors to install fonts to use a site is a no-go. In our case, the project is a web application, so the situation is a bit different (and we found that there is no need to install fonts in most cases with the dingbats I picked).
While this will probably not be the last interface iteration of the module suite, the Unicode text buttons seem to work well for now, and allow us to make progress, starting to use new symbols as needed quickly. Sample code from the CSS we use:
.l10n-button {
line-height: 1.8em;
margin-right: 5px;
cursor: pointer;
}
.l10n-button b {
/* These four properties are to be customized as needed */
background-color: #3a79aa;
border-color: #3a79aa;
color: #fff;
font-weight: normal;
/* --- */
border-style: solid;
border-width: 1px 0;
margin: 0 1px;
padding: 0;
}
.l10n-button b b {
border-width: 0 1px;
margin: 0 -1px;
padding: 0 5px;
}An example customization for our approve button which is in a nice shade of green:
.l10n-button.approve b {
background-color: #096;
border-color: #096;
color: #fff;
}Finally, this is the HTML we use to achieve the green checkmark look. We mix the default button look with our approve button customization and add the checkmark symbol with a Unicode entity.
<span class="l10n-button approve"><b><b>✔</b></b></span>Side note: this blog post showed that how valuable it is to blog about one's voluntary work. While I was writing this post, I noticed quite a few things to optimize the used CSS and HTML code, so that become even better at the end.
Colors and Unicode charaters
Using Unicode characters is a very good idea and will indeed enhance the overall look of any project. However, I think that you are using too many colors. In your screenshot I count 5 button colours!
We do not need to use that much colours, unless the icon chosen is not understandable or confusing.
I would suggest using only 2 colors, and if possible, why not using a single color for all buttons?
colors and shapes
Well, the shapes on the icons are not as distinctive, especially, when you try to do work quickly. I'd suggest converting the image to grayscale and comparing the interface effectiveness.
The default colors are the white on blue buttons, as most buttons are colored. Then we have disabled buttons, which are stuff that you no clicking would have any effect on. It is pretty standard UI practice IMHO to have these grayed out.
Then we have that marker which signifies suggestions being available. This is not a button, so we probably should not use the same look for it. How to deal with this is still to be defined. Finally the suggestions have their action buttons which decline or approve suggestions. These /don't/ have confirmation steps, so if you click on any of them, that action has some consequences right away. All the other buttons are without immediate database change effects.
All these are explained in tooltips on iconic buttons, but we only have a static picture above, so that's why I am telling.
I hope to improve on the user interface soon, and this might not be the final interface. I am definitely looking for suggestions for improvement, that's why I have taken the time to explain the meaning of the buttons.
Colours and shape
I agree, disabled buttons should be grey. I missed that while looking at the static picture. I knew about the blue and white ones being the default view.
However, I still think that there are too many colours (here I don't count the disabled one). The (x) and (√) buttons do not need to have red and green background. They could easily use the same blue and white colours, or use a pale shade of blue, if we really need a differenciation.
As for the markers, which I did not knew what they where, they should not use the same shape and colours.
I understand that this is a work in progress and I applaud the use of Unicode characters. I also love the way you managed to create rounded corners for these without using any images.
Fewer bytes is less important than fewer HTTP requests
The unicode buttons have the distinct advantage that they don't create additional HTTP requests in the background as more images are requested. Great approach!
Great idea, but ...
Having a dedicated icon set for buttons (and actions) is a great idea. And yes it's true we could/should ask for help of professionals (icon designer, usability professionals). Why? Because adding icons without any label could be "dangerous". Having misleading pictures, colors or shapes could eat up the entire usability advantages we try to accomplish. Icons, their color, shape and images are as international as pure text. And being Drupal, a very popular software product, used by millions around the world, we have to consider our user base, their background and knowledge.
As far as I'm into this topic, it's very difficult to create a proper
iconography for an international product/market.
Why not create a standard, public Drupal icon set? There are at least two attempts I know of. One is from the lullabots and the second is the iconify module from morten.dk.
Even we would decide not to go with them there are hundreds of great artists we could ask to create a basic icon set.
And what do you we do if you don't find the "right" icon in Unicode?
Having additional HTTP requests is not a case. There is a nice technique called css sprites* where you add all (Drupal system) icons to one image. The selection of individual icons is done with basic CSS. So we would add very few (one!?) more HTTP request to load the sprites.
As a conclusion. I'm 100% pro icons, but we have to do it right.
Mike
Link: ALA Aricle on CSS sprites
not Drupal scale
Well, my experiments are far from being on the Drupal scale, I am not adding icons to Drupal core, neither I am suggesting that :) I am definitely not the right person to design icons, that's why I stepped back and looked at my options to get something good looking, without designing icons (while I fully believe that properly designed icons can do a lot more good to the application, and although that might not be quantifiable as the number of HTTP requests, it could add much more value to the application). I can join the dreaming about all-catching Drupal icons, but I needed something right now, and cooked up what we have as documented above.
Extension...
Checking Drupal Groups today I found a very interesting posting. Some members of the Designers and Information Architects Group are also thinking about a Drupal icon set. As a first step they collected a nice topic overview.
Link: http://groups.drupal.org/node/7809
I think this will be a nice foundation for some next steps.
Unicode support
Cool concept, I like the idea of using Unicode symbols for design!
Unfortunately, the varying levels of support by web browsers and operating systems will make it difficult. As far as I can see, the level of Unicode support depends on which fonts are installed on the system, and this varies greatly. Having a question mark or a blank box instead of the intended icon is not good for accessibility.
From the Wikipedia article on Unicode and HTML:
"The relationship between Unicode and HTML tends to be a difficult topic for many computer professionals, document authors, and web users alike. The accurate representation of text in web pages (...) is complicated by the details of character encoding, markup language syntax, font, and varying levels of support by web browsers."
"Many browsers are only capable of displaying a small subset of the full Unicode repertoire."
"Older browsers might have problems displaying characters referenced with hexadecimal numbers — but they will probably have a problem displaying Unicode characters above code point 255 anyway."
Too bad, because I really liked this approach. Maybe CSS sprites is the way to go then? You could always make a sprite map of Unicode symbols, if you don't want to design icons.
Unicodinator is a tool to visually search unicode
This tool can help you find unicode icons http://unicodinator.com/