新聞專題網站，有討論UI/UX的必要嗎？
2018 vs. 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 文字
其實在正式跟 UX Lab 的朋友交流前，我並不清楚 copywriting 和 UI 文字差在哪。我也沒想過，UI 文字將會如何嚴重影響讀者理解網站的內容。
站在編輯的角度，文案必須吸引人（甚至要能騙人），但網站 UI 文字都背負某種任務，要能清楚指引或暗示讀者：你跟這個按鈕／功能互動之後，你會獲得什麼反饋。
舉例來說，我最開始提到，我覺得 2018 年的 Landing Page「兩邊入口都有『地圖』，但哪個地圖是哪個地圖」。
這疑惑的根源，源自於編輯用字與 UI 文字的不同。
站在編輯角度，我會說：「嗯？這很難懂嗎？就是全台跟縣市的差別啊！」但站在一般使用者的角度，我初來乍到、沉浸程度還很低時，會感到困惑：這個地圖跟那個地圖，到底會提供我什麼不一樣的價值。
換句話說，我的潛在焦慮可能是：我不知道這個網頁正在要求我做什麼選擇；我也不清楚，在點擊按鈕後，它給我的反饋能否快速滿足我的需求。
自動梗圖分享器 vs. 分享選舉結果
這樣的錯誤，我也滿常犯的。以機器人開票頁來說，當初我規劃 call to action 的按鈕文字為「自動梗圖分享器」。
UX Lab 表示：什麼梗圖？梗圖是啥？看不懂啦！！！
我森七七回應：管你懂不懂，你不覺得就會很想點嗎？
盲測了一些路人，他們真的沒有很想點。
咩噗。
變心地圖 vs. 翻盤地圖
另一個未竟之戰，是來自「翻盤地圖」這個詞的討論。最早最早，我給這個地圖取名為「變心地圖」，遭來一陣撻伐。
後來折衷用了「翻盤」，依然無法讓 UX Lab 的朋友滿意。
不是啊，到底哪裡難懂？
秉持科學辦案精神，從數據來看，發現使用者大量點按右側 tab 切換地圖，有趣的是，翻盤地圖並未獲得同等的點擊數。
要怎麼解讀這項數據？
- 如果單一按鈕點擊數是進站人數的兩倍還好理解（使用者可能在看完一次通盤的熱鬧後，又回頭探索更深的資訊），但三、四倍代表的可能是：使用者迷路，或是「切換三年結果」帶給他們很大的滿足。
- 翻盤地圖沒有相對應的點擊數，可能原因是：一，該地圖的呈現無法讓人一眼看出什麼特別的事；二，「翻盤地圖」這個詞可能有點問題。
綜合以上，我承認「翻盤地圖」這個詞彙無法與地圖視覺化產生連結。後來在某次討論會上，也有人提出在地圖上加翻轉的動態，讓人理解這層含義。
嗯，是個解方。但會是使用者期待的嗎？這個不太一定。
後來在製作罷韓開票時，我們採用另一種做法去呈現不同選舉的結果變化。
這一 part 說了這麼多，只是想跟所有剛踏入數位製作的小綿羊們說，很多問題不要用「文字」蠻幹啊，讓你的設計師、工程師幫幫你，很多問題的解法可能在 UI 呀。
另外就是，製作經驗分享往往跟美妝保養版分享一樣，我的蜜糖可能是你的毒藥。每家媒體養出來的閱聽眾不同，他們與頁面互動的偏好與習慣可能存在很大的歧異。
好了，回到最初的問題：新聞專題網站，有討論UI/UX的必要嗎？
你們覺得呢？
最後附上熱騰騰、新鮮出爐的 SOPA 評審講評。（微笑）
還沒玩過我們家的網站嗎？連結在這裡：https://web.cw.com.tw/2020-taiwan-presidential-election/index.html
