新聞專題網站，有討論UI/UX的必要嗎？

2018 vs. 2020 選舉網站改造練習

Sylvia Lee

Published in

《天下》數位敘事團隊

9 min readAug 27, 2020

終於啊。

隨著韓國瑜、陳其邁錯身而過，選民有一搭沒一搭聊著汕頭火鍋和滷肉飯配鵝蛋，始於 2018 年九合一大選的選舉氛圍，總算在 2020 年 8 月高雄市長補選結果出爐後，正式宣告（各種歹戲拖棚的）台灣大選年告一段落。

2018 年九合一大選，是我職涯轉換（從紙本編輯轉數位製作）後第一次遇到的選舉嘉年華。當時除了我任職的中央社媒體實驗室之外，還有天下雜誌、Readr、關鍵評論網、蘋果日報、聯合報、ETtoday 等對首長選舉及公投做即時開票或數據分析。

當時在 Hacks/Hackers Taipei 的小聚上，大家是這麼稱呼那一年——「台灣資料新聞元年」。後來還有公視 P# 加入，媒體製作即時開票網頁的潮流，在 6 月罷韓開票達到頂峰。

我自己參與了幾次選舉網站規劃：

中央社媒體實驗室：2018年九合一選舉 & 公投（解析）
天下雜誌：2020年總統大選（開票）
天下雜誌：第十屆立法委員選舉（和iKala合作數據，寫了個民間版選舉公報）
天下雜誌：高雄市長韓國瑜罷免案（開票）
天下雜誌：高雄市長補選（開票）

綜合以上，一共合作了 5 位工程師（前端、後端、工程 PM）、4 位設計（前端設計、UI 設計、網頁設計）及兩位數據記者。

神祕的UX Lab

還有最重要的，幾次下來幫忙最多的 UI/UX 顧問團「UX Lab」。

UX Lab 是由公司內部一群長期關注 UI/UX 的同事聚集而成，他們背景多元，有人專精於資訊架構，也有 PM、設計師、企劃參與其中。

因為是非官方的同好組織，就算是在公司內部也少為人知，直到 2020 總統大選時，我在他們的幫助下一步步改造選舉網站，竟然刷新天下雜誌的流量紀錄，才慢慢廣為人知。（到處在各大分享會上讚爆他們的 me）

這次想分享的，就是當時的過程與討論。

所以，2018 年怎麼了？

動手前，必須先定義問題。因為時間不多，我簡單訪問當時同事（未參與製作）與利害關係人（曾參與製作的人），得到以下回饋：

Landing Page 兩個入口不知道會去哪（UI 文字不夠直覺清晰）
地圖不會用／地圖很難用（影片教學無法有效解決使用者的疑惑）
為什麼地圖不能兩指縮放（啊，這就是那個技術侷限嘛～）
為什麼不能直接拖曳（drag）地圖（跟樓上完全不同習慣的使用者）
手機就是很難用！（⋯⋯）

我自己的感受是：

Landing Page 兩邊入口都有「地圖」：但哪個地圖是哪個地圖？什麼是選民屬性？那跟政黨得票有什麼不一樣？什麼意思RRRR…
地圖那個教學影片好討厭，膝反射按叉叉
地圖上那個「回到上層」是什麼意思？
圖例好複雜，有必要放這麼多數字嗎？

編按：天下2018年推出九合一大選地圖時，我尚未到職，所以可以冷靜地⋯⋯

綜合以上意見，UX Lab 成員和我「辯論」數十個小時後，歸納出以下改動：

首先，讓我們殺掉地圖教學影片lightbox

改用「操作制約」的方式，訓練讀者使用地圖。

當時這項改動說服大家很久，畢竟滿多人會擔心「第一眼看不到美美地圖」，在視覺和體驗上不夠震撼人心。但因為 PM 我本人真的太恨任何不直覺的東西，所以很堅持修改掉這項流程。

第二，大砍說明功能

2018 年地圖的右側欄放置了很多 icon，每個 icon 的任務大部份是叫出更多使用說明。這些 icon 有一個共通的問題：無法快速辨識。每個人解讀 icon 代表的意涵都各不相同。

一開始要優化這一塊時，我的思考邏輯也是「頭痛醫頭，腳痛醫腳」——如果 icon 很難懂，那我們找一些更直覺的 icon 啊！

但問題就是，除了通用的漢堡選單三條槓、關閉的叉叉、搜尋的放大鏡，到底還有多少世界通用、約定俗成的符號？

答案也許很多，但都不切合這次的需求。

UX Lab 提醒我，優化介面設計，就不需要加上說明文字來輔助讀者使用。

比如說，原本地圖有個「返回上層」的按鈕，它的意思是「返回上一個層級的地圖，像是村里回到鄉鎮市區」，其實我們做個「back」的箭號放在畫面左上角，是不是就稍微直覺了一點？

ok，我們殺掉一個 icon 了。

第三，殺掉（過多的）分享按鈕

我知道，隨便殺掉分享按鈕是會引起編輯室戰爭的。

不過，我不是隨便亂殺的。我習慣去追蹤介面上所有按鈕的使用率，發現沒有太多讀者會使用網站本身的社群分享串接去發文。由於數據看起來比我本人說法可靠很多，人們沒有掙扎太久。

好的，可喜可賀，又殺了一個 icon。

但我還是有保留最低限度的一組分享按鈕，只放在選單中。

第四，簡化圖例、整合所有說明

接下來我們還做了以下調整：

直接把各屆大選全稱拉出來，放在介面右上角隨著 tab 切換改變，不藏在使用說明裡。
政黨色直接跟圖例／候選人整合，讓人能一眼辨識。
簡化圖例數值。
合併icon：把圖例說明（2018年用「％」表示）與使用說明（2018年用「i」表示）等整合在同一個lightbox。
承上，殺掉「％」，統一用「i」這個icon。

第五，殺掉過多出口，集中火力導流

這個改動其實是最有爭議的。因為我一口氣殺掉頁面上兩個導去記者文章的出口。當時候，這是被認為最大逆不道的改動。

會這麼做是有原因的。

我希望收斂頁面上任何會分散讀者注意力的事情，讓他們專注於內容。
引導讀者走完我理想中的路徑，完完整整體驗整個選舉網站想帶給他們的新聞策展。（我有一張超詳細的 flow chart）

我可以理解，每次做網頁的時候，總會很想要每個頁面都可以有很多出口導去其他頁面，以為這樣就可以提供給讀者很多資訊服務。

但事實上並非如此，你給他愈多條路徑走，他就愈迷惑。

簡化 flow 還能降低漏斗效應的發生——一切都是為了讓機器人開票頁面大爆發。

編按：這裡的各種砍殺，都不包含全站選單裡的連結。

第六，把空間還給新聞內容

砍掉了上述林林總總的功能後，介面上的空間就騰出來了。

這時候，讓我們開心地把 tab 按鈕放大！

並且因應總統大選的報導需要，我們增加了 tooltips 資訊的複雜度。

大量簡化UI，前端才答應在上面蓋比較大的tooltips（主要是擔心感應區打架）。

最後，我想談談 UI 文字

其實在正式跟 UX Lab 的朋友交流前，我並不清楚 copywriting 和 UI 文字差在哪。我也沒想過，UI 文字將會如何嚴重影響讀者理解網站的內容。

站在編輯的角度，文案必須吸引人（甚至要能騙人），但網站 UI 文字都背負某種任務，要能清楚指引或暗示讀者：你跟這個按鈕／功能互動之後，你會獲得什麼反饋。

舉例來說，我最開始提到，我覺得 2018 年的 Landing Page「兩邊入口都有『地圖』，但哪個地圖是哪個地圖」。

這疑惑的根源，源自於編輯用字與 UI 文字的不同。

站在編輯角度，我會說：「嗯？這很難懂嗎？就是全台跟縣市的差別啊！」但站在一般使用者的角度，我初來乍到、沉浸程度還很低時，會感到困惑：這個地圖跟那個地圖，到底會提供我什麼不一樣的價值。

換句話說，我的潛在焦慮可能是：我不知道這個網頁正在要求我做什麼選擇；我也不清楚，在點擊按鈕後，它給我的反饋能否快速滿足我的需求。

自動梗圖分享器 vs. 分享選舉結果

這樣的錯誤，我也滿常犯的。以機器人開票頁來說，當初我規劃 call to action 的按鈕文字為「自動梗圖分享器」。

UX Lab 表示：什麼梗圖？梗圖是啥？看不懂啦！！！
我森七七回應：管你懂不懂，你不覺得就會很想點嗎？

盲測了一些路人，他們真的沒有很想點。

咩噗。

變心地圖 vs. 翻盤地圖

另一個未竟之戰，是來自「翻盤地圖」這個詞的討論。最早最早，我給這個地圖取名為「變心地圖」，遭來一陣撻伐。

後來折衷用了「翻盤」，依然無法讓 UX Lab 的朋友滿意。

不是啊，到底哪裡難懂？

秉持科學辦案精神，從數據來看，發現使用者大量點按右側 tab 切換地圖，有趣的是，翻盤地圖並未獲得同等的點擊數。

要怎麼解讀這項數據？

如果單一按鈕點擊數是進站人數的兩倍還好理解（使用者可能在看完一次通盤的熱鬧後，又回頭探索更深的資訊），但三、四倍代表的可能是：使用者迷路，或是「切換三年結果」帶給他們很大的滿足。
翻盤地圖沒有相對應的點擊數，可能原因是：一，該地圖的呈現無法讓人一眼看出什麼特別的事；二，「翻盤地圖」這個詞可能有點問題。

綜合以上，我承認「翻盤地圖」這個詞彙無法與地圖視覺化產生連結。後來在某次討論會上，也有人提出在地圖上加翻轉的動態，讓人理解這層含義。

嗯，是個解方。但會是使用者期待的嗎？這個不太一定。

後來在製作罷韓開票時，我們採用另一種做法去呈現不同選舉的結果變化。