Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. ELC 200 Day 13
  2. 2. Agenda <ul><li>Assignment 4 will be posted </li></ul><ul><ul><li>Building your web site </li></ul></ul><ul><ul><li>assignment4.doc </li></ul></ul><ul><ul><li>Due March 15 Next Class </li></ul></ul><ul><li>Quiz 2 is Corrected </li></ul><ul><ul><li>12 A’s, 2 B’s, 2C’s, 2 D’s </li></ul></ul><ul><ul><li>20 Mins too long </li></ul></ul><ul><ul><li>Answer ALL the questions </li></ul></ul><ul><li>ECommerce Initiative Frameworks </li></ul><ul><ul><li>Guidelines </li></ul></ul><ul><ul><li>Due May 10 @ 8 AM </li></ul></ul><ul><li>Finish Discussion on Building ePresence </li></ul><ul><li>Begin Discussion on Web Site Evaluation and Usability Testing </li></ul>
  3. 3. BOB.COM hints  BOB #3  BOB #2  The first part of the story is in here
  4. 4. Bob Antia (Bob #1) <ul><li>Original owner of BOB.com </li></ul><ul><ul><li>Founder of LeftBank now known as Cohesive Network Systems, Inc. </li></ul></ul><ul><ul><li>Former Chief Master Architect for Exodus Communications (once the world’s largest ISP) </li></ul></ul><ul><ul><li>Vice president of quality and risk at Waltham-based (MA) Guardant Inc </li></ul></ul><ul><ul><li>Hosts a pig-roast every year in Lexington MA for the 100 most interesting people in the Boston Technology Circles </li></ul></ul><ul><li>http://www.domainhandbook.com/toc.html </li></ul>
  5. 5. Microsoft BOB (bob #2) Pictures from http://toastytech.com/guis/bob.html
  6. 6. Bob Kerstein (Bob #3) <ul><li>Traded Windows2000.com for bob.com with Microsoft </li></ul><ul><li>http://www.scripophily.com/bob.htm </li></ul>
  7. 7. Design Languages <ul><li>Hypertext Markup Language (HTML) </li></ul><ul><ul><li>Text-based </li></ul></ul><ul><ul><li>Standards </li></ul></ul><ul><li>Java is another popular language for designing </li></ul><ul><li>Multimedia-enriched content </li></ul><ul><ul><li>Macromedia Flash and Shockwave </li></ul></ul><ul><ul><li>Extensible Markup Language (XML) </li></ul></ul><ul><ul><li>Vector Markup Language (VML) </li></ul></ul>
  8. 8. Constructing Your Web Site <ul><li>Storefront Building Service </li></ul><ul><ul><li>Yahoo Storefront </li></ul></ul><ul><ul><li>Ebay Stores </li></ul></ul><ul><ul><li>MonsterCommerce </li></ul></ul><ul><li>Web-Hosting Service </li></ul><ul><ul><li>Web host representative meets with you and explains the aspects of Web design </li></ul></ul><ul><ul><li>The web host begins to collect content from you to build a custom Web site </li></ul></ul><ul><ul><li>Once the website passes the test, the firm begins to write the keywords and metatags and submits the Web site to leading search engines, Web directories, and industry sites </li></ul></ul><ul><ul><li>A reputable web host also supports maintenance and future enhancements in a yearly contract or a long term agreement </li></ul></ul><ul><li>Do It Yourself ( a lot more involved than you may think) </li></ul>
  9. 9. Web Navigation Design <ul><li>Creating user profiles </li></ul><ul><ul><li>Customer profile is a brief study of the type of person who might visit your Web site </li></ul></ul><ul><li>Using scenarios </li></ul><ul><ul><li>Scenario is a situation that helps you view the navigation process and the site as a point of entry </li></ul></ul><ul><li>What about cultural differences? </li></ul><ul><ul><ul><li>Colors, logo symbols </li></ul></ul></ul><ul><li>Design a user-friendly site </li></ul><ul><li>Design guidelines </li></ul><ul><ul><li>See Box 7.5 on page 217 </li></ul></ul>
  10. 10. Design Criteria <ul><li>Appearance and quality design </li></ul><ul><ul><li>Quality assurance (QA) is a process used to check the readiness of a site before it is loaded on the Web </li></ul></ul><ul><ul><li>Style guide is a template designed to measure the materials used to build the Web site </li></ul></ul><ul><ul><ul><li>Use these color, use this logo, use this font </li></ul></ul></ul><ul><li>Public exposure </li></ul><ul><li>Viewability and Resolution </li></ul><ul><ul><li>800X600 with NO scroll </li></ul></ul><ul><li>Consistency </li></ul><ul><ul><li>One Voice </li></ul></ul><ul><li>Scalability </li></ul><ul><ul><li>Can grow? </li></ul></ul><ul><li>Security </li></ul><ul><li>Performance </li></ul><ul><li>Navigation and interactivity </li></ul>
  11. 11. Hiring a Web Designer <ul><li>Do it yourself? </li></ul><ul><ul><li>http://www.mcli.dist.maricopa.edu/diy/ </li></ul></ul><ul><li>The budget </li></ul><ul><li>What to look for in a site developer </li></ul><ul><ul><li>Resume & portfolio </li></ul></ul>
  12. 12. Why Web Site Projects Fail? <ul><li>Unrealistic deadlines </li></ul><ul><li>Incompetent or inadequate staffing </li></ul><ul><li>Poor quality design </li></ul><ul><li>Changing requirements of the client </li></ul><ul><li>Not providing Web Designer with content </li></ul>
  13. 13. Filling Web Positions <ul><li>Internship programs </li></ul><ul><li>Use internal employees that have an interest </li></ul><ul><ul><li>In house training </li></ul></ul><ul><ul><li>Outsource training </li></ul></ul><ul><li>External Hires </li></ul><ul><ul><li>Experience Or Attitude </li></ul></ul><ul><ul><li>Technical skill or Creative ability </li></ul></ul><ul><ul><li>Open source experience or Commercial software experience </li></ul></ul><ul><ul><li>Career Path </li></ul></ul>
  14. 14. ADA Is Here! <ul><li>ADA requires companies to adjust their physical environment to accommodate people with disabilities </li></ul><ul><li>Public support for ADA is increasing everywhere </li></ul><ul><li>Public pressure is mounting to bring people with handicaps and senior citizens into the world of the Internet </li></ul><ul><li>Make sure the Web site is ADA-compliant </li></ul><ul><li>http://www.ada.gov/websites2.htm </li></ul>
  15. 15. Chapter Summary <ul><li>Deciding how to design the site, what to include in it, how to organize content, and what security measures to incorporate are the most critical aspects of building an e-commerce infrastructure </li></ul><ul><li>Benefits of building a Web site </li></ul><ul><li>Steps in building a Web site </li></ul><ul><li>Defining the audience includes knowing who the users are as well as their goals and objectives </li></ul><ul><li>The focus of defining a site structure </li></ul><ul><li>Ways to build a Web site </li></ul><ul><li>Design criteria </li></ul><ul><li>ADA-compliance </li></ul>
  16. 16. Web Site Evaluation and Usability Testing
  17. 17. The focus of this chapter is on several learning objectives <ul><li>How color can affect a customer’s perception of the company and its products </li></ul><ul><li>The criteria used in evaluating Web sites </li></ul><ul><li>The cookie and its many wonders </li></ul><ul><li>What makes a Web site usable? </li></ul><ul><li>Ideas about site content and managing Web traffic </li></ul><ul><li>Role of the Web site administrator </li></ul>
  18. 18. Characteristics of Lame Web Sites <ul><li>Keep customers clicking away to competitors’ sites </li></ul><ul><li>Keep surfers wondering about the product or service your company provides </li></ul><ul><li>Fail to update regularly </li></ul><ul><li>Lack anything new, innovative, or attractive to retain the surfer </li></ul><ul><li>Waste visitors’ time with tedious forms </li></ul><ul><li>Waste hompage space with ugly graphics </li></ul><ul><li>http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suck-checklist-part-one.html </li></ul>
  19. 19. Common Mistakes <ul><li>Exclamation points and commas in the wrong place </li></ul><ul><li>Misspelled words </li></ul><ul><li>Word Usage errors </li></ul><ul><li>Pages laden with text </li></ul><ul><li>Promises of things that simply cannot be delivered </li></ul><ul><li>Requiring visitors to install hardware or software </li></ul><ul><li>Attempting to run the e-business with no reliable or verifiable log to monitor traffic </li></ul><ul><ul><li>Must be able to audit! </li></ul></ul>
  20. 20. From Vincent Flander’s “Web Pages that suck” http://www.webpagesthatsuck.com/ We don 't put design elements where our visitors expect them.   54 Our site uses divider bars.   55 Our pages have too much/too little white space.   57 I don't know if our site looks the same in the major browsers.   58 We don't identify PDF files with an icon.   58 Visited links don't change color.   61 The man from Mars cannot quickly find the focal point of the current page.   62 We have not eliminated unnecessary design items.   68 We don't know which design items are not necessary.   70 Quickly scanning the page doesn't tell our visitors much about its purpose.   74 Our site mixes and matches text sizes on the page.   77 We don't analyze our log files.   82 We never conduct user testing.   85 Our home page — or any page — takes more than four seconds to load.   87 The man from Mars cannot quickly find the focal point of the home page.   97 Our site doesn't make us look like credible professionals.   98 It takes longer than four seconds for the man from Mars to understand what our site is about. 108 We say &quot;Welcome to...&quot; on our home page. 136 We've designed our site to meet our organization's needs (more sales/contributions) rather than meeting the needs of our visitors. 247 Our site tries to tell you how wonderful we are as a company, but not how we're going to solve your problems. 253 Top 20 Confessed Web Design Sins
  21. 21. Questions When Evaluating a Web Site <ul><li>Are any elements placed incorrectly? </li></ul><ul><li>Is the information accurate? </li></ul><ul><li>Is it current? </li></ul><ul><li>Are the topics covered? </li></ul><ul><li>Does each topic show a minimum of bias? </li></ul><ul><li>Is the information hierarchy properly arranged? </li></ul><ul><li>Should the heads that relate to the page be enlarged? </li></ul><ul><li>Should the fonts for the headings be made more readable? </li></ul>
  22. 22. Basic Web Site Anatomy <ul><li>Location! Location! Location! </li></ul><ul><ul><li>Where are the files </li></ul></ul><ul><li>Structure </li></ul><ul><ul><li>What a page looks like </li></ul></ul><ul><li>Page anatomy </li></ul><ul><ul><li>How a page is built </li></ul></ul>
  23. 23. Color and Its Psychological Effects <ul><li>Site visitor forms a first impression within the first 8 seconds </li></ul><ul><li>Color is the most important design element in a Web site </li></ul><ul><ul><li>Web browsers can see only 256 colors </li></ul></ul><ul><ul><li>A designer has a 216-color scheme </li></ul></ul><ul><li>Color is inherently unstable on Video displays </li></ul><ul><li>Choose colors that are simple and not distracting </li></ul><ul><li>Choose colors that reflect your audience’s values and cultural preferences </li></ul>
  24. 24. Choosing a Color <ul><li>You need to consider your audience </li></ul><ul><li>Will colors strain visitors’ eyes? </li></ul><ul><li>Soft colors that represent appropriate settings are ideal </li></ul><ul><ul><li>http://webdesign.about.com/cs/color/a/aacolorharmony.htm </li></ul></ul><ul><ul><li>http://www.artsconnected.org/toolkit/encyc_colorwheel.html </li></ul></ul>
  25. 25. Major Colors and Their Psychological Effects Purple is a complex color and is the hardest color for the human eye to discriminate. It represents spirituality, mystery, intelligence, royalty, luxury, wealth, and sophistication. Purple Cheerful sunny yellow is the first color the eye processes. It is an attention-getter and represent optimism, hope, and precious metals. It tends to be overpowering. Yellow Nature, health, optimism, good luck. Green is the color of money and has strong associations with finance and economic stability. But it is a mixed bag. It is linked with envy sickness, and decaying food. It does not do well in a global market. Green Blue is the color of the sky and the ocean—peaceful and calming. It creates an optical impression that objects are farther away than they really are. Blue Red is the most emotionally intense color. It is the color of love. It creates attention, but tends to overtake other colors on the page. Red
  26. 26. Major Colors and Their Psychological Effects ( Cont’d ) Power, sexuality, sophistication, death, mystery, fear, unhappiness, elegance. It signifies death and mourning in many Western cultures. Black Purity and innocence, cleanliness, precision, sterility, death. It reproduces freshness and is quite popular at luxury Web sites. It gives the sense of “pristineness.” White Intellect, futurism, modesty, sadness, decay. It is the easiest color for the eye to see. Gray Brown is the color of earth and is quite abundant in nature. It represents reliability, comfort, and endurance. Men more than women tend to prefer brown over other colors. Brown Orange represents energy, balance, warmth, and vitality. It is a color most detested by Americans. The color has stronger appeal to Europeans and Latinos. Orange
  27. 27. Color and Individual Differences <ul><li>Web site colors take on different cultural hues </li></ul><ul><li>Use a color that is acceptable to various cultures </li></ul><ul><li>Blue is the most globally accessible color </li></ul><ul><li>Age, class, and gender differences </li></ul><ul><ul><li>Web sites for young children favor brighter, more solid colors </li></ul></ul><ul><ul><li>Men are attracted to cooler colors like blue and green </li></ul></ul><ul><ul><li>Women prefer warmer colors like orange and red </li></ul></ul><ul><ul><li>Research suggests working-class people prefer colors with basic names like blue, red, green </li></ul></ul>
  28. 28. Colors for the Color Blind <ul><li>Color perception problems are widespread </li></ul><ul><li>Color deficiency can occur in any population, economic class, or ethnic group. </li></ul><ul><li>Most color-blind people have red-green perception deficiency </li></ul><ul><li>Any designer should be aware of the problem </li></ul><ul><li>Understand how color deficiency works </li></ul><ul><li>Any text on any mixed-color background is inviting trouble </li></ul><ul><li>Keep colors bright </li></ul>
  29. 29. Consumer Association with Key Shapes (by gender)
  30. 30. Site Evaluation Criteria <ul><li>Color </li></ul><ul><li>Shape </li></ul><ul><li>Type </li></ul><ul><ul><li>Sans-serif </li></ul></ul><ul><ul><li>Serif </li></ul></ul><ul><ul><li>Fancy </li></ul></ul><ul><li>Content </li></ul><ul><li>Services Offered </li></ul><ul><li>Primary Focus </li></ul><ul><li>Ancillaries </li></ul><ul><li>Site Classification </li></ul><ul><li>Professionalism </li></ul><ul><li>Speed </li></ul><ul><li>Consistency </li></ul><ul><li>Personalization </li></ul><ul><li>Security </li></ul><ul><li>Scalability </li></ul>
  31. 31. Site Classification <ul><li>Category 1 </li></ul><ul><ul><li>Mere presence </li></ul></ul><ul><li>Category 2 </li></ul><ul><ul><li>More information and ability for user to send data </li></ul></ul><ul><li>Category 3 </li></ul><ul><ul><li>Uses video and color as guides </li></ul></ul><ul><li>Category 4 </li></ul><ul><ul><li>Multimedia, Work flow Some personalization </li></ul></ul><ul><li>Category 5 </li></ul><ul><ul><li>Highly customized with advanced services including eCommerce </li></ul></ul>
  32. 32. Sample Evaluations <ul><li>http:// www.baseballdirect.com / </li></ul><ul><li>http://www.Wachovia.com </li></ul><ul><li>http://www.umfk.maine.edu </li></ul><ul><li>http://compsci.umfk.maine.edu/ </li></ul><ul><li>http://www.lucasarts.com/ </li></ul><ul><li>http://www.sun.com/ </li></ul>
  33. 33. Components of Personalization
  34. 34. Steps to Operationalize Personalization <ul><li>Customer interaction </li></ul><ul><li>Data collection and integration </li></ul><ul><li>Business intelligence </li></ul><ul><li>Customer interaction personalization </li></ul>
  35. 35. Inference-based Personalization <ul><li>A technique that tracks a Web user’s behavior, identifies other people with similar behavior, and uses those people to recommend products </li></ul><ul><li>Amazon.com </li></ul>
  36. 36. Getting Personal <ul><li>Personalization vs. Customization </li></ul><ul><ul><li>Personalization is a strategy, a marketing tool, and an art; visitor-oriented rather than product- oriented </li></ul></ul><ul><ul><li>Personalization tries to treat all customers as unique </li></ul></ul><ul><ul><li>Customization focuses on direct user control </li></ul></ul><ul><ul><li>Personalization is driven by artificial software that tries to serve up individualized pages to the user based on a model of that user’s needs (past habits, preferences, and so on). </li></ul></ul>
  37. 37. Approaches to Web Personalization <ul><li>Cookies are bits of code or a text file that sits in a user’s Internet browser memory and identifies that person to a Web site when they return </li></ul><ul><li>Collaborative filtering software keeps track of users’ movements across the Web to interpret their interests </li></ul><ul><li>Check-box personalization, users choose specific interests on a checklist so the site can display the requested information </li></ul><ul><li>Rule-based personalization divides users into segments based on business rules that generate certain types of information from a user’s profile </li></ul><ul><li>Neural networks use statistical probability algorithms to deliver personalization based on movements such as a visitor’s actions </li></ul>
  38. 38. Do You Want a Cookie? <ul><li>A cookie is an HTTP header with a text-only string placed in the browser’s memory </li></ul><ul><li>The string contains the domain, path, how long it is valid, and the value of a variable that the Web site sets </li></ul><ul><li>The original purpose of cookies was to save user’s time </li></ul><ul><li>Limitations or cause for concern </li></ul><ul><ul><li>Cookies utilize space on a client’s hard drive for a Web site’s purposes without permission </li></ul></ul><ul><ul><li>They threaten our privacy as Internet users(?) </li></ul></ul><ul><li>Cookies can be deleted or rejected at will </li></ul>
  39. 39. Popular Myths About Cookies <ul><li>Cookies clog the hard disk </li></ul><ul><li>Cookies can put a virus on my computer </li></ul><ul><li>Cookies give companies access to my personal file </li></ul><ul><li>Disabling cookies in my browser will prevent any Web sites from gathering information about me </li></ul>
  40. 40. Web Site Usability <ul><li>Usability refers to a set of independent quality attributes </li></ul><ul><ul><li>Performance </li></ul></ul><ul><ul><li>Satisfaction </li></ul></ul><ul><ul><li>Ease of navigation </li></ul></ul><ul><ul><li>Learnability </li></ul></ul><ul><li>It means an application that allows the user to perform the expected tasks more efficiently </li></ul><ul><ul><li>The integral attributes of a system that affect user performance and productivity </li></ul></ul>
  41. 41. Effective Web Site Design <ul><li>The goal of effective Web site design is to give users a good experience </li></ul><ul><ul><li>Switching costs on the Internet are low </li></ul></ul><ul><ul><li>Churning is the basic measure of visitor dissatisfaction with a site </li></ul></ul><ul><li>http://www.epson.com </li></ul><ul><li>http:// www.canon.com </li></ul><ul><li>http://www.amazon.com </li></ul>
  42. 42. Components of Personalization
  43. 43. Components of Personalization – ( Cont’d )
  44. 44. Reliability <ul><li>The core of reliability is availability </li></ul><ul><ul><li>System availability </li></ul></ul><ul><ul><li>Network availability </li></ul></ul><ul><ul><li>Application availability </li></ul></ul><ul><li>Ensure Web site reliability and usability </li></ul><ul><ul><li>Provide system backup </li></ul></ul><ul><ul><li>Install a disk-mirroring feature </li></ul></ul><ul><ul><li>Ensure that the system hardware is fault-tolerant </li></ul></ul><ul><ul><li>Be sure applications are self-contained </li></ul></ul><ul><ul><li>Be sure there is adequate hard disk space </li></ul></ul><ul><ul><li>Buy everything from a single vendor </li></ul></ul>
  45. 45. User Testing <ul><li>Determine testing sample </li></ul><ul><li>Decide what to look for during the test </li></ul><ul><li>Look for trends in the way the site is succeeding or failing to reach others </li></ul><ul><li>Any bugs should be relayed and assigned to developer who can fix them </li></ul><ul><li>Use Web testing tools </li></ul><ul><ul><li>Load and performance test tools </li></ul></ul><ul><ul><li>Java test tools </li></ul></ul><ul><ul><li>Web site management tools and log analysis tools </li></ul></ul>
  46. 46. Site Performance Issues <ul><li>Images and color </li></ul><ul><ul><li>Readability testing </li></ul></ul><ul><ul><li>Images: GIFs versus JPEGs </li></ul></ul><ul><li>Caches </li></ul><ul><li>How many links? </li></ul><ul><li>The role of the Web server </li></ul>
  47. 47. Managing Content and Site Traffic <ul><li>Content management </li></ul><ul><li>Web traffic management </li></ul><ul><li>The Web site administrator </li></ul><ul><ul><li>Database server </li></ul></ul><ul><ul><li>Application server(s) </li></ul></ul><ul><ul><li>Web server(s) </li></ul></ul><ul><ul><li>Special-purpose servers for encryption and security checks </li></ul></ul><ul><ul><li>Internet bandwidth </li></ul></ul><ul><ul><li>Internet performance status </li></ul></ul>
  48. 48. Chapter Summary <ul><li>Web site evaluation </li></ul><ul><li>Appropriate site design </li></ul><ul><li>Criteria for evaluating Web sites </li></ul><ul><li>Approaches to Web personalization </li></ul><ul><li>Cookies </li></ul><ul><li>A Web site should be as inviting and easy to navigate as possible </li></ul><ul><li>User testing </li></ul><ul><li>Web content management </li></ul><ul><li>Traffic management </li></ul><ul><li>Web site management </li></ul>