Design
Cases: webpage design




   陳啟亮 | 師大圖資所 | 2007/12/02 | www.xxc.idv.tw | xxc.chen@gmail.com
Agenda
Don’t Get Lost     Well Organization
1.   Breadcrumbs   6. Wireframe
2.   Navigation    Visual
3.   Sitemap       7...
Don’t Get
  Lost
Tip1



       Breadcrumbs


          http://www.kenston.k12.oh.us/khs/articles/breadcrumb-trail.php
Tip2




       Navigation
Amazon, 1999-10-13
Amazon, 2000-07-11
Amazon, 2000-10
Amazon, 2005-05
Amazon style
 Navigation
全域導覽
                         Banner
情境面板(局部導覽)       Global Nav




             Local Nav
     ...
Amazon, 2007-10
Tip3




       Sitemap
Tip4




       Next, Next
Case
study
         Redesign
        Blogger.com
redesign result
15% more visitors to register
67% completed the registration
97% registered created a blog
76% created a b...
Tip5




       Cancel
Well
Organized
Tip6




       Wireframe
http://www.mediacrumb.com/2007/04/20/building-web-20-a-case-study-for-simply-fireds-redesign/
Abstract view




http://argus-acia.com/white_papers/evaluating_ia.pdf
Lower-fidelity




http://argus-acia.com/white_papers/evaluating_ia.pdf
Higher-fidelity




http://argus-acia.com/white_papers/evaluating_ia.pdf
Real HTML


http://argus-acia.com/white_papers/evaluating_ia.pdf
Visual
Tip7




       Map
1908




http://homepage.ntlworld.com/clivebillson/tube/tube.html
1920




http://homepage.ntlworld.com/clivebillson/tube/tube.html
1933




http://homepage.ntlworld.com/clivebillson/tube/tube.html
Charles Minard(1861): March of
 Napolean’s troops to Moscow




               http://www.russellchun.com/wp-content/uploa...
Tip8




   Information
   visualization
Newsmap
http://www.marumushi.com/apps/newsmap/
visualizing the editing history of Wikipedia pages




http://www.research.ibm.com/visual/projects/history_flow/
http://www.munterbund.de/visualisierung_textaehnlichkeiten/essay.html
Books
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
HCI: Design
Upcoming SlideShare
Loading in …5
×

HCI: Design

2,668
-1

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,668
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
58
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×