悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

使用者中心的網站設計原則���-以 gov.uk 英國政府網站為例���

���

User-Centered Design (UCD) - case study gov.uk

蔡明哲 � Richard Tsai � 悠識數位 首席資訊架構師� richard@userxper.com�

10/18, 11/15 台北, 10/22 高雄, 10/24 台中 (2013年)

1�

政府網站規範及應用推廣說明會�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

悠識 首席資訊架構師 Chief Information Architect

–  近20 年網站企劃與建置，及網路行銷經驗 –  熱衷於 網站企劃, 使用者研究, 使用者介面設計, 專案管理… –  從事 數位服務或產品規劃的工作，包括Prototype Design /

Usability Testing / User Research http://userxper.com

HPX社群 創辦人

–  嘗試創造出跨世代交流的環境 –  提昇國內從事數位服務與產品企劃設計人才 http://www.hpx-party.com

蔡明哲 Richard Tsai

2�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

本次課程目標

•  將帶給網站專案人員⼀一些規劃網站介面的方法 •  介紹最新的網頁介面模式 •  提供專案規劃的設計決策方法 •  藉由介面設計案例來了解實際應用

3�

內容： ⼀一. 網站規劃與設計遭遇的問題 二. 如何選擇較好的方案 三. 優質的介面設計模式 四. 以使用者為中心的設計方法-以

gov.uk為例 五. 結語

4�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

誰做決定？如何形成共識？

5�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

追求專案成功，降低失敗機率

6�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

專案失敗關鍵因素：���需求不明（需求變動） 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

7�

內容： ⼀一. 網站規劃與設計遭遇的問題 二. 如何選擇較好的方案

Make a Good Decision 三.優質的介面設計模式 四. 以使用者為中心的設計方法-以gov.uk 為例 五. 結語

8�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

專案團隊，宛如舞龍

9�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

图片来源 http://www.nipic.com/show/3/24/7e330d36f3285e5a.html�

過去：⼀一般軟體系統

組織內的資訊(老闆)需求�

專案經理/SA�

10�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

图片来源 http://www.nipic.com/show/3/24/7e330d36f3285e5a.html�

現在：充滿各種可能

使用者需求�

網站,App企劃/� 專案經理/產品經理 �

11�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

邏輯及資訊流

介面設計及人機互動�

12�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

滿足所有可能需求會造成的現象…

13�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

舉例：要做⼀一個線上申辦服務的網頁���問題：哪⼀一個版本比較好？

14�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

如何做出更好的設計決策 ？

How to get the better Design Decision?�

15�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

兩種常見的「設計決策」模式

Type 1：老闆說了算��� Boss-Centered Design

Type 2：以使用者為中心 ���User-Centered Design

16�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

如何規劃設計更好用的網站？

1：經驗法則��� 套用已知介面設計模式 ���UI Design Pattern

2：使用者研究 ���以科學態度思維找解法： - 分析使用者需求���- 檢查易用性問題

外 介面設計模式�

內 設計決策流程�

外 內

17�

內容： ⼀一. 網站規劃與設計遭遇的問題 二. 如何選擇較好的方案 三. 優質的介面設計模式 四. 以使用者為中心的設計 五. 結語

外 介面設計模式�

外

18�

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

網站的設計與規劃，乍看之下只有外顯的介面與功能。 我們習慣只看表面，卻往往忽略水面下的設計決策過程，這才是影響結果的原因。

介面設計模式�

設計決策流程�

外

內

19�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

⼀一致性的網站規劃與設計

�  介面布局 �  文案與命名 �  導覽架構 �  操作流程 �  圖案與配色 �  訊息回應的邏輯 �  與實體服務整合

Bootstrap (from twitter)�

960 grid system�

20�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

網頁介面模式慣例 (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 響應式網頁

21�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

介面設計模式慣例：包含介面與互動流程。 UI Pattern 會隨時間而改變，不是恆常準則

22�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

GitHub 程式碼平台

23�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

GitHub 程式碼平台

24�

https://github.com/search?q=mega+menu&ref=cmdform�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

(1) Mega Menu 巨型導覽選單

•  解決往返查找的操作問題 •  突顯位於資訊架構中的重點資訊

25�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.��� 26�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

•  需規劃事先好資訊架構 (導覽選單命名，分類，群組） •  避免面積過大覆蓋整個網頁 前端技術：以 CSS + jQuery來實現

Mega Menu 規劃設計重點

27�

參考程式碼： https://github.com/search?q=mega+menu&ref=cmdform�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

資訊架構很複雜，怎麼辦？

電流急急棒�

28�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

資訊架構很複雜，怎麼辦？

Amazon 導覽選單惡搞版�

29�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

資訊型 Mega menu

CISCO http://www.cisco.com�

30�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

圖像型 Mega menu （垂直展開）

美國猶他州政府 http://www.utah.gov�

31�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

圖像型 Mega menu （水平展開）

Amazon 網站 http://www.amazon.com�

32�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

(2) Informative Fat Footer 資訊式大頁尾

•  或稱為 Content Footer (內容式頁尾) •  方便輕巧的全站小地圖 (摘要版 sitemap) •  有助於 SEO 效果 （搜尋引擎最佳化）

33�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

•  垂直排列，間隔留白，高度不超過⼀一屏(screen size) •  內容：

–  網站摘要版地圖 (小sitemap) –  常用或需要凸顯的 快捷連結 quicklink –  經常搜尋的關鍵字（或增強SEO效果的關鍵字) –  小型常用表單，例如：訂閱或聯絡 –  其他：關於我們，網站宣告

前端技術：HTML/CSS網頁排版

Informative Fat Footer 規劃設計重點

34�

參考html code: http://www.cw.com.tw/ html原始碼�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

純文字 Fat Footer

Apple 網站 http://www.apple.com�

35�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

純文字 Fat Footer

美國白宮政府 網站 http://www.whitehouse.gov�

36�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

文字＋Logo Fat Footer

天下雜誌網站 http://www.cw.com.tw�

37�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

(3) Type Ahead 提前輸入

•  或稱為 隨打即找，或自動完成 (Auto-complete) •  隨著打字輸入，即時提供動態搜尋關鍵字提示

Keywords Recommendation •  適用於需要精準搜尋，快速搜尋的情境 •  搜尋關鍵字的推薦，及搜尋結果排序 (Ranking) 是使

用經驗提昇的關鍵

38�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

Type Ahead 規劃設計重點

•  建立詞典 / 同義詞 / 反義詞典檔 •  建立推薦演算法，例如：統計常用搜尋關鍵字頻率 •  即時顯示關鍵字 (Keyword Recommendation) 前端技術：CSS, jQuery, AJAX

39�

參考程式碼：https://github.com/devbridge/jQuery-Autocomplete

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

Instant Search 與 Type Ahead 不同

Instant Search 即時顯示搜尋結果 • 或稱為 Live search，真正的隨打即找 • 搜尋結果的即時呈現

–  隨著打字輸入，同時縮小搜尋範圍 –  隨著刪除字元，同時擴大搜尋範圍

40�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.��� 41�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.��� 42�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

美國猶他州政府 http://www.utah.gov�

43�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

(4) Long Page 長網頁

• 網頁不能過長的迷思 –  網頁太大下載太久，所以集中內容在⼀一兩個網頁畫面。 –  以為人們不喜歡捲動網頁 –  行銷人員賺取 Page View的技巧

• 實驗數據證明：人們習慣於捲動網頁，勝於操作滑鼠去瞄準及點擊

• 設計要點： –  清楚的區隔分界 –  回到頁面頂端的引導

前端技術：⼀一般網頁html 排版（無關程式）

44�

45�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.��� 46�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

(5) Parallax Scrolling 視差捲動

•  視差捲動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果

•  視差滾動能創造網頁與眾不同的互動體驗 •  設計重點：講故事比技巧實現更重要 •  設計技巧：

–  背景捲動速度最慢 –  中層捲動速度或方向差異 –  內容層捲動和頁面速度⼀一致

47�

參考程式碼 https://github.com/richardshepherd/Parallax-Scrolling�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

美國阿拉巴馬州政府 http://www.alabama.gov/�

簡易的Parallax Scrolling (背景固定，前景移動）

48�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

複雜的Parallax Scrolling (故事敘述及場景設置）

美國密爾瓦基警察局新聞網站（公關形象用途） http://www.milwaukeepolicenews.com 美國密爾瓦基警察局網站 http://city.milwaukee.gov/police�

49�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

Mega Menu 中採用 Parallax Scrolling

The official archive and publisher for the UK http://www.nationalarchives.gov.uk/�

50�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

(6) Responsive Web Design

•  RWD （響應式網頁設計）是綜合性的介面模式 •  是⼀一種用來解決跨平台瀏覽經驗的網頁設計方案，在

手機到電腦不同尺寸的螢幕，試圖取得最佳的閱讀經驗，及最佳的縮放/捲動操作

•  設計重點： –  不是只講求網頁設計技術 –  更重要的是依照環境脈絡來規劃（思考行動需求）

•  前端技術 –  Fluid Grid –  Viewport (html meta tag) –  CSS3 – Media Queries：media queries的作用在偵測device的尺寸和

方向等，指定相對應的CSS檔。

51�

參考程式碼 http://fundesigner.net/css3-media-queries/�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

(6) Responsive Web Design

•  前端技術 –  CSS3 – Media Queries：media

queries的作用在偵測device的尺寸和方向等，指定相對應的CSS檔。

–  Fluid Grid - 原本用像素去定義的寬度改成百分比。比如 width : 240px 改寫成 width : 20%

–  Viewport (html meta tag)

52�

參考程式碼 http://fundesigner.net/css3-media-queries/�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

解析度 寬 1280px�

美國阿拉巴馬州政府 http://www.alabama.gov/�

53�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

解析度 寬 320px� 解析度 寬 800px�

54�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

http://mediaqueri.es/�

55�

內容： ⼀一. 網站規劃與設計遭遇的問題 二. 如何選擇較好的方案 三.優質的介面設計模式 四. 以使用者為中心的設計方法-以 gov.uk為例 五. 結語 內

設計決策流程�

內

#� 56�

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

網站的設計與規劃，乍看之下只有外顯的介面與功能。 我們習慣只看表面，卻往往忽略水面下的設計決策過程，這才是影響結果的原因。

介面設計模式�

設計決策流程�

外

內

#� 57�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

User-Centered Design （UCD) ���以使用者為中心設計

• UCD是⼀一種設計觀念跟態度，用來結合多種design & research methodology 形成設計策略。

• 以使用者為中心：強調在過程中必須真正的“involve user”

58�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

網站規劃設計流程的多種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)

59�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

UCD Method Table

-60-

http://www.usabilitynet.org/tools/methods.htm

60�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

脈絡訪查 Contextual inquiry

•  進入實際場域，進行使用者行為的觀察，並透過訪談挖掘行為背後的動機跟影響因素

•  這是⼀一種需求分析的系統性歸納方法。

61�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

Heuristic Evaluation 啟發式評估

•  或稱為 專家評估建議 (Expert Review) •  由具有經驗的介面設計人員進行介面與流程的檢視 •  依照專家本身的經驗及相關準則進行評估

62�

62�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

網站介面評估分析指標及燈號

63�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

易用性測試 Usability Test

•  直接觀察使用者使用網站系統的情況

•  從使用者的角度來評估網站是否好用？哪些地方會造成困擾挫折？找不到資訊？或無法完成操作？

64�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

Eye Tracking 眼動分析

•  使用者如何閱讀瀏覽網頁？會看哪裡？不看哪裡？會看多久？會如何看？

-65- 65�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

探索認知（Card Sorting)

•  使用者如何理解資訊與資訊之間的關係 •  資訊項目的從屬關係，相似性，產生誤解或難以理解。 •  從使用者角度對資訊項目進行命名

66�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

數據分析 (Data-Driven Design)

•  藉由網站/App 分析軟體（例如 Google Analytics, Flurry) 記錄使用者的行為軌跡，從數據中挖掘問題，尋找設計決策方案

•  例如搜尋關鍵字統計，常用網頁統計，流程的中斷點，異常跳離率…等

•  也可透過系統環境實測不同設計方案的效果（A/B Test)

67�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

A

B

C

68�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

UCD是�

•  是許多方法的適當組合� •  是設計決策模式/設計原則

或團隊文化� •  所有開發設計參與者都應

該負責其中一部分� •  是觀察及探索使用者的行

為脈絡� •  可以找到成功的方向� •  可以幫助創新進行驗證�

•  與其他專業共創價值�

UCD不是�

•  不是一種方法� •  不是單指視覺設計/網頁設

計等的設計工作� •  不是特定研究/設計人員的

工作� •  不是問卷調查�

•  不是一次就成功的保證� •  不墨守成規/沿用原有設計� •  不是取代其他專業能力�

69�

案例分享：英國政府網站 gov.uk •  2012年7月發佈新版網站，使用率大幅度攀升

•  位居英國網站Alexa排名 第 79 位�

•  2013年4月擊敗時尚建築等類，獲得年度最佳設計獎

資料來源：Alexa, 2013/10/10

以下投影片引用 gov.uk 圖片與內容，均來自 http://digital.cabinetoffice.gov.uk/ #� 70�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

2012.1. Alpha�

http://webarchive.nationalarchives.gov.uk/20111004104716/http://alpha.gov.uk/� 71�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

2012.4. Beta�

http://webarchive.nationalarchives.gov.uk/20120404150722/https://www.gov.uk/�

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�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

如何開始使用者需求分析？

•  從政府文件彙整出 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-the-shape-of-the-product/�

77�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

取捨 user needs 的考慮點 （設計決策）

•  民眾是否真的需要？(依據網頁流量記錄及搜尋資料，來判斷）

•  民眾是否理性期待政府負責滿足這項需求？ •  只有政府能符合該項需求？或已經有別人做的更好？ •  該項需求是否正在解釋某人的權利或義務？ •  該項需求是否剛好有助於政府服務數位化的方向

http://digital.cabinetoffice.gov.uk/2011/09/19/introducing-the-needotron-working-out-the-shape-of-the-product/�

78�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

分析使用者需求 ���Card Sorting

79�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

分析使用者需求 Card Sorting

80�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

User Testing

http://digital.cabinetoffice.gov.uk/2013/05/03/user-testing-at-dvla/�

81�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

新版不繼續使用 ICON

http://digital.cabinetoffice.gov.uk/2013/06/18/retiring-our-icons/�

圖像不是比較好看？ 為什麼放棄呢？�

82�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

精心設計的 ICON 為何放棄使用？

•  設計決策以當時所能得到的資訊為基礎。⼀一開始只能仰賴過去經驗，所以設計了icon。

•  後來經過user testing發現，問題出在網頁介面及導覽設計，也發現 icon不會幫助使用者更容易記憶。改成更易辨識的字體及排版。

http://digital.cabinetoffice.gov.uk/2013/06/18/retiring-our-icons/�

83�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

以使用者為中心做出設計決策

84�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

Gov.uk 的使用者測試實施在全世界

•  包括 Kuwait, Turkey, Australia, Thailand, UAE, Iran, 等

•  包括當地英國人，以及該國本地人

85�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

•  全球使用者測試，得到大量的使用者建議 例如：用來解釋Priority Seat 的這句話： jumping to the front of the queue ，被Kuwait 的受訪者說：「這是非常粗魯的描述方式。」

86�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

gov.uk 網站採用的技術

•  前端技術：HTML/CSS/JS, jQuery, Bootstrap（用在管理介面），SCSS (toolkit)…

•  後端技術：Skyscape, Akamai, Ubuntu Linux, Puppet(主機管理)…

•  網站重導 redirection：perl, php, node.js, … •  搜尋技術：從 solr 改用 elasticsearch •  應用程式： RoR… •  資料庫：主要採用 MongoDB, 少量採用MySQL,

PostgresDB •  其他：包含監測，記錄，警示等技術..

http://digital.cabinetoffice.gov.uk/govuk-launch-colophon/�

87�

內容： ⼀一. 網站規劃與設計遭遇的問題 二. 如何選擇較好的方案 三.優質的介面設計模式 四. 以使用者為中心的設計方法-以 gov.uk為例 五. 結語

#� 88�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

以 UCD 規劃設計更好用的網站

Type 1：經驗法則���

UCD 完成式

Type 2：使用者研究 ���

UCD 進行式

外 介面設計模式�

內 設計決策流程�

外 內

89�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

蒐集分析使用者需求�

善用民間力量（連結外部網站)

A/B Test� 快速的迭代 Iterate�

使用者測試�

https://www.gov.uk/designprinciples�

從 gov.uk 我們學到什麼？

90�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

從 gov.uk 我們學到什麼？

•  知名的 gov.uk design principles

https://www.gov.uk/designprinciples�

91�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

• UCD （以使用者為中心）設計方法 – 是⼀一種科學的設計與規劃流程 – 有利於專案收斂，形成共識 – 有助於提昇使用者滿意度

92�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

以使用者為中心���做出正確的設計決策(方向)���避免越走越遠越不知道方向

好網站 = 正確的設計決策 + 優異的前後端技術�

93�

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.���

千里之行，始於足下。���⼀一起開始 UCD 吧！

94�