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

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

Sylvia Lee
《天下》數位敘事團隊
9 min readAug 27, 2020

--

Photo by Morning Brew on Unsplash

終於啊。

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

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

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

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

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

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

神祕的UX Lab

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

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

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

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

2018年九合一大選的介面

所以,2018 年怎麼了?

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

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

我自己的感受是:

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

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

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

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

深灰色是舊流程,紅色為新流程。

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

UI修改前後比較:左為before,右為after。

第二,大砍說明功能

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

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

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

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

2018 vs. 2020

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

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

ok,我們殺掉一個 icon 了。

第三,殺掉(過多的)分享按鈕

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

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

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

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

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

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

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

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

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

會這麼做是有原因的。

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

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

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

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

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

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

這時候,讓我們開心地把 tab 按鈕放大!

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

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

最後,我想談談 UI 文字

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

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

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

2018 年的介面

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

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

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

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

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

UX Lab 表示:什麼梗圖?梗圖是啥?看不懂啦!!!
我森七七回應:管你懂不懂,你不覺得就會很想點嗎?

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

咩噗。

變心地圖 vs. 翻盤地圖

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

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

不是啊,到底哪裡難懂?

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

要怎麼解讀這項數據?

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

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

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

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

這一 part 說了這麼多,只是想跟所有剛踏入數位製作的小綿羊們說,很多問題不要用「文字」蠻幹啊,讓你的設計師、工程師幫幫你,很多問題的解法可能在 UI 呀。

另外就是,製作經驗分享往往跟美妝保養版分享一樣,我的蜜糖可能是你的毒藥。每家媒體養出來的閱聽眾不同,他們與頁面互動的偏好與習慣可能存在很大的歧異。

好了,回到最初的問題:新聞專題網站,有討論UI/UX的必要嗎?

你們覺得呢?

最後附上熱騰騰、新鮮出爐的 SOPA 評審講評。(微笑)

還沒玩過我們家的網站嗎?連結在這裡:https://web.cw.com.tw/2020-taiwan-presidential-election/index.html

--

--

Sylvia Lee
《天下》數位敘事團隊

失語練習,沒有要認真的意思。日常興趣,煲劇、追星、玩狗,偶爾還有旅行。