Transcript source - Indiana University Bloomington

Electronic Commerce
Designing a commercial site
I. What is the core of the design process?
• Designing for the user experience
• A framework for commercial site design
• Web usability
II. Principles of bad design
• Web authoring lies
• Major design mistakes
School of Library and Information Science
Electronic Commerce
Designing a commercial site
I. What is the core of the design process?
“Proper World Wide Web site design is largely a
matter of balancing the structure and relationship of
menu or ‘home’ pages and individual content pages
or other linked graphics and documents.
The goal is to build a hierarchy of menus and pages
that feels natural and well-structured to the user, and
doesn’t interfere with their use of the Web site or
mislead them.”
Lynch, P. J. (1995). Yale University C/AIM WWW Style Guide
http://info.med.yale.edu/caim/StyleManual_Top
School of Library and Information Science
Electronic Commerce
A web site is a “self-service” product
What must be done to make this experience easy,
natural, and intuitive?
What are the benefits of a good user experience?
People become customers
What are the costs of a bad user experience?
The site loses money
What are the elements of a good user experience?
Garrett, J.J. (2003). The elements of user experience: User-centered
design for the web. Indianapolis, IN: New Riders.
School of Library and Information Science
Electronic Commerce
There is a direct correlation between the satisfaction a
person has on your site and their willingness to return
This can be seen in the “conversion rate”
Can be measured in a range of ways
A ratio of visits to sales
The % of abandoned shopping carts
The frequency of submission of personal information
The user experience has an impact on the ROI
The ideal user experience means that all of the visitor’s
actions on your site are the result of your intentional
design decisions
How do you do this for the ecommerce user?
School of Library and Information Science
Electronic Commerce
• Designing the user experience for ecommerce
~ Design for “wayfinding”
It is a process of solving problems in digital space
Decision making: formulating an action plan
Decision executing: implementing the plan
The site should make it easy for visitors to know:
Where they are on the site
Where the stuff is that they want to see
How to get to this stuff
This makes use of signs, cues, and structural elements
Wodtke, C. (2003). Information Architecture: Blueprints for the Web.
Indianapolis, IN: New Riders.
School of Library and Information Science
Electronic Commerce
~ Wayfinding
Take into account how people move through digital space
Survey knowledge: viewing the entire space
Procedural knowledge: following a specific route
Landmark knowledge: static details about the route
Wayfinding tasks
Naive search: a task without prior knowledge of the
target’s location
Primed search: a task where the location of the target is
known
Exploration: a task in which there is no target
School of Library and Information Science
Electronic Commerce
~ Manage user expectations and provide frequent
feedback
Determine the consequences of all actions that can occur
What happens when a user makes a mistake in a form?
How do you let a user know that a process is chugging
away in the background?
Keep the shopping cart and its contents in view
Assume that you can’t totally control a user's experience
Gathering information from users is critical
Give them enough information to manage their own
experience
Help them help you through feedback and testing
School of Library and Information Science
Electronic Commerce
~ Use ergonomic design
Think about the amount of scrolling that is necessary to
use the site
This is important for people with RSI
Think about the use of color and font size
This is important for people with colorblindness and
visual problems
Think carefully about the use of audio
This can be embarrassing in certain locations
Know as much as possible about your typical user’s
computing configuration
Monitor size, connection speed, browser version
School of Library and Information Science
Electronic Commerce
~ Design for consistency and use standards
Study competitors for de facto standards and best
practices
Make sure labels and index terms are standardized
Apply relevant accessibility standards
Design for graceful transformation
Separate structure from presentation
Render text accessible to almost all browsing devices
and users
Pages should work for users who cannot see or hear
Provide equivalent alternatives to auditory and visual
content
School of Library and Information Science
Electronic Commerce
~ Use contingent design
Provide error support
Anticipate and head off problems with clear language
Error messages should be noticeable at a glance
Use color, icons, and text to clearly highlight and
explain the problem area
Always identify errors the same way
A good error message lets a customer instantly know
That an error occurred
What the error is
How to recover from it
School of Library and Information Science
Electronic Commerce
• A framework for commercial site design
Surface
The pages, content, and the functions, visual design
Skeleton
The wireframe, information, navigation, and interface
design
Structure
The higher-level organization of the site
Scope
What the site should and can do
Strategy
The site’s organizational and user-centered purposes
School of Library and Information Science
Electronic Commerce
The design process
Planning and strategy:
predesign analysis
Conceptual design:
prototyping
Information organization:
Maintenance
and updating
Feedback and
redesign
Launch
Content development
Production:
Navigation systems
Search tool
Labeling systems
Operations
Testing:
Quality assurance
and usability
School of Library and Information Science
Electronic Commerce
• Web usability
“Usability has assumed a much greater importance in
the Internet economy than it has in the past...
The equation is simple:
In product design and software design, customers pay
first and experience usability later
On the web, users experience usability first and pay
later
It is very clear why usability is important for web design”
Nielsen, J. (1999). Designing Web Usability. Indianapolis, IN: New
Riders. 10-11.
School of Library and Information Science
Electronic Commerce
Web design is different from traditional GUI design
In traditional design, you control every pixel on the
screen and:
Know the system you are designing for
Know what fonts are installed
Know how large the screen typically will be, and
Have the vendor’s style guide to tell you the rules
In web design, you share control with users
Pages are viewed with computers, WebTV, hand-held
devices, cell phones, Dick Tracy watches
School of Library and Information Science
Electronic Commerce
In traditional design, the designer controls where the
user can go and when
A traditional application is an “enclosed user interface
experience”
The user typically works with an application for a
considerable amount of time
On the web, the user controls her navigation
She can rapidly move among sites
People stay on a site one minute or less unless they
have a reason to be there
School of Library and Information Science
Electronic Commerce
A homepage is an important feature of an ebusiness site
“[It is the most valuable real estate in the world”
The homepage is the digital face of the company
This is where branding begins
It receives the most visits
It represents a very large investment
The average commercial web site costs ~$1,400,000
It provides an overview of the company’s web space
It provides a view of the information architecture
It lays out the navigation scheme
Nielsen. J. and Tahir. M. (2001). Homepage usability: 50 web sites
deconstructed. Indianapolis, IN: New Riders.
School of Library and Information Science
Electronic Commerce
Design goals
How can you communicate the purpose of your site?
Make sure that your logo is visible and in a noticeable
location
Use a slogan that concisely explains what you do
Use it to differentiate yourself
Make sure that the home page is distinct in its design
This minimizes user confusion
Decide what the most important tasks are for your patrons
and display appropriate links prominently
Be sure to include contact information
School of Library and Information Science
Electronic Commerce
Use the page to inform the visitor about your company
Provide links to information about the company
This could include
About us
Employment
Investor relations
Groups these links together
Include a link to a page of press releases
This is important for journalists
Have a link to a page describing your privacy policy
Tell people what type of information you collect and
what it’s used for
Only include information relevant to external audiences
Use the intranet for the rest
School of Library and Information Science
Electronic Commerce
Pay attention to the content of this page - writing matters
Use your customers’ language to describe the main
sections and categories
Find out the terms they use for your business processes
Avoid the jargon of your particular specialty
Try to minimize redundant content
Use consistent style rules throughout the site
Avoid the imperative except where it is necessary
Use examples to clarify content
Provide links to further explanations (narrowing)
Provide links to more general information (expanding)
School of Library and Information Science
Electronic Commerce
Page design: how to carve up the real estate
A web page should be dominated by content
“Navigation is a necessary evil and not a goal unto
itself”
What % of the page is actually content?
Whitespace can be useful to organize content
800X600 screen has 480,000 pixels
33% are used for the browser, 20% should be used
for navigation
How much of the rest can be used for content?
School of Library and Information Science
Electronic Commerce
Work toward simplification
How much can you remove without compromising
the design?
Design “resolution independent” pages?
Use % instead of fixed pixel dimensions
Design for linking
Structural navigation links: outline the site’s IA
Associative links: allow within page movement
See also links: access related content (on and offsite)
Links should convey information with link titles
To the <A HREF=“http://ecstore1/catalog/” TITLE=Our product
catalog”>catalog</A>!
School of Library and Information Science
Electronic Commerce
Develop a consistent link strategy
Clearly distinguish links from each other
Avoid generic descriptors like “Click here” and “More”
Use link colors that can be differentiated
If a link does something unusual, explain it
A primary purpose of this page is navigation
Group the navigation options and make them visible
Avoid redundant choices
Clearly label links
Use icons carefully
Link to the shopping cart from the homepage
School of Library and Information Science
Electronic Commerce
Use a consistent search strategy
Provide an input box on the homepage
Use a “Go” button to activate the search
Search the entire site
Include a link to an advanced search option
Make the box big and wide enough to allow editing (30
characters)
Provide task-oriented shortcuts
Link to major tasks and functions that visitors want
Avoid overkill with options
School of Library and Information Science
Electronic Commerce
Be judicious in your use of graphics and animation
Use graphics for content and not ornamentation
Label the image if it differs from the test it supports
Edit or crop images to fit the page
Be very careful about overlaying text on images
Be even more careful using animation
Don’t animate critical elements (like the logo)
Remember that it draws attention away from critical
content
Use high contrast text and background
Have the most critical elements “above the fold”
Use “liquid layout”
School of Library and Information Science
Electronic Commerce
Size matters
Because of variability in displays, design for a 600
pixel width
Design for deep linking
If users come in at lower levels, what branding content
should they see?
Design for consistency
What is the metaphor you will carry throughout your
site?
Navigation: Where am I? Where have I been? Where
am I going?
Location is relative to the web and to the site
structure
School of Library and Information Science
Electronic Commerce
Assessment: sample metrics
Lowering costs: distribution of sales materials, press
releases, phone calls
Business development: new leads in existing and new
markets
Improved customer service: use of forms, email, other
feedback, sales
Improved public perception: user feedback, mention in
the press, links from other sites
Site performance: hits, page views, new and repeat
users, downloads
Usability testing
School of Library and Information Science
Electronic Commerce
Designing a commercial site
I. What is the core of the design process?
• Designing for the user experience
• A framework for commercial site design
• Web usability
II. Principles of bad design
• Web authoring lies
• Major design mistakes
School of Library and Information Science
Electronic Commerce
Common design mistakes
Missing that the web changes the way we do business
Not knowing how to manage a team-based web design
project
Making the site’s information architecture mirror the
organizational structure
Testing only within the organization
Not writing for the web
Not using an effective linking strategy
Not involving the target audience early enough
School of Library and Information Science
Electronic Commerce
Top five web authoring lies:
1: Your site is WYSIWYG Don’t assume what you see is
what everyone sees
2: Exploiting browser quirks shows you’re smart
Capitalizing on browser quirks is a good way to lose half
your audience
3: Flashy graphics make you look good
Speed is the #1 web problem
Small image sizes speed downloading
Berst, J. (1998). Top 5 Web Authoring Lies. ZDNet AnchorDesk
http://www.zdnet.com/anchordesk/story/story_2226.html
School of Library and Information Science
Electronic Commerce
4: Small graphics files equal ugly graphics
Learn to reduce the size of your graphics files
Reduce the number of graphics, reducing the number
of server connections visitors must
5: Broken links are not your problem
Users say broken links are the #2 web problem
Nielsen reports 6% of web links were broken in May
1998 -- double the percentage found in August 1997
Regular checking prevents “linkrot”
School of Library and Information Science
Electronic Commerce
The major goals of a lame site:
1. Drive away customers
Force your visitors to register before they can enter
Make the first item is a huge graphic, which is totally
meaningless until it is completely downloaded
The title of the page should be meaningless
2. Confuse people about the company
They should have no idea what kind of services you
offer, much less what they cost or how they work
3. Don’t provide contact information
Morris, C. (1998). How To Build Lame Web Sites
http://webdevelopersjournal.com/columns/perpend1.html
School of Library and Information Science
Electronic Commerce
3. Project an amateurish, untrustworthy image for the
company
Don’t pay attention to proper typography
Bad spelling is easy-you don't even have to misspell
words, just use them impropitiously
Ignore proper punctuation! and grammar
Page layout is one of the easiest things to do badly
Always use lots of <HR>s and bulleted lists
See how much you can cram on a page
Never check your pages on different browsers
School of Library and Information Science
Electronic Commerce
4. Ensure that the site loses the maximum amount of
$$ and manage it poorly
Promise management the moon and bog them down
in technical detail
Buy lots of hardware and software, and hire lots of
staff (buy two of anything you think you need)
Don’t submit your site to search engines
Avoid reciprocal links with related sites
Make sure your site stays the same
Establish an elaborate procedure to slow down any
changes that people might want to make
Don't use log-analysis packages to track site traffic
School of Library and Information Science
Electronic Commerce
• Major design mistakes
Not listing prices clearly
Don’t provide scalable pricing
Using an inflexible search engine
Make sure it’s unable to handle typos, plurals, hyphens,
and other variants of the query terms
Don’t use relevance rankings
Forcing horizontal scrolling
Using a small fixed font size with CSS
Neilsen, J. (2002). Top Ten Web-Design Mistakes of 2002
http://www.useit.com/alertbox/20021223.html
School of Library and Information Science
Electronic Commerce
• More design mistakes
Using large blocks of text
Creating links that use scripts to pop up windows
Having a useless FAQ
It’s filled with infrequently asked questions
Collecting personal information without a clear privacy
policy
Having URLs with more that 75 characters
This breaks the web’s “social navigation”
Placing <mailto> links in unexpected locations
School of Library and Information Science