2016年7月22日 星期五

[網二紀錄] 行動載具時代,NGO 網站設計妙方大公開!

6/21 的網路星期二(活動頁面),邀請到電通安吉斯集團(台灣)策略資源總監,同時也身兼台灣使用者經驗設計協會監事陳啟亮(xxc)先生來分享:如果非營利機構沒有充沛的資源,網站應該怎麼面對行動時代的挑戰?如果有一些資源,應該要怎麼做才對?特別是好的設計通常需要解決:使用者的問題及組織經營的問題。

講者在網路泡沫化之前,就開始從事網路相關工作。最早是請業主不要在首頁做 flash,現在比較多專注在使用者體驗的領域。

(以下圖片若無特別註明,皆摘自講者簡報)

一、使用者體驗設計(UX Design)的規劃架構

ux1.png
雖然是 2002 年的資料,至今仍很實用。
網站架設就和蓋房子一樣,是講究邏輯的過程,從下往上慢慢蓋,也是很多人一起參與的過程。所以要先從比較抽象的核心概念來思考,譬如:組織的目的是什麼?使用者的需求?接著是溝通/傳播的策略,來作為目的和使用者之間的橋樑。

「骨幹」則牽涉到:放多少資訊?資訊的順序?譬如,大多要先解決信任問題,再提出募款的需求。

「表層」則是房子的骨架都弄好後,最後整體裝潢的風格。

二、媒體環境與行為轉變

  • 2012-2015行動大爆炸
    • 手機持有率陡峭上升:從只有 10% 的人有手機,到只有 10% 的人沒有手機
    • 2015年:用手機 vs 看電視/看報紙/上網的比率,前者已經超過後者
  • 拓荒時代的終結
    • 2015年:行動裝置成為台灣最主要的媒體,比雜誌、報紙、廣播、電視、PC網路,手機使用的時間最高
  • 手機:從通訊工具變成隨身娛樂與資訊工具(意義的改變)
    • 手機就是我的行動電腦
    • 經常把手機關掉以拒絕打擾
    • 把手機當做電腦與娛樂裝置的趨勢
    • 使用手機折價功能與廣告的偏好降低
  • 在手機裡,App 上演著不被刪掉的飢餓遊戲
    • 台灣人常用的 App 數量不多。每天使用 6 個,一週使用 9 個
    • 56.7% 的手機使用者中,自己裝的 App 低於 10 個,因此多做 App 並不會讓 user 多認識你
    • 「社交通訊」是有錢人與大公司才能玩的 App 紅海戰場
    • 日常生活的應用 App:還有一點機會
    • 養成品牌忠誠粉絲策略:有些 App 使用人數不會多,但因為會用得到,也不會被刪除
  • 數位嘗新減少:更多人只用習慣的 App 與網站,所以新的 App 要讓使用者發現的難度越來越高,也代表 user 的行為逐漸固定
  • 只用行動的人口比例增加,特別是青年與低社經族群
    • 低社經:沒有餘錢買其他裝置,同時手機打字的門檻也低
    • 手機的學習門檻低,可以帶來接觸更多數位資源的機會
    • 給電腦不如給手機

三、經營目標與策略

1. 區分經營目標、用戶目標與傳播目標
  • 需要做行動網站?
  • 需要做 RWD 網站?
  • 避免「先射箭,再畫靶」:先明確了解目標之後,才能擬定正確的策略


2-1 為什麼要做網站:經營目標

  • NPO 成立的目的不是為了做網站,而是為了:
    • 提高組織活動成效(更多捐款/連署人/服務對象)
    • 提高顧客價值(平均捐款金額/每人參與活動的次數)
    • 提高經營效益(降低流失率/提高忠誠度)


2-2 為什麼要做網站:傳播手段與目標
  • 增加知名度、擴大接觸新訪客,以提高能見度(人次、接觸率、到達率)
  • 提升品牌好感度(NPS: Net Promoter Score)
  • 增加愛好與認同者的數量(會員數、重訪率、粉絲數)
  • 增加行動數量(線上捐款及報名人數)
  • 提高轉換率(到達網站後完成線上捐款的比率)
  • 不同目標會有不同設計策略

3. 不同的策略:網站設計的重點不一樣
  • 廣度策略:讓更多人知道與參與
    • 傳統網站和行動網站各有所長,需視個案狀況
    • 行動最大的機會在社群上:既有社群平台的內容經營(FB、Line)
      • 搞清楚 user 為何不來:是否沒好好經營粉絲頁?
    • 行動第二機會是 Mobile Web SEO
    • 可以嘗試小規模測試數位廣告(Google, FB)
  • 效度策略:募款與招募報名
    • 頁面的溝通與排列順序很重要
    • 報名活動的頁面設計很重要,例如社群平台的行動頁面
    • 募款仍以傳統方法為主
    • 行動募款在行動支付普及後會漸漸增加
  • 內容與社群經營
    • 因為多數社交平台的服務都是免費的,所以可以在低預算下執行
    • 長時間持續累積

四、行動網站設計

Q1:有什麼網站設計原則?
ux2.png

來看看英國政府網站的 10 個設計原則(如上圖),這些原則都很重要。以英國政府首頁的歷年變化來看:
uk2011.png
  • 2011(上圖)
    • 遵循「簡單、清楚、快速」的原則,但許多人到首頁,不是當作網站使用的起點,而是因為找不到或找錯頁面,所以只好回到首頁。
    • 在 Google 搜尋不到,才來政府網站,所以不應該再給搜尋框。
    • 使用者需要更多的資訊線索

ux3.png
2012 的例子:多了很多分類,以主題索引的方式來呈現

2013:分類放在下方,把圖示都拿掉,因為 icon 沒有幫助

英國政府的網站是找業界的人做總監,但也試了三年才知道問題在哪裡。總結以上的 10 個原則,底下這幾個特別重要:
  1. 從使用者需求出發
  2. 不做,比做更重要
  3. 用實際的數據做決策,而不是老闆或專家
  4. 簡約,一點都不簡單
  5. 快做快改,再做再改

Q2:行動網站有什麼設計重點?

1. 行動很重要,你一定要有一個
mobile.png
圖片來自:Mobile Friendly Websites

改善方法:自我檢測 Google 行動裝置相容性測試,或者找行動設計專家諮詢。

2. 行動 vs 傳統網站 設計上的差異
  • 速度最重要(Speed)
  • 小螢幕的限制(Screen)
  • 行動優先,但不止有行動而已(Mobile first, not mobile only)

2-1 為何網站速度很重要?如何讓網站速度變快?
  • 加快網頁反應速度。40%在手機上購物的人,等不到 3 秒鐘。
  • 加快理解速度
    • 內容優先
    • 提供 user 需要的資訊
    • 改善方法:
      • 根據流量分析關鍵字,看看人們最常用哪些字?最需要的內容?
      • 測試你的頁面:5 秒內是否能讓一般人理解
      • 讓頁面只有一個重要的下一步(Call-for-Action)
  • 減少不必要的欄位與步驟
    • 行動頁面上,人們討厭輸入與點擊換頁

Q3:如何讓資訊比較清楚?
  • 畫面大小對於內容的影響:透過半個手掌大的窗口看世界
ink.png
  • 資料墨水率:把不必要的資訊抽減掉
    • 降低小螢幕介面的資料墨水率:觀察 Android 系統不同版本的電話撥號畫面
  • 資訊架構上的差異:避免過多與過深的層次
    • 行動很難導覽
    • user 不易探索螢幕內容
    • 漢堡導覽選單
      menu.png
      • 優點
        • 可應用在所有頁面
        • 以最小空間收納最多資訊
        • 臉書(2013)採用
      • 缺點
        • 不利探索(資訊都被藏起來了)
        • 每次操作都要開闔
        • 把常用功能以置底標籤呈現比較方便,如 Twitter 介面
  • 牴觸平台導覽設計規範:因為 iOS 設計規範要求左上角是回到上一頁,容易造成選單重疊的混淆
  • 三種其他選單設計模式
mobile2.png

Q4:一定要做 RWD 適應式網頁設計(Responsive Web Design)?

google.png

  • 不一定。不必要的RWD會讓網站速度變慢
  • 點心 vs 正餐:user 開不同裝置網站的預期
    • 除非內容很簡單,不要把所有內容都放到手機版本裡
    • 不同載具使用時間長度不同
    • 與設計無關,跟人的潛在動機有關
    • Ex 很多新媒體的文章也走短小篇幅
    • 複雜圖表:行動版本可以直接下載回去參考就好

五、Q&A

  1. 選單,層層向下展開:例如 Gmail 的 App。
    1. 可用在報導內容的網站。
    2. 一旦 user學會或習慣這個模式,使用上比較不會迷路
    3. Tab 的選單比較適合服務類的
  2. 行動設計不管是營利、非營利或政府的領域,沒有太多不同。但目的會很不一樣,例如:營利組織比較會談電商(20萬件以上的商品,需要快速找到商品),但非營利組織比較看作會員服務的一環,會有轉換率(辦活動)的部分
  3. 非營利組織大多關注特定族群,怎樣經營?
    1. 營利組織也會以不同品牌來做分眾,除了流通業會比較針對一大群人。
    2. 要依「目標族群的年紀」來做找適合經營的方式,網路不是唯一。
  4. 設定溝通族群:服務對象?或募款對象?
    1. 他們是二群人,找出各自溝通最好的管道是什麼
    2. 尋找與他們的接觸點,是互動的。這群人平常都在哪裡?接觸的內容?
    3. 台灣對外工作的 NPO:溝通對象可能是公民 & 政策制定者(立委、議員)。KPI 的制定為何?
      1. 電子報對象:政策制定者。計算這個族群有多少人,才知道要衝的訂閱數是多少?
      2. 對群眾的溝通,是哪一個分眾?
      3. 有時不需要改網站,就可以增加 user,例如透過「結盟」,以粉絲頁交叉互轉彼此的訊息
  5. 很多 NPO 只經營臉書,不經營網站。建議及觀察?
    1. 臉書最近的演算法改得很恐怖。增加 user 討論熱度的貼文,把第三方媒體內容的出現減少,Ex: buzzfeed 流量就被腰斬。
    2. 臉書演算法的調整,會影響訊息的擴散或同溫。訊息只在某個同溫層跑,碎片化、巴爾幹化。若想擴散訊息給陌生人,在臉書上只能下廣告,否則幾乎沒有機會。臉書訊息到達率、自然觸及率,從60%下降至2%。
    3. 花心力製作內容,讓更多不同圈圈的人都想轉;找好異質性高的樁腳,讓訊息有機會擴散到不同族群的人。
  6. 有些網站會針對不同族群分版本,行動網站需要嗎?
    1. 政府網站:不同版本(一般人民、兒童、專業人士等等)點進去其實都一樣,因為沒有以 user 為中心。
    2. 要先問:目前提供的內容,user 看得懂嗎?
    3. 內容和溝通方式不同的話,自然就會產生不同版本。
    4. 分類:最好以「目標」來區分,要解決 user 不同問題的需求。如:來捐款的、想瞭解資訊的等等。
  7. 台灣好的行動網站範例?台灣和國外設計的邏輯有何不同?
    1. 新聞:香港做得比台灣好,如:端傳媒
    2. 台灣的網路公司有培養UX的人:奇摩20人;淘寶350人。台灣只有2、3家有,如趨勢科技,成員也多是外國人,所以這方面的投資很少,好例子也很少。
    3. 臉書進台灣之前,台灣就有在做類似的新創,但都是山寨臉書。最終還是好用比較重要,不會有地域限制

0 意見:

張貼留言