Comment Form Design
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.
Announcing Logospire
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.
A Slip in the WordPress 2.7 Dashboard Interface
There is a curious design element in the new WordPress 2.7 admin dashboard. The ‘Right Now’ box shows a collection of latest statistics about your blog, such as the totals of all your posts, categories, tags, comments, spam and so on. Here’s what it looks like:
Now, the left columns isn’t actually related to the right. The left deals with the totals of all posts on your blog. The right deals with comments. Yet for some reason they’re placed side by side and each element has a line under it, spanning the whole width of the container. This results in pairs of statistics.
New Design
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):
Usability of the iDisk Web Interface
I’ve received an email from a reader, Bogdan, a couple of days ago, where he pointed out a usability issue he constantly faces. It’s an interesting problem and it’s to do with the file hosting service iDisk, which is part of Apple’s MobileMe services.
iDisk allows you to share files with your friends or colleagues by placing them in a public folder and sharing a link to it. That link points to a web interface to iDisk where you can download the shared files. The problem is, it’s not that easy to figure out exactly how to download them. Bogdan told me that people constantly ask about how to download the files — even those experienced with technology.
Pressed Button State With CSS
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.
Take a Step Back to See the Big Picture
I find that when you’re working on a web design — or even any other project involving typography and layout — it helps to squint or look at your design from a distance. What you want to do is to squint or go far away that the content would start blurring.
When content pieces blur together you begin to see how whitespace separates them into sections and groups. You can’t read the text itself, but you can see groups of text and the various sections that you’ve laid out.
Well… that’s what you want to see. If you see one big mess then it means your whitespace (the empty space between elements) isn’t doing its job.
Let me illustrate this with an example. Here’s a site (Listmixer) where whitespace usage could be improved:
If you squint hard enough so that the contents begin to blur we’ll get something like this:
Interface Features
I know you may be getting tired of me always using Apple as an example, but please bear with me for this post. I’ve recently been thinking about how Apple markets their products, and this somewhat ties in to my yesterday’s post on the Nokia N97.
I think what Apple is doing is actually very clever. They’re creating and marketing something that I’ll call ‘interface features’. These are the various interface elements that help you interact with the product, be it a keyboard, trackpad, touchscreen, mouse or a scroll wheel. With their regular product updates they not only change the looks of their products, they also refresh one or two interface elements and market them as new features. Let me illustrate.
It’s the User Experience, Stupid
Nokia has just announced their new phone, the N97. It’s a very capable phone that looks like a direct answer to Apple’s iPhone. If you just look at the feature list, it blows the iPhone away. Here’s the key ones:
- 3.5 inch, 640×360 resistive touch screen
- QWERTY slide-out keyboard
- 3G, WiFi and GPS
- 32 GB storage space
- 5 megapixel camera
It also has a nice design and looks pretty sleek. Here’s a promotional video of it:
However — all those features won’t mean anything if Nokia can’t deliver a great user experience. The iPhone isn’t eating away so fast on the mobile phone market-share because of its features. Indeed, the iPhone has, and always had, less features than many other smart-phones. No, the iPhone is so popular because of one thing it excels at: user experience.
Scalable Content Box Using Only One Background Image
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.