This blog post is a report on the standards for designing successful web pages. Jesse James Garrett’s book on The Elements of User Experience: User-Centered Design for the Web focuses on the five planes of user-centered design where proper implementation is important to engaging efficient user experiences. These five planes are:
- Strategy Plane
- Scope Plane
- Structure Plane
- Skeleton Plane
- Surface Plane
Garrett stresses that when creating any website, it is important to have a user’s needs defined before production. Once these needs are realized, it is easy to formulate the site objectives. It’s important to ask the questions, “What purpose do I want this site to serve?” and “What purpose do my users want this site to serve?” It’s always important to know the business goals of a site before designing because you’ll be able to design towards those goals. Garrett states that creating a brand identity is an essential first step to take. Whether you’re looking to make this identity known to your users through conscious choices or through subtle accidents, brand identity will ultimately leave a mark on your audience. An easy way to understand if these objectives have been met are through success metrics, or indicators that track whether or not goals are being reached after the site has launched.
It is also important to focus on user segmentation at this plane. It’s vital to know your user demographic (i.e. age, education level, gender, income, etc) as well as psychographic (i.e. attitudes and perceptions users have towards certain subjects). Knowledge of your user segmentation will allow you to design to their wants, while knowing to stay clear of anything they find undesirable.
It is also at this level where usability and user research comes into play. Surveys, interviews, focus groups, user tests, field studies, contextual inquiries (methods to understand your users in their everyday lives), task analysis, user testings and card sorting (giving users cards and having them sort them out according to groups they find most comfortable) are all crucial to knowing your user, retrieving user feedback, and to the success of your website.
Once you’re aware of what you want from your site and what your users want from your site, defining the scope of your project is easy to do. List everything you and your users want your site to have and everything you and your users don’t want the site to include. Garrett states that once you have this understanding, focus on the functionality and content of your site and ask, “What am I going to make?” Know your functional requirements and specifications. You can find out what these requirements are by asking your users what they want and find out, through tests, what it is they really want (sometimes what people say they want isn’t really what they’re looking for). Another requirement to find out is what a user doesn’t know they want. Brainstorming usually leads to these findings after figuring out what users say they want and what they really want.
Garrett says that during implementation of functional specifications, it’s important to be positive and describe what a system could do to prevent a bad thing, instead of describing a bad thing that the system shouldn’t do. It’s also important to be as specific as possible in order to avoid confusion due to the possibility of alternate interpretations. This specificity will also prevent the use of subjective language that can cause ambiguous meanings.
Another major component of the scope plane is your ability to prioritize the site’s requirements. Garrett says it’s not hard gathering ideas for possible requirements, but it is difficult to sort out what requirements the scope of your project should feature. Sometimes objectives require multiple requirements, whereas others can be fulfilled by one requirement. Also, sometimes requirements are technically impossible to implement, so alternatives may need to be pursued. Regardless, the priority of requirements should all be necessary to a functional website. If time constraints are an issue, certain features can always be implemented later, that is why it’s important to prioritize what is most important through what is least important, as what is most important will be already completed if you are forced to launch the website before all requirements have been implemented.
Once requirements have been gathered and prioritized, a conceptual structure for the site can be made. Interaction design (creating a structured experience for the user) attempts to formulate how the design will accommodate possible user behaviors. Garrett says that an approach that works best for a computer is almost never the approach that works best for a user, so knowing what will work best for them is the ideal situation.
Garrett stresses the importance of knowing conceptual models, or users’ impressions on how interactive components behave (i.e. a container to represent a website’s shopping cart), because this knowledge allows for consistency in design decisions. It’s important that a particular element is always treated the same. For example, a “checkout” metaphor to make a purchase online should always be treated as “checkout” and not just a term to describe a purchase. In other words, when the user clicks “checkout,” treat the term as if you were physically standing in a store, at the register, checking out. Another example would be the “shopping cart.” Treat the metaphor as a real shopping cart. Allow the user to “add” and “remove” things to the cart in the same way a customer would physically at a store.
Interaction design requires that you take into consideration user error (mistakes by the user, not the “programmer”). Knowing that people, by nature, have the ability to make mistakes, it’s best to make such mistakes nearly impossible to do (or at least, very difficult to do). Garrett knows that no matter how hard you attempt to prevent human error, it’s still inevitable, so offering solutions/troubleshooting is necessary so the user will know how to fix the problem.
The last major component of the Structure Plane is a website’s information architecture. Garrett describes the information architecture as organizational and navigational schemes that allows for the effective progression through a site without confusion. Two ways of approaching these schemes are through a top-down approach, where buttons/links are located at the top of the page and you work your way down, or through a bottom-up approach, where this same information is located towards the bottom and you work your way up. No one way is better than the other, but depending on the look and feel you want for your site, you might prefer one over the other.
The information architecture also arranges nodes (information in pieces or groups, no matter how big or small) in four various structures:
- hierarchical structure
- matrix structure
- organic structure
- sequential structure
Through a hierarchical structure, the nodes have parent/child relationships with other nodes. The nodes that have parents offer broader information where as the child offers more specific information in relation to its parent. Where not every node has a child, every node has a parent. This structure is the most commonly used structure on the WWW.
A matrix structure arranges the same nodes along two or more criteria, which enables users with different needs to navigate through the same content, but in a different manner. For example, a car manufacturer’s website will allow a user to search the inventory by color, price, year, model, and location. The user has the choice to pick and search between more than one criteria, but they are ultimately searching through the same content.
A structure that does not follow a consistent pattern when arranging its nodes is the organic structure. Garrett explains that these structures are ideal for exploring nodes whose relationship is either unclear or evolving. However, these structures aren’t the best for sites where users rely on being able to find their way back to the same information.
The last of these four structures is the sequential structure. These structures organize information in, as the name suggests, sequences. For example, a tutorial site will use a sequential structure. Perhaps you can’t proceed to step two until you pass the first step of the tutorial. Once passed, the button allows you to click on to the next step. Another example of a node designed in this structure would be a video. You watch the video from beginning to end, where the information in the beginning occurs earlier in history and the information towards the end occurs later in history.
This plane gives further modification to the conceptual structure, where specific criteria for the interface, navigation, and information design move from an intangible abstraction to a tangible and concrete structure. When defining the skeleton, Garrett says that it’s important to make sure you know how your site will work. It’s important that the structure is all mapped out according to your needs and your user’s needs before implementing the skeleton. The skeleton is defined through the interface design (buttons, fields, drop down menus, etc), navigation design (a form of the interface that gets the user from node to node), and information design (the way information is presented to the user).
Garrett states that the most successful interfaces are those that allow the user to notice the most important nodes, where unimportant information is not noticed (most likely because this superfluous information is not included). It is important when designing an interface to make sure you know what information should be visible and what information should not. HTML and Flash are the two technologies where interfaces are created on the web, and both have their limitations, so it’s important to design interfaces accordingly. HTML and Flash allow for the following interface elements:
- checkboxes (users select as many boxes as they deem necessary, independent of one another)
- radio buttons (users select only one option amongst a set of mutually exlusive selections)
- text fields (users are given the option to enter whatever text they find necessary)
- dropdown lists (users select only one option amongst a set of mutually exclusive selections, like radio buttons, but in a compact space allowing more information to be presented more efficiently)
- list boxes (users select as many boxes as they deem necessary, independent of one another, like checkboxes, but allows for more information to be presented in a compact space due to their ability to scroll).
- action buttons (users select a button and are rerouted to another location (interface elements, pages, etc.)
When designing the navigation, Garrett says it’s important to simultaneously accomplish three goals. The first most important rule is allowing the user to get from one point to another. The second rule is to make sure the navigation design shows the user the relationship between the container and the elements that exist within this container. Lastly, the navigation should somehow relate to the current page, or at least let the user know they are on the current page. For example, if the user is on the page about cars, and the link that leads to this page is entitled “cars,” then this link should be different than the rest so the user knows that “cars” has been selected.
Different sites offer different navigation systems (systems that allow users to navigate sites through various circumstances). The five most common navigation systems are as follows:
- global navigation (provides users with access to the entire site no matter which page they’re currently navigating)
- local navigation (provides users with access to nodes that are in close proximity to each other)
- supplementary navigation (provides users with access to related content that is not readily available through the global/local navigation)
- contextual navigation/inline navigation (provides users with access to navigation elements (links, buttons, etc) within the content itself. i.e. a link/button within a paragraph as opposed to in the interface)
- courtesy navigation (provides users with access to information that they wouldn’t need regularly, but made available for convenience purposes)
When implementing information design, Garrett expresses the need to present information in a way users can easily understand. Information graphics generally give clarity to dry text. Pie graphs give instant meaning to facts and figures. The way information is grouped can also play a huge role in the success of your site. Remaining consistent to conventions users are familiar with when presenting information is always an important note to consider. For example, if your site offers a form for users to fill out, the order is very important. You wouldn’t want to ask for a credit card number, then first name, then zip code, then credit card type, then last name, etc. This not only makes your site seem very incoherent, but less credible. Garrett says it’s important to stick to conventions people are familar with.
It is also important to provide support for wayfinding, or visual cues involving information and navigation design to help the users know where they are, where they can go, and what choices they can choose in order to fulfill their goals. Garrett explains that wayfinding can include specific color schemes for specific sections or typography, icons, and labeling to let the user know where they are.
The last crucial element of the skeleton plane are wireframes (page schematics, or a bare-bones depiction of all the components of a page and how they are placed on that page). Garrett states that wireframes are a necessary initial step to determining the aesthetics of the site. Wireframes are valuable in that they incorporate every element of this plane. They incorporate interface design through the selection and arrangement of interface elements, navigation design through the identification of navigational systems, and information design through the placement of information components.
The last plane of user-centered design that is located at the top of this five-plane model is the surface plane. In this plane, all the previous planes work together to provide the user with a finished, fully functional design. Garrett says when fine tuning the visual design of a page, you don’t necessarily have to rely on sophisticated eyetracking equipment to determine exactly where a user’s eyes are going, but you can simply ask the user. Although it’s definitely not as accurate as eyetracking, it still gets the job done. After determining where the eye moves, or how frequently the eye is moving around, it’s important to create visual elements that will fix the problems.
Generally, the primary tool designers use to get the user’s attention is contrast. Without contrast, the visual design is seen as being dull and without features that makes a user’s eyes wander around the page. Garrett proclaims that contrast is necessary in defining essential aspects and differentiating between aspects such as interface and navigation design. Having contrasting elements allows the user to make note that something is different. This awareness of differences allows the user to pay attention to the overall design and, in turn, functionality of the site. It is also important that the contrast is completely different than the opposing elements. If the contrast varies only slightly from the other elements, the user will be confused as to what the purpose of the slight variation is. Slight variation will make a user think something has happened accidentally, or that a flaw has occurred within the site, and this is not a response that you want to elicit from your users. With this said, maintaining uniformity is essential to ensuring that such responses are not invoked. Garrett says that keeping elements uniform is beneficial to the designer, also. With uniform elements, you’d be able to reuse them in new designs and pages, where you would just change the content, not the format. Using a grid-based layout (an invisible grid that you imagine exists on the page) allows you to create consistent pages with consistent and uniform elements from page to page.
Garrett also stresses the importance of maintaining consistency internally and externally. External consistency should show that every aspect of an organization’s many divisional sites should maintain consistent themes. For example, any university has many divisional sites. Their career center divisional site should be consistent to their student records divisional site. Internal consistency should show that every aspect of a divisional site maintains consistent themes with it’s subpages. For example, the hypothetical career center divisional site mentioned previously should be consistent with a page on the site that says “careers for current students,” “careers for alumni,” etc. All these subpages should maintain consistencies amongst their uniform and contrasting elements, including color palettes, schemes, and typography.
Garrett, Jesse James. The Elements of User Experience: User-Centered Design for the Web. New York: American Institute of Graphic Arts, New Riders, 2003. Print.