turn your ideas into realit

yChristy Carpino

President, Multi-Option Systems, Inc.

infotec 2004

Web Site Usability for Business Developers

OrThe Do’s and Don’ts of Web Design

and Planning

Agenda

What is “usability”? Planning and managing usability The Ten Top Web Mistakes The Good, The Bad, & The Ugly Tips and Tricks Questions

Some Initial Observations

Web is still in its infancy Web will become much more than

PC browsers and database servers Augmentation rather than

replacement will be the rule Technology fundamentals and

business fundamentals drive innovations

What is Usability?S

yste

m a

ccep

tab

ilit

y

Social acceptability Utility

Usefulness

Practical acceptability

UsabilityEasy to learn

Efficient to use

Easy to remember

Few errors

Subjectively pleasing

Cost

Compatibility

Reliability

Etc. (performance, manageability…)

Usability Dimensions

Learnability – useful on first site visit Efficiency – enhance user productivity Memorability – easy to remember Errors – eliminate user errors Satisfying – users “like” it Fitness – to user profile and task load

What Usability is Not

Usability is not a “beauty contest” Satisfying – users “like” it

Not annoying or distracting At best, pleasing Conforms to principles of good graphical

design (layout) Layout is one aspect of usability Don’t be misled by “artistic” focus while

developing sites

Usability Issues for Web

“Bug-free” interactions Finding what the user is looking for

Navigation Search

Clear feedback on user interactions Response time differences Web application session management

Usernames and passwords

Finding What I Need

Who are users; what do they know Web expertise, locale Offline props (e.g., catalogs, etc.)

What they are trying to “do” Browsing or “window-shopping” Searching for specific information Buying a particular product

Reflect how users organize information in the site’s organization Promote organization to user

Clear Feedback

Response time issues Build for slow speed connections Scripting and “special” tools can subvert the

hourglass cues Confirm, confirm, confirm Handle jumping into the middle of a site

gracefully Use “standard” cues Avoid confusion

Usernames and Passwords

Need memorable, guaranteed unique names Do not rely on cookies

Use email address as user name Passwords represent a unique security

issue Marry policy and community sensibly B2B and B2C sites will probably differ

Or avoid requirement to use names and passwords

Personalization and Privacy

Personalization is extension of usability principles

Personalization is not a substitute for usability

Requires knowledge of user Take time to understand basic privacy

issues involved Amazon’s approach to personalization is

a good example

?

Planning a Usable Site

Plan a useful site Utility is crucial What are you offering that is worth my time?

(let alone my money…) Scenario-based design

“Who” will be doing “what”? Focus on value to the user

Design from the outside in Don’t worry about internal system constraints Compromise only after the initial vision

Planning a Usable Site

Do some simple prototypes Prototype flow as well as layout Validate navigation and information

architecture with simple tests What do users select when asked to do a specific

task? Focus on those tasks you want users to

perform On most e-commerce sites, that means buy

something No point in optimizing peripheral areas of site

Planning a Usable Site

Test and test again Many books/literature available on

usability testing Don’t fall into the “touchy-feely” trap

Aesthetic preference is unarguable Do users accomplish tasks? Make errors?

Meet objectives? Is the experience frustrating or not?

Managing a Usable Site

Essential to have a feedback loop How do users perform?

Can they do what they want? Do they do what you want?

Best feedback is combination of voluntary and involuntary Ask for feedback and make it easy to

provide Track user behavior

Managing a Usable Site

Every change has the potential to introduce usability problems Simply by changing the interface causes a

problem User is always right (at least has a

point) TV Guide search Users also always have their own way of

doing things…

Top Ten Web Design Mistakes (2003)

Unclear Statement of Purpose New URLs for Archived Content Undated Content Small Thumbnail Images of Big,

Detailed Photos Overly detailed ALT Text

Top Ten Web Design Mistakes (continued)

No “What-If” Support Long Lists that Cannot Be

Winnowed by Attributes Products Sorted Only By Brand Overly Restrictive Form Entry Pages That Link to Themselves

Five Criteria for Evaluating Web Sites

Accuracy Authority Objectivity Currency Coverage

Web Sites That Work

Rule One: Bigger is Better Rule Two: Color Your World Rule Three: Faster beats Fancier Rule Four: Small bytes go down

easier Rule Five: Have a purpose

Graphic Design Tutorials

Yale C/AIM Web Style Guide: Graphic Design 100 http://info.med.yale.edu/caim/manual/pages/page_design.html

Creating Graphics for the Web.designer http://www.widearea.co.uk/designer/index.html

Graphic Design Tutorials

Web Home Improvement by Patrick McElhaney http://www.htmltips.com/resources.html

Web Page Design for Designers by Joe Gillespiehttp://www.wpdfd.com/wpdhome.htm

Graphic Design Tutorial

Dimitry's Design Lab on Webreference.com http://www.webreference.com/dlab/

Graphic's Den http://www.actden.com/grap_den/index.htm

Summary

Web requires good usability No leverage with users

Principles of usability have not changed

Focus on users What do they want? How do they “work”?

Approach perfection by inches Learn, refine, test and repeat

References

Black, R. (1997) Web sites that work. Retrieved April 18, 2004, from http://www.fastcompany.com/online/10/rogerblack/html

Chisholm, W., Vanderheiden,G. and Jacobs,I eds. 1999. Web content accessibility guidelines 1.0. http://www.w3c.org/tr/wai-webcontent/wai-pageauth.html (17 January 2001).

Nielsen, Jakob. (2003) Top ten web design mistakes of 2003. Retrieved April 18,2004,from http://www.useit.com/20031222.htm

Nielsen, Jakob. (1993) Usability engineering. San Francisco: Morgan Kaufmann.