SlideShare a Scribd company logo
政府網站規範及應用推廣說明會

使用者中心的網站設計原則
-以 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
誰做決定?如何形成共識?	

悠識數位顧問有限公司 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+menuref=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+menuref=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 Queries:media queries的作用在偵測device的尺寸和
方向等,指定相對應的CSS檔。	
參考程式碼 http://fundesigner.net/css3-media-queries/
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
	

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/
悠識數位顧問有限公司 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 	
•  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/
悠識數位顧問有限公司 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,
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/
悠識數位顧問有限公司 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

More Related Content

What's hot

SmartPLS3.0偏最小平方法教材2015版-三星統計張偉豪
SmartPLS3.0偏最小平方法教材2015版-三星統計張偉豪SmartPLS3.0偏最小平方法教材2015版-三星統計張偉豪
SmartPLS3.0偏最小平方法教材2015版-三星統計張偉豪
Beckett Hsieh
 
調查評估法
調查評估法調查評估法
調查評估法
黑豹
 
Design Patterns這樣學就會了:入門班 Day1 教材
Design Patterns這樣學就會了:入門班 Day1 教材Design Patterns這樣學就會了:入門班 Day1 教材
Design Patterns這樣學就會了:入門班 Day1 教材teddysoft
 
問題處理與策略規劃技巧 (淡江大學)
問題處理與策略規劃技巧 (淡江大學)問題處理與策略規劃技巧 (淡江大學)
問題處理與策略規劃技巧 (淡江大學)
Yeong-Long Chen
 
フリーでやろうぜ!セキュリティチェック!
フリーでやろうぜ!セキュリティチェック!フリーでやろうぜ!セキュリティチェック!
フリーでやろうぜ!セキュリティチェック!
zaki4649
 
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作るSpring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
 
История на хакерството и на хакерите
История на хакерството и на хакеритеИстория на хакерството и на хакерите
История на хакерството и на хакерите
LogMan Graduate School on Knowledge Economy
 
コンテナで始める柔軟な AWS Lambda 生活
コンテナで始める柔軟な AWS Lambda 生活コンテナで始める柔軟な AWS Lambda 生活
コンテナで始める柔軟な AWS Lambda 生活
Drecom Co., Ltd.
 
これからのJDK/JVM 何を選ぶ?どう選ぶ?
これからのJDK/JVM 何を選ぶ?どう選ぶ?これからのJDK/JVM 何を選ぶ?どう選ぶ?
これからのJDK/JVM 何を選ぶ?どう選ぶ?
Takahiro YAMADA
 
Напівпровідникові пристрої і їх використання
Напівпровідникові пристрої і їх використанняНапівпровідникові пристрої і їх використання
Напівпровідникові пристрої і їх використанняvladls1112
 
Dockerを活用したリクルートグループ開発基盤の構築
Dockerを活用したリクルートグループ開発基盤の構築Dockerを活用したリクルートグループ開発基盤の構築
Dockerを活用したリクルートグループ開発基盤の構築
Recruit Technologies
 
[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發
[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發
[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發
Edward Kuo
 
Goの時刻に関するテスト
Goの時刻に関するテストGoの時刻に関するテスト
Goの時刻に関するテスト
Kentaro Kawano
 
ORCA次期FW開発の現状
ORCA次期FW開発の現状ORCA次期FW開発の現状
ORCA次期FW開発の現状
Shinji Kobayashi
 
有效的績效面談與員工績效改善-詹翔霖老師--谷源塑膠股份有限公司-0517.pptx
有效的績效面談與員工績效改善-詹翔霖老師--谷源塑膠股份有限公司-0517.pptx有效的績效面談與員工績效改善-詹翔霖老師--谷源塑膠股份有限公司-0517.pptx
有效的績效面談與員工績效改善-詹翔霖老師--谷源塑膠股份有限公司-0517.pptx
https://mypaper.pchome.com.tw/chanrs/post/1381109792
 
Laravel aspectで関心の分離
Laravel aspectで関心の分離Laravel aspectで関心の分離
Laravel aspectで関心の分離
Kenjiro Kubota
 
QM-052-品質大師的品質觀念
QM-052-品質大師的品質觀念QM-052-品質大師的品質觀念
QM-052-品質大師的品質觀念handbook
 
LWC初心者がアンケートフォームを作るまでの道のり
LWC初心者がアンケートフォームを作るまでの道のりLWC初心者がアンケートフォームを作るまでの道のり
LWC初心者がアンケートフォームを作るまでの道のり
Yoshinari KUWAYAMA
 
FINAL FANTASY Record Keeperを支えたGolang
FINAL FANTASY Record Keeperを支えたGolangFINAL FANTASY Record Keeperを支えたGolang
FINAL FANTASY Record Keeperを支えたGolang
Yoshiki Shibukawa
 
Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎
Satoshi Kubo
 

What's hot (20)

SmartPLS3.0偏最小平方法教材2015版-三星統計張偉豪
SmartPLS3.0偏最小平方法教材2015版-三星統計張偉豪SmartPLS3.0偏最小平方法教材2015版-三星統計張偉豪
SmartPLS3.0偏最小平方法教材2015版-三星統計張偉豪
 
調查評估法
調查評估法調查評估法
調查評估法
 
Design Patterns這樣學就會了:入門班 Day1 教材
Design Patterns這樣學就會了:入門班 Day1 教材Design Patterns這樣學就會了:入門班 Day1 教材
Design Patterns這樣學就會了:入門班 Day1 教材
 
問題處理與策略規劃技巧 (淡江大學)
問題處理與策略規劃技巧 (淡江大學)問題處理與策略規劃技巧 (淡江大學)
問題處理與策略規劃技巧 (淡江大學)
 
フリーでやろうぜ!セキュリティチェック!
フリーでやろうぜ!セキュリティチェック!フリーでやろうぜ!セキュリティチェック!
フリーでやろうぜ!セキュリティチェック!
 
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作るSpring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
 
История на хакерството и на хакерите
История на хакерството и на хакеритеИстория на хакерството и на хакерите
История на хакерството и на хакерите
 
コンテナで始める柔軟な AWS Lambda 生活
コンテナで始める柔軟な AWS Lambda 生活コンテナで始める柔軟な AWS Lambda 生活
コンテナで始める柔軟な AWS Lambda 生活
 
これからのJDK/JVM 何を選ぶ?どう選ぶ?
これからのJDK/JVM 何を選ぶ?どう選ぶ?これからのJDK/JVM 何を選ぶ?どう選ぶ?
これからのJDK/JVM 何を選ぶ?どう選ぶ?
 
Напівпровідникові пристрої і їх використання
Напівпровідникові пристрої і їх використанняНапівпровідникові пристрої і їх використання
Напівпровідникові пристрої і їх використання
 
Dockerを活用したリクルートグループ開発基盤の構築
Dockerを活用したリクルートグループ開発基盤の構築Dockerを活用したリクルートグループ開発基盤の構築
Dockerを活用したリクルートグループ開発基盤の構築
 
[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發
[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發
[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發
 
Goの時刻に関するテスト
Goの時刻に関するテストGoの時刻に関するテスト
Goの時刻に関するテスト
 
ORCA次期FW開発の現状
ORCA次期FW開発の現状ORCA次期FW開発の現状
ORCA次期FW開発の現状
 
有效的績效面談與員工績效改善-詹翔霖老師--谷源塑膠股份有限公司-0517.pptx
有效的績效面談與員工績效改善-詹翔霖老師--谷源塑膠股份有限公司-0517.pptx有效的績效面談與員工績效改善-詹翔霖老師--谷源塑膠股份有限公司-0517.pptx
有效的績效面談與員工績效改善-詹翔霖老師--谷源塑膠股份有限公司-0517.pptx
 
Laravel aspectで関心の分離
Laravel aspectで関心の分離Laravel aspectで関心の分離
Laravel aspectで関心の分離
 
QM-052-品質大師的品質觀念
QM-052-品質大師的品質觀念QM-052-品質大師的品質觀念
QM-052-品質大師的品質觀念
 
LWC初心者がアンケートフォームを作るまでの道のり
LWC初心者がアンケートフォームを作るまでの道のりLWC初心者がアンケートフォームを作るまでの道のり
LWC初心者がアンケートフォームを作るまでの道のり
 
FINAL FANTASY Record Keeperを支えたGolang
FINAL FANTASY Record Keeperを支えたGolangFINAL FANTASY Record Keeperを支えたGolang
FINAL FANTASY Record Keeperを支えたGolang
 
Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎Strutsから移行する人のためのjsf基礎
Strutsから移行する人のためのjsf基礎
 

Viewers also liked

HPX讀書會介紹@HPX89 2016 (哈林)
HPX讀書會介紹@HPX89 2016 (哈林)HPX讀書會介紹@HPX89 2016 (哈林)
HPX讀書會介紹@HPX89 2016 (哈林)
悠識學院
 
夢想,從初心到決心;產品,從使用者到客戶 ─ Dear b&b 創業歷程分享 / 溫名秀 Minchelle
夢想,從初心到決心;產品,從使用者到客戶 ─ Dear b&b 創業歷程分享 / 溫名秀 Minchelle夢想,從初心到決心;產品,從使用者到客戶 ─ Dear b&b 創業歷程分享 / 溫名秀 Minchelle
夢想,從初心到決心;產品,從使用者到客戶 ─ Dear b&b 創業歷程分享 / 溫名秀 Minchelle
悠識學院
 
ECX2014 Pinkoi 網站使用者經驗設計的二三事
ECX2014 Pinkoi 網站使用者經驗設計的二三事ECX2014 Pinkoi 網站使用者經驗設計的二三事
ECX2014 Pinkoi 網站使用者經驗設計的二三事
悠識學院
 
數據如何輔助 App 設計流程
數據如何輔助 App 設計流程數據如何輔助 App 設計流程
數據如何輔助 App 設計流程
Soldier Hsieh
 
網頁設計1 .首頁設計準則
網頁設計1 .首頁設計準則網頁設計1 .首頁設計準則
網頁設計1 .首頁設計準則
思凱 傅
 
Axure RP社群及學習資源-我的Axure RP之旅(分享)
Axure RP社群及學習資源-我的Axure RP之旅(分享)Axure RP社群及學習資源-我的Axure RP之旅(分享)
Axure RP社群及學習資源-我的Axure RP之旅(分享)
悠識學院
 
HPX77 - UF2015教我的86件事情 (Swatch)
HPX77 - UF2015教我的86件事情 (Swatch)HPX77 - UF2015教我的86件事情 (Swatch)
HPX77 - UF2015教我的86件事情 (Swatch)
悠識學院
 
HP47 為什麼我們這樣生活,那樣工作?
HP47 為什麼我們這樣生活,那樣工作?HP47 為什麼我們這樣生活,那樣工作?
HP47 為什麼我們這樣生活,那樣工作?
悠識學院
 
HP48 活動簡介
HP48 活動簡介HP48 活動簡介
HP48 活動簡介
悠識學院
 
[Happy UX] Designing for Readers, James Wu / Kobo 使用者經驗設計總監
[Happy UX] Designing for Readers, James Wu  /  Kobo 使用者經驗設計總監[Happy UX] Designing for Readers, James Wu  /  Kobo 使用者經驗設計總監
[Happy UX] Designing for Readers, James Wu / Kobo 使用者經驗設計總監
悠識學院
 
[ECX] 從使用者研究發掘出來的網站獲利關鍵設計 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
[ECX] 從使用者研究發掘出來的網站獲利關鍵設計 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師[ECX] 從使用者研究發掘出來的網站獲利關鍵設計 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
[ECX] 從使用者研究發掘出來的網站獲利關鍵設計 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
悠識學院
 
HP47 101 Design Methods
HP47 101 Design Methods HP47 101 Design Methods
HP47 101 Design Methods
悠識學院
 
[Happy UX] 尋找體驗工作應當承受之重(Looking for the bearable weight of experience works)夏...
[Happy UX] 尋找體驗工作應當承受之重(Looking for the bearable weight of experience works)夏...[Happy UX] 尋找體驗工作應當承受之重(Looking for the bearable weight of experience works)夏...
[Happy UX] 尋找體驗工作應當承受之重(Looking for the bearable weight of experience works)夏...
悠識學院
 
HP62 內容與社群策展 活動簡介
HP62 內容與社群策展 活動簡介HP62 內容與社群策展 活動簡介
HP62 內容與社群策展 活動簡介
悠識學院
 
[Happy UX] UX 教育 唐玄輝 / 台科大工商業設計研究所 副教授
[Happy UX] UX 教育 唐玄輝 /  台科大工商業設計研究所 副教授[Happy UX] UX 教育 唐玄輝 /  台科大工商業設計研究所 副教授
[Happy UX] UX 教育 唐玄輝 / 台科大工商業設計研究所 副教授
悠識學院
 
HPX-GOV 英國政府數位服務設計手冊 GDS Service Design Manual 翻譯松
HPX-GOV 英國政府數位服務設計手冊 GDS Service Design Manual 翻譯松HPX-GOV 英國政府數位服務設計手冊 GDS Service Design Manual 翻譯松
HPX-GOV 英國政府數位服務設計手冊 GDS Service Design Manual 翻譯松
悠識學院
 
[ECX 2013] 引言 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
[ECX 2013] 引言 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師[ECX 2013] 引言 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
[ECX 2013] 引言 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
悠識學院
 
Interaction13 - 社群互動設計與規劃Workshop
Interaction13 - 社群互動設計與規劃WorkshopInteraction13 - 社群互動設計與規劃Workshop
Interaction13 - 社群互動設計與規劃Workshop
悠識學院
 
HP47 無罪兩難的食物策展
HP47 無罪兩難的食物策展HP47 無罪兩難的食物策展
HP47 無罪兩難的食物策展
悠識學院
 

Viewers also liked (20)

HPX讀書會介紹@HPX89 2016 (哈林)
HPX讀書會介紹@HPX89 2016 (哈林)HPX讀書會介紹@HPX89 2016 (哈林)
HPX讀書會介紹@HPX89 2016 (哈林)
 
夢想,從初心到決心;產品,從使用者到客戶 ─ Dear b&b 創業歷程分享 / 溫名秀 Minchelle
夢想,從初心到決心;產品,從使用者到客戶 ─ Dear b&b 創業歷程分享 / 溫名秀 Minchelle夢想,從初心到決心;產品,從使用者到客戶 ─ Dear b&b 創業歷程分享 / 溫名秀 Minchelle
夢想,從初心到決心;產品,從使用者到客戶 ─ Dear b&b 創業歷程分享 / 溫名秀 Minchelle
 
ECX2014 Pinkoi 網站使用者經驗設計的二三事
ECX2014 Pinkoi 網站使用者經驗設計的二三事ECX2014 Pinkoi 網站使用者經驗設計的二三事
ECX2014 Pinkoi 網站使用者經驗設計的二三事
 
數據如何輔助 App 設計流程
數據如何輔助 App 設計流程數據如何輔助 App 設計流程
數據如何輔助 App 設計流程
 
網頁設計1 .首頁設計準則
網頁設計1 .首頁設計準則網頁設計1 .首頁設計準則
網頁設計1 .首頁設計準則
 
Axure RP社群及學習資源-我的Axure RP之旅(分享)
Axure RP社群及學習資源-我的Axure RP之旅(分享)Axure RP社群及學習資源-我的Axure RP之旅(分享)
Axure RP社群及學習資源-我的Axure RP之旅(分享)
 
HPX77 - UF2015教我的86件事情 (Swatch)
HPX77 - UF2015教我的86件事情 (Swatch)HPX77 - UF2015教我的86件事情 (Swatch)
HPX77 - UF2015教我的86件事情 (Swatch)
 
HP47 為什麼我們這樣生活,那樣工作?
HP47 為什麼我們這樣生活,那樣工作?HP47 為什麼我們這樣生活,那樣工作?
HP47 為什麼我們這樣生活,那樣工作?
 
HP48 活動簡介
HP48 活動簡介HP48 活動簡介
HP48 活動簡介
 
[Happy UX] Designing for Readers, James Wu / Kobo 使用者經驗設計總監
[Happy UX] Designing for Readers, James Wu  /  Kobo 使用者經驗設計總監[Happy UX] Designing for Readers, James Wu  /  Kobo 使用者經驗設計總監
[Happy UX] Designing for Readers, James Wu / Kobo 使用者經驗設計總監
 
[ECX] 從使用者研究發掘出來的網站獲利關鍵設計 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
[ECX] 從使用者研究發掘出來的網站獲利關鍵設計 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師[ECX] 從使用者研究發掘出來的網站獲利關鍵設計 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
[ECX] 從使用者研究發掘出來的網站獲利關鍵設計 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
 
HP47 活動簡介
HP47 活動簡介HP47 活動簡介
HP47 活動簡介
 
HP47 101 Design Methods
HP47 101 Design Methods HP47 101 Design Methods
HP47 101 Design Methods
 
[Happy UX] 尋找體驗工作應當承受之重(Looking for the bearable weight of experience works)夏...
[Happy UX] 尋找體驗工作應當承受之重(Looking for the bearable weight of experience works)夏...[Happy UX] 尋找體驗工作應當承受之重(Looking for the bearable weight of experience works)夏...
[Happy UX] 尋找體驗工作應當承受之重(Looking for the bearable weight of experience works)夏...
 
HP62 內容與社群策展 活動簡介
HP62 內容與社群策展 活動簡介HP62 內容與社群策展 活動簡介
HP62 內容與社群策展 活動簡介
 
[Happy UX] UX 教育 唐玄輝 / 台科大工商業設計研究所 副教授
[Happy UX] UX 教育 唐玄輝 /  台科大工商業設計研究所 副教授[Happy UX] UX 教育 唐玄輝 /  台科大工商業設計研究所 副教授
[Happy UX] UX 教育 唐玄輝 / 台科大工商業設計研究所 副教授
 
HPX-GOV 英國政府數位服務設計手冊 GDS Service Design Manual 翻譯松
HPX-GOV 英國政府數位服務設計手冊 GDS Service Design Manual 翻譯松HPX-GOV 英國政府數位服務設計手冊 GDS Service Design Manual 翻譯松
HPX-GOV 英國政府數位服務設計手冊 GDS Service Design Manual 翻譯松
 
[ECX 2013] 引言 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
[ECX 2013] 引言 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師[ECX 2013] 引言 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
[ECX 2013] 引言 蔡明哲 / 悠識數位顧問有限公司 首席資訊架構師
 
Interaction13 - 社群互動設計與規劃Workshop
Interaction13 - 社群互動設計與規劃WorkshopInteraction13 - 社群互動設計與規劃Workshop
Interaction13 - 社群互動設計與規劃Workshop
 
HP47 無罪兩難的食物策展
HP47 無罪兩難的食物策展HP47 無罪兩難的食物策展
HP47 無罪兩難的食物策展
 

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

借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙 借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
悠識學院
 
以使用者為中心的設計概念跟方法(Inside salon)
以使用者為中心的設計概念跟方法(Inside salon)以使用者為中心的設計概念跟方法(Inside salon)
以使用者為中心的設計概念跟方法(Inside salon)
悠識學院
 
ECX2014 線上購物經驗使用者研究方法
ECX2014 線上購物經驗使用者研究方法ECX2014 線上購物經驗使用者研究方法
ECX2014 線上購物經驗使用者研究方法
悠識學院
 
台中市創業平台建置計畫
台中市創業平台建置計畫台中市創業平台建置計畫
台中市創業平台建置計畫
Chris 克里斯
 
10th.霍泰稳.info q中文站2011年技术趋势展望
10th.霍泰稳.info q中文站2011年技术趋势展望10th.霍泰稳.info q中文站2011年技术趋势展望
10th.霍泰稳.info q中文站2011年技术趋势展望
drewz lin
 
HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)
悠識學院
 
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗Drupal Taiwan
 
数据平台建设进展汇报以及对产品人员工作的认识 王小红20140227
数据平台建设进展汇报以及对产品人员工作的认识 王小红20140227数据平台建设进展汇报以及对产品人员工作的认识 王小红20140227
数据平台建设进展汇报以及对产品人员工作的认识 王小红20140227Bluer Wang(王小红)
 
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
Justin Lee
 
Ne tivism intro
Ne tivism introNe tivism intro
Ne tivism introjimyhuang
 
386 涂家网 互联网家装设计、造价平台
386 涂家网 互联网家装设计、造价平台386 涂家网 互联网家装设计、造价平台
386 涂家网 互联网家装设计、造价平台
Rui (Nash) Yang
 
用户体验的 要素 很好的资料
用户体验的 要素 很好的资料用户体验的 要素 很好的资料
用户体验的 要素 很好的资料
grey0511
 
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程
Souyi Yang
 
Drupal7第一堂
Drupal7第一堂Drupal7第一堂
Drupal7第一堂Hen Chen
 
敏捷开发全景视图(流程、方法和最佳实践)
敏捷开发全景视图(流程、方法和最佳实践)敏捷开发全景视图(流程、方法和最佳实践)
敏捷开发全景视图(流程、方法和最佳实践)
Weijun Zhong
 
Project GATE 的敏捷實踐之路
Project GATE 的敏捷實踐之路Project GATE 的敏捷實踐之路
Project GATE 的敏捷實踐之路
AgileCommunity
 
海量計算的學習歷程分析與雲端資料庫管理系統Sqlmr appliance一體機開發計畫書 20140101
海量計算的學習歷程分析與雲端資料庫管理系統Sqlmr appliance一體機開發計畫書 20140101海量計算的學習歷程分析與雲端資料庫管理系統Sqlmr appliance一體機開發計畫書 20140101
海量計算的學習歷程分析與雲端資料庫管理系統Sqlmr appliance一體機開發計畫書 20140101
Jackie Liu
 
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.comDjt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.comdrewz lin
 

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

借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙 借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
借力使力的乾坤挪移大法-以使用者為中心的設計決策奧妙
 
以使用者為中心的設計概念跟方法(Inside salon)
以使用者為中心的設計概念跟方法(Inside salon)以使用者為中心的設計概念跟方法(Inside salon)
以使用者為中心的設計概念跟方法(Inside salon)
 
ECX2014 線上購物經驗使用者研究方法
ECX2014 線上購物經驗使用者研究方法ECX2014 線上購物經驗使用者研究方法
ECX2014 線上購物經驗使用者研究方法
 
台中市創業平台建置計畫
台中市創業平台建置計畫台中市創業平台建置計畫
台中市創業平台建置計畫
 
10th.霍泰稳.info q中文站2011年技术趋势展望
10th.霍泰稳.info q中文站2011年技术趋势展望10th.霍泰稳.info q中文站2011年技术趋势展望
10th.霍泰稳.info q中文站2011年技术趋势展望
 
HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)HP41- 令人迷惑的使用者研究方法 (蔡明哲)
HP41- 令人迷惑的使用者研究方法 (蔡明哲)
 
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
[DCTPE2010] 從企劃到開發維護的 Drupal 專案經驗
 
偉盛世科技 雲端行銷平台
偉盛世科技 雲端行銷平台偉盛世科技 雲端行銷平台
偉盛世科技 雲端行銷平台
 
数据平台建设进展汇报以及对产品人员工作的认识 王小红20140227
数据平台建设进展汇报以及对产品人员工作的认识 王小红20140227数据平台建设进展汇报以及对产品人员工作的认识 王小红20140227
数据平台建设进展汇报以及对产品人员工作的认识 王小红20140227
 
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
2009/04/19 UI Gathering專題演講-「偽」網站設計-Website Prototype Design的實務應用分享
 
Ne tivism intro
Ne tivism introNe tivism intro
Ne tivism intro
 
386 涂家网 互联网家装设计、造价平台
386 涂家网 互联网家装设计、造价平台386 涂家网 互联网家装设计、造价平台
386 涂家网 互联网家装设计、造价平台
 
用户体验的 要素 很好的资料
用户体验的 要素 很好的资料用户体验的 要素 很好的资料
用户体验的 要素 很好的资料
 
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程
 
Medialand 2013
Medialand 2013Medialand 2013
Medialand 2013
 
Drupal7第一堂
Drupal7第一堂Drupal7第一堂
Drupal7第一堂
 
敏捷开发全景视图(流程、方法和最佳实践)
敏捷开发全景视图(流程、方法和最佳实践)敏捷开发全景视图(流程、方法和最佳实践)
敏捷开发全景视图(流程、方法和最佳实践)
 
Project GATE 的敏捷實踐之路
Project GATE 的敏捷實踐之路Project GATE 的敏捷實踐之路
Project GATE 的敏捷實踐之路
 
海量計算的學習歷程分析與雲端資料庫管理系統Sqlmr appliance一體機開發計畫書 20140101
海量計算的學習歷程分析與雲端資料庫管理系統Sqlmr appliance一體機開發計畫書 20140101海量計算的學習歷程分析與雲端資料庫管理系統Sqlmr appliance一體機開發計畫書 20140101
海量計算的學習歷程分析與雲端資料庫管理系統Sqlmr appliance一體機開發計畫書 20140101
 
Djt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.comDjt22 justinliu djt.qq.com
Djt22 justinliu djt.qq.com
 

More from 悠識學院

[2019使用者研究實務研討]我們與田野的距離
[2019使用者研究實務研討]我們與田野的距離[2019使用者研究實務研討]我們與田野的距離
[2019使用者研究實務研討]我們與田野的距離
悠識學院
 
不只是故事而已~人類學視野下的創新厚數據
不只是故事而已~人類學視野下的創新厚數據不只是故事而已~人類學視野下的創新厚數據
不只是故事而已~人類學視野下的創新厚數據
悠識學院
 
用研究織一張意義網
用研究織一張意義網用研究織一張意義網
用研究織一張意義網
悠識學院
 
從初心者到獨當一面 - User Researcher Journey Map
從初心者到獨當一面 - User Researcher Journey Map從初心者到獨當一面 - User Researcher Journey Map
從初心者到獨當一面 - User Researcher Journey Map
悠識學院
 
企業UX升級攻略
企業UX升級攻略企業UX升級攻略
企業UX升級攻略
悠識學院
 
IBM
IBMIBM
小小兵到國際鋼鐵人競賽
小小兵到國際鋼鐵人競賽小小兵到國際鋼鐵人競賽
小小兵到國際鋼鐵人競賽
悠識學院
 
HPX Talk 44:以增長為導向,發揮用戶研究的真正價值 / Stella Hsiao
HPX Talk 44:以增長為導向,發揮用戶研究的真正價值 / Stella HsiaoHPX Talk 44:以增長為導向,發揮用戶研究的真正價值 / Stella Hsiao
HPX Talk 44:以增長為導向,發揮用戶研究的真正價值 / Stella Hsiao
悠識學院
 
HPX Talk 40:行銷總監十年經驗談:如何以 OKR 和 WBS 幫助團隊?
HPX Talk 40:行銷總監十年經驗談:如何以 OKR 和 WBS 幫助團隊?HPX Talk 40:行銷總監十年經驗談:如何以 OKR 和 WBS 幫助團隊?
HPX Talk 40:行銷總監十年經驗談:如何以 OKR 和 WBS 幫助團隊?
悠識學院
 
HPX Talk 35:Booking.com 產品經理工作經驗分享
HPX Talk 35:Booking.com 產品經理工作經驗分享HPX Talk 35:Booking.com 產品經理工作經驗分享
HPX Talk 35:Booking.com 產品經理工作經驗分享
悠識學院
 
[MIX2018]白鯨記 – 數位潮流裡,我的媒體探索之路 - 李取中 / The Affairs 週刊編集 總編輯
[MIX2018]白鯨記 – 數位潮流裡,我的媒體探索之路 - 李取中 / The Affairs 週刊編集 總編輯[MIX2018]白鯨記 – 數位潮流裡,我的媒體探索之路 - 李取中 / The Affairs 週刊編集 總編輯
[MIX2018]白鯨記 – 數位潮流裡,我的媒體探索之路 - 李取中 / The Affairs 週刊編集 總編輯
悠識學院
 
[MIX2018]用戶體驗於人工智慧時代的挑戰 - 許伯圳/Microsoft SwiftKey 首席工程師
[MIX2018]用戶體驗於人工智慧時代的挑戰 - 許伯圳/Microsoft SwiftKey 首席工程師[MIX2018]用戶體驗於人工智慧時代的挑戰 - 許伯圳/Microsoft SwiftKey 首席工程師
[MIX2018]用戶體驗於人工智慧時代的挑戰 - 許伯圳/Microsoft SwiftKey 首席工程師
悠識學院
 
[MIX2018]從人機互動到人智互動 - 陳宜秀/國立政治大學傳播學院 副教授
[MIX2018]從人機互動到人智互動 - 陳宜秀/國立政治大學傳播學院 副教授[MIX2018]從人機互動到人智互動 - 陳宜秀/國立政治大學傳播學院 副教授
[MIX2018]從人機互動到人智互動 - 陳宜秀/國立政治大學傳播學院 副教授
悠識學院
 
[MIX2018]AI 時代的產品設計 - 吳卓浩/創新工場 AI 工程院 VP
[MIX2018]AI 時代的產品設計 - 吳卓浩/創新工場 AI 工程院 VP[MIX2018]AI 時代的產品設計 - 吳卓浩/創新工場 AI 工程院 VP
[MIX2018]AI 時代的產品設計 - 吳卓浩/創新工場 AI 工程院 VP
悠識學院
 
[MIX2018]Making Banking Joyful-DBS數位轉型之路 - 何子明 / 台灣星展銀行 董事總經理
[MIX2018]Making Banking Joyful-DBS數位轉型之路 - 何子明 / 台灣星展銀行 董事總經理[MIX2018]Making Banking Joyful-DBS數位轉型之路 - 何子明 / 台灣星展銀行 董事總經理
[MIX2018]Making Banking Joyful-DBS數位轉型之路 - 何子明 / 台灣星展銀行 董事總經理
悠識學院
 
[MIX2018]壞部當棄新勢考驗 - 宋捷仁/USPACE悠勢科技 CEO
[MIX2018]壞部當棄新勢考驗 - 宋捷仁/USPACE悠勢科技 CEO[MIX2018]壞部當棄新勢考驗 - 宋捷仁/USPACE悠勢科技 CEO
[MIX2018]壞部當棄新勢考驗 - 宋捷仁/USPACE悠勢科技 CEO
悠識學院
 
[MIX2018]設計的文化衝擊 – 當東方遇上西方 - Alfreda Yu/Isobar Experience Design Director
[MIX2018]設計的文化衝擊 – 當東方遇上西方 - Alfreda Yu/Isobar Experience Design Director[MIX2018]設計的文化衝擊 – 當東方遇上西方 - Alfreda Yu/Isobar Experience Design Director
[MIX2018]設計的文化衝擊 – 當東方遇上西方 - Alfreda Yu/Isobar Experience Design Director
悠識學院
 
[MIX2018]台灣體驗設計的視野與展望 - 陳啟亮/UiGathering 台灣使用者經驗設計協會 理事長
[MIX2018]台灣體驗設計的視野與展望 - 陳啟亮/UiGathering 台灣使用者經驗設計協會 理事長[MIX2018]台灣體驗設計的視野與展望 - 陳啟亮/UiGathering 台灣使用者經驗設計協會 理事長
[MIX2018]台灣體驗設計的視野與展望 - 陳啟亮/UiGathering 台灣使用者經驗設計協會 理事長
悠識學院
 
HPX Talk 25:UX in the Jungle – 從桌遊教具開發淺談遊戲化的設計方法
HPX Talk 25:UX in the Jungle – 從桌遊教具開發淺談遊戲化的設計方法HPX Talk 25:UX in the Jungle – 從桌遊教具開發淺談遊戲化的設計方法
HPX Talk 25:UX in the Jungle – 從桌遊教具開發淺談遊戲化的設計方法
悠識學院
 
HPX100 讀書會分享4 - HPX❤️FEMXR4A 讀書會、HPX-腦神經科學讀書會 / 本丸(尹歆勻)
HPX100 讀書會分享4 - HPX❤️FEMXR4A 讀書會、HPX-腦神經科學讀書會 / 本丸(尹歆勻)HPX100 讀書會分享4 - HPX❤️FEMXR4A 讀書會、HPX-腦神經科學讀書會 / 本丸(尹歆勻)
HPX100 讀書會分享4 - HPX❤️FEMXR4A 讀書會、HPX-腦神經科學讀書會 / 本丸(尹歆勻)
悠識學院
 

More from 悠識學院 (20)

[2019使用者研究實務研討]我們與田野的距離
[2019使用者研究實務研討]我們與田野的距離[2019使用者研究實務研討]我們與田野的距離
[2019使用者研究實務研討]我們與田野的距離
 
不只是故事而已~人類學視野下的創新厚數據
不只是故事而已~人類學視野下的創新厚數據不只是故事而已~人類學視野下的創新厚數據
不只是故事而已~人類學視野下的創新厚數據
 
用研究織一張意義網
用研究織一張意義網用研究織一張意義網
用研究織一張意義網
 
從初心者到獨當一面 - User Researcher Journey Map
從初心者到獨當一面 - User Researcher Journey Map從初心者到獨當一面 - User Researcher Journey Map
從初心者到獨當一面 - User Researcher Journey Map
 
企業UX升級攻略
企業UX升級攻略企業UX升級攻略
企業UX升級攻略
 
IBM
IBMIBM
IBM
 
小小兵到國際鋼鐵人競賽
小小兵到國際鋼鐵人競賽小小兵到國際鋼鐵人競賽
小小兵到國際鋼鐵人競賽
 
HPX Talk 44:以增長為導向,發揮用戶研究的真正價值 / Stella Hsiao
HPX Talk 44:以增長為導向,發揮用戶研究的真正價值 / Stella HsiaoHPX Talk 44:以增長為導向,發揮用戶研究的真正價值 / Stella Hsiao
HPX Talk 44:以增長為導向,發揮用戶研究的真正價值 / Stella Hsiao
 
HPX Talk 40:行銷總監十年經驗談:如何以 OKR 和 WBS 幫助團隊?
HPX Talk 40:行銷總監十年經驗談:如何以 OKR 和 WBS 幫助團隊?HPX Talk 40:行銷總監十年經驗談:如何以 OKR 和 WBS 幫助團隊?
HPX Talk 40:行銷總監十年經驗談:如何以 OKR 和 WBS 幫助團隊?
 
HPX Talk 35:Booking.com 產品經理工作經驗分享
HPX Talk 35:Booking.com 產品經理工作經驗分享HPX Talk 35:Booking.com 產品經理工作經驗分享
HPX Talk 35:Booking.com 產品經理工作經驗分享
 
[MIX2018]白鯨記 – 數位潮流裡,我的媒體探索之路 - 李取中 / The Affairs 週刊編集 總編輯
[MIX2018]白鯨記 – 數位潮流裡,我的媒體探索之路 - 李取中 / The Affairs 週刊編集 總編輯[MIX2018]白鯨記 – 數位潮流裡,我的媒體探索之路 - 李取中 / The Affairs 週刊編集 總編輯
[MIX2018]白鯨記 – 數位潮流裡,我的媒體探索之路 - 李取中 / The Affairs 週刊編集 總編輯
 
[MIX2018]用戶體驗於人工智慧時代的挑戰 - 許伯圳/Microsoft SwiftKey 首席工程師
[MIX2018]用戶體驗於人工智慧時代的挑戰 - 許伯圳/Microsoft SwiftKey 首席工程師[MIX2018]用戶體驗於人工智慧時代的挑戰 - 許伯圳/Microsoft SwiftKey 首席工程師
[MIX2018]用戶體驗於人工智慧時代的挑戰 - 許伯圳/Microsoft SwiftKey 首席工程師
 
[MIX2018]從人機互動到人智互動 - 陳宜秀/國立政治大學傳播學院 副教授
[MIX2018]從人機互動到人智互動 - 陳宜秀/國立政治大學傳播學院 副教授[MIX2018]從人機互動到人智互動 - 陳宜秀/國立政治大學傳播學院 副教授
[MIX2018]從人機互動到人智互動 - 陳宜秀/國立政治大學傳播學院 副教授
 
[MIX2018]AI 時代的產品設計 - 吳卓浩/創新工場 AI 工程院 VP
[MIX2018]AI 時代的產品設計 - 吳卓浩/創新工場 AI 工程院 VP[MIX2018]AI 時代的產品設計 - 吳卓浩/創新工場 AI 工程院 VP
[MIX2018]AI 時代的產品設計 - 吳卓浩/創新工場 AI 工程院 VP
 
[MIX2018]Making Banking Joyful-DBS數位轉型之路 - 何子明 / 台灣星展銀行 董事總經理
[MIX2018]Making Banking Joyful-DBS數位轉型之路 - 何子明 / 台灣星展銀行 董事總經理[MIX2018]Making Banking Joyful-DBS數位轉型之路 - 何子明 / 台灣星展銀行 董事總經理
[MIX2018]Making Banking Joyful-DBS數位轉型之路 - 何子明 / 台灣星展銀行 董事總經理
 
[MIX2018]壞部當棄新勢考驗 - 宋捷仁/USPACE悠勢科技 CEO
[MIX2018]壞部當棄新勢考驗 - 宋捷仁/USPACE悠勢科技 CEO[MIX2018]壞部當棄新勢考驗 - 宋捷仁/USPACE悠勢科技 CEO
[MIX2018]壞部當棄新勢考驗 - 宋捷仁/USPACE悠勢科技 CEO
 
[MIX2018]設計的文化衝擊 – 當東方遇上西方 - Alfreda Yu/Isobar Experience Design Director
[MIX2018]設計的文化衝擊 – 當東方遇上西方 - Alfreda Yu/Isobar Experience Design Director[MIX2018]設計的文化衝擊 – 當東方遇上西方 - Alfreda Yu/Isobar Experience Design Director
[MIX2018]設計的文化衝擊 – 當東方遇上西方 - Alfreda Yu/Isobar Experience Design Director
 
[MIX2018]台灣體驗設計的視野與展望 - 陳啟亮/UiGathering 台灣使用者經驗設計協會 理事長
[MIX2018]台灣體驗設計的視野與展望 - 陳啟亮/UiGathering 台灣使用者經驗設計協會 理事長[MIX2018]台灣體驗設計的視野與展望 - 陳啟亮/UiGathering 台灣使用者經驗設計協會 理事長
[MIX2018]台灣體驗設計的視野與展望 - 陳啟亮/UiGathering 台灣使用者經驗設計協會 理事長
 
HPX Talk 25:UX in the Jungle – 從桌遊教具開發淺談遊戲化的設計方法
HPX Talk 25:UX in the Jungle – 從桌遊教具開發淺談遊戲化的設計方法HPX Talk 25:UX in the Jungle – 從桌遊教具開發淺談遊戲化的設計方法
HPX Talk 25:UX in the Jungle – 從桌遊教具開發淺談遊戲化的設計方法
 
HPX100 讀書會分享4 - HPX❤️FEMXR4A 讀書會、HPX-腦神經科學讀書會 / 本丸(尹歆勻)
HPX100 讀書會分享4 - HPX❤️FEMXR4A 讀書會、HPX-腦神經科學讀書會 / 本丸(尹歆勻)HPX100 讀書會分享4 - HPX❤️FEMXR4A 讀書會、HPX-腦神經科學讀書會 / 本丸(尹歆勻)
HPX100 讀書會分享4 - HPX❤️FEMXR4A 讀書會、HPX-腦神經科學讀書會 / 本丸(尹歆勻)
 

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