Web Application Interface Design Guide

A guide to creating good web application interface designs.

After my recent disappointment in the user interface of the ExpressionEngine 2.0 Public Beta I feel it is a important for me to try and write a tutorial that will help future interface designers get started and hopefully build truly functional interfaces.  So let’s get started.

Table of Contents

 
1. Introduction to Interface Design
 
2. Gathering Ideas
 
3. Mocking the Ideas
 
4. First Draft Creation
 
5. Testing
 
6. Finishing Touches/ Perfecting

Introduction to Interface Design

Interface Design is mainly the interaction between a user and the application. What a user can do and how they go about doing it. As interface designers we must predict what the user wants to see, and what makes the most sense. You do not want to make the user guess. By using a set of common-sense rules and design methods you can easily create a comfortable interface that allows your users accomplish whatever it is you are offering to them. One of the oldest interface design elements is the menu bar at the top of almost all software that you use on the desktop. If you think about it you will see that most websites have a navigation panel at the top of their website, personally I believe that the idea has come from the traditional interface elements that web design inherits from software applications. When we are making an online application we definitely want to look back and realize what elements we have used that seemed obvious to us. Another example of this is newspapers, have you noticed how similar newspaper websites are to actual newspapers… they are very similar because the publisher doesn’t want to confuse you with a whole different layout.

Gathering Ideas

I have recently been creating the interface of freedcamp. So I might use it as an example to these steps. Gathering Ideas is the very first thing you have to do, personally I do this by thinking about the interface at hand right before i go to sleep, that way i fall asleep with the ideas i need to think about and wake up with some unique breakthroughs. I can understand not everyone can do this, but personally i believe you will need at least a few days to let the initial ideas marinate and clear themselves out. Without using an exact example the overall idea is that if you wanted to add a print button at the top left of the website, after a while you should realize that having something so non-important at the most important place is rather an unforgivable interface mistake. If you ponder on the ideas you have, which are things like where should the menu be, how should the information be presented, will things be draggable… then you can figure it out for yourself. In further stages it may come that your initial ideas are not actually functional, that doesn’t matter, you need to gather as many ideas as you can. Filtering those ideas, and maybe even collaborating with others later will make the good ones stick. When gathering ideas you need to start thinking about priority, all the elements in your interface have a priority. This means that all elements will be addressed differently depending on their priority. A button that is the most important thing you can do on the page should for one be BIG and also it should be colored in a way that stands out from the rest of the page. Lists that are important, or other types of objects should have a higher position on the web page.

Mocking the Ideas

A while ago I invested a few dollars to buy some well structured sketch sheets, well i didn’t actually use them, but i did realize something important. Being able to take your ideas, sketch them on paper and then look over them is very important for the initial interface crafting process. For one being able to see an idea in real life not just in your head can easily help you quickly remove or add more emphasis on the ideas you have gathered. I find myself getting ideas for the final draft from my first sketches. Sketches also help you collaborate your ideas with others, a picture is a thousand words. The freedcamp team seems to keep finding itself drawing on the white board… this helps us put ideas into reality. Also when you put it down on paper you can add comments and notes… you cannot really do that in your brain, unless you have an IQ higher than Einstein’s.

First Draft Creation

Creating a first draft means taking all your ideas, and all your mock-ups and making them into a united interface. This may mean a Photoshop document, or an html page, either way it means trying to gather what has been floating around and put it down in a united place. Creating a first draft ensures the ability of a better review of the overall flow. I could talk about flow in a few paragraphs but i don’t want to, flow means that things make sense to the user. An interface that has flow is a very usable and clear interface. Something that has flow makes the user want to use your interface. The other big benefit i see in first draft is the ability to let the overall draft settle in your mind. Freedcamps initial draft led to a much more functional and clean interface. Even though the initial draft was good, thanks to it i was able to figure out things that i can easily put away, hide for later use, and so forth.

Testing

This can be done in a variety of ways. Of course the best thing would be to get a group of a thousand people make them sit down in front of you and watch their every move, maybe even know where their eyes are at every second. Even though we can’t do that, we can let the people working with you, if any, to get look at what’s been created and comment on it. Maybe let some friends look at it, ask them to give you anything that comes to their minds. I have found that even though our friends are not always interface designers, or designers at all, all people can be used to give feedback that can potentially be quite useful. Of course there are services like clixpy.com which will actually really track everything a user does, every mouse move as well. So without going further into testing because it’s a simple concept, please try to get as many opinions as you can before you come up with a final draft. There are websites like conceptfeedback that will help you with that.

Finishing Touches / Perfecting

Okay so if you have gotten this far now comes the fun part. You have your final draft, you have received valuable feedback on your interface design now you have to really get to the tiny details. Start looking at your overall interface, are all the buttons coming off the page, are links easily visible to the user, are the main elements of the interface highlighted. There are always little details that need to be taken care of, it could be a simple gray color that doesn’t stand out inside of a dark gray button, and so forth.