使用者中心的網站設計原則以英國政府入口網gov.uk 為例 / 悠識蔡明哲

- gov.uk User-Centered Design (UCD) - case study gov.uk Richard Tsai richard@userxper.com 10/18, 11/15 , 10/22 , 10/24 (2013) UserXper Digital Consulting Co., Ltd. 1

Richard Tsai Chief Information Architect 20 , , , Prototype Design / Usability Testing / User Research http://userxper.com HPX http://www.hpx-party.com UserXper Digital Consulting Co., Ltd. 2

UserXper Digital Consulting Co., Ltd. 3

. . . .- gov.uk . 4

CHAOS Success Factors 1. Executive Support 2. User Involvement 3. Clear Business Objectives 4. Emotional Maturity 5. Optimizing Scope 6. Agile Process 7. Project Management Expertise 8. Skilled Resources 9. Execution 10. Tools & Infrastructure UserXper Digital Consulting Co., Ltd. 7

. . Make a Good Decision . . - gov.uk . 8

() UserXper Digital Consulting Co., Ltd. /SA http://www.nipic.com/show/3/24/7e330d36f3285e5a.html 10

UserXper Digital Consulting Co., Ltd. ,App/ / http://www.nipic.com/show/3/24/7e330d36f3285e5a.html 11

How to get the better Design Decision? UserXper Digital Consulting Co., Ltd. 15

Type 2 Type 1 Boss-Centered Design UserXper Digital Consulting Co., Ltd. User-Centered Design 16

1 UI Design Pattern UserXper Digital Consulting Co., Ltd. 2 - - 17

. . . . . 18

http://zh.wikipedia.org/wiki/File:Iceberg.jpg 19

UserXper Digital Consulting Co., Ltd. 960 grid system Bootstrap (from twitter) 20

(Web UI Pattern) Web UI Pattern (1) Mega Menu (2) Informative Fat Footer (3) Type Ahead (4) Long Page (5) Parallax Scrolling (6) Responsive Web Design UserXper Digital Consulting Co., Ltd. 21

UI Pattern UserXper Digital Consulting Co., Ltd. 22

GitHub UserXper Digital Consulting Co., Ltd. 23

GitHub https://github.com/search?q=mega+menu&ref=cmdform UserXper Digital Consulting Co., Ltd. 24

(1) Mega Menu UserXper Digital Consulting Co., Ltd. 25

Mega Menu ( CSS + jQuery https://github.com/search?q=mega+menu&ref=cmdform UserXper Digital Consulting Co., Ltd. 27

Amazon UserXper Digital Consulting Co., Ltd. 29

Mega menu CISCO http://www.cisco.com UserXper Digital Consulting Co., Ltd. 30

Mega menu http://www.utah.gov UserXper Digital Consulting Co., Ltd. 31

Mega menu Amazon http://www.amazon.com UserXper Digital Consulting Co., Ltd. 32

(2) Informative Fat Footer Content Footer () ( sitemap) SEO UserXper Digital Consulting Co., Ltd. 33

Informative Fat Footer (screen size) (sitemap) quicklink SEO) HTML/CSS html code: http://www.cw.com.tw/ html UserXper Digital Consulting Co., Ltd. 34

Fat Footer Apple http://www.apple.com UserXper Digital Consulting Co., Ltd. 35

Fat Footer http://www.whitehouse.gov UserXper Digital Consulting Co., Ltd. 36

Logo Fat Footer http://www.cw.com.tw UserXper Digital Consulting Co., Ltd. 37

(3) Type Ahead (Auto-complete) Keywords Recommendation (Ranking) UserXper Digital Consulting Co., Ltd. 38

Type Ahead / / (Keyword Recommendation) CSS, jQuery, AJAX https://github.com/devbridge/jQuery-Autocomplete UserXper Digital Consulting Co., Ltd. 39

Instant Search Type Ahead Instant Search Live search UserXper Digital Consulting Co., Ltd. 40

http://www.utah.gov UserXper Digital Consulting Co., Ltd. 43

(4) Long Page Page View html UserXper Digital Consulting Co., Ltd. 44

(5) Parallax Scrolling Parallax Scrolling https://github.com/richardshepherd/Parallax-Scrolling UserXper Digital Consulting Co., Ltd. 47

Parallax Scrolling ( http://www.alabama.gov/ UserXper Digital Consulting Co., Ltd. 48

Parallax Scrolling ( http://www.milwaukeepolicenews.com http://city.milwaukee.gov/police UserXper Digital Consulting Co., Ltd. 49

Mega Menu Parallax Scrolling The official archive and publisher for the UK http://www.nationalarchives.gov.uk/ UserXper Digital Consulting Co., Ltd. 50

(6) Responsive Web Design RWD / Fluid Grid Viewport (html meta tag) CSS3 Media Queriesmedia queriesdevice CSS http://fundesigner.net/css3-media-queries/ UserXper Digital Consulting Co., Ltd. 51

(6) Responsive Web Design CSS3 Media Queriesmedia queriesdevice CSS Fluid Grid - width : 240px width : 20% Viewport (html meta tag) http://fundesigner.net/css3-media-queries/ UserXper Digital Consulting Co., Ltd. 52

1280px http://www.alabama.gov/ UserXper Digital Consulting Co., Ltd. 53

UserXper Digital Consulting Co., Ltd. 800px 54 320px

http://mediaqueri.es/ UserXper Digital Consulting Co., Ltd. 55

. . . . - gov.uk . 56 #

http://zh.wikipedia.org/wiki/File:Iceberg.jpg 57 #

User-Centered Design UCD) UCD design & research methodology involve user UserXper Digital Consulting Co., Ltd. 58

UCD Project Stakeholder (Contextual Inquiry ) Persona Mindmap Card Sorting Me

使用者中心的網站設計原則 以英國政府入口網gov.uk 為例 / 悠識 蔡明哲

使用者中心的網站設計原則以英國政府入口網gov.uk 為例 / 悠識蔡明哲