What is User-centered web design and why is it important? The answer to the first question has a simple answer, but the process of making it happen is fairly complex. User-centered web design involves taking the user into account during all phases of a web project. Why is this so important? The process of building a user-centered website ensures that everything that happens on the site is a direct result of decisions you have made. Not only will you reduce the likelihood of technical errors like 404 pages and broken links, you can create a quality experience that will satisfy both the business and user's goals.
Now that we know what user-centered design is, how do we go about it? The best way to explain the process is to use the model developed by user experience expert, Jesse James Garrett. Garrett breaks up the model into 5 planes in his book, The Elements of User Experience: User-Centered Design for the Web. The 5 planes are strategy, scope, structure, skeleton and surface. This model also addresses the duality of website functionality. Some websites are used as software interfaces, while others are hypertext information spaces. And then there are some websites that perform both of these functions. This is why there is a line drawn down the middle of the model to deal with those differences. Let's go into a little more detail about the 5 planes.
Strategy seeks to address the answers to 2 basic questions. What do we want to get out of the site and what do our users want to get out of it? By answering the first question we are describing the site objectives from within our organization. The answers to the second question address user needs which are objectives that come from outside our organization. The strategy is the foundation for next 4 planes and will drive our decisions throughout the rest of the process.
The scope involves creating the functional specifications (i.e. contact forms, search capability, shopping cart), and content requirements (i.e. text, images, and PDF’s) for the site. By defining these requirements up front, you take the guesswork out of the development process. Garrett states that the two main reasons for writing all this down and agreeing to the scope before you begin allows you to know what you are building and what you are not building. This sounds so simple, right? It's not always easy to get everyone to agree to a scope, and when you don't you will most certainly have to deal with the dreaded “scope creep”. By establishing the scope, you can be realistic about what you can accomplish within a given time frame and all parties involved will be informed about what to expect.
The next phase of site development involves creating the structure of the site. On the “web as a hypertext system” side of development this is also referred to as information architecture. Information architects are looking for the best way to organize, group and present the content of a site to the end user. On the “web as a software interface” side it is called interaction design. Interaction design is concerned with describing possible user behavior and defining how the system will accommodate and respond to the user. For example, what happens when a user incorrectly fills out a form field? Will the field prompt them with an example of what it's looking for? Will it force them to enter only certain characters? These are the types of questions that interaction design will establish the answers to before coding begins.
The skeleton plane is where we take all of the information we gathered from the previous planes and begin to lay out our site. The development of the skeleton involves three elements that are closely bound together: interface design (on the “software interface” side), navigation design (on the “hypertext system” side) and information design that spans across both sides. Interface design refers to the user's ability to do things on the site. Navigation design refers to the user's ability to go places on the site and information design refers to how you communicate ideas to the user. If you have seen a website wire frame then you have a good idea of what the skeleton looks like when all three elements of the plane are brought together. It's the organization of our interface, navigation and information into logical blocks.
At the top of the model is the surface plane. This is where content, functionality and aesthetics come together to produce the visual design that combines all the elements we researched and documented from the other 4 planes. Visual design is not just a matter of aesthetics. Instead of determining the merit of your visual design solely by what is pleasing to the eye, you should ask yourself the question, how well does this work? Does the visual design make clear distinctions between the sections of information, or is it confusing? Does the visual design properly communicate what we want about the navigation? The visual design should reinforce the objectives that were established in the lower planes (strategy, scope, structure & skeleton). Garrett says it best, “It's not just a matter of aesthetics, it's a matter of strategy.”
I hope you enjoyed this breakdown of Garrett's Elements of User Experience model and if you are into building websites, I would highly recommend reading his book. Even though it was first printed in 2002, the information is still relevant and valuable today.
