Toluu

Usability Post

Design and usability blog

Comment Form DesignJanuary 6

A Usability Post reader, Vadim, has raised an interesting issue regarding comment form design. He saw that some forms around the net had two fields labeled as required — the name and the email. Comment forms usually have two more fields in addition to this: the website and of course the actual comment. Here’s what this looks like:

Vadim mentioned that he noticed something curious in a popular blog post with hundreds of comments. That blog post had the very comment input form you see in my above screenshot. He noticed that some of the people replying to the post had left “none” or “n/a” as their website.

The website field isn’t required, but it was obviously mistakenly confused to be so. The two fields above: the name and the email are labeled as required, but everything else isn’t. This is a little confusing as obviously the comment is required also, but the form assumes you’re smart enough to work that out.

Good comment form design

What would be the ideal comment form design?

UX Matters has a very good article about label placement in forms. The findings published are based on an eye-tracking study, so the recommendations provided are fairly authoritative.

Announcing LogospireJanuary 2

Over the past couple of weeks I’ve been working on a new project called Logospire. Logospire is a logo inspiration gallery. You can browse logos, upload your own logos, rate logos and leave comments and feedback.

While there are a few other logo galleries out there right now, I found that each one of them was lacking something. Most of the current galleries also moderate all logo submissions, so it may be a while before your logo actually goes live.

Logospire is different in that there is no moderation queue. You can upload your logo and it will go live straight away. By default, the front page sorts logos by highest rating, so even if there are low quality submissions, these won’t make it to the front pages. You can of course also sort by latest submissions, so you can browse, rate and comment on all the upcoming logos.

Instead of using pre-made gallery management software, I’ve built Logospire from scratch to ensure it fulfills its goals 100%. In the coming weeks I’ll be tweaking and updating the site, so if you have any suggestions, don’t hesitate to contact me. Here’s what the site looks like:

New DesignDecember 22 2008

Just updated the Usability Post design. The old design, while perfectly usable, felt a little bland and boring. I could have made further updates to it, but I felt the basic structure and feel wasn’t right. So here we have a new redesign from scratch which I’ll be improving over the coming weeks. I really like how it’s turned out — incorporating bits of eye candy, yet keeping things simple. It’s also a lot more like the original design I started off with when the blog first launched.

Anyhow, here’s a shot of the old design if you’d like to see the difference (click to enlarge):

Some readers have asked me for a better way to browse the archives. While it’s not up yet, a proper archives page and a popular posts lists are on their way. I’ll be interested to read your thoughts about the new design — what do you think? Post a comment.

Pressed Button State With CSSDecember 16 2008

There is certain anchor state in CSS that I don’t see used very often — actually, it’s something I haven’t really used myself, but something which I now realize can be very useful. I’m talking about the “active” anchor state.

The active anchor state is the state an anchor (a link) is in when you click on it. The moment you click on a link, it becomes active. We all use the “hover” or “visited” states, but the active state can come in very handy when you’ve got custom styled buttons.

You see, on the desktop, whether on Windows, Linux or OS X, the buttons respond to you when you click on them. They visibly become pressed down, telling you that you’ve pushed them. This provides satisfying feedback to the user and makes the application feel more responsive.

On the web, such feedback is seldom given. You click on a button and nothing happens. In some browsers you’ll see a selection outline around the link or button while the next page is loading. Even buttons that have custom background images making them look like big solid buttons don’t do anything when you push them. They remain static and unresponsive.

It doesn’t have to be this way. Just use the “active” state to give your buttons a “pressed” look or whatever other look you wish. This will make your applic

Scalable Content Box Using Only One Background ImageNovember 27 2008

A colleague of mine was recently trying to cut down on image usage when working on a web design project. He asked me whether it was possible to use one image for a vertically scalable content box that had both, a unique heading background, a border along the sides and a rounded off border in the footer.

I didn’t think about it very much and dismissed it as impossible or too fiddly. I’ve been thinking about it for a little bit now and realize I was wrong and there is actually a very easy way to do this. Whether the method is practical or not for production use I’m not sure — but at least this is something that can be done. Let me demonstrate how…

Let’s say we designed the following content box in Photoshop to be used in the sidebar of a website:

Not an unlikely example. The box above has three unique sections, the header at the top, the middle area which repeats itself, and a bottom section with the rounded off corners and a slight shadow.

One of the traditional ways of coding such a box would be to slice it into three images for each corresponding part (the middle section would just be a 1 pixel high image, since i