hci: design
DESCRIPTION
It's a talk in Information psychology (2007-Fall) in Social Education Department, NTNU, Taiwan. This is the 3 of 4 talks.TRANSCRIPT
DesignCases: webpage design
陳啟亮 | 師大圖資所 | 2007/12/02 | www.xxc.idv.tw | [email protected]
Agenda
� Don’t Get Lost
1. Breadcrumbs
2. Navigation
3. Sitemap
4. Next
5. Cancel
� Well Organization
6. Wireframe
� Visual
7. Map
8. Information visualization
Don’t Get Lost
BreadcrumbsTip1
http://www.kenston.k12.oh.us/khs/articles/breadcrumb-trail.php
Navigation
Tip2
Amazon, 1999-10-13
Amazon, 2000-07-11
Amazon, 2000-10
Amazon, 2005-05
Amazon style Navigation
�全域導覽�情境面板(局部導覽)
Banner
Global Nav
Loca
l Nav
AD
Amazon, 2007-10
Sitemap
Tip3
Next, Next
Tip4
Redesign Blogger.com
Case
study
redesign result
�15% more visitors to register
�67% completed the registration
�97% registered created a blog
�76% created a blog posted to it
Cancel
Tip5
Well Organized
Wireframe
Tip6
http://www.mediacrumb.com/2007/04/20/building-web-20-a-case-study-for-simply-fireds-redesign/
http://argus-acia.com/white_papers/evaluating_ia.pdf
Abstract view
http://argus-acia.com/white_papers/evaluating_ia.pdf
Lower-fidelity
http://argus-acia.com/white_papers/evaluating_ia.pdf
Higher-fidelity
Real HTML
http://argus-acia.com/white_papers/evaluating_ia.pdf
Visual
Map
Tip7
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/uploads/2007/09/minard.thumbnail.jpg
Information visualization
Tip8
Newsmaphttp://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