Monday, June 30, 2008

Form Symbols

I am re-working Apache Cocoon Forms framework at the moment, mainly upgrading it to use the new features of Dojo 1.1 but also taking the opportunity for a bit of a cleanup.

One thing I am looking at, is the three symbols that can sit beside form fields :
1. the field-error marker (currently uses an exclamation mark, don't like it, not visually strong enough)
2. the field is required marker (currently uses an asterisk, OK, I suppose .....)
3. the field help marker. (currently uses an icon, one of mine I think, a bit ugly)

I am trying to decide between two different approaches, and you may be able to help me decide .......

The typical approach (the one used extensively by Dojo) would be to have graphical icons as the background of a tag, turned on and off as appropriate by toggling the 'display' css property.

This is all and well, but TBH I am not such a great icon maker, not all of the ones I need are included with Dojo, I do not want to rip off someone's copyright by mistake and infect Cocoon with it.

I also reckon that these kinds of symbols are culturally-specific, hence should be controlled by the locale of the client.

So my alternative approach is to use characters from Unicode.
The characters I have chosen display fine in MacOSX, but I realise they might not do so under Windows or Linux.

So, you could help in two ways :
1. Do these characters display properly on your platform?
2. In the context of a latin language, do they convey the right meaning?

1. field error (name: High Voltage Sign)
2. field is required (name: Black Star)
3. field help (name: Circled Latin Small Letter I)

Please let me know what you think in the comments.
Many thanks for your feedback.


Dave Brondsema said...

The high voltage unicode doesn't render for me in Windows using FF or IE. I'm part-way through reading Web Form Design which I would highly recommend if you want to make good decisions about form UI. A few thoughts: make it flexible so that you have good defaults, but anyone making their own form can do it differently since it may make better sense for their site/form to do it differently. From the book (and it makes a lot of sense to me), to mark a field as required, an asterisk is very common.. almost a de-facto standard. It's smaller and less obtrusive than a large symbol, too. I haven't gotten to chapters in the book yet about errors or other info, but my thoughts are: for errors change the color of the field to red (red is a common indicator of error). For help, if help is necessary include it inline in a small font or off to the side. If it's not necessary, don't include a help button. In almost all cases, I think the label would probably be sufficient.

Jasha said...

Isn't the ! used frequently as a warning sign? For field errors combine it with red text (not suitable for colour blinds, but 95% of the people isn't).

A * for a required field is very common. I think most people are used to it.

For help make a ? inside a circle. The i can be used for most (or maybe all) European languages.

Just my €0.02.

Jerm said...

Thanks for your useful comments guys : )

What a shame High Voltage does not render on windows. Does this alternative work? : ⚐ (White Flag).

Yes, you'd be able to change the default characters (for every language you supported).

Unfortunately, Jasha, I can find no ? inside a circle in Unicode : )

In Cocoon Forms there is existing provision for the following 'decoration' on fields (all of them optional) :
1. a required mark
2. a hint
3. a help icon
4. an error message

As I am upgrading Cocoon, I must implement all of them, so I need a generic solution for each.

(1) has typically been a blue * to the right of the field.
(2) has typically been a mouse-over tool-tip on the field.
(3) has typically been an icon to the right of the field, with a popup dialog (so you can click links in it etc.).
(4) has typically been an apostrophe to the right of the field, which is a link which calls javascript alert.

So currently it is pretty incoherent both visually and behaviourally.

Anonymous said...

Without the help of YARS (yet another rosetta stone) hieroglyphs convey little meaning. As you know, no one reads instructions, warning notices or danger signals until after an ouch.

Item 1 is used in Oz as the symbol for "don't mess with me or I'll zap you!"

Nottablogga so hf Nick

Item 2 on my RSS feed was blue - colour (with or without the "u") is awkward unless controlled by CSS. (Mind you, it may not have been blue, as I am one of the 5% blue/green colour blind males.)

Item 3 is an international symbol for information, not always associated with help.

FWIW, I am currently doing a web site for maturity unchallanged bushies (ie people my age on a barbed wire dial up connection). I had to give away dojo, as it took six and a half minutes to load a four item form. (OK, it did include a javascript calendar - not dojo's - but all code was compacted with "YUI Compressor" but not gzipped - old browsers in the bush might not have those newfangled processes.)

I am in the process of checkin' out the accessibility guidelines (and laws) and will report back soon...

Nottagoogleblogga, so hf Nick

Alex said...

The high voltage char did not work on the iPhone for me.

I had good experiences with simply putting red boxes around fields with errors and placing the error message inside that box, too, also in red.