《報導者》閱讀工具列開發解密：數位產品設計背後，我們在思考什麼？
上週，《報導者》產品團隊針對網站設計做了重要的改版：在手機版網頁增加了固定置底的閱讀工具列，讓讀者能夠更方便地調整文字大小、分享文章、加入書籤，甚至閱讀更多系列文章。每一次的網站改版，背後其實蘊含了產品團隊的許多巧思，本文將《報導者》產品經理與設計師的不藏私分享整理為兩大段落，邀請你一起來窺探《報導者》的產品設計思路！
口述、編輯／賈凡逸（《報導者》產品經理）、林星妤（《報導者》品牌設計師）
文字整理／陳星穎（《報導者》品牌／產品行銷專員）
Part 1 產品經理：淺談數位產品設計
在分享閱讀工具列的開發過程之前，我想先談談數位產品設計怎麼影響使用者的行為，以下會舉幾個案例，也會聊聊新聞媒體怎麼產生相關的運用。
案例一：Duolingo打造成就系統鼓勵回訪
Duolingo 是一款主打多國語言學習的 App，活躍用戶超過3億人。為了鼓勵使用者回訪，他們設計了連勝的機制，不斷提醒你已經連續幾天發生學習的行為，此外也設計了成就系統，鼓勵使用者完成多樣化的挑戰及成就目標。
這些成就目標都是可視化的，這樣的成就系統會讓整個線上學習的體驗變得更有趣，使用者也會因為這些成就目標而有不同的探索空間，例如：他會為了達成目標去尋找 App 裡更多的功能和內容，或者更常回訪。回訪為什麼那麼重要？因為回訪的頻率代表使用者對於產品／服務的忠誠度，而忠誠的使用者對品牌而言是最有價值的；愈忠誠的使用者，就愈有可能容易發生品牌期待使用者發生的行為，例如：瀏覽更多內容、付費使用等等。
案例二：紐約時報用一個按鈕創造新的讀者分享行為
不只大家一般所認知的網路資訊產業，其實媒體產業也有很多透過數位產品設計影響使用者行為的具體案例。以《紐約時報》（New York Times）為例，他們在去年（2021）年底推了「贈送文章」的功能：每位《紐約時報》的訂閱者，每個月都有 10 篇文章的贈送額度，讓被贈送的對象可以免費閱讀該篇文章全文，同時不影響被贈送對象既有的免費閱讀額度（在《紐約時報》的商業模式下，讀者必須註冊帳號才能開始閱讀文章，而在未付費之前，每月僅有 3 篇文章閱讀額度）。
當代的新聞媒體都面臨社群演算法難以掌握的困境，極力盡可能減少對社群媒體的依賴，《紐約時報》也不例外。新的「贈送文章」功能，便是希望透過產品設計提升分享的次數，藉此吸引更多新讀者。
根據《紐約時報》的研究，相比新聞官方帳號所發布的內容，人們更傾向和自己認識的人所轉發的內容產生互動 — — 對大眾而言，如果轉發文章的來源是自己所熟悉、甚至能夠信任的對象，他會更有意願瀏覽轉發的文章。
「贈送文章」這個功能雖然看起來很簡單，但其實背後牽涉複雜的邏輯，而且也會涉及《紐約時報》本身的訂閱制商業模式，因此這項產品功能的設計的時程其實拉得很長。2020年開始，《紐約時報》的產品團隊就開始透過最小可行性產品（Minimum Viable Product，MVP）做初步的產品探索，當時他們的假設是：如果開發贈送文章的功能，站內文章的分享次數就會增加。為了驗證假設，他們在網站上製作了 UI 相對陽春的贈送文章功能，並且獲得了正向的實驗結果。
他們發現：站內文章的分享次數以及推薦連結（referral）佔全站流量來源的比例顯著提升，而且即使有了贈送文章的功能，讀者還是會使用既有的文章分享功能；代表整體分享次數都在往上漲，贈送文章的功能並沒有排擠到原本的文章分享，而是創造了新的讀者分享行為。
案例三：Matters新手引導任務增加使用者活躍度
另一個媒體產業的例子則是由前《端傳媒》總編輯張潔平於 2018 年創辦的去中心化內容創作與公共討論平台 Matters。Matters 很強調「社群」的概念，希望站內的創作者與讀者彼此之間有緊密的互動，因此在使用者註冊成為會員時，網站設置了 5 項使用者引導（onboarding）任務：
- 設置 Liker ID
- 追蹤 5 位喜歡的創作者
- 追蹤 5 個感興趣的標籤
- 用第一篇創作跟社群問好
- 獲得 2 個拍手數且閱讀 10 篇以上文章數量，以解鎖評論權限參與更多互動
藉由帶有遊戲化色彩的任務設計，能夠有效引導使用者進入 Matters 社群、探索站內的內容，提升使用者轉為「活躍使用者」的可能性，某種程度上也能初步確保評論的基礎品質。
案例四：報導者Header改版一個月，瀏覽成長超過百分百
《報導者》也嘗試過透過產品設計改變讀者在網站當中的行為。去年上線的 header 2.0，目標是希望讓讀者可以在主網站裡面更自在地移動，並且瀏覽更多頁面，因此，當時在產品開發所設定的重要觀測指標之一是「單次工作階段的頁數（白話文：讀者進入網站後，一次會造訪多少頁面）」。
header 2.0 上線一個月後，我們重新檢視數據，發現單次工作階段的瀏覽頁數的確明顯提升了；另外，我們也進一步檢視文章議題分類頁的網頁瀏覽量，發現所有分類頁在行動裝置上的網頁瀏覽量都有超過 100%的成長。由此可知，去年底看起來很微小的改版，其實很直接地影響到網站讀者在站內的流動。
談完數位產品設計的案例，接著要分享的是《報導者》產品團隊在 header 2.0 之後的開發重點。對我們來說，header 2.0 其實是過渡性的第一步，我們接下來想做的是「資訊架構改版」，而第一階段的重點項目就是「閱讀工具列」。
為什麼閱讀工具列那麼重要？原本的設計發生了什麼問題？
所謂閱讀工具列，指的就是過去在文章最上方和最底部的區塊，裡面有很多的功能按鈕。
為什麼閱讀工具列的設計那麼重要呢？透過《報導者》網站的 Google Analytics 後台，我們可以得知文章頁是絕大多數讀者進入網站的第一個接觸點；不論是透過自然搜尋，或是透過 Facebook、Instagram 等社群媒體造訪網頁，文章本身都是吸引讀者造訪網站的核心，所以在《報導者》網站的使用者旅程裡，文章頁就是絕大部分讀者進站接觸的第一頁。
然而，我們也發現讀者進入網站後，有95%以上的人不會再繼續造訪下一個頁面，這可能是因為人們的時間有限、注意力難以集中，而《報導者》的文章內容又相當長，所以不容易在沒有引導的情況下繼續跟網站產生互動；因此，文章頁作為第一個接觸點，其實扮演著關鍵的角色，足以決定讀者在《報導者》網站會不會瀏覽其他頁面，或者是否願意跟我們的品牌產生更緊密的互動。
讀者期待如何與內容產生互動呢？通常在閱讀文章會出現的需求包含：
- 讀者對特定議題有興趣，希望《報導者》能推薦相關文章
- 讀者知道《報導者》會從不同面向切入同一個事件，因此希望閱讀完整系列專題
- 讀者覺得《報導者》內容很棒，希望有地方能存起來
- 讀者覺得《報導者》內容太讚了，希望透過社群分享出去
事實上，《報導者》主網站原本的設計也是因應這些需求而製作了閱讀工具列，但是原本工具列的問題在於實在太不明顯了！在 2020 年的品牌體驗調查質化訪談中，也有受訪者提到自己完全沒有意識到這些功能的存在。
如同剛才所提到，原本的工具列只會出現在文章最上方以及最底部，但閱讀其實是個持續性的過程，很有可能讀者閱讀到20%才想要使用這些功能，結果要使用時根本找不到閱讀工具列。
除此之外，過去網站也有設計「加入書籤」和「回到專題」的按鈕，但是它們只會在讀者上滑頁面時出現，非常不明顯，同時互動提示感也相當弱，很容易被滑過並忽略，導致文章頁面無法滿足讀者的閱讀需求，進而喪失讀者持續探訪、回訪的誘因。以書籤功能來說，這個項目在我加入《報導者》之前就已經完成開發，但即使《報導者》每月有 40 萬以上的網站造訪量，書籤的每月使用量卻只有 2、300 次。
這些都是之前文章頁跟閱讀工具列的問題，而在問題被定義明確後，接著就會交由設計師產生解法，不過因為《報導者》團隊規模較小，產品經理跟設計師有時候也會一起探索問題，並尋找設計的解方。
Part 2 設計師：進入設計實作，我們考量了哪些事？
定義問題之後，接下來就是透過設計來解決問題了。這次閱讀工具列的 design challenge 是：
如何在只改變工具列設計、不開發其他新功能的前提下，鼓勵讀者持續探索和主動回訪？
重新思考閱讀工具列的目的
在開始進入實作前，我們重新思考了閱讀工具列的目標：如果工具列的目的在於幫助使用者，那如何真正達到「幫助」的效果？我們認為好的幫助是在需要的時候出現，不需要的時候（例如：閱讀文章）消失。
首先，我們改變閱讀工具列的位置──從浮動於右下角改成固定在頁面下方──讓讀者在閱讀文章的時候，隨時都可以找到它。除了解決「不明顯」以及「需要時找不到」的問題，這樣的設計其實很類似常見的 App，對大部分讀者來說已經很習慣了，因此很快就可以上手。
解決了「需要時找不到」的問題，那麼「不需要時消失」呢？我們為閱讀工具列製作了展開和收合的兩種模式，以因應使用情境不同而給讀者不一樣的體驗。讀者上滑頁面的時候，工具列的文字會展開，說明 icon 代表什麼功能。會這樣設計是因為，除了「文字大小」、「分享文章」、「加入書籤」，另外兩個按鈕「相關文章」和「前往專題」是其他 App 比較少見的圖案，甚至可以說是《報導者》獨有的，因此對不熟悉的使用者來說，純 icon 沒有意義。而有了文字說明後，不只讓新進的使用者了解 icon 意思，也能減緩記憶功能的負擔，更降低他們對陌生 icon 的不安感，以及誤觸按錯的挫敗感。
相對地，當讀者下滑頁面時，我們希望讓他們能夠更專心地閱讀文章，因此會將工具列收合，留下乾淨整潔的閱讀空間，避免他們被多餘的文字干擾。同時，透過展開、收合的大小變換動畫，吸引讀者的注意力，增加互動效果，進而鼓勵他們去探索這些功能。
那些修改與新增的功能：使用者的需求與我們想傳達的價值
決定好設計方向後，接著要決定工具列上需要放置哪些功能。
首先我們思考的是：「在閱讀文章時，哪些是使用者需要的功能？」因此我們觀看後台數據，整理使用者回饋，以及做了小小的內部調查。
再來，「哪些功能是使用者沒說，但是我們認為對閱讀報導很有幫助的功能？」我們認為，功能不只是要回應使用者的需求，還必須展現我們想傳達的價值。
功能一：調整文字大小
因為《報導者》讀者年齡層廣，調整文字大小的設定可以避免排擠到部分使用者。另外，根據內部的使用者調查大家調整文字大小的需求，決定保留原本的設計：文字有3種大小 100%、110%、120%。
功能二：分享文章（含複製連結）
《報導者》的閱讀工具列原本就有 Facebook、LINE 以及 Twitter 的分享，而這次改版，我們新增了「複製連結」功能。
「用瀏覽器內建的複製連結就好了啊，為什麼還要多做一個？」那是因為我們鼓勵讀者下載的 Web App 並沒有內建的分享、複製連結等功能，造成以往的 Web App 使用者沒辦法分享。
功能三：加入書籤
眾所皆知，《報導者》的文章很長，大部分人沒辦法一次看完，如果沒有功能輔助，很少人會再回頭把文章讀完，因此在閱讀時間愈來愈零碎的趨勢下，加入書籤是很重要的功能。我們希望讀者可以更常使用它，因此保留這項功能，並且在 icon 的設計做了更動，藉此增加人們點擊的意願。
功能四：相關文章
《報導者》的報導通常不會只有單篇，多數都會有可以互相呼應脈絡的系列文章。可惜的是，報導的相關文章區塊被放在文章的最下方，導致對議題有興趣的讀者必須看完全文、滑過贊助訊息才會看到更多相關文章。很可能，他們根本不會發現，也不會去看更多的東西就離開頁面了。因此這次在設計上，我們加入「相關文章」的按鈕，可以直接帶使用者到文章底部，探索更多有興趣的內容。
功能五：前往專題
專題報導一直是《報導者》的特色與價值，它給予讀者多面向、更完整的脈絡。然而，過去《報導者》網站的專題按鈕因為沒有任何提示，加上位置不明顯，導致使用的人並不多。這次，我們不只把專題保留起來，同時將名稱從「回到專題」改為「前往專題」，除了考慮到以文章頁為起始頁進入的使用者情境之外，也希望透過動詞鼓勵人們一起探索更多文章頁。
細微的使用者體驗
確定工具列上的功能後，接著就是細節的設計，包含動態設計。
動態設計關乎到更細微的使用者體驗，好的動態設計除了能增加使用者好感，其實可以帶給使用者訊息。例如剛剛提到工具列有展開跟收合的動態，考量到 header 2.0 本身也有自己的動態，我們調整參數，讓閱讀工具列跟 header 在滑動時有一樣的觸發點，因此會一起展開和收合，使用者可以明顯地感受到兩種模式 — — 往上滑會得到更多資訊，往下滑會得到更多閱讀空間。
第二個動態設計，是滑動至相關文章的過程。
點擊「相關文章」按鈕並不是直接跳轉到文章下方，而是用「滑」的到頁面最下方的相關文章區塊。這麼做不只可以增加有趣的感覺，也能提供使用者一個訊息：「這是在文章底部的內容，需要的話你可以自己往上或往下滑喔！」當初在設計時也花了很多時間跟工程師討論，例如：滑動速度要多快？還是應該固定的動畫時間？速度可以由慢至快再趨緩嗎？我們希望在這些小細節上，也能帶給讀者良好的體驗。
最後一個設計細節是，我們為攝影頁製作了專屬的工具列配色。《報導者》網站的攝影頁統一都是以藍色作為底色，這樣的底色和原本工具列的白色搭配顯得很突兀，因此我們特別用攝影頁的藍色搭配淺灰色，以呈現攝影頁在深藍襯托下微微發光的感覺。
資訊架構改版的第一階段完成了，接下來呢？
第一階段的閱讀工具列改版後，我們正在進行的第二階段的目標，是讓《報導者》的豐富內容在網站有更高的能見度。
我們會重新整理目前的文章分類，新增分類以凸顯 Podcast、兒童新聞、國際週報等內容的多樣性，也預計開發新的內容屬性頁面，更能滿足讀者對於掌握近期大事的期待。除此之外，針對不同的載具，包含電腦、平板和手機，我們也會設計相對應的選單，讓使用體驗大幅提升，尤其希望讓手機操作更接近原生的 App。
最後，強力推薦你花 10 秒鐘安裝《報導者》Web App！搭配閱讀工具列，讓你得到更好的閱讀體驗！
不需要透過 App store 下載，也完全不佔手機容量，就可以擁有乾淨、不受干擾、與 APP 非常相似的閱讀空間，而且每次網站進化改版，你都不需要再更新。
如果你喜歡這次《報導者》閱讀工具列的改版，請幫我們拍拍手👏對於《報導者》網站的資訊架構有任何建議，也非常歡迎留言讓我們知道！
📣有你，才有《報導者》
《報導者》秉持深度、開放、非營利的精神，透過讀者的贊助支持來營運，不仰賴商業廣告置入。如果您認同我們的理念，歡迎與我們一起前進，共同推動這場媒體小革命。
☛贊助我們：https://bit.ly/3ylK401
官方網站：https://bit.ly/3rTeR1V
粉絲專頁：https://bit.ly/37jjGYD
Instagram：https://bit.ly/3rWFQJV
