Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HCI: Design

3,014 views

Published on

It's a talk in Information psychology (2007-Fall) in Social Education Department, NTNU, Taiwan.
This is the 3 of 4 talks.

Published in: Technology, Business
  • Be the first to comment

HCI: Design

  1. 1. Design Cases: webpage design 陳啟亮 | 師大圖資所 | 2007/12/02 | www.xxc.idv.tw | xxc.chen@gmail.com
  2. 2. Agenda Don’t Get Lost Well Organization 1. Breadcrumbs 6. Wireframe 2. Navigation Visual 3. Sitemap 7. Map 4. Next 8. Information 5. Cancel visualization
  3. 3. Don’t Get Lost
  4. 4. Tip1 Breadcrumbs http://www.kenston.k12.oh.us/khs/articles/breadcrumb-trail.php
  5. 5. Tip2 Navigation
  6. 6. Amazon, 1999-10-13
  7. 7. Amazon, 2000-07-11
  8. 8. Amazon, 2000-10
  9. 9. Amazon, 2005-05
  10. 10. Amazon style Navigation 全域導覽 Banner 情境面板(局部導覽) Global Nav Local Nav AD
  11. 11. Amazon, 2007-10
  12. 12. Tip3 Sitemap
  13. 13. Tip4 Next, Next
  14. 14. Case study Redesign Blogger.com
  15. 15. redesign result 15% more visitors to register 67% completed the registration 97% registered created a blog 76% created a blog posted to it
  16. 16. Tip5 Cancel
  17. 17. Well Organized
  18. 18. Tip6 Wireframe
  19. 19. http://www.mediacrumb.com/2007/04/20/building-web-20-a-case-study-for-simply-fireds-redesign/
  20. 20. Abstract view http://argus-acia.com/white_papers/evaluating_ia.pdf
  21. 21. Lower-fidelity http://argus-acia.com/white_papers/evaluating_ia.pdf
  22. 22. Higher-fidelity http://argus-acia.com/white_papers/evaluating_ia.pdf
  23. 23. Real HTML http://argus-acia.com/white_papers/evaluating_ia.pdf
  24. 24. Visual
  25. 25. Tip7 Map
  26. 26. 1908 http://homepage.ntlworld.com/clivebillson/tube/tube.html
  27. 27. 1920 http://homepage.ntlworld.com/clivebillson/tube/tube.html
  28. 28. 1933 http://homepage.ntlworld.com/clivebillson/tube/tube.html
  29. 29. Charles Minard(1861): March of Napolean’s troops to Moscow http://www.russellchun.com/wp-content/uploads/2007/09/minard.thumbnail.jpg
  30. 30. Tip8 Information visualization
  31. 31. Newsmap http://www.marumushi.com/apps/newsmap/
  32. 32. visualizing the editing history of Wikipedia pages http://www.research.ibm.com/visual/projects/history_flow/
  33. 33. http://www.munterbund.de/visualisierung_textaehnlichkeiten/essay.html
  34. 34. Books

×