2. The Web Design Process
We all know what a good web site is. It's a web site that looks good, that makes us feel good, and that lets us get done the tasks which we want to do. It's a place that we want to return to. It's a place that is efficient, yet pleasant. But creating this great web site is no easy task and there are many aspects to the design process in the creation of a good web site Usability is one of those aspects. Other aspects include information architecture, interaction design, visual design, and programming design.
In this unit, we are going to focus on the usability aspect of web design. However, since all the aspects are so intertwined, it's not easy to separate them out. We may discuss information architecture a little in this unit and then again later. The goal of this unit is to get an understanding of what these significant elements of usability are, how to implement usability, and how to gauge the success of your usability plans. First, let's look at the steps of design. How you plan your design cycle is going to affect the outcome. The internet changes rapidly. Traditional design cycles don't support rapid change.
Usability is a word that you will hear throughout this course. You may hear many variations on the word usability: experience design, human-centered design, user-centered design, interaction design are just a few of the variations. The speed of communication on the internet allows site visitors to leave in seconds if their expectations aren't met. Each site exists for one or more purposes. It is the designer's job to be sure that user's expectations are met with a quick and seamless ease. Branding helps to communicate the experience. And, in return, the experience of interacting with the site should reinforce the brand. Understanding the brand is a critical part of the project inventory and analysis.
Bryan Peterson, the 60 second guru explains the design process. (2:26)
Waterfall vs. Iterative Design
The waterfall model of development consists of a series of sequential steps or stages. Each stage is separate from the previous stage and from the following stage. You cannot move backwards up the waterfall. A clear example of the waterfall process is building construction. If you are an architect designing a house, you will:
- Meet the client and discuss their wants, needs and budget; the architect also collects information about the property itself and any code restrictions.
- The architect designs the house. This phase may take several meeting with adjustments.
- The construction is bid and the builder builds the house under the architect's supervision.
- The family moves into the house.
This traditional method for construction is the same method used for software and web design. The major difference is that at the end, the product is released in a 'beta' testing form instead of the final move-in of the client. In magazine or newspaper design, a similar process is followed. Both end with a physical, tangible product.
The waterfall process makes sense for a building or a magazine, where there is a time deadline and one release of the object. With construction, the building is designed. Drawings and other contract documents are created. Costs are controlled by having a construction company bid on the entire project based on these construction documents Then the construction begins: the is hole dug and the foundation poured. Walls and a roof are constructed. Interiors are installed last. Ideally, the actual construction will deviate little from the original construction documents.
The reality, however, is that few things will be perfect the first time that they are tried. Architects often work in thematic progressions. Minoru Yamasaki, designer of New York's World Trade Center, first tried the design of tightly spaced exterior steel lattice and arched columns on the IBM Building in Seattle. The Seattle version was heavy and awkward. The design was re-interpreted and refined in Buffalo. When Yamasaki used the design in NY, the design is elongated and elegant.
![]() Seattle |
![]() Buffalo |
World Trade Center, New York |
For software however, and in particular for the web, there is a better process: the iterative (or agile) design process. Iterative design allows for feedback and revisions at every level of the process. Iterative design is user focused design because it emphasizes getting user feedback at each step and then adjusted the process and the product to respond to that feedback.
Iterative Design
Step 1-Define
- Project definition
- Information gathering (project inventory)
- Research & analysis
Step 2-Design
- Concept development
- Design
- Prototype
- Analysis
Step 3-Deploy, Test & Analyze
- Release
- Test
- Analyze
Step 4-Repeat
Web design traditionally has been done on the waterfall model, with big launches for new designs. In the past few years, there has been a transition of many of the major sites to the iterative model. The iterative model is a continuous cycle, often described as: "wash, rinse, repeat", (as opposed to the one way waterfall). User input and evaluation is sought at all stages with analysis from user input constantly informing the next stage of the process. (image from NASA)
Strike Up The Brand: How to Design for Branding (47 minutes)
Jared M. Spool is founder of User Interface Engineering, the largest usability research organization of it's kind in the world. In this video he talks about the impact of branding on internet user experience. For best results, click on As you gather information about the client and their site, a primary concern should be to focus on the brand and how that is communicated through internet experiences.
Nobody Knows How You Made it, and Nobody Cares Nobody Cares About Your Great Engineering
Gamasutra presents another side to creating in the digital world: How to Prototype a Game in Under 7 Days. The article does not deal with web design, per se, but rather the process of creativity. One outcome of this rapid prototype process was the game World of Goo. Below is the article summary, which could serve as a short list for sparking creative thinking in any media.
Handy Cut-Out List!
Setup: Rapid is a State of Mind
- Embrace the Possibility of Failure - it Encourages Creative Risk Taking
- Enforce Short Development Cycles (More Time != More Quality)
- Constrain Creativity to Make You Want it Even More
- Gather a Kickass Team and an Objective Advisor - Mindset is as Important as Talent
- Develop in Parallel for Maximum Splatter
Design: Creativity and the Myth of Brainstorming
- Formal Brainstorming Has a 0% Success Rate
- Gather Concept Art and Music to Create an Emotional Target
- Simulate in Your Head - Pre-Prototype the Prototype
Development: Nobody Knows How You Made it, and Nobody Cares
- Build the Toy First
- If You Can Get Away With it, Fake it
- Cut Your Losses and "Learn When to Shoot Your Baby in the Crib"
- Heavy Theming Will Not Salvage Bad Design (or "You Can't Polish a Turd")
- But Overall Aesthetic Matters! Apply a Healthy Spread of Art, Sound, and Music
- Nobody Cares About Your Great Engineering
General Gameplay: Sensual Lessons in Juicy Fun
- Complexity is Not Necessary for Fun
- Create a Sense of Ownership to Keep 'em Crawling Back for More
- "Experimental" Does Not Mean "Complex"
- Build Toward a Well Defined Goal
- Make it Juicy!
World of Goo trailer (52 seconds)
Guidelines for design:
Design, like ball games or surgery has some basics principles that apply no matter what you are wok ring with. For the rest of the semester we will be investigating different aspects of design communication and integrity. As a beginning, look over the Ten Usability Heuristics by Jakob Nielsen (abbreviated version below). These are guidelines that we will return to again and again:
Ten Usability Heuristics by Jakob Nielsen
- Visibility of system status
- Match between system and the real world
- User control and freedom
- Consistency and standards
- Error prevention
- Recognition rather than recall
- Flexibility and efficiency of use
- Aesthetic and minimalist design
- Help users recognize, diagnose, and recover from errors
For this module, our prime focus will be on the Carnegie Library Re-design. The readings are actually PowerPoint presentations given by the designers. These slides document their thought processes and actions as they went through the various phases of design. At the end, we can view their final product and see how it was received by the users.
Readings
- Carnegie Library | Dynamic Information Environment- MAYA Design (iterative method) - This series of slides documents the iterative design process in the re-design of the Carnegie library - both online and in-person; from User Experience Week 2005 (powerpoint presentation - 25MB)
- Ten Usability Heuristics by Jakob Nielsen
- How to Prototype a Game in Under 7 Days by Kyle Gabler, Kyle Gray, Matt Kucic, and Shalin Shodhan (Gamasutra)
- Universal Principles of Design (textbook)
-
- Satisficing - p. 170-171
- Ockham's Razor - p 142-143
- Signal to Noise - p 182 - 183
- Form Follows Function - p 90-91
- Analyze - Step-by-Step Usability Guide from usability.gov
Recommended Readings and Resources
- Step-by-Step Usability Guide: Plan
- Alan Cooper's process
- Iterative User Interface Design by Jakob Nielsen Originally published in IEEE Computer Vol. 26, No. 11 (November 1993)
Discussion:
Week one (Jan 26 - Feb 1) discussion questions:
You use things everyday. Usability expert refers to usability as 'advanced common sense'. Often we let our own expertise get in the way of applying common sense. Designer want things to look cool rather than be easy to use. Programmers want to use the latest technologies. Managers wanat to save the most money (why else would the Carnegie Libraries have all those paper signs taped up everywhere?)
- What is one example of the worst, least usable interface that you deal with regularly? (post a photo or screenshot of this, if you can) Clue: physical interfaces that don't work tend to get papered over with notes that try to clarify use. An interface can be anything from an interactive web page to a digital gas pump screen.
- What's wrong with your selected interface?
- What's right with this interface?
- Does one of the readings (Ockham's Razor, Signal to Noise or Form Follows Function) from our textbook this week offer a potential solution to this particular design dilemma?
Week Two Discussion Questions: clarity, complexity, simplicity.
- Is complexity necessarily the enemy?
- How does clarity differ from simplicity?
- What does the human 'soul' crave complexity or simplicity?
- What about contradictions? Much humor is based contradictions. Should good design be humorless?
- What were some the approaches to these issues that Maya used in the redesign of the Carnegie Library?
A point of design theory to ponder in answering these questions: in 1966, architect Robert Venturi wrote Complexity and Contradiction in Architecture, a treatise proclaiming a rebellion against the sterility of modern architecture/the international style. Below is a short excerpt from that book:
"By embracing contradiction as well as complexity, I aim for vitality as well as validity. Architects can no longer afford to be intimidated by the puritanically moral language of orthodox Modern architecture. I like elements which are hybrid rather than "pure," compromising rather than "clean," distorted rather than "straightforward,” ambiguous rather than "articulated," perverse as well as impersonal, boring as well as "interesting," conventional rather than "designed," accommodating rather than excluding, redundant rather than simple, vestigial as well as innovating, inconsistent and equivocal rather than direct and clear. I am for messy vitality over obvious unity. I include the non sequitur and proclaim the duality.
I am for richness of meaning rather than clarity of meaning; for the implicit function as well as the explicit function. I prefer "both-and" to "either-or," black and white, and sometimes gray, to black or white. A valid architecture evokes many levels of meaning and combinations of focus: its space and its elements become readable and Workable in several ways at once.
But an architecture of complexity and contradiction has a special obligation toward the whole: its truth must be in its totality or its implications of totality. It must embody the difficult unity of inclusion rather than the easy unity of exclusion. More is not less."
Assignment - Web Design Problem:
You will be working the rest of the semester as the information architect/designer for a new web site for whichever of the 5 sites listed below that you choose. Since we have 22 students and 5 sites, there will be multiple people working on any one site. You will be working independently, producing your own set of documents that reflects your understanding of the issue and your own design sensibilities. Each module for the rest of the semester will focus on understanding one aspect of web site design and planning.
Problem Statement:
Each of the sites is a local attraction which has potential to be a national attraction, given sufficient exposure. The director has hired you to improve the site. By improve, she means specifically:
- Increase national exposure of the site on a general level.
- Don't target specific users, just get the word out to everyone who could potentially come to the museum/event if they are in the area. Maybe they would even plan their vacation around it - if only she could get visitors to come to the site and learn about how cool they really are!
- She would like to see an increase of visits from nationwide internet users to the home page, as well as an increase of visits to the events pages.
- Increase local exposure to the target audience. You will need to determine who that target audience is and how best to communicate the site's message to them.
- Reorganize the site contents for logical browsing by both the local and national audience - Module 3
- Create a folksonomy/ontology for the browsers that speaks to them, not to the board, not to the local tourist office, but directly to the visitors - Module 4
- Module 5 is to help you learn the basics of graphic design so that you can communicate intelligently with your designer.
- The site must be usable for both a national audience and for the targeted local audience - Module 6
- She wants the focus to be on storytelling. The site should tell a story, visually and verbally. The story should create the compelling involvement of the visitors. It is up to you to define that story. Your storyline will likely be different from anyone else working on that site. This is where your artistic flair will come in. As you look for comparable sites, look at how they draw the user in through the promise of excitement, adventure, service, education or relaxation.
- Site layout and design must be clear and communicate to the audiences. note: this is schematic design, not final design. You'll be hiring a graphic designer to do the final design. Still you don't want to leave them to run amok - Module 7.
Site Selection
Let's begin! You will need to select one of the five web sites listed below to be your site of study for the rest of the semester. Please post your choice of site in the forums.
1 - Ski to Sea Race: http://www.skitosea.com/
In 1973, the Mt. Baker Marathon was recreated and called the Ski to Sea Race. The Race, now a relay, was designed to showcase the recreational opportunities in Whatcom County. The Race has evolved into the "Grand Daddy" of all races, attracting participants from all over the world. In 2005, the Ski to Sea Race was featured nationally on the "Fox Sports Northwest" network, reaching 3.2 million households. The race begins with cross-country skiing at the top of Mt. Baker. There are 7 parts of the race, which includes running, biking, kayaking, and canoeing down the mountain to Bellingham Bay. The flyer for last year's race is online at: http://www.skitosea.com/Assets/formuploads/spring%202008.pdf
2 - National Storytelling Foundation: http://www.storytellingfoundation.net/
The home for the Center's work is the International Storytelling Campus 'a beacon for storytelling worldwide and a resource for storytelling. The campus in Jonesborough' the only facility anywhere in the world devoted exclusively to the power of storytelling and its creative applications 'include a 200-year-old country inn, and education building, and a three-acre park.'
Each year the National Storytelling Foundation holds the Storytelling Festival. "We erect large, circus-type tents in downtown Jonesborough with seating in each tent. Regular programming is then scheduled in each tent throughout the day; our attendees simply choose which tent they want to attend at which time. Regular festival programming runs from 10 a.m. to 10 p.m. Friday and Saturday, and from 10 a.m. to 4:30 p.m. on Sunday. Each session is one hour long, with a 30-minute break between. A dinner break is scheduled between 5:30 and 8:00 p.m. on Friday and Saturday." There are additional special events relating to storytelling.
3 - Burgess Shale Geoscience Foundation http://www.burgess-shale.bc.ca/
The Burgess Shale Formation is one of the world's most celebrated fossil localities and is famous for the exceptional preservation of the fossils found within it, in which the soft parts are preserved. It is 505 million years (Middle Cambrian) in age, making it one of the earliest fossil beds to preserve the soft parts of animals. .
The Burgess Shale Geoscience Foundation is a non-profit educational organization with charitable status based in Field, British Columbia. It was established in 1989 to increase the exposure of the general public to the Earth Sciences and in particular, to promote interest in Geology and Paleontology. Access to the fossil beds has been restricted by the Canadian government. The Foundation is allowed to take visitors on guided tours of the fossil beds.
Carnivore Preservation Trust: http://www.cptigers.org/
CPT is a wildlife sanctuary in Pittsboro, NC The Carnivore Preservation Trust is a nonprofit organization that rescues tigers, leopards and other carnivores and nurses them back to health. A secondary mission of the CPT is to educate the public about what threatens these animals: in the wild, in the pet trade, and in the entertainment industry. The CPT was incorporated in 1981 by Dr. Michael Bleyman, a geneticist at UNC, as a breeding facility for carnivores that were vanishing keystone species - species critical to the survival of their ecosystem. CPT's intent was to keep a viable population of these animals in trust until their home habitats were sufficiently protected to support them again.
El Camino Real International Heritage Center: http://www.caminorealheritage.org/
El Camino Real International Heritage Center is one of New Mexico's newest state monuments, dedicated in November 2005. El Camino Real is the oldest, and longest continuously used "highway," in the country, bringing European colonists to "New Spain" (New Mexico) beginning 22 years before the Mayflower landed. It is a designated National Historic Trail. The Monument presents an historic corridor of trade, immigration and ideas. This corridor originated as a series of indigenous trails used to exchange goods between Mesoamericans and Native Americans, centuries before the arrival of the Spanish. The Spanish expanded the northern portion of the road, claiming the New Mexico Territory for the Spanish crown. El Camino Real de Tierra Adentro, the Royal Road of the Interior Lands, is recognized as the first European road in North America and one of the most important historic trails in the United States. It is also one of New Mexico's most important cultural treasures.


