In this series we're using a fictitious organization, International Business Council (IBC), which connects employees of the company with external business partners in a collaborative community. IBC needs a redesign of their existing Web site and requires document storage, discussion groups, specialized workgroups, conference scheduling, schedule session descriptions, session expiration, and other capabilities.
Our process involves analyzing the business goals, the user's goals, and evaluating the existing Web site. From the analysis, we designed alternative solutions, iteratively refined them from user feedback, and arrived at a final design solution.
Figure 1 shows an overview of our process, which is composed of the four basic phases:
- Analysis
- Design
- Prototyping
- Development
The process helps focus on the user's goals, tasks, and concerns. Although Figure 1 is in a linear sequence, the process is not. Each phase informs the others, both forward and backward. Throughout this process, feedback provides essential information to the previous stages and allows for the evolution of improved solutions. Feedback provides valuable information, keeping the project on track and focusing on the overall objectives. This article focuses on the first three phases of this process.
Figure 1. Four phases of design: analysis, design, prototype and development
See a larger version of this figure.
The process in a formal setting typically produces documentation to help collect feedback and acceptance from the client. Documentation of each phase provides a common understanding as the project moves forward and provides the blueprint for the implementation in phase four. With a fast-paced aggressive schedule, nothing -- other than the artifact being designed -- may be produced. IBC's existing Web site had some known problems and some useful features. By using a formal framework we organized our analysis, which resulted in much more productive discussions with the client.
As more knowledge about a project is gathered, this informs the process and reduces the number of alternatives that support the design goals. Design decisions are improved through the construction of more knowledge about the design issues. As time progresses, the space of alternatives decreases as the information about the design space increases. These decisions drive the process and final implementation.
This article describes a detailed analysis phase. You'll explore the design phase as an iterative, cyclical process of designing, prototyping, and evaluating design alternatives. By understanding our users, we can produce a Web site that is useful, usable, and desirable.
The analysis phase focuses on gathering information to help better understand the project. It gathers information about the business and user's goals. Our problem began with the analysis of an existing Web site. Our process evaluates the Web site in terms of four key components:
This methodology is based largely on TSDesign's User Experience Audit (see Resources). These categories of analysis are used throughout our process as a way of organizing evaluations, recommendations, and design discussions. We integrated the information from both analyses and provided recommendations that were useful. Business and user goals, and each area of analysis, are briefly described here.
It is important to understand the business goals at the beginning of any project. Articulating the mission, business goals, and project goals lays the foundation for a common understanding between client and designer. Subsequent design decisions can then support these goals. The objectives must be made explicit so that subsequent design decisions can be aligned with and support the objectives throughout the process. Our goals are typical of an organization putting up an external Web site for its customers. In this design problem, our business goals include:
- Work more cooperatively with customers on the company's solutions and strategies.
- Collect feedback from customers.
- Disseminate information about the organization and upcoming events.
- Engage the customers.
It is also important to identify the users' goals and desires. There are many techniques to gather this information. Typically, user interviews and questionnaires are employed to better understand their roles and tasks when interacting with the design. If there is an existing design, it provides an avenue for evaluation and recommendations of that design.
With our design problem, the user goals include:
- Enable easy access to content, such as requiring less than three clicks to any piece of content
- Provide simple, unifying Web site navigation
- Allow select members to edit content and submit file attachments
- Enable discussions and comments from the user community
- Provide timely information to the community
The audience is a description of all the users who come to the site and why they come there. The types of users identified are then consolidated into the main roles. Prototypical users for each category are then identified as personas as defined by Cooper (see Resources). The GOAL-DIRECTED® method of Cooper relies upon personas that represent the interests of specific, yet fictitious people that rely on the products, services, and systems that are created.
The most critical of these models are sets of user personas. These are archetypal users whose characteristics are distilled from our primary research. User personas represent distinct sets of behavior patterns and goals. -- Cooper.
By consolidating users into personas, as shown in Figure 2, these prototypical users provide a way to measure the usability and usefulness of a design without trying to satisfy too many users. If these personas can be satisfied during the design process, the majority of the wider user community will also be satisfied. In our design, we defined three personas: the typical customer, a group leader, and an administrator. The requirements for each of these users were different enough and provided a good cross-section of users. We talked to many users in each category to determine how they use the existing Web site. As the design progressed, we would also watch them do tasks in our prototypes to get feedback on our designs and to understand how they actually would use the site.
Figure 2. Transforming audience users into usable personas
Content is what brings users to any site. It must be consistent, up to date, and support the overall objectives of each type of user. During the redesign, we had to consider several issues, including:
- Content should be consistent in its voice.
- The content should be consistent so users aren't distracted or confused about the message. Inconsistency in the content can lead to user confusion and lack of understanding within the
site.
A typical example of inconsistent content is the use of terms throughout a site. Decide on a particular vocabulary, and use it consistently. For example, Figure 4 shows the consolidation of content terms for navigation from a vocabulary of multiple, confusing terms to a more consistent set. Further clarification of these terms was accomplished during the investigation of the navigation and hierarchy of the site. (Some terms are secondary and others are tertiary links.)
- Features should support the overall objectives.
- Each feature should support the overall objectives of the application. Otherwise, they become distracting and irrelevant. If the content rambles, so will the users.
- Quantity of content should be appropriate to its use.
- The amount of content should be appropriate to its use. Typically, users do not read Web pages -- they skim for relevant information. Keep the amount of information to a minimum, while providing the necessary hierarchy. Users can then easily scan the pages. Provide more detail where appropriate to give the complete story.
- Images, graphics, and animations should add value.
- Any graphic elements should add value to the overall experience and support the story being conveyed. In some applications, images are more distracting than helpful. Avoid these situations.
- Content should be accurate and current.
- It is obvious, especially with time-sensitive data, that all content and code should remain accurate and up to date. This includes software upgrades for security purposes, as well as content that changes.
Figure 3 shows a navigation bar of content terms in the existing site and the redesigned Web site. Consistent vocabulary used throughout the site adds clarity and reduces confusion.
Figure 3. Navigation bar, before and after
Navigation and hierarchy are important in making users' tasks easy to accomplish; they can help achieve a natural and easy-to-use interface. It should be straightforward, simple, and predictable. It should be obvious where the user will end up when clicking on an item. Krug compares "real-world" navigation with Web site navigation (see Resources). He indicates that online there is no sense of scale, no sense of direction, and no sense of location. To overcome this discrepancy, Web sites should include several general techniques and conventions, including:
- Appropriate names
- By providing labels of items that are appropriate to their usage, users will have an understanding of where they are and where they might go if they click a link. The ability to correctly predicate where a link will take a user is important. This can be enabled by providing a "scent" of the resulting page.
- Appropriate paths
- By providing appropriate paths to items in a hierarchy, the user can construct a valid mental model of the Web site and understand where they are on the site.
- Sense of place
- A good application always provides a good sense of place, so the user knows where they are and in what context. And, they'll know where to go next. This can be accomplished with visual elements (branding) and through the location of a page within the hierarchy of the site.
- Navigation and hierarchy traversal
- The Web site contents should be appropriately hyperlinked. In some instances, breadcrumbs are appropriate to help users know where they are in the information space, and provide a quick way to traverse back up the hierarchy. For example, references to other parts of our Web site should be active links. Names of people should link to that person's profile.
In the end, the Web site was divided into three major areas consisting of workgroups, conferences, and members. A sense of place was created, in part, by using color in our visual language to indicate each major section. Figure 4 shows a side-by-side comparison of the use of color in each area.
Figure 4. Color to create a sense of place when navigating
Interaction should be as transparent as possible to ease user tasks. Scenarios of typical interactions will be investigated and documented in the design and prototyping phases of the overall design. Interaction is one of the main design elements that has a big impact on ease of use. Interaction includes:
- Clarity of instruction
- Provide the user with simple and straightforward instructions whenever possible. In this case, "less is more," and providing simple instructions helps ensure that users will read and follow them. While most of the actions were only valid for the operations team, they were simple words consistently displayed throughout the site.
- Clarity of feedback
- It is important to provide consistent and clear feedback to the user for any actions they may have initiated. Messages to the user should be reviewed for consistent language and terminology. The feedback should not fault the user for any situation.
- Efficient completion
- The system should support efficient completion of tasks where appropriate. Provide alternate ways for a user to complete (or not) a particular task. Provide the appropriate feedback indicating the completion of tasks.
- Error handling
- Wherever possible, avoid situations in which error conditions occur. But if they do occur, the handling should be simple and straightforward. Any messages to the user should not be condescending or blame them for the current situation.
- Intentional experience
- The intentional experience is expectation management, such as providing an indication of the ramifications of possible users actions. Provide a mechanism so that users know what the ramifications of their actions will be.
- No dead ends
- The interface should avoid dead ends that leave users in a position of not knowing what to do or where to go next.
- Sense of progress
- Interaction with the application should provide users with a sense of progress of their tasks.
- Collaboration
- Collaboration is not always a goal of a design, but in a networked world it is more and more common to provide support for it in the design. Where possible, support the collaboration between users to encourage a sense of community. This community can support one another through the use of user-initiated comments and reviews.
Instead of providing a 404 page that is a dead-end with an error message, Figure 5 shows a modified site map page that we provided to allow users to easily find their relevant information.
Figure 5. Modified site map to easily find relevant information
The visual language is a set of graphic techniques to tie the site together and make a consistent, unambiguous experience for the user. Visual language has several different elements, including colors, grids, typography, widget use, and imagery. The visual language should be consistent throughout the Web site, and support the overall goals of the design. It should reinforce the navigation and hierarchy of the application. A visual language is one of the most effective ways to create a strong and consistent brand. It helps create a sense of place through a common branding of elements in the design.
- Consistent visual style
- The visual style should be consistent across the site, and reinforce the overall design strategy. Using consistent elements will let users know they are on the same Web site.
- Effective concept
- An effective visual concept supports the overall design in all aspects of its presentation. It will visually represent the common business and user goals of the design.
- Support of navigation and hierarchy
- The visual language should support the notion of hierarchy, and reinforce the context of the user's sense of place and task. It should be obvious where you can go next. The structure of the Web site should be easily understandable.
- Strong brand identity
- A strong brand identity is important for users to feel comfortable with the Web site and know that it will be stable and consistent.
The use of color helps define the brand and visual language. As shown in Figure 6, color helps create a sense of place within a Web site.
Figure 6. Using color to create a sense of place for different page types
The next phases explore alternatives by focusing on which ideas and techniques will survive and flourish in an iterative process. We iterate through design, prototyping, and analysis to produce our design decisions and create useful, usable, and desirable solutions. The result is to produce scenarios or walk-throughs of our Web site that highlight the activities of the defined personas. The effectiveness of the alternatives can be determined by user feedback and analysis of the familiar categories of navigation, hierarchy, interaction, and visual language.
The design phase creates the design for the new application or Web site. This phase helps refine the functional and technical specifications for the Web site. Design decisions are not arbitrary, but need to support the business and user goals of the Web site. Taking the analysis and recommendations from the first phase, the design phase elaborates the:
- Content (page schematics)
- Navigation and hierarchy (information architecture)
- Interaction (scenario analysis)
- Visual language (visual style guide)
The content and its structure should be consistent throughout the Web site. Here is where you generate typical page descriptions with the major elements identified and their relation to each other on the page. The final layout may differ, but the component elements that have been identified will be present on all pages. For instance, level-one navigation elements may appear at the top of the page while the level-two links might be presented in the right column. Related information, relevant to the existing page, will be shown customized to the current user. Figure 7 shows the layout of content and its relationship to other elements on the page in a low-fidelity mockup.
Figure 7. Layout of content and relationship to other elements
Navigation and hierarchy provide the backbone of the Web site, where we outline the major categories of information and their attributes. These are then organized into a map of the Web site and a set of menus, buttons, and related links. There are three levels of navigation, which are reflected in the site map shown in Figure 8.
Figure 8. Organizing the pages by their navigation level
See a larger version of this figure.
Interaction is analyzed in part by constructing sequences (static or dynamic) for the most popular activities on the site. Our goal was to reduce the number of clicks to get to any piece of information on the Web site. We wanted to reduce cognitive load and enable ease of use wherever possible.
A typical interaction sequence is shown in Figure 9. A sequence of screens illustrates a simple task interaction sequence, from home page to conference page to the desired information in a particular conference session. Each page represents a new page arrived at by a user selection (click) from the previous page. This short sequence begins at the home page and drills down to information about a session at a particular conference. We've modified a task that was very difficult on the old Web site to a sequence of only two clicks. If significant, we would create scenarios for each persona for the same task. We could then illustrate how the different personas can efficiently perform their tasks within the new design. These tasks can be taken from usability studies, interviews, or other techniques. Typically there are multiple ways to perform any task. Some alternatives are also documented in a design document.
Figure 9. A simple task interaction sequence
We want to build a consistent visual language that reinforces our business and user goals. Here, the intent is to make the "look and feel" simple, clean, and easy to use. The visual language reflects this design approach and reinforces simplicity and ease of use. The visual language includes a number of graphic techniques, such as menus and:
- Color
- Is a good visual tool to help create an identity and look for a Web site. To reinforce the design goal of simplicity, a white background with neutral grays is used to define a simple, clean look. The intention is to allow the reader to focus on the content and their interaction with it.
- Typography
- Another tool to help define the style of a Web site. Again, the intention is to display a simple, clean, and scalable set of type treatments. The typefaces used should also work across different platforms or at a minimum, degrade to generic substitutes. See Figure 10 for an example.
Figure 10. Style guide of fonts for the Web site
- Imagery, icons, and logo
- Iconography is another technique you can use to provide a design with a unique brand and sense of place.
- Layout and grid
- Layout brings all of the components together. Using a grid is a good way to provide order to what otherwise might be a complex presentation.
You can produce a style guide that summarizes the techniques and how they should be applied. In fact, these are often presented as a Web page full of examples to provide the client with a reference implementation of the complete visual language.
The prototype phase is where the information gathered from the previous phases is used to create design alternatives. These alternatives can take many forms, from low-fidelity prototypes that are quick to produce (as in Figure 11) to high-fidelity ones that include user interaction. As described by Berger, there are many types of prototypes, from the abstract to the more concrete (see Resources). Various prototyping techniques include:
- Interactive card sorting
- Paper prototypes
- Wire frames
- Excel Spreadsheets mockups
- Photoshop mockups
- Flash demos
- Code-based implementations
Prototypes can be characterized by the attributes of content fidelity, interactive fidelity, and visual fidelity. The techniques are depicted in Figure 11, with the prototyping techniques based on the axes of information fidelity, visual fidelity, and interaction fidelity. The origin represents prototypes that are static, and the upper right corner represents prototypes that approach high-fidelity working applications.
Figure 11. Prototyping techniques
When building prototypes, there is the tradeoff between providing a high degree of detail compared with exploring more alternatives in the given timeframe. Prototypes of both types are important. However, early in the design process, if too much detail is shown it might detract from the goal of the prototype and focus attention on the wrong aspect of the design. As Yin Yin Wong illustrates in her paper on rapid prototyping (see Resources), there are a range of graphic design techniques available that interface designers can use. For example, if you are interested in layout, you can focus the discussion by organizing your prototype around text blocks that evoke the information structure without giving too much detail, as shown in Figure 12.
Figure 12. Prototype using text blocks to illustrate information structure
Marc Rettig (see Resources) describes the motivations for using low-fidelity prototypes as:
- High fidelity takes a long time to produce.
- Reviewers comment on the details of the prototype and miss the salient features.
- Developers resist change because of the inherent difficulty of changing the code of high fidelity prototypes.
- A prototype can set expectations that can be hard to change.
- A single bug in a high-fidelity prototype can bring the test to a complete halt.
By using low-fidelity prototypes, you can explore the design space more effectively.
Feedback is an important aspect of the process. The prototype phase is tightly integrated with the design phase, and each informs the other as to the direction that should be pursued and developed.
We chose to use two prototyping techniques. Initially, we used low-fidelity wire frames to focus the discussion on content and information architecture. We illustrated these wire frames for every major portion of the Web site. Figure 7 and Figure 9 show typical wire frames.
After the page requirements were captured from the low-fidelity mockups, we then used prototypes to illustrate individual task walk-throughs at higher fidelity. These prototypes were static, high-resolution, and included a high degree of visual language resolution. Figure 13 shows a sample high-resolution prototype of a typical conference page on the Web site.
Figure 13. High-resolution prototype
The final phase in this process is to build the Web site. In the development phase the Web site is actually constructed and tested. The first three phases provide the guidelines for the implementation of the design. The development phase focuses on that implementation.
Testing is not specified as its own phase. As development progresses, testing continuously checks the validity of the implementation in terms of stability, and correctness. At various stages of the implementation, feedback from the client is incorporated to keep the overall design on track. Subsequent articles in this series will address the implementation issues in more detail.
In this article you explored the process we used to design our client's Web site. The process is also useful to design other user experiences, such as applications and interfaces for physical objects. Hopefully this article has given you some ideas about how to organize your own process. References to methods and techniques are provided for you to explore how others describe aspects of their design process.
Once the Web site has been designed, we begin the implementation phase. The next two articles in this series describe how to install the development environment for both Windows (Part 3) and Linux (Part 4). You'll then have the environment needed to start working with Drupal to create your own Web site. Subsequent articles will discuss specifics about developing a Drupal specific Web site.
Learn
- Get RSS feeds for this series. (Find out more about RSS.)
-
There are many useful references for each phase of the design process. Here are just a few that we found helpful:
- "Effective Prototyping: Cheap and Fast Tools for Creating Product Visualizations," by Berger, Arnowitz, Dykstra-Erickson; (ACM CHI 2005, Portland, Oregon, March 2005).
- Newsletter on Personas, by A. Cooper.
- Don't Make Me Think! A Common Sense Approach to Web Usability: 2nd Edition, by Krug; (Peachpit Press, 2005).
- Designing Visual Interfaces, by Mullet and Sano; (SunSoft Press, Mountain View, California, 1995).
- "Prototyping for Tiny Fingers," by M. Rettig; (Communications of the ACM, Vol. 37, No. 4. April 1994).
- "The Zen of CSS Design: Visual Enlightenment for the Web," by Shea and Holzschlag; (Peachpit Press, 2005).
- "Designing Effective E-Business Systems: A Holistic Approach," by T. Swack; (Information Architecture 2000, La Jolla, Ca October 26-27, 2000).
- Rough and Ready Prototypes: Lessons from Graphic Design, by Y. Wong; (ACM SIGCHI Short Talk, 1992).
Get products and technologies
- Drupal: An open source content management system
- MySQL: An open source database store
- PHP: A Web-based language for supporting dynamic content
- PHPMyAdmin: A PHP tool intended to handle the administration of MySQL over the Web
- MySQL Query Browser: A graphical client to work with your MySQL databases and run queries
- MySQL Administrator: A GUI to administer your MySQL server
- Apache: An open source Web server
- Eclipse: An open source development environment
- CVS: A source code management system integrated into Eclipse to track code changes
Discuss
- Participate in the discussion forum.
- developerWorks
blogs: Get involved in the developerWorks community.
- Stay current with developerWorks technical events and webcasts.
Alister Lewis-Bowen is a senior software engineer in IBM's Internet Technology Group. He has worked on Internet and Web technologies as an IBM UK employee since 1993. Alister was brought to the U.S. to work on the Web sites for the IBM-sponsored sports events, then as senior Webmaster for ibm.com. He is currently helping create semantic Web prototypes.
Stephen Evanchik is a software engineer in IBM's Internet Technology Group. He has been a contributor to many open source software projects, the most notable being his IBM TrackPoint driver in the Linux kernel. Stephen is currently working with emerging semantic Web technologies.
Louis Weitzman is a senior software engineer in IBM's Internet Technology Group. For 30 years he has worked at the intersection of design and computation. He helped develop an XML, fragment-based content management system in use by ibm.com, and currently is involved with bringing the design process to emerging projects.
Comments (Undergoing maintenance)
Table of contents
Local resources
My developerWorks community
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags