使用者中心的網站設計原則以英國政府入口網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

2

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


3

內容：

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

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


5

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


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

7

內容：


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

專案團隊，宛如舞龍


9

過去：⼀一般軟體系統

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


專案經理/SA
图片来源 http://www.nipic.com/show/3/24/7e330d36f3285e5a.html
10

現在：充滿各種可能
使用者需求


網站,App企劃/
專案經理/產品經理
图片来源 http://www.nipic.com/show/3/24/7e330d36f3285e5a.html
11

邏輯及資訊流

介面設計及人機互動


12

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


13

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


14

如何做出更好的設計決策？
How to get the better
Design Decision?

15

兩種常見的「設計決策」模式
Type 2：以使用者為中心

Type 1：老闆說了算

Boss-Centered Design


User-Centered Design

16

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

外
外

內
內

介面設計模式

設計決策流程

1：經驗法則

套用已知介面設計模式
UI Design Pattern


2：使用者研究

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

內容：

三. 優質的介面設計模式
四. 以使用者為中心的設計
五. 結語

外
外

介面設計模式
18

外

介面設計模式

內
設計決策流程
網站的設計與規劃，乍看之
下只有外顯的介面與功能。

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

19

我們習慣只看表面，卻往往
忽略水面下的設計決策過程，
這才是影響結果的原因。

⼀一致性的網站規劃與設計
Œ 
 
Ž 
 
 
‘ 
’ 

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


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 響應式網頁


21

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


22

GitHub 程式碼平台


23

GitHub 程式碼平台

https://github.com/search?q=mega+menuref=cmdform

24

(1) Mega Menu 巨型導覽選單
•  解決往返查找的操作問題
•  突顯位於資訊架構中的重點資訊


25


26

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

參考程式碼：
https://github.com/search?q=mega+menuref=cmdform

27

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


電流急急棒

28

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

Amazon 導覽選單惡搞版

29

資訊型 Mega menu

CISCO http://www.cisco.com


30

圖像型 Mega menu （垂直展開）

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

31

圖像型 Mega menu （水平展開）

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

32

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


33

Informative Fat Footer 規劃設計重點
•  垂直排列，間隔留白，高度不超過⼀一屏(screen size)
•  內容：
–  網站摘要版地圖 (小sitemap)
–  常用或需要凸顯的快捷連結 quicklink
–  經常搜尋的關鍵字（或增強SEO效果的關鍵字)
–  小型常用表單，例如：訂閱或聯絡
–  其他：關於我們，網站宣告
前端技術：HTML/CSS網頁排版

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

34

純文字 Fat Footer

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

35

純文字 Fat Footer

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

36

文字＋Logo Fat Footer

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


37

(3) Type Ahead 提前輸入
•  或稱為隨打即找，或自動完成 (Auto-complete)
•  隨著打字輸入，即時提供動態搜尋關鍵字提示
Keywords Recommendation
•  適用於需要精準搜尋，快速搜尋的情境
•  搜尋關鍵字的推薦，及搜尋結果排序 (Ranking) 是使
用經驗提昇的關鍵


38

Type Ahead 規劃設計重點
•  建立詞典 / 同義詞 / 反義詞典檔
•  建立推薦演算法，例如：統計常用搜尋關鍵字頻率
•  即時顯示關鍵字 (Keyword Recommendation)
前端技術：CSS, jQuery, AJAX
參考程式碼：https://github.com/devbridge/jQuery-Autocomplete


39

Instant Search 與 Type Ahead 不同

Instant Search 即時顯示搜尋結果
•  或稱為 Live search，真正的隨打即找
•  搜尋結果的即時呈現
–  隨著打字輸入，同時縮小搜尋範圍
–  隨著刪除字元，同時擴大搜尋範圍


40


41


42

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


43

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

•  實驗數據證明：人們習慣於捲動網頁，勝於操作
滑鼠去瞄準及點擊
•  設計要點：
–  清楚的區隔分界
–  回到頁面頂端的引導
前端技術：⼀一般網頁html 排版（無關程式）


44


46

(5) Parallax Scrolling 視差捲動
•  視差捲動（Parallax Scrolling）是指讓多層背景以不
同的速度移動，形成立體的運動效果
•  視差滾動能創造網頁與眾不同的互動體驗
•  設計重點：講故事比技巧實現更重要
•  設計技巧：
–  背景捲動速度最慢
–  中層捲動速度或方向差異
–  內容層捲動和頁面速度⼀一致
參考程式碼
https://github.com/richardshepherd/Parallax-Scrolling


47

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

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


48

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

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

49

Mega Menu 中採用 Parallax Scrolling

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

50

(6) Responsive Web Design
•  RWD （響應式網頁設計）是綜合性的介面模式
•  是⼀一種用來解決跨平台瀏覽經驗的網頁設計方案，在
手機到電腦不同尺寸的螢幕，試圖取得最佳的閱讀經
驗，及最佳的縮放/捲動操作
•  設計重點：
–  不是只講求網頁設計技術
–  更重要的是依照環境脈絡來規劃（思考行動需求）
•  前端技術
–  Fluid Grid
–  Viewport (html meta tag)
–  CSS3 – Media Queries：media queries的作用在偵測device的尺寸和
方向等，指定相對應的CSS檔。
參考程式碼 http://fundesigner.net/css3-media-queries/

51

(6) Responsive Web Design
•  前端技術
–  CSS3 – Media Queries：media
queries的作用在偵測device的尺
寸和方向等，指定相對應的CSS檔。

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

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

52

解析度寬 1280px

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


53


解析度寬 800px

54

解析度寬 320px

http://mediaqueri.es/


55

內容：

四. 以使用者為中心的設計方法
-以 gov.uk為例

內
內

五. 結語

設計決策流程
56

#

外

介面設計模式

內
設計決策流程
網站的設計與規劃，乍看之
下只有外顯的介面與功能。

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

57

#

我們習慣只看表面，卻往往
忽略水面下的設計決策過程，
這才是影響結果的原因。

User-Centered Design （UCD)
以使用者為中心設計
•  UCD是⼀一種設計觀念跟態度，用來結合多種
design research methodology 形成設
計策略。
•  以使用者為中心：強調在過程中必須真正的
“involve user”


58

網站規劃設計流程的多種UCD方法
• 
• 
• 
• 

• 
• 
• 
• 
• 
• 
• 
• 

Project Stakeholder 需求訪談，確認網站發展策略
目標使用者分析
使用者脈絡訪查 (Contextual Inquiry 實地探索使用者需求)
發展資訊架構及服務範疇：
–  Persona 建立目標使用者的典型輪廓
–  Mindmap 蒐集腦力激盪點子
–  Card Sorting 了解使用者的認知與分類方式
–  Mental Model 了解使用者的思考模式
網站架構圖及線框示意圖 Sitemap, Wireframe
快速原型設計 Rapid Prototype Design
易用性測試 Usability Test
以 Content Auditing 方法分析彙整網站內容
網頁設計及程式開發
功能測試 Functional Test
上線後網站使用成效追蹤與分析 (Online Tracking)


59

UCD Method Table


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

-60-

脈絡訪查 Contextual inquiry
•  進入實際場域，進行使用者行為的觀察，並透過訪談
挖掘行為背後的動機跟影響因素
•  這是⼀一種需求分析的系統性歸納方法。


61

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

6


62

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


63

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


64

Eye Tracking 眼動分析
•  使用者如何閱讀瀏覽網頁？會看哪裡？不看哪裡？會
看多久？會如何看？

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

65

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


66

數據分析 (Data-Driven Design)
•  藉由網站/App 分析軟體（例如 Google Analytics,
Flurry) 記錄使用者的行為軌跡，從數據中挖掘問題，
尋找設計決策方案
•  例如搜尋關鍵字統計，常用網頁統計，流程的中斷點，
異常跳離率…等
•  也可透過系統環境實測不同設計方案的效果（A/B
Test)


67

A

C
B


68

UCD是
•  是許多方法的適當組合
•  是設計決策模式/設計原則
或團隊文化
•  所有開發設計參與者都應
該負責其中一部分
•  是觀察及探索使用者的行
為脈絡
•  可以找到成功的方向
•  可以幫助創新進行驗證
•  與其他專業共創價值

UCD不是
•  不是一種方法
•  不是單指視覺設計/網頁設
計等的設計工作
•  不是特定研究/設計人員的
工作
•  不是問卷調查
•  不是一次就成功的保證
•  不墨守成規/沿用原有設計
•  不是取代其他專業能力
69

案例分享：英國政府網站 gov.uk
•  2012年7月發佈新版網站，使用率大幅度攀升
•  位居英國網站Alexa排名第 79 位
•  2013年4月擊敗時尚建築等類，獲得年度最佳設計獎

資料來源：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/

71

2012.4. Beta

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

72


2012.7 beta

73


2012.10

74


2013.4

75


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/

77

取捨 user needs 的考慮點（設計決策）
•  民眾是否真的需要？(依據網頁流量記錄及搜尋資料，
來判斷）
•  民眾是否理性期待政府負責滿足這項需求？
•  只有政府能符合該項需求？或已經有別人做的更好？
•  該項需求是否正在解釋某人的權利或義務？
•  該項需求是否剛好有助於政府服務數位化的方向

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

78

分析使用者需求
Card Sorting


79

分析使用者需求 Card Sorting


80

User Testing

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

81

新版不繼續使用 ICON

圖像不是比較好看？
為什麼放棄呢？
http://digital.cabinetoffice.gov.uk/2013/06/18/retiring-our-icons/

82

精心設計的
ICON 為何放棄使用？
•  設計決策以當時所能得到的
資訊為基礎。⼀一開始只能仰
賴過去經驗，所以設計了
icon。
•  後來經過user testing發現，
問題出在網頁介面及導覽設
計，也發現 icon不會幫助使
用者更容易記憶。改成更易
辨識的字體及排版。

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


83

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


84

Gov.uk 的使用者測試
實施在全世界
•  包括 Kuwait, Turkey,
Australia, Thailand,
UAE, Iran, 等
•  包括當地英國人，以
及該國本地人


85

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


86

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

#

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

外
外

內
內

介面設計模式

設計決策流程

Type 1：經驗法則

UCD 完成式


Type 2：使用者研究

UCD 進行式

89

從 gov.uk 我們學到什麼？
蒐集分析使用者需求

A/B Test

使用者測試

快速的迭代 Iterate

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

https://www.gov.uk/designprinciples

90

從 gov.uk 我們學到什麼？
•  知名的 gov.uk design principles

https://www.gov.uk/designprinciples

91

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


92

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

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

93

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

94

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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

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

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

More from 悠識學院

More from 悠識學院 (20)