HCI: Design

DesignCases: webpage design

陳啟亮 | 師大圖資所 | 2007/12/02 | www.xxc.idv.tw | xxc.chen@gmail.com

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