of 94/94
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. 使用者中心的網站設計原則 -以 gov.uk 英國政府網站為例 User-Centered Design (UCD) - case study gov.uk 蔡明哲 Richard Tsai 悠識數位 首席資訊架構師 [email protected] 10/18, 11/15 台北, 10/22 高雄, 10/24 台中 (2013年) 1 政府網站規範及應用推廣說明會

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

  • View
    2.287

  • Download
    19

Embed Size (px)

DESCRIPTION

使用者中心的網站設計原則 -以 gov.uk 英國政府網站為例 User-Centered Design (UCD) - case study gov.uk 這是悠識 首席資訊架構師 蔡明哲應研考會邀請,於2013年對北中南政府資訊人員的四場演講內容。 演講日期:10/18, 11/15 台北, 10/22 高雄, 10/24 台中 。

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

  • - gov.uk User-Centered Design (UCD) - case study gov.uk Richard Tsai [email protected] 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
  • UserXper Digital Consulting Co., Ltd. 5
  • UserXper Digital Consulting Co., Ltd. 6
  • 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. 9
  • () 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
  • UserXper Digital Consulting Co., Ltd. 12
  • UserXper Digital Consulting Co., Ltd. 13
  • UserXper Digital Consulting Co., Ltd. 14
  • 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
  • UserXper Digital Consulting Co., Ltd. 26
  • Mega Menu ( CSS + jQuery https://github.com/search?q=mega+menu&ref=cmdform UserXper Digital Consulting Co., Ltd. 27
  • UserXper Digital Consulting Co., Ltd. 28
  • 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
  • UserXper Digital Consulting Co., Ltd. 41
  • UserXper Digital Consulting Co., Ltd. 42
  • http://www.utah.gov UserXper Digital Consulting Co., Ltd. 43
  • (4) Long Page Page View html UserXper Digital Consulting Co., Ltd. 44
  • 45
  • UserXper Digital Consulting Co., Ltd. 46
  • (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 Mental Model Sitemap, Wireframe Rapid Prototype Design Usability Test Content Auditing Functional Test Usability Test (Online Tracking) UserXper Digital Consulting Co., Ltd. 59
  • UCD Method Table UserXper Digital Consulting Co., Ltd. http://www.usabilitynet.org/tools/methods.htm 60 -60-
  • Contextual inquiry UserXper Digital Consulting Co., Ltd. 61
  • Heuristic Evaluation (Expert Review) 6 UserXper Digital Consulting Co., Ltd. 62
  • UserXper Digital Consulting Co., Ltd. 63
  • Usability Test UserXper Digital Consulting Co., Ltd. 64
  • Eye Tracking -65 UserXper Digital Consulting Co., Ltd. 65
  • Card Sorting) UserXper Digital Consulting Co., Ltd. 66
  • (Data-Driven Design) /App Google Analytics, Flurry) A/B Test) UserXper Digital Consulting Co., Ltd. 67
  • A C B UserXper Digital Consulting Co., Ltd. 68
  • UCD / UserXper Digital Consulting Co., Ltd. UCD / / / 69
  • gov.uk 20127 Alexa 79 20134 Alexa, 2013/10/10 gov.uk http://digital.cabinetoffice.gov.uk/ 70 #
  • 2012.1. Alpha http://webarchive.nationalarchives.gov.uk/20111004104716/http://alpha.gov.uk/ UserXper Digital Consulting Co., Ltd. 71
  • 2012.4. Beta http://webarchive.nationalarchives.gov.uk/20120404150722/https://www.gov.uk/ UserXper Digital Consulting Co., Ltd. 72
  • UserXper Digital Consulting Co., Ltd. 2012.7 beta 73
  • UserXper Digital Consulting Co., Ltd. 2012.10 74
  • UserXper Digital Consulting Co., Ltd. 2013.4 75
  • UserXper Digital Consulting Co., Ltd. 2013.8 76
  • 1,800 User Needs user needs beta user needs user needs user needs http://digital.cabinetoffice.gov.uk/2011/09/19/introducing-the-needotron-working-out-theshape-of-the-product/ UserXper Digital Consulting Co., Ltd. 77
  • user needs ( http://digital.cabinetoffice.gov.uk/2011/09/19/introducing-the-needotron-working-out-theshape-of-the-product/ UserXper Digital Consulting Co., Ltd. 78
  • Card Sorting UserXper Digital Consulting Co., Ltd. 79
  • Card Sorting UserXper Digital Consulting Co., Ltd. 80
  • User Testing http://digital.cabinetoffice.gov.uk/2013/05/03/user-testing-at-dvla/ UserXper Digital Consulting Co., Ltd. 81
  • ICON http://digital.cabinetoffice.gov.uk/2013/06/18/retiring-our-icons/ UserXper Digital Consulting Co., Ltd. 82
  • ICON icon user testing icon http://digital.cabinetoffice.gov.uk/2013/06/18/retiring-our-icons/ UserXper Digital Consulting Co., Ltd. 83
  • UserXper Digital Consulting Co., Ltd. 84
  • Gov.uk Kuwait, Turkey, Australia, Thailand, UAE, Iran, UserXper Digital Consulting Co., Ltd. 85
  • Priority Seat jumping to the front of the queue Kuwait UserXper Digital Consulting Co., Ltd. 86
  • gov.uk HTML/CSS/JS, jQuery, BootstrapSCSS (toolkit) Skyscape, Akamai, Ubuntu Linux, Puppet() redirectionperl, php, node.js, solr elasticsearch RoR MongoDB, MySQL, PostgresDB .. http://digital.cabinetoffice.gov.uk/govuk-launch-colophon/ UserXper Digital Consulting Co., Ltd. 87
  • . . . . - gov.uk . 88 #
  • UCD Type 1 UCD UserXper Digital Consulting Co., Ltd. Type 2 UCD 89
  • gov.uk A/B Test Iterate ) https://www.gov.uk/designprinciples UserXper Digital Consulting Co., Ltd. 90
  • gov.uk gov.uk design principles https://www.gov.uk/designprinciples UserXper Digital Consulting Co., Ltd. 91
  • UCD UserXper Digital Consulting Co., Ltd. 92
  • = + () UserXper Digital Consulting Co., Ltd. 93
  • UCD UserXper Digital Consulting Co., Ltd. 94