Web Design for the User Experience: Important Issues

1. Web Design for the User Experience:Important Issues Angela D’Auria Stanton, Ph.D.

2. WebPagesThatSuck.com Internet Archive: Wayback Machine Webbiworld.com

3. Common Web Site Objectives • Generate leads • Explain, educate, inform • Sell products or services • Provide information • Obtain competitive advantage • Have a corporate Web presence • Traditional objectives translated into the web environment – e.g. increase revenue, reduce costs, improve customer service, grow market share • Complement existing marketing strategies • Explain, educate, inform • Social responsibility objectives.

4. A recent study on web sites showed that 85% of visitors reach sites by direct navigation (type the URL)/bookmarks or by using a search engine. • The days of Web users randomly 'surfing' to sites is ending. Now more than ever, people know exactly where they want to go on the Web. This does not mean search sites or other Web links are now less important, because users still have to initially find a site before they can bookmark it. However, having a site worth returning to is becoming increasingly important to businesses. Source: WebSideStory StatMarket

5. The Eight Axioms of Web Page Design 1. Design for the User 2. The Medium Determines the Design of the Message 3. Site Design can be a Barrier to Entry 4. Usability is Important 5. Web Sites Must Have an Attractive Look and Feel 6. Pages Should be Scannable 7. Users Care About Content 8. Navigation for Ease of Access

6. Axiom 1: Design for the User • Design strategy is NOT based solely on • A corporate organizational chart • The marketer’s campaign • The IT department’s enthusiasm for efficiency and easy maintenance • The website designer’s need for self-expression. • You must determine the primary purpose of your web site. • Build your brand • Provide information to generate response offline • Provide customer service and support • Sell products and services directly over the Internet • Save money • Keep up with the competition • At the same time, you must design for the user with a customer-centric approach. • The bottom line: think and act like the average user; then design (http://www.useit.com)

7. Axiom 2: The Medium Determines the Design of the Message • Lean Back versus Lean Forward • The problem with lean forward media is “clutter”

8. Axiom 3: Site Design can be a Barrier to Entry • Don’t put up unnecessary road blocks • Jelly Belly and Wharton did this

9. KISS (keep it simple stupid) • More is not always better – especially on the home page • southwest.com makes liberal use of white space

10. Put the user in context • Convey to your user… “I know who you are and I know what you want to do here.” • Create gateways for each market segment. • Dell and Patagonia

11. Axiom 4: Usability is Important • Usability is a quality attribute that assesses how easy user interfaces are to use. It is comprised of: • Learnability – how easy is it for users to accomplish basic tasks the first time they encounter the design • Efficiency – once users have learned the design, how quickly can they perform tasks • Memorability – when users return to the design after a period of not using it, how easily can they reestablish proficiency • Errors – how many errors do users make, how sever are the errors, and how easily can they recover • Satisfaction – how pleasant is it to use the design

12. Usability Issue: Screen Resolution & Page Layout • Some recent statistics (source: w3schools.com) • 1024x768 – 44.36% • 1280x1024 – 16.51% • 1280x800 – 15.51% • 800x600 – 5.85% • 1440x900– 5.52% • Other – 12.61% • As the use of laptops and wide screen desktop monitors increases, these will continue to change • Three main criteria in optimizing a page layout • Initial visibility – is all key info above the fold so users can see it w/o scrolling • Readability – how easy is it to read the text in various columns • Aesthetics – how good does your page look when the elements are at the proper size and location for the screen size (e.g. captions next to photos) • Do not design solely for a specific monitor size • Not only do screen sizes vary; window sizes vary even more since users don’t always maximize their browsers • Use a liquid layout (one that stretches to the current user’s window size

13. Improving Usability • User testing is paramount • Find representative users • Ask the users to perform representative tasks • Observe what the users do, where they succeed and where they have difficulties • Don’t ask them – listening to what people say may be misleading; you have to watch what they actually do.

14. Axiom 5: Web Sites Must Have an Attractive Look & Feel • A web site must look good and professional as it is a reflection of the business • The best looking and feeling sites: • are clean and understated • use a few aesthetically pleasing colors and incorporate white space • use graphics strategically • employ a limited number of fonts (typically san serif) that are not too small or large

15. Axiom 6: All pages should be Scannable (even if they are meant to be Readable) Bad Good A A E E B E E C D B C E E E E E E E E E E D E E

17. F-Shaped Pattern for Reading Web Content

18. How to Employ Scannable Text • highlighted or hyperlinked keywords • meaningful sub-headings • bulleted lists • one idea per paragraph (users will skip over additional ideas if they are not caught in the first few words) • the inverted pyramid style, starting with the conclusion • half the word count (or less) than conventional writing

19. Relative Weighting ofPage Elements Bad Good 1 2 2 1 2 3 3 2 2 2 3 3 3 3 3 3 3

20. Example of content not easily scanned The "Little House on the Prairie Bed and Breakfast" is a charming B&B located in Walnut Grove, WI. This B&B includes a gourmet breakfast, featuring Belgian waffles with strawberries and whip cream on top. All rooms in this B&B have: a fireplace, Jacuzzi, antiques, queen size bed, and pull-out couch. This week, we are featuring "Laura's Room". • A scannable online description • Little House on the Prairie Bed and Breakfast • Located in Walnut Grove, WI. • Gourmet breakfast included (specializing in Belgian waffles with strawberries and whip cream on top). • All rooms in this B&B have the following: • Fireplace • Jacuzzi • Antiques • Queen size bed • Pullout couch • This week, we are featuring Laura's Room

21. Question for Discussion What is the 7 +/-2 Rule? Should this be followed in web design?

22. Axiom 7: Users Care About Content • Keep content factual (unless the purpose of your site does not pertain to factual information) • Chunk content into groups • Minimize text through “word economy” • Update the content regularly

23. Everyone THINKS their site has content • Ask yourself…why would anybody visit my site a second time? • A third time? • A fourth time?

24. Contests and sweepstakes http://www.hgtv.com/hgtv/pac_ctnt_988/text/0,,HGTV_22056_66109,00.html / Tours http://www.elvis.com/graceland/vtour/ Demonstrations http://www.webct.com/products/viewpage?name=products_demo_webinars Recipes http://www.jellybelly.com/fun_stuff/jelly_belly_bean_recipes.aspx FAQ Pages http://www.myspace.com/index.cfm?fuseaction=misc.faq History http://docs.yahoo.com/info/misc/history.html News http://www.radford.edu/NewsPub/ Free Offers http://www.qualityhealth.com/psp/registration.jspa?rf=15970&hydraPID=2901 Unique Information Links to other related sites http://www.cnn.com/SPECIALS/1998/10/kosovo/related.sites Coupons http://www.4electronicscoupons.com/ / Interesting tests, polls & quizzes http://www.cnn.com/ Message boards http://myidol.americanidol.com/boards/ Content Ideas

25. Sources for Content • http://www.freesticky.com/stickyweb/ • Really Simple Syndication (RSS) Feeds • http://rssfeedreader.com/ • http://newsgator.com/home.aspx • http://rsscontentbuilder.com/

26. Axiom 8: Navigation for Ease of Access • Visitors should always know where they are, where they were, and where they can go • Title tags, page headings, icons, and link colors • Navigation link titles should be short, descriptive and intutive • Navigation should be consistent • Levels of choice (primary/secondary) should be clearly displayed • Always provide a link back home and e-mail • Provide an internal “search” tool if possible

27. Primary Navigation • Primary Navigation • Should consist of the 6 – 8 most important links • These links should stand out without being too graphically intense • Alternatives • Left navigation – most common because in most cultures people start reading from left • Top navigation – advantage is that it leaves more room below for content (provided it clearly looks like navigation)

28. Secondary Navigation • Links that do not belong in the primary navigation such as Contact Us, About Us, Privacy Policy, Terms of Use, Site Map, etc. • Should be distinguished from primary navigation (separated from primary, smaller fonts, alternative placements

29. Remember: A Website is often a New Experience • Don’t assume that people know how to navigate your site. Therefore, design for the “novice” or the “first time user” • Consistency makes sites easy to learn • Users need robust confirmation dialogs • Users need clear visual metaphors

30. In Summary: Some Common Design Mistakes • Frame Technology (yes some sites still use it) • Too much Moving Text, Display, and Animation • Detailed Backgrounds • Lack of contrast in colors; too many different text colors • Lost Pages (a.k.a. Linkrot) & poor navigation (treat every page like a home page) • Long Scrolling Pages • Funky fonts • Pages that don’t adapt to alternative browsers and resolution/pixels per page • Use of the Latest “Bells and Whistles” • Long Downloads – 8-10 second rule!!! Don’t assume that everyone has broadband (even today).

31. Web Site Review Evaluation Criteria* • Value • Does the home page provide evidence that user goals can be completed (in other words do users think they’ve come to the right place)? • Is essential content available where needed? • Is essential function available where needed? • Honda Price Quote • Are essential content and function given priority on a page * Source: Forrester Research, “Best and Worst of Site Design, 2005”

32. Web Site Review Evaluation Criteria • Navigation • Are category and subcategory names clear and mutually exclusive? • Do menu categories immediately expose or describe their subcategories? • Are items classified logically? • K-Mart pairs traditional navigation with guided browsing • Are hyperlinks clear and informative? • Are keyword-based searches comprehensive and precise?

33. Web Site Review Evaluation Criteria • Presentation • Does the site use language that’s easy to understand? • Does the site use graphics, icons and symbols that are easy to understand? • Is text legible? • Does text formatting and layout support easy scanning? • Do page layouts use space effectively? • Are form fields and interactive elements placed logically on the page? • Are interactive elements easily recognizable? • Are interactive elements consistent? • Does the site accommodate the user’s range of hand-eye coordination?

34. Web Site Review Evaluation Criteria • Trust • Does the site present privacy and security policies in context? • Do pages provide location cues? • Does site functionality provide feedback in response to user actions? • Is contextual help available at key points? • Does the site help users recover from errors? • Does the site perform well?

35. Web Design for the User Experience:Home Pages Angela D’Auria Stanton, Ph.D.

36. Homepages are Key! • The most valuable real estate in the world • Your company’s faces to the world • The most important page on most websites • Gets more page views than any other page

37. 3 Basic Functions of a Homepage • To introduce the site's navigation, the basic links a user will click on to reach the pages in your site. These should stay consistent throughout the site. • To be a "landing page", or the first page that appears when first time visitors visit! It's important to include a few basic sentences about who you are and what you do, so that they can see at a glance if they are in the right place. • To allow frequent visitors to find out what's new on your site and in your business. If you have sections on your site that you update regularly (like articles or a portfolio), or if your business adds a new product or service, these updates should be featured on your site's main page. This makes it easy return visitors to learn about your new features.

38. Top 10 Guidelines for Homepage Usability * • Include a 1 sentence tagline - it must be short enough that users will read it, explain what the company does and what makes it unique among competitors • Collect taglines from your own site and your three strongest competitors. Print them in a bulleted list w/o identifying the company names. Ask yourself whether you can tell which company does what. More importantly, ask a handful of people outside your company the same question. * http://www.useit.com/alertbox/20020512.html

39. Top 10 Guidelines for Homepage Usability • Write a Window Title with good visibility in search engines and bookmark lists – begin with the company name followed by a brief description of the sitePoor: http://www.hbo.com Better: http://www.nbc.com • Group all corporate information in one distinct area(e.g. http://www.lucent.com) • Emphasize the sites top high-priority tasks (http://www.ebay.com/) • Include a Search Input box – searches allow users: • to control their own destiny from the site’s navigational structure • an escape hatch when they are stuck and can’t figure out where to go next • http://www.qvc.com/

40. Top 10 Guidelines for Homepage Usability • Show examples of real site content(http://www.msnbc.msn.com/) • Begin link names with the most important keyword (http://www.radford.edu) • Offer easy access to recent homepage features • Don’t over-format critical content (such as navigation areas) – users often dismiss graphics as ads and focus on parts of the homepage that look more likely to be useful • Use meaningful graphics

41. The Four Most Popular Variations of a Home Page • The Front Door Approach • http://www.thaifong.ca/ • The Banner and Menu Approach • http://www.spirecorp.com/ • http://www.midwestseed.com • http://www.cabelas.com • The Runner and Main Page or “Frames” Approach • http://www.bonsaietc.com/BEtcSiteSearchEngine_Frame.htm • The “Let us solve your problem” approach • http://www.edmunds.com/