陳啟亮：行動載具時代的NGO網站設計
•
1 j'aime•364 vues
行動載具急速發展的環境下，非營利組織的網站應該做什麼調整以面對使用者的習慣改變？有限的資源，如何分配、規劃比較好？好的設計需要同時解決：使用者及組織經營的問題。本次分享將包括以下內容： - 行動時代網頁使用者的特色 - 非營利機構的網站經營策略 - 行動網站設計原則 - 釐清行動網站設計的一些流行與誤用
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à 陳啟亮：行動載具時代的NGO網站設計
Similaire à 陳啟亮：行動載具時代的NGO網站設計 (20)
Plus de 開拓文教基金會
Plus de 開拓文教基金會 (20)
陳啟亮：行動載具時代的NGO網站設計
- 1. 行動載具時代的 NGO網站設計 陳啟亮 Charles Chen 台灣使用者經驗設計協會 常務監事 xxc@uigathering.org Mar 21, 2017 電通安吉斯集團 策略資源協理 charles.chen@dentsuaegis.com
- 2. Library & Information Science 圖書館資訊科學 碩士博士 資訊行為 資訊社會學 資訊設計與傳播研究 設計社會學 Fine Art 學士 多媒體藝術 複合媒體藝術 網路內容媒體 1997-2000 資訊系統整合 2000-2004
- 4. 台灣使用者經驗設計協會 數位服務力大調查 2011, 2012, 2013 台灣使用者經驗高峰會 2011, 2012 專家部落格 2012, 2013 通訊產業發展推動小組 2012 智慧家庭應用使用者互動模式交流 會議 2012
- 5. 電通安吉斯媒體 資訊架構師 使用者經驗設計部門 策略資源部 協理 媒體、使用者經驗研究、設計、媒體行銷策略
- 9. 好的設計是什麼? Ｗhat is a Good Design?
- 10. Helen Adler 設計師 Deborah Adler 的祖母， 因為拿錯祖父Herman Adler 的藥而緊急送醫
- 13. Target ClearRx Prescription System 標靶百貨 藥方系統
- 14. 2005, BusinessWeek - Best Product Design 2005, TIME magazine - Best Inventions 2005, MoMA - Safe Exhibit 2006, Cooper-Hewitt - National Design Triennial 2010, IDSA – Design of the Decade
- 15. Deborah Adler Designer Deborah Adler Design 好設計 不是外表好看 讓人活得更容易 更安全 設計應集中在以人為導向的產品創新，以及生活方 式的解決方案，這是設計師最擅長也有資格承擔的 責任。負責任的品牌應該瞭解人們與商業產品的互 動。不只在包裝上，還包括公共空間、商業空間及 戶外的資訊。
- 18. 使用者體驗設計 的規劃架構 The elements of UX Design 網站使用者經驗層次 視覺設計: 文字的視覺編排，藝術風格，頁面 圖形元素繪製，圖示設計，導覽元件規劃製作 介面與導覽設計: 規劃與設計介面元素，以助 於使用者在網站資訊架構中點選移動與瀏覽 資訊設計: 規劃與設計資訊訊息的呈現與視覺 化，以助於使用者理解 互動設計與資訊架構: 設計與規劃資訊空間結 構，與介面互動方式，以助於使用者取用與利 用內容資訊 內容需求與功能規格: 定義網站所需的內容與 功能要件，以符合使用者需求與企業目的 使用者需求: 透過人類學/社會學/行銷/心理學 等使用者研究，找出使用者需求此一外在於網 站的目的性因素。 網站目的: 企業營運上、創意上、或其他方面 的內部性網站目的。 具體 抽象 概念 完成 策略 Strategy 範圍 Scope 架構 Structure 骨幹 Skeleton 表層 Surface Origin: Jesse James Garret. (2002). The elements of user experience. Avaliable at http://jjg.net/elements
- 20. 媒體環境與行為轉變 User’s Environment & Behavior Change
- 21. 2012-2015 行動大爆炸 智慧行動設備，從一個新玩意兒，變成主流媒體 0% 20% 40% 60% 80% 100% 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015(p) 行動電話擁用率 昨日收看電視 上週看過家外廣告 昨日曾上網 智慧型手機擁用率 上月閱讀雜誌 昨日閱讀報紙 Source: Nielsen Media Index Target: Age 12-60 (2000-2005), Age 12-65 (since 2006) 2012: 有智慧手機的人，比昨日看過報紙的人多 2016: 有智慧手機的人，比昨天電腦上網的人多
- 22. 2012-2015 行動大爆炸 智慧行動設備，從一個新玩意兒，變成主流媒體 2012 2015 2012 只有四分之一的人有智慧手機 2015 只有四分之一的人沒有智慧手機
- 25. 0 0 0 0 378 562 688 0 0 0 0 591 562 521 562 539 519 514 436 412 394 278 306 283 247 268 270 284 0 500 1,000 1,500 2,000 2,500 2009年 2010年 2011年 2012年 2013年 2014年 2015年 分鐘/週 行動網路 PC網路 網路 電視 廣播 報紙 雜誌 2012-2015 行動大爆炸 從消費時間來看，行動裝置已經是台灣最主要的媒體 Source: Nielsen Media Index Target: Age 12-60 (2000-2005), Age 12-65 (since 2006)
- 26. 落差：廣告媒體市場規模 vs 消費者時間 7% 9% 34% 19% 19% 12% 21% 5% 40% 23% 4% 7% 0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 30.00% 35.00% 40.00% 45.00% Paper Radio TV Internet Mobile OOH % of Time spent in media vs. % AD spending, Taiwan 2014 Time Spent % Ad Spending % Time spent gap $9.2 billions Ad spending $2.3 billions Data sources: Time spent: Nielsen Media Index; Dentsu Aegis CCS (OOH) Ad spending: Nielsen AIS 2014, 新興的行動媒體創造出 了大量的時間, 但廣告市場還未 反映, 造成市場缺口
- 27. 6% 8% 30% 15% 25% 15% 14% 4% 38% 12% 25% 6% 0.00% 5.00% 10.00% 15.00% 20.00% 25.00% 30.00% 35.00% 40.00% 45.00% Paper Radio TV Internet Mobile OOH % of Time spent in media vs. % AD spending, Taiwan 2016(f) Time Spent % Ad Spending % 落差：廣告媒體市場規模 vs 消費者時間 Ad spending (f) $15.1 billion Data sources: Time spent: Nielsen Media Index; Dentsu Aegis CCS (OOH) Ad spending: Nielsen AIS 2016, 行動廣告回填時間缺口, 市場依然還在重分配的盤整
- 28. 只用行動的人口比例增加，而且成為生存不可或缺之物 Source: comScore MMX Multi-Platform (創市際ARO); Ofcom (2016) Adults’ media use and attitudes 不使用電腦上網 會使用電腦以外的裝置上網 用電腦上網 用行動上網 45-54歲 (不用電腦寫作業 世代)，才是最依賴行動裝 置上網的一群人 低社經階層(DE)族群，上網 的手段較少，且更傾向不透 過電腦上網 敘利亞難民上歐陸第一件事: 買SIM 卡、為手機充電https://dq.yam.com/post.php?id=4549
- 34. 區分機構目標、用戶目標與傳播目標 • Q 需要做行動網站嗎? • Q 需要做RWD網站嗎? • Q 請問如何在不花錢，持續增加流量? • Q 在有限的資源下 如何拓展知名度? 避免「先射箭，再畫靶」 先明確了解目標之後，才能擬定正確的策略
- 36. 經營目標: 為什麼要做網站 NPO 成立的目的不是為了做網站, 背後的目的 • 提高組織活動成效 (更多捐款、更多的連署人、更多的服務對象) • 提高顧客價值 (平均捐款金額、每人參與活動次數) • 提高經營效益 (降低流失率 / 提高忠誠度)
- 37. 傳播目標: 不同層次的傳播成效指標 品牌接觸 (到達率) Brand Contact (Reach) 品牌評估 (關注度) Brand Appraisal (Engagement) 品牌記憶度 Brand Recall 品牌行動 Brand Action 品牌愛好 Brand Advocacy 收視率、曝光數、到達率 點閱數、停留時間、跳出率 品牌認知、產品認知 下載數、交易數、訂單數 心占率、回訪率、NPS 廣告傳播成效評估，通常會評估的指標
- 38. 為什麼要做網站: 傳播手段與目標 • 增加知名度、擴大接觸新訪客，以提高能見度 (人次、接觸率、到達率) • 提高轉換率 (到達網站後完成線上捐款的比率) • 增加行動數量 (線上捐款人數、線上報名人數) • 增加愛好與認同者的數量 (會員數、重訪率、粉絲數) • 提升品牌好感度 (NPS: Net Promoter Score) 不同的目標 會有不同的設計策略
- 39. 為什麼要來網站: 用戶目標 • 用戶的目標不會與組織的經營目標一樣 • 試著從幾個具體的典型用戶著手 • 了解不同類型用戶的規模與數量 • 了解不同類型用戶的需求、習慣、偏好與限制
- 40. 不同的策略: 網站設計的重點不一樣 • 廣度策略: 讓更多人知道與參與 • 行動與傳統網站各有所長，需要看個案現況 • 行動最大的機會在社群上: 既有社群平台內容經營 (Facebook, Line) • 行動第二機會是 Mobile Web SEO • 可以試著小規模測試數位廣告(Google Facebook) • 效度策略: 募款與招募報名 • 報名活動: 社群平台的行動頁面 • 募款仍以傳統方法為主 • 行動募款在行動支付普及後會漸漸增加 • 內容與社群經營 • 內容與社群經營，可以在低預算下執行 • 長時間持續累積
- 42. Q 有什麼網站設計原則?
- 43. 先假設，大家已經知道好的網站設計 UK 政府網站的設計原則 1. 從使用者需求出發 Start with needs 2. 不做，比做更重要 Do less 3. 用實際的數據做決策，而不是老闆或專家 Design with data 4. 簡約，一點都不簡單 Do the hard work to make it simple 5. 快做快改，再做再改 Iterate. Then iterate again. 6. 為理解困難的人設計This is for everyone 7. 了解使用網站的脈絡Understand context 8. 打造數位服務，而非網站Build digital services, not websites 9. 一致化，而非標準化Be consistent, not uniform 10.開放參與，而非閉門造車Make things open: it makes things better
- 44. UK GOV 首頁的例子: 2011 許多人到首頁上，不是當作網站使用的起點， 而是因為找不到或找錯頁面，所以只好回到首頁 使用者需要更多的資訊線索
- 45. UK GOV 首頁的例子: 2012
- 46. UK GOV 首頁的例子: 2013 1. 從使用者需求出發 Start with needs 2. 不做，比做更重要 Do less 3. 用實際的數據做決策，而不是老闆或專家 Design with data 4. 簡約，一點都不簡單 Do the hard work to make it simple 5. 快做快改，再做再改 Iterate. Then iterate again.
- 47. Q 行動網站有什麼設計重點?
- 48. 1. 行動很重要，你一定要有一個 改善方法 • 自我檢測 Google Mobile-Friendly Test https://www.google.com/webmasters/tools/mobile-friendly • 請教行動設計專家諮詢
- 49. 2. 行動網站 vs 傳統電腦網站 設計上的差異 2.1 速度最重要 (Speed) 2.2 小螢幕的限制 (Screen) 2.3 行動優先，但不只有行動而已 (Mobile first, not mobile only)
- 51. 速度: 加快網頁反應速度 在手機上購物 的人, 40% 等 不到3秒鐘 改善方法 • 自我檢測 Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insigh ts/ • 請教行動設計專家諮詢
- 52. 速度: 加快理解速度 改善方法 • 根據流量分析裡面的關鍵字， 看看人們來網站通常用了哪些 字? 最需要的內容是什麼? • 測試你的頁面: 5秒鐘內是否能 讓一般人理解 • 讓頁面只有一個重要的下一步 (Call-for-Action)
- 53. 速度: 減少不必要的欄位與步驟 (2014-Jan) 新版Macy‘s 只剩下兩個按鈕: 結帳(checkout)與訪客結帳(checkout as a guest)。 刪除了快速結帳(express checkout)。
- 54. Q 如何讓資訊比較清楚?
- 56. 資料墨水率 範例 資料墨水率 低 資料墨水率 高 在此例中，設計師刪除了： 圖表的邊框、不必要的格線、背景顏色。 讓使用者更容易注意到數據的變化。 Reference http://www.infovis-wiki.net/index.php/Data-Ink_Ratio Data-Ink Ratio Sample
- 57. 降低小螢幕介面的資料墨水率
- 58. 資訊架構上的差異: 避免過多與過深的層次 PC Website Mobile Website 由於行動螢幕小： 使用者不容易探索螢幕內容 畫面也缺乏導覽線索
- 59. 漢堡導覽選單 優點 • 可以應用在所有頁面 • 以最小空間收納最多資訊 • Facebook 也這樣作(2013)
- 60. 漢堡導覽選單的問題: 不利探索 LOW DISCOVERABILITY 即便使用者知道什麼是漢堡 式選單，也知道位置在哪 裡，遇到操作問題的時候， 也未必會到選單裡面找其他 選項； • 沒看到，就想不到 • 藏起來的就是不重要的 • 會先找走過得地方
- 61. 漢堡包導覽選單的問題: 麻煩 LESS EFFICIENT • 將常用功能放在側開選單， 每次操作都需要開開關關 • 將常用功能放在置底頁籤， 比較起來操作較簡捷有效率 Reference https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
- 62. 漢堡包導覽選單的問題: 麻煩 LESS EFFICIENT • 將常用功能放在側開選單， 每次操作都需要開開關關 • 將常用功能放在置底頁籤， 比較起來操作較簡捷有效率 Reference https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/
- 64. 三種其他選單設計模式 1. Hub 適用: 數位服務類，每一功能各自獨立 2. 層層向下展開 適用: 內容類 3. Tab 適用: 數位服務類，使用者需要隨時切換不同功能 Source: http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture/
- 65. Q 一定要做RWD嗎?
- 66. RWD: 適應式網頁設計 responsive web design Source: http://www.artversion.com/responsive-web-design/the-web-design-of-tomorrow/
- 70. 行動載具時代的 NGO網站設計 陳啟亮 Charles Chen 電通安吉斯集團 策略資源總監 charles.chen@dentsuaegis.com Ｍar 21, 2017 台灣使用者經驗設計協會 常務監事 xxc@uigathering.org