Tag Archives: Web Design

Ajax CSS gif icon information scent Javascript mailing list Online News png privacy ShareThis social-bookmarking The Onion Tim and Eric Awesome Show user interface design video web-development Web2.0 XHTML

User interfaces should be made as simple as possible, but no simpler

When designing a user interface or doing a usability review of an existing website, simplicity is an extremely important goal. When I get to your interface, don’t force me to spend time thinking. Make it easy for me to do what I want to do.

Here’s a perfect example: ever wish you had remote controls that looked like this?

simple remote control

Like anything else, though, don’t take the drive for simplicity and turn it into an inflexible dogma. Make sure your UI simplification efforts stop before your interface is:

… so simple it doesn’t give users any cues. This is a classic Web2.0 sandtrap – yes, your site looks very modern and clean with one giant button, but what does the button do?

… so simple it doesn’t do what the user wants. Here’s a great example of oversimplification from Tim and Eric Awesome Show:

It’s great – users have expressed frustration in getting calls when they’re at dinner or trying to enjoy a relaxing round of golf – so they’ve taken away the ability to get incoming call. Problem solved.

… so simple that important efficiency gains are lost, requiring users to expend repetitive manual effort. The Cinco Fone example above fits this one as well, but here’s another fun satire from the Onion News Network about the Macbook Wheel:

I’d love to hear any example of websites that you think might be committing one of the three sins of over-simplicity, please add a comment below.

Also, ff the title of this post is familiar, it’s because it’s based on a quote often attributed to Albert Einstein. The actual quote is:

It can scarcely be denied that the supreme goal of all theory is to make the irreducible basic elements as simple and as few as possible without having to surrender the adequate representation of a single datum of experience.

Creating a Favicon

My site's favicon, blown up to ridiculous proportions Nelson reminded me today that I didn’t have a favicon for this site. I took a few moments and created the amazing little pencil that’s sitting in the address bar above.

For all the non-techies and new webmasters out there who have stumbled across this page, a favicon is the little icon that show up next to a web site’s URL and next to the page’s title in your bookmarks. They’re very small (16 by 16 pixels) but they can add a dash of branding to your site and are a helpful visual signal for bookmark navigation, increasing the information scent.

Want to create your own favicon? You can draw one pixel-by-pixel at this site, but I’d recommend busting out Photoshop and creating one yourself. Try to pick initials, a logo, or an object that can be expressed very simply – I used an apple for Mealographer, for example. You can go as simple as a couple of squares that fit your site’s color scheme and still create a memorable association for your users.

Modern browsers like Firefox allow you to use .gif and .png files directly, with some code like this:

<link rel="shortcut icon" type="image/png href="http://www.jasonmorrison.net/favicon.png" />

That means you can have an animated favicon… just make sure you’re doing it for some useful or artistic purpose, otherwise you will annoy your users.

From what I’ve heard Internet Explorer still has some issues, so you may want to use the older .ico format. This site will convert the image for you.

<link rel="shortcut icon" type="image/ico" href="http://www.jasonmorrison.net/favicon.ico" />

If you want to get really crazy, you can use Javascript to dynamically alter the favicon, which is great if you want to play Defender on the smallest display ever.

A Scary, but Fascinating Idea – Javascript and CSS hack to see where your users have been

Invasion of Segway infantry!

I just ran across this post on Aza Raskin’s blog about a technique used to cut down the number of social bookmarking links displayed to users.  I’m sure you’ve seen them–the 20 or so colorful buttons that have popped up at the bottom of every blog post on the web, for Digg, Del.icio.us and similar sites.  On my blog they are hidden behind the ShareThis Widget but Raskin had a better idea – why not just display the ones each user actually uses?

Impossible?  Not so fast – think about what happens when you visit a site.  After your visit any links to the site will change, usually from blue to purple.  We can put up links to each social bookmarking site and then use Javascript and CSS to check to see if each link has been visited.  If so, display the button, and if not, hide it.

This is a very cool way to manage buttons but the technique has wider privacy implications.  I could, for example, put links to…  questionable sites, and then use some Ajax to collect that information about users.  If I had other information about you (say you logged into my site or otherwise gave me an email address) I could link it together and build a database.

On the other hand, it’s not like I can grab your entire browsing history or follow you around after you leave my site – I have to specifically create a link and check it for every site I want to know about.  And unlike your browser history this info is cleared every time you close your browser.  So it’s not spyware or anything as intrusive as, say, the Alexa toolbar.

I can think of a bunch of cool ways to apply this technique, but I’m not sharing until I implement one.  Feel free to post any ideas (or misgivings) in the comments below.