More Related Content Similar to 使用者中心的網站設計原則 以英國政府入口網gov.uk 為例 / 悠識 蔡明哲
Similar to 使用者中心的網站設計原則 以英國政府入口網gov.uk 為例 / 悠識 蔡明哲 (20) 使用者中心的網站設計原則 以英國政府入口網gov.uk 為例 / 悠識 蔡明哲2. 蔡明哲 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
7. 專案失敗關鍵因素:
需求不明(需求變動)
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
15. 如何做出更好的設計決策 ?
How to get the better
Design Decision?
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
15
21. 網頁介面模式慣例 (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
25. (1) Mega Menu 巨型導覽選單
• 解決往返查找的操作問題
• 突顯位於資訊架構中的重點資訊
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
25
27. Mega Menu 規劃設計重點
• 需規劃事先好資訊架構 (導覽選單命名,分類,群組)
• 避免面積過大覆蓋整個網頁
前端技術:以 CSS + jQuery來實現
參考程式碼:
https://github.com/search?q=mega+menuref=cmdform
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
27
30. 資訊型 Mega menu
CISCO http://www.cisco.com
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
30
31. 圖像型 Mega menu (垂直展開)
美國猶他州政府 http://www.utah.gov
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
31
32. 圖像型 Mega menu (水平展開)
Amazon 網站 http://www.amazon.com
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
32
33. (2) Informative Fat Footer 資訊式大頁尾
• 或稱為 Content Footer (內容式頁尾)
• 方便輕巧的全站小地圖 (摘要版 sitemap)
• 有助於 SEO 效果 (搜尋引擎最佳化)
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
33
34. Informative Fat Footer 規劃設計重點
• 垂直排列,間隔留白,高度不超過⼀一屏(screen size)
• 內容:
– 網站摘要版地圖 (小sitemap)
– 常用或需要凸顯的 快捷連結 quicklink
– 經常搜尋的關鍵字(或增強SEO效果的關鍵字)
– 小型常用表單,例如:訂閱或聯絡
– 其他:關於我們,網站宣告
前端技術:HTML/CSS網頁排版
參考html code:
http://www.cw.com.tw/ html原始碼
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
34
35. 純文字 Fat Footer
Apple 網站 http://www.apple.com
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
35
36. 純文字 Fat Footer
美國白宮政府 網站 http://www.whitehouse.gov
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
36
38. (3) Type Ahead 提前輸入
• 或稱為 隨打即找,或自動完成 (Auto-complete)
• 隨著打字輸入,即時提供動態搜尋關鍵字提示
Keywords Recommendation
• 適用於需要精準搜尋,快速搜尋的情境
• 搜尋關鍵字的推薦,及搜尋結果排序 (Ranking) 是使
用經驗提昇的關鍵
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
38
39. Type Ahead 規劃設計重點
• 建立詞典 / 同義詞 / 反義詞典檔
• 建立推薦演算法,例如:統計常用搜尋關鍵字頻率
• 即時顯示關鍵字 (Keyword Recommendation)
前端技術:CSS, jQuery, AJAX
參考程式碼:https://github.com/devbridge/jQuery-Autocomplete
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
39
40. Instant Search 與 Type Ahead 不同
Instant Search 即時顯示搜尋結果
• 或稱為 Live search,真正的隨打即找
• 搜尋結果的即時呈現
– 隨著打字輸入,同時縮小搜尋範圍
– 隨著刪除字元,同時擴大搜尋範圍
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
40
44. (4) Long Page 長網頁
• 網頁不能過長的迷思
– 網頁太大下載太久,所以集中內容在⼀一兩個網頁畫面。
– 以為人們不喜歡捲動網頁
– 行銷人員賺取 Page View的技巧
• 實驗數據證明:人們習慣於捲動網頁,勝於操作
滑鼠去瞄準及點擊
• 設計要點:
– 清楚的區隔分界
– 回到頁面頂端的引導
前端技術:⼀一般網頁html 排版(無關程式)
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
44
47. (5) Parallax Scrolling 視差捲動
• 視差捲動(Parallax Scrolling)是指讓多層背景以不
同的速度移動,形成立體的運動效果
• 視差滾動能創造網頁與眾不同的互動體驗
• 設計重點:講故事比技巧實現更重要
• 設計技巧:
– 背景捲動速度最慢
– 中層捲動速度或方向差異
– 內容層捲動和頁面速度⼀一致
參考程式碼
https://github.com/richardshepherd/Parallax-Scrolling
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
47
50. Mega Menu 中採用 Parallax Scrolling
The official archive and publisher for the UK http://www.nationalarchives.gov.uk/
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
50
51. (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
52. (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
58. User-Centered Design (UCD)
以使用者為中心設計
• UCD是⼀一種設計觀念跟態度,用來結合多種
design research methodology 形成設
計策略。
• 以使用者為中心:強調在過程中必須真正的
“involve user”
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
58
59. 網站規劃設計流程的多種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
61. 脈絡訪查 Contextual inquiry
• 進入實際場域,進行使用者行為的觀察,並透過訪談
挖掘行為背後的動機跟影響因素
• 這是⼀一種需求分析的系統性歸納方法。
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
61
62. Heuristic Evaluation 啟發式評估
• 或稱為 專家評估建議 (Expert Review)
• 由具有經驗的介面設計人員進行介面與流程的檢視
• 依照專家本身的經驗及相關準則進行評估
6
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
62
64. 易用性測試 Usability Test
• 直接觀察使用者使用網站
系統的情況
• 從使用者的角度來評估網
站是否好用?哪些地方會
造成困擾挫折?找不到資
訊?或無法完成操作?
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
64
65. Eye Tracking 眼動分析
• 使用者如何閱讀瀏覽網頁?會看哪裡?不看哪裡?會
看多久?會如何看?
-65悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
65
66. 探索認知(Card Sorting)
• 使用者如何理解資訊與資訊之間的關係
• 資訊項目的從屬關係,相似性,產生誤解或難以理解。
• 從使用者角度對資訊項目進行命名
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
66
67. 數據分析 (Data-Driven Design)
• 藉由網站/App 分析軟體(例如 Google Analytics,
Flurry) 記錄使用者的行為軌跡,從數據中挖掘問題,
尋找設計決策方案
• 例如搜尋關鍵字統計,常用網頁統計,流程的中斷點,
異常跳離率…等
• 也可透過系統環境實測不同設計方案的效果(A/B
Test)
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
67
69. UCD是
• 是許多方法的適當組合
• 是設計決策模式/設計原則
或團隊文化
• 所有開發設計參與者都應
該負責其中一部分
• 是觀察及探索使用者的行
為脈絡
• 可以找到成功的方向
• 可以幫助創新進行驗證
• 與其他專業共創價值
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
UCD不是
• 不是一種方法
• 不是單指視覺設計/網頁設
計等的設計工作
• 不是特定研究/設計人員的
工作
• 不是問卷調查
• 不是一次就成功的保證
• 不墨守成規/沿用原有設計
• 不是取代其他專業能力
69
70. 案例分享:英國政府網站 gov.uk
• 2012年7月發佈新版網站,使用率大幅度攀升
• 位居英國網站Alexa排名 第 79 位
• 2013年4月擊敗時尚建築等類,獲得年度最佳設計獎
資料來源:Alexa, 2013/10/10
以下投影片引用 gov.uk 圖片與內容,均來自 http://digital.cabinetoffice.gov.uk/
70
#
77. 如何開始使用者需求分析?
• 從政府文件彙整出 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
78. 取捨 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
83. 精心設計的
ICON 為何放棄使用?
• 設計決策以當時所能得到的
資訊為基礎。⼀一開始只能仰
賴過去經驗,所以設計了
icon。
• 後來經過user testing發現,
問題出在網頁介面及導覽設
計,也發現 icon不會幫助使
用者更容易記憶。改成更易
辨識的字體及排版。
http://digital.cabinetoffice.gov.uk/2013/06/18/retiring-our-icons/
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
83
85. Gov.uk 的使用者測試
實施在全世界
• 包括 Kuwait, Turkey,
Australia, Thailand,
UAE, Iran, 等
• 包括當地英國人,以
及該國本地人
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
85
87. 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
89. 以 UCD 規劃設計更好用的網站
外
外
內
內
介面設計模式
設計決策流程
Type 1:經驗法則
UCD 完成式
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
Type 2:使用者研究
UCD 進行式
89
90. 從 gov.uk 我們學到什麼?
蒐集分析使用者需求
A/B Test
使用者測試
快速的迭代 Iterate
善用民間力量(連結外部網站)
https://www.gov.uk/designprinciples
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
90
91. 從 gov.uk 我們學到什麼?
• 知名的 gov.uk design principles
https://www.gov.uk/designprinciples
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
91
93. 好網站 =
正確的設計決策 + 優異的前後端技術
以使用者為中心
做出正確的設計決策(方向)
避免越走越遠越不知道方向
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd.
93