One of the most crucial decisions in building any type of web application is designing its interface. As the gateway to your content, a well-designed user interface is a valuable tool for engaging your customers and keeping them from moving on to the next site.

This makes interface design a critical aspect of website development—and, unfortunately, one that is challenging in more than one way. For clients, in particular, the process of developing a user interface is made more difficult by the fact that they often equate "beautiful" with "pretty," which doesn't help the design process.

Educating the Customer

The first step in designing a good user interface consists of making sure that every stakeholder is on the same page. Typically, this means discussing with the clients the goals of the design process are, and the steps involved in it.

Good UI design has little to do with pretty graphics—for example, think of what impact a design feature like the clickwheel on the original iPod has had, and how simple and "pretty-free" it is. Unfortunately, many potential customers are unaware of the distinction between form and function in interface design and are, therefore, taken aback by design steps like wireframes, which is why sitting down and mapping out a process is a great way to avoid getting thrown out of your first status meeting.

Establishing Goals

The first rule of good UI design is establishing useful goals. Remember—design is supposed to take the user from point A to point B in the easiest and most obvious way possible. This means that both designer and customer need to be very clear on what exactly A and B are.

A good rule of thumb is to have the customer draw a list of all the topics they want covered in their site, and then proceed to map out a navigational structure that provides a logical path between each section of the website.

Designing the Interface

Interface design should be exclusively functional—and that's what wireframes are for.

Wireframes give you an opportunity to test an interface without the distraction of graphical elements. If your interface works well in this form, you can rest assured that it will only be better once the graphics come into play.

As I mentioned, wireframes can be rather traumatic for customers who are not used to the design process, so you should expect that a lot of hand-holding will have to take place. If the customer has a sense of humour, you can always show him or her the first thirty seconds of Team America: World Police as an illustration of why wireframes are important.

Testing the Interface

The amount of testing that can be done on an interface depends on a number of factors—budget constraints and complexity, for example. However, it is important that at least some testing be performed; most importantly, it should be performed by someone who closely matches the site's intended audience.

It is important at this stage to make customers understand that they—or you—are not good candidates for testing the interface for a number of reasons: first, it's unlikely that they be representative of the end user. Second, their familiarity with both the products and the interface design up that point will be a disadvantage in trying to gauge the UI's performance.

Graphical Work

Skinning the interface should really be the last step in its development for two reasons.

First, as I mentioned, graphical work takes away from your first priority: the UI's functionality. Second, it's much more expensive to have to tweak (or redo) a fully-skinned UI in response to user feedback than it is to make changes to the wireframe.

Of course, it's important at this stage to make sure that skinning doesn't get in the way of functionality—which is why it's always a good idea to budget for an additional round of testing before the UI goes live.