1. Ecom6010 Presentation Bing Gao, Hui Li Lijuan Zeng, Wei Li

2. Web Design Guideline n Planning & Production n Design n E-Commerce Topics n Bad Examples

3. Planning n User Analysis n Competitive and Market Analysis n Strategy n Content

4. User Analysis n Target audience n Audience/user profile u inside vs. outside company user u the level of subject expertise within that group u the level of technical expertise u audience characteristics

5. Competitive and Market Analysis n Find out your competitor n Analysis their web site u Clear site purpose? u Relevant to its audience? u Easy to accomplish the task? u Good content? u Interesting and engaging? u Good navigating? n Other media presentation

6. Strategy n Define your strategy u sell u educate u entertain u provoke n Set measurable strategic goals

7. Content n Best fulfill your purpose n Interesting n Unique content

8. Production n Preparation n Browser Compatibility n Creating Images n Cascading Style Sheets n Final Testing n Rollout

9. Maintenance n Administration u links u version control u tract site activity n Advertising your site u keywords in the meta information u announce your site on relevant news groups u advertise on major sites

10. Design n Structure n Navigation n Text n Visual Layout and Elements n Media

11. Structure n Develop a user-centered structure for your site u Create a flow diagram u List the elements and links for each page of the diagram n Design hierarchies of breadth rather than depth http://www.ibm.com

12. Navigation n Use labels that clearly indicate the function of links n Provide feedback that tells users where they are in your site

13. Navigation n Use navigation elements consistently n Provide persistent links to the home page and to high-level site categories n Test the navigation design http://www.webmonkey.com

14. Text n Create effective headings and place important information first n Keep links separate from narrative text blocks n Design for default browser fonts n Make paragraph text flush left n Test for readability n Provide a means for users to print groups of related pages

15. Visual Layout and Elements n Design within boundaries of an "image-safe" area n Avoid requiring the use of horizontal scroll bars

16. Visual Layout and Elements n Design in a style that will appeal to your audience's tastes n Test the visual design n Establish and/or comply with your organization's design conventions n Maintain consistent visual identity

17. Visual Layout and Elements n Present your message efficiently and avoid clutter n Draw attention to new or greatly changed content n Avoid requiring users to scroll in order to determine page contents n Use the top and left areas of the page for navigation and identity (depends) n Best position on page

18. Media n Provide user controls n Provide text equivalents for visual and auditory content n Inform users of the content and size of media objects n Use animations to attract attention (sometimes it could be bad) n Create animations that enhance explanation http://www.microsoft.com/Seminar/1033/199811131- 01MaxIISPerfor(HH/Seminar.htm

19. Customer Support n Provide contact information on every page Address users ’ frequently asked questions. n Assist product selection n Allow users to monitor the status of orders. n Provide an easy means to change submitted orders

20. Trust and Privacy Issue n Communicate that ordering online is secure n Easy access to a privacy policy n Web-based seals of approval for security and privacy n Cookies Controversy n A typical example : www.dell.com/www.dell.com/

21. Product Information n Pictures of all physical merchandise make difference n Information about availability n Detailed product information n Cross-selling and up-selling n Comparison between www.amazon.com and www.indigo.ca www.amazon.com www.indigo.ca

22. Purchase Transaction n Functionalities of shopping carts n Mechanisms for fast-path purchasing n Alternative methods for ordering products n Confirmation of order

23. Build Traffic Using Search Engine n Type of search engines n Understand how search engine work n The golden rule of search engine marketing n Creating Killer Meta tags n Using Keywords correctly

24. The main mistakes Try to avoid!

25. Background n Color combination of text and background n Busy, distracting backgrounds n Too bright or strongly patterned n Bad: http://trfn.clpgh.org/About/bad/badexample2.html http://trfn.clpgh.org/About/bad/badexample2.html n Good: http://trfn.clpgh.org/About/bad/goodexample2.html http://trfn.clpgh.org/About/bad/goodexample2.html

27. Text n Text Stretches all the way across the page. n Too small to read or long, scrolling page Paragraph ’ s type in all caps, bold, italic n Underlined text that is not a link! n Bad: http://trfn.clpgh.org/About/bad/badexample4.html http://trfn.clpgh.org/About/bad/badexample4.html n Good: http://trfn.clpgh.org/About/trfnfaq.shtml http://trfn.clpgh.org/About/trfnfaq.shtml

28. Graphics n Large graphic files that take forever to load n Meaningless or useless graphics n Graphics with no alt labels n Bad: http://trfn.clpgh.org/About/bad/badexample6.html http://trfn.clpgh.org/About/bad/badexample6.html n Good: http://trfn.clpgh.org/About/bad/goodexample6.html http://trfn.clpgh.org/About/bad/goodexample6.html

29. Blinking and animation n Multiple things that blink n Rainbow rules that blink or animate “ Under construction ” signs, especially of little men working n Animated pictures for e-mail n Animation that never stop n http://www.cs.dal.ca/~lzeng/sampl e.htm http://www.cs.dal.ca/~lzeng/sampl e.htm

30. Navigation n Unclear or over complex navigation n Complicated frames n Confusing navigation bar n Orphan pages n Phantom pages n Strange buttons?

31. Strange Buttons

32. Links n Distract readers and lead them off to remote n Text links that are not underlined n Dead links

33. Content n Misuse or no use of title tag n Lack of information, or too much content n Out-of-date n Bad Language n No mailto n No sense of geography No “ privacy policies ”

34. Promotion The “ If we build it, they will come. ” myth n Out of search engine domain n Sameness n Not up to speed n Insecure Web site

35. Ranking n http://www.likomusa.com/default.ht m http://www.likomusa.com/default.ht m n http://www.homewrecker.com/ http://www.homewrecker.com/ n http://www.grandmarnier.com/gmv 2/us/grand-marnier.htm http://www.grandmarnier.com/gmv 2/us/grand-marnier.htm

36. Reference n http://www.likomusa.com/default.htm http://www.likomusa.com/default.htm n http://www.homewrecker.com/ http://www.homewrecker.com/ n http://www.grandmarnier.com/gmv2/us/grand-marnier.htm http://www.grandmarnier.com/gmv2/us/grand-marnier.htm n http://trfn.clpgh.org/About/bad/badexample4.html http://trfn.clpgh.org/About/bad/badexample4.html n http://trfn.clpgh.org/About/trfnfaq.shtml http://trfn.clpgh.org/About/trfnfaq.shtml n http://www.ibm.comhttp://www.ibm.com n http://www.inc.com/guide/item/ http://www.inc.com/guide/item/ n http://www.cookiecentral.com/ccstory/cc3.htm http://www.cookiecentral.com/ccstory/cc3.htm n http://trfn.clpgh.org/About/bad/badexample6.html http://trfn.clpgh.org/About/bad/badexample6.html n http://trfn.clpgh.org/About/bad/goodexample6.htmlhttp://trfn.clpgh.org/About/bad/goodexample6.html n http://webdesign.about.com/compute/webdesign/gi/dynami c/offsite.htm?site=http://www.ratz.com/featuresbad.html http://webdesign.about.com/compute/webdesign/gi/dynami c/offsite.htm?site=http://www.ratz.com/featuresbad.html n http://trfn.clpgh.org/About/bad/bad2.html#quiz http://trfn.clpgh.org/About/bad/bad2.html#quiz n http://www.webpagesthatsuck.com/suckframe.htm http://www.webpagesthatsuck.com/suckframe.htm