When to create the UI?

If you are new to this blog, I suggest that you read the typical pre-amble about what this blog is about.

You have a great idea for a new web site, you think its the best thing since sliced bread, you’ve worked out what it needs to do on paper, you’ve worked out the business model and you have some pictures in your head on how it is going to look. But when do you actually start working on the look and feel and get the User Interface (UI) right?

There are two schools of thought here. Some believe that it is best to start working on the functionality and features that you need to develop and then to work out how the UI should present that. Or the other view, that I personally agree with, is that you start visualizing your features in a UI, and let the UI define the details of your features.

Your user is going to have their first interaction with a site through its UI, not its functionality. For example, they will come to your home page and within seconds will decide if they will stay or leave – so it is important to get this right. You will go through many iterations of getting this right, so don’t always think the first thing you do is going to be the right thing. But start on it now!

Home Page Objectives

The first thing I like doing is to write down my objectives for the home page, and here is your first challenge; I like to have ONE clear message on the home page, and I believe that all home pages get this right (even complex portal pages like Yahoo!’s home page clearly says “I am a portal”). So start off with a piece of paper and write down what the home page is supposed to achieve. Is the user supposed to click on a link, perform a search, or provide some input? What is this objective? Then what is the message you want to get across? Be clear not cryptic, remove any vague references, and test, test and further test your message. I can’t stress how important this is.

This is where you get the paper out and start sketching. Make broad strokes first (yes, this is design dude), try and think where the major elements are going to be. But make sure you challenge everything you do. Don’t just put things in because you have seen it before. For example, I was going through this process with a client recently, and the client got up on the white board and plotted out the following elements; logo, main menu, second level menu, and footer. I got up and wiped it all off. They looked stunned. So I asked, what have those elements got to do with the objectives and message? The client couldn’t answer me effectively other than “that’s what all web sites do”. I am not saying that those things won’t be in there, but don’t assume from the start that they are there, or where they will be positioned, as you are just limiting yourself. This client’s home page evolved nicely from then on, we ended up getting it right and the interestingly, there was no need for a second level menu, and the main menu was only brought in at the last minute (as we just didn’t need it), and only had 3 links on it. It was nice and simple and catered for all the user types.

We all know that the home page is critical, because it is your site’s (or business) first impression that counts. Think about it – you have got about 5 seconds of a visitor’s attention before they either click away or go deeper. Generally, if a user goes deeper, it is reasonably likely that they will go just beyond one page. So in the first 5 seconds, you need to get your user to say to themselves “I understand and I would like to know more”. That is why you need to continue to test, and hope that you are not too precious about your views – because expect to have them shattered.

Think about interactions early on

But UI is more than just home page. I don’t care if you are building a web brochure, rich website or web application, your UI is what your user is interacting with, so simplify. We have seen a trend with all the latest Web 2.0 sites where they are removing the ‘fluff’ in the UI that we have seen with the older dot com UIs. Thank God for that!!! Something that used to drive me crazy was when web sites used to plaster links all over the page just because they could. It was counter productive, no body clicked on those links. Think about it; even on your favorite most popular sites that you visited, think about the links that you click on. For example, I use eBay a lot, and here is a site that has a lot of links – but they have improved on it over the years. Even though there are probably over a hundred actions on a product listing page, I usually only click on 2-3, that’s it; “Watch This Item”, “Bid Now” and the seller’s profile. I would occasionally click on other links like seller’s other items – but rarely.

But eBay didn’t start at this point, they evolved to this point based on their customer’s usage patterns and requests. The key is not try and pre-empt all your user’s possible actions, because you just can’t. You don’t know how your users are possibly going to use your site. The only thing that you know is how you would like your visitors to use your site.

So there you have it, unfortunately not too much details about the actual UI, but that is not what this post is about. It is about thinking about the UI early on. Another important aspect that I use a lot, is the “Scenario”, and this is an process that leads on from what I said above about how you would like to have the user behave on the site. That is going to be my next posting.