Today as work is starting to pick up on the WIPUP project, I decided to tackle something that had been nagging at me for quite some time – the header of the design. Before I continue, let’s take a peek at what we currently have:

When a fresh user views that page, regardless of aesthetic merit (after all, this is a user-based website, not a content-based website) they are instantly hit by a few things:

• This blue box actually does not contain much information, but takes up half the screen nontheless.
• This area below the blue box is darker and thus accented more, but contains very useless information.
• As a new user, I would not want to use any of these features.
• Even as a registered user, it’s unlikely I would want to use these features more than 5% of the time.
• What are those icons on the top right?
• Why is the “upload” and “sign in” button so ugly?

Ignoring a slightly longer load time and slight browser incompatibilities (though that is a fault on my part) we have introduced a good 15 or so new things a user could do simply in the top half of the page – most of which should be ignored most of the time. The important thing here is that no matter how feature-packed you want your interface to be, you have to deal with user myopia, addressed very well by Jeff Atwood.

One way to tackle this problem is by overlaying other web 2.0 technologies (such as this .net developer) above the website – a great example being how Google revolutionised web email clients with GMail. However mainly for personal preference I decided to tackle this one from the ground up – that is, the luddite of a webdesign itself. Here’s my solution:

As you can see, what really stands out is the title of the site – like it should. I’ve cut things down such that it takes up a bare minimum of the page, will have faster load time and requires less non HTML/CSS tricks. The next point of focus is the actual content.

The implications of this are that user choice is now limited to a simple  7 choices. The 3 icons, the 3 links, and reading the main content. The 3 icons are likely to be disregarded almost immediately as there is no textual information as to what their function is. This is good as it’ll only seem important to existing users – those who know how to use them and are familiar with the site. The three text options are easy to read and disregard too – it might be improved further if the search link were turned into a small magnifying glass icon.

The end result is that the user’s focus is on the content. We don’t overwhelm the user and keep their eyes where we want them. Remember: simple sells.