In Dashboard HQ Bookmarks, we came across an interesting, and very common, design problem: how to handle the entry of URLs.

The idea behind Dashboard HQ Bookmarks is to give people a way to get all their bookmarks out of their browsers and into a web page. It’s not social, and it’s not glamorous. It’s just a great way to keep a grip on all the bookmarks you need when moving between the two or three (or more!) different computers you use on a daily basis (work, home, laptop).

To facilitate this, obviously, users need to be able to create new bookmarks, and this is a potential error just waiting to happen. You can ether paste an address into the Address field, or you can type in an address manually. When an address is pasted in, it usually includes the “http://”. When it’s typed in manually, it often does not. But we have to use the entered address to create a link regardless of how it’s entered.

To handle this, we considered adding the “http://” as the default value in the Address field.

Seems obvious enough, right? It’s a standard solution, so we could have left it at that. But this solution meant forcing the user to make a choice every time he created a bookmark. He could either keep the “http://” and start typing the rest of the address afterwards, or he could erase the “http://” and paste in a URL copied from somewhere else.

And with this in mind, do do we highlight the “http://” automatically when the field gains focus, or not?

If our user is pasting in the URL, it makes sense for us to automatically highlight the “http://”. This way, she can tab to or click on the field and paste the address without having to delete anytyhing. But if she’s entering a URL manually, and the “http://” is highlighted, she then has to deselect the text so she can start typing in text after it. Either way, we’d be inconveniencing (read: annoying) the user some of the time.

To solve this, we wrote an if/else statement in Javascript that checked for the “http://”. The Javascript simply checks to see if the “http://” is already in the entered address. If not, it is added automatically.

Now, we leave the field blank and let users enter whatever they want. With one line of code, we eliminated a point of frustration that would have been noticed by every user, every day. Add all these moments up, and it means our users would have wasted countless hours fixing URLs and erasing the default value.

It took us five minutes.

Design is all about the details.

On a related note: I’ve been considering putting up a wiki so people can contribute and collect code samples related to these Design Stories posts and to the examples used in the book. But the wiki software I’ve found is, well, let’s just say it’s not all that friendly. Got any suggestions?

Posted by Robert on March 20th, 2007