Customer Oriented Design
Summarized and quoted from “The Design of Sites
- Patterns for Creating Winning Web Sites”
By Douglas K. Van Duyne
James A. Landay
Jason I. Hong
Published by Prentice Hall
1
Web Design
• What to put in?
Four previous styles of web design
•
•
•
•
Company-Center Design
Technology-Centered Design
Designer-Centered Design
User-Centered Design
• Now Customer-Oriented Design
3
Four previous styles of web design
• Company-Center Design
– Found in sites of large companies
– Focus on the needs and interests of the company
– Focus on internal organization
– Little on products
– Extensive use of jargons
– Brochureware
– Easy to lose customers
4
Four previous styles of web design
• Technology-Centered Design
– Overloaded with animation, audio, video,
streaming banners
– Little research about business needs and
customer needs
5
Four previous styles of web design
• Designer-Centered Design
– “What the client sometimes doesn’t understand is
the less they talk to us, the better it is. We know
what is best.”
– May be cool, edgy, loaded with technologies
– Slow to download, hard to use, may not work with
all broswers!
6
Four previous styles of web design
• User-Centered
– 1980’s:
– Engineering useful and usable designs
– Not enough
• It is easier to get an audience than traditional
mean but
• Goal should be to convert Web visitors to
customers and keep coming them back
7
Customer-Oriented Design
• Builds on user-centered design
• Focus on fusion of marketing and usability
issues
• Principles
• Processes
• Patterns
8
Principles
• High-level concepts that guide the entire
design process and help you stay focused
– Knowing your customers
– Involving your customer in iterative design
• More of this later
9
Processes
• How you put the processes into practice
• Web site development process
– Major steps and milestones for developing a Web
site
– How to conduct a focus group
– How to run a survey
– How to conduct a usability test
More of this later
10
Patterns
• Design patterns solve recurring design
problems, so you can use pattern solutions to
design your sites without reinventing the
wheel.
• Patterns communicate insights into design
problems, capturing the essence of the
problems and their solutions in a compact
form
• Example: action button
11
A sample button
These are
gray 3D action
buttons
12
A 3D button and graphical
action buttons for deals and
Cart
Personal E-Commerce Pattern
• Problem: People appreciate the convenience
of ordering online, but if a site is cumbersome,
is veiled about its pricing and policies, or does
not seem to provide personal benefit, they
leave.
Personal E-Commerce Pattern
Issues and Guidelines
• Make it clear why people should purchase
from you
– Low prices?
– Fast shipment? Free shipment?
– Unbiased, high-quality product reviews?
– A wide selection of products?
– Specialized set of products that are hard to find?
– Ease of use?
Personal E-Commerce Pattern
Issues and Guidelines
• Provide many ways to find products
– Know what they are looking for – use search
– Help to streamline product selection – predictive
input
– Vague notion? – browse
Personal E-Commerce Pattern
Issues and Guidelines
• Keep it Convenient
– Thorough description?
– Product comparison?
– Keep customer focused – quick-flow checkout
– Help impulse buying – provide multiple platforms
– mobile screen sizing, mobile input control,
location-based services
• Sign-in/New Account or guest account
Personal E-Commerce Pattern
Issues and Guidelines
• Some Advanced Features
– Avoid surprises
• Privacy and security
• Additional charges – high shipping and handling
charges at the end?
• Returns
Personal E-Commerce Pattern Solution
• Differentiate your site so that customers know why
it’s compelling and valuable. Give shopper browsing
and searching tools, and provide rich, detailed
information about your products and services. Make
your site accessible to everyone. On every page
include clear links to your privacy and security policy,
shipping and handling policies, return policy, and
frequently asked questions. Let customers collect
items in one place and check out quickly, with
minimal distraction.
Pattern 2: News Mosaics
• Problem: Many readers come to web sites to
learn about their world through news and
history. These sites must deliver the news
that their readers want, with the depth and
breadth of coverage necessary to engage
them, and make the historical record available
online so that customers can search for older
stories
News Mosaics Pattern
Issues and Guidelines
• Time and Access
– TV, radio, print: short life span
– Web-based news can be accessed online
• Up-to-the-second news
• Week-old news
• Five-year-old news
– Time pressure
• hard to re-create layout
• Check sources
News Mosaics Pattern
Issues and Guidelines
• Form
– TV has motion, sound but limited in duration and
hence depth
– Radio has storytelling, music advantages but
limited in duration and depth; travels better than
TV but lacks vision
– Print has more space, more depth, mobility
– Web has some of the advantages of the other
media but has other limitations.
News Mosaics Pattern
Issues and Guidelines
• Web limitations
– How people read online: skim (and may hit the
back button)
• Clear first read pattern
• Use the Inverted-Pyramid writing style to give the most
important information first.
• Lacks Portability, large format, and legibility
– Provide short and long forms of news using
hyperlinks
– Break the news up into manageable chunks
News Mosaics Pattern
Issues and Guidelines
• Audience
– TV, radio, print are limited to targeted
demographic groups.
– Web-based news can be tailored to each person
• Yes but balkanization of information?
• Challenge: give the customer the news they want and
the news they don’t know they want
– Multiple ways to navigate: by category, keywords, by historical
reference, etc.
– Search engines (cnn.com, nytimes.com, and
washingtonpost.com provide archives but only cnn.com
provide permanent addresses.
Lab
• Critique a number of personal E-commerce
sites and New Mosaic sites according to the
two patterns discussed.
News Mosaics Pattern
Solution
• Build a mosaic of news by providing breadth and depth of
coverage through a diversity of category and further
refinement through subcategories. Within each category,
highlight the most important articles and lead text, while also
identifying articles that might otherwise be missed. Within
each article, provide a high-level summary first, for people
who are looking for a quick read, but include more in-depth
information in the rest of the article. Link together related
news items, whether they are articles, radio stories, or video
clips. Archive this information in the same place on your
servers for historical reference.