 | Level: Intermediate Alister Lewis-Bowen (alister.lewisbowen@gmail.com), Senior Software Engineer, IBM
Stephen Evanchik (evanchsa@gmail.com), Software Engineer, IBM
Louis Weitzman (louis.weitzman@gmail.com ), Senior Software Engineer, IBM
11 Jul 2006 In this series, you follow along as the IBM Internet Technology Group designs, develops, and deploys a closed community Web site using a suite of software that is freely available. Most of this series focuses on the actual implementation of the Web site, but this second article is a bit more generic. Read it to explore our design process, which can help you to create user experiences for applications, other interfaces, or Web sites. Part 1 discusses the team's requirements, compares several open source content management systems, and provides the rationale for choosing Drupal.
Introduction
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.
Analysis phase
The analysis phase focuses on gathering information to help better understand the
project. It gathers information about the business and user's goals.
|
Firmitas, Utilitas, Venustas
Vitruvius, a famous architect, asserted in his book De architectura that a structure must exhibit the three
qualities of firmitas, utilitas, venustas -- it must be strong (or durable), useful, and beautiful. This is true of any good design. It must be durable
and not crash. It must provide some utility and commodity. Finally, it must be beautiful and delight the
user enough so they'll want to return to use the artifact again.
Similarly, the AIGA describes
good experience design as containing the same three necessary criteria: useful (providing a
needed function), usable (providing an experience that does not break down), and desirable (providing an
interaction that people want to experience).
By making the Web site useful, usable, and desirable, we will facilitate an
increase of customer satisfaction and participation.
|
|
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.
Business goals
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.
User goals
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
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
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
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
Visual language
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.
Design phase
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
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
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
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
Visual language
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.
Prototype phase
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
Development phase
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.
Summary
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.
Resources 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
About the authors | 
| | 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. Contact Alister at alister@us.ibm.com. |
| 
| | 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. Contact Stephen at evanchik@us.ibm.com. |
| 
| | 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. Contact Louis at louisw@us.ibm.com. |
Rate this page
| |
