GoneWacko’s Blog

Website form usability

August 19, 2006 on 2:49 pm | In Computing, Linux |

For some weeks now I’ve been using Linux, exclusively. Everything works fine - Music, Movies, DVDs, Games (by using Cedega), etc. So there’s no reason for me to go back to Windows.

I’m currently using the XFCE Desktop Manager because it’s somewhat GNOME-like without being bloated and made for complete noobs. I’m currently using a black colour theme (”XFCE Dusk”), just because I like it. Plus it looks good with my xterm colours (on display in the terminal at the top-right corner of the screenshot).

One thing that is somewhat annoying is that firefox also adopts these theme colours for its interface elements. I guess this can be solved by using a firefox theme, but I like the way it looks. The only annoyance about it is that form elements on websites also get the GTK theme’s look - black background, white text. This does not always (rarely, in fact) work out.

I’m suddenly finding out that a lot of webdesigners are doing a half-assed job at designing websites. Lately I’ve been focussing on usability of websites quite a bit, because two out of four people in RBTS are visually impaired, and thus we will be very good at making websites that are accessible.
Now, back to my rant. It seems that there are too many webdesigners out there that live by a rule of thumb: “If it looks good on my screen, it looks good everywhere“. Apparently the way to make a form element look good is to specify the background colour for it. I’ve come across many form elements where my white text looks hideous on the form element’s background. However, white backgrounds take the cake.

Let’s look at Owen’s blog (sorry Owen ;)). When I want to comment on his blog, I have to fill in some information.
For some silly reason, the first input box is not themed. I remember that, on a default Windows XP theme, this looks okay. But in my case, it doesn’t fit in with the website’s style at all.
The worst are the other input boxes, however. These were given a white background colour, but the foreground colour was not specified. Why is this a problem? Because the theme’s default colours are used unless the stylesheet specifies a different color. In my case, this default colour is… White.
The screenshot (click the image so you know what I’m talking about) features a completely filled out form. You just can’t see it.
The only way to check what you typed was by selecting the text so it gets highlighted.

Because it’s impossible to get everyone on the planet to fix their stylesheets (although I think I will be sending e-mails to any large and/or well-known site because I think it’s just plain stupid) I guess I’ll try writing a chickenfoot (warning, looooong video (Google TechTalks, great stuff)) script that injects some better CSS for forms.

Probably not the most fascinating blog entry, but I felt like ranting about it. Although I’m not very good at doing so.