討論區APP介面改版過程－以文章列表為例

討論區是玩運彩官網的重要單元，每日瀏覽量可達1百萬以上。第一代討論區APP（圖1）在2014年上線後，無論介面、程式架構，一直未有重大更新。隨著時間過去，介面的歷史感越來越重，軟體維護也是一大問題。

相隔四年後全面改版，因為是重要專案，篩選介面的方法更加嚴謹。首先，框線圖（wireframe）需經過12位同事評分，平均4分以上才算通過（滿分5分）。再來，過了第一關的框架圖將製作成模擬圖（mockups），再組合為可操作的原型（prototype），進行用戶測試。用戶平均給分達4分以上，提案才算完全過關。

以下就討論區APP最重要的主畫面——文章列表為例，回顧設計迭代的過程。

第一次內部評比

首次提交給內部評比的框線圖，一共四個版本，如圖2。簡潔化、平面化是四個版本共同的特色，主要差異在於顯示資訊的版面配置。

結果，只有版本04的平均分數達4分，意見回饋如下：

可以分別聯盟，但分析標籤就不清楚了，像是自己打的。
整個排列順序最喜歡，閱讀起來很順暢，但分析的標籤看起來像是自己打的。
版面和諧。
文章標題是第一順位，聯盟有框能清楚知道，但分析標籤不明顯容易忽略，整體的排列方式在閱讀上覺得最順暢。
喜歡標籤呈現方式。
整體滿一致的，推數也都固定在右下角，大頭照的大小覺得是四個版本最理想的，其他太小。
沒什麼缺點。
很喜歡資訊的陳列方式，但覺得資訊有些擠。
暱稱與時間在一起很怪。
覺得該版本的資訊都很容易閱讀，星期幾的資訊可以拿掉。
名字跟日期在一起太擠。

綜合以上11點意見，版本04有兩個主要問題（圖3紅框處）：

文章分類融合在標題中，不夠明顯，很像是發文者手動輸入的文字。
暱稱與時間放在一起很怪，也太過擁擠。

原則上，達4分的版本越多越好，這樣後續篩選才有更多選擇，因此要再修改框線圖。

第二次內部評比

圖4為第二次提出的框線圖，也是四個版本，依據第一次內部評比的意見修改。

有趣的是，第一次內部評比過關的版本04，僅做微小改動：強調文章分類標示，並弱化時間資訊。雖然平均得分仍舊最高，但是下降到3.7，等於所有提案全軍覆沒。

這次版本04（圖5）的意見回饋如下：

看來太亂。
喜歡聯盟跟分析分開,資訊呈現完整，回文推數在右邊很清楚，跟心中所想的樣子很接近。
推文在左邊比較理想。
分析不用特別標，簡單一點就好。
不愛推在右邊，分析的顯示方式看起來變的比較亂，簡單像版本二那樣就好。
完整度很好，閱讀都很順暢。
整體排列閱讀起來最舒服，如果聯盟分析的呈現方式能跟版本一一樣就更好了。
大頭照不需要，顯得很亂。

綜合以上看法，應該是文章分類的樣式改爛了，造成評分降低，所以要再修改。

第三次內部評比

有鑒於第二次經驗，微小的改動也會大幅影響評分，第三次提案以先前評分較高且差異較大的兩個畫面為基礎，分別衍生五個版本，如圖6、7。

結果，十個版本中，只有圖8平均得分4.25，其他版本都不到4分。

這次最高分版本的意見回饋如下：

文章標題縮得太多。
心目中最理想的呈現方式。
怕頭像太小，在手機上不易辨識。
有大頭照，資訊清楚，不會擠在一起。
喜歡標題與暱稱的配置，有大頭照。
時間與推回文位置固定。
喜歡推跟時間的位置。
資訊清楚，大頭照小了一點。
時間與推回文位置固定，無論有無推回文，覺得都要出現資訊。
如進入看板後，聯盟標籤會不見，只剩時間就會多一排。
看來最簡單，標題發文者明顯，重要的資訊可以放在左邊。

總結上述意見，沒有重大問題。除了每一則文章左上方的聯盟、文章分類，並非常駐資訊，當這兩項資訊未出現的情況下，該列僅剩下右側的發文／回文時間，配置上頗尷尬，因此又追加了微調版本，改動發文／回文時間的位置。

第四次內部評比

追加的兩個畫面，如圖9，雖然只是微幅調整，仍要通過內部評比。

最後圖10的版本得到4.41的平均分數，意見回饋如下：

順眼。
不是心中最理想的排列，在全部文章列表看時很好，但如果進入聯盟時，又覺得會變得佔空間。
看起來比較簡潔。
覺得分類沒有另一版清楚。
都還滿好閱讀的，但回文推放暱稱下方會更好。
三行的排列比較不喜歡，字的大小有很多種看來較亂。
看版設計比較好讀，推回文不固定。
頭像圓形滿喜歡的。
版面看來還滿舒服的，圓形圖像也滿好看的，但如果暱稱太長加上後方接回文推等資訊時，就覺得太過接近。
文章標題明顯。

有趣的是，這次過關的版本（圖10），版面配置竟然相當接近舊版APP（圖1）。

經過4次內部評比後，圖8和圖10的平均分數超過4分，這兩個版本將被製作為測試原型，進入用戶測試。

第一次用戶測試

圖11的模擬畫面分別從圖8、圖10發展而來，供9位測試者操作的原型則是以inVision製作（原型1、原型2）。

在9位受測者當中，有4位主要使用舊版討論區APP，另5位主要使用官網討論區。測試重點除了介面的usability，也會請受測者針對關鍵畫面給分。

關於文章列表的畫面表現，圖11左側的版本，總平均4分，剛好合格。但若細分用戶群，舊版APP用戶的平均給分僅3.37，未達過關標準。

4位受測者的回饋如下：

用戶	評分	對新版的看法	選擇版本
1	3	跟舊版差不多。	舊版，每篇文章都有框框，比較漂亮。
2	4	– 剛開始還是會習慣在舊版，不管改怎樣用久了還是會習慣，不會有排斥。 – 拿舊版來比較，覺得舊版比較好，一次可以看到的文章比較多 – 資訊上舊版比較清楚，有區塊隔開。	舊版，用習慣了。
3	2~3	– 分類、暱稱不太好判斷。原版標籤是特色(亮單等等)，暱稱應該明顯一點。 – 標題有可能是亂取的，還是完整顯示出文章標題較好。 – 資訊（文章）分隔不太明顯。 – 時間顯示蠻重要的，球賽當下可以對應到文章發表時間，灰色太淡。 – 頭貼不需要。	舊版，綜合來說評價比較好
4	4.5	進步很多。	新版

從上表可以看出，用戶的反應跟開發團隊的看法相左，4位APP用戶當中有3位選擇舊版的文章列表，這個測試結果除了反映操作習慣的影響，也代表新版的說服力不足。

第二次用戶測試

吸收第一次用戶測試的回饋後，擬定三個調整文章列表的方向：

復刻版：顯示資訊仿照舊版。
修正版：根據用戶意見調整新版畫面。
全新版：設計新的提案。

最後產出10個版本，不再經過內部評比，直接做用戶測試（全部畫面）。

第二次用戶測試一樣找來9位受測者，其中5位是舊版討論區APP用戶，這次請用戶評分舊版畫面以及10個版本的文章列表。

調查結果是版本10通過測試，因為其中5位用戶有舊版APP的使用經驗，以下特別整理他們對於新版、舊版介面的看法：

用戶	版本10的評分	舊版的評分	其他看法
1	5	3	跟舊版相比，新版看起來比較舒服。
2	4.5 全新感受新介面	4.5 有更新按鈕，習慣。
3	5 資訊閱讀清楚	4 其實現在的就蠻好的	– 標籤統一顏色不知道會不會比較好，看起來多種顏色有點不搭。 – 喜歡字大的版本。 – 舊版的可能因為標題長短有比較亂的感覺。 – 如果改版的話不會受影響。
4	4 喜歡	1 不好閱讀
5	5	4.5 已經習慣

最後定案的文章列表畫面如圖14，新版討論區APP也已在app store和google play上架，團隊正持續開發新功能。

回顧介面改版的歷程，文章列表耗時最久，前後經過4次內部評比和2次用戶測試才定案。雖然過程冗長，但嚴謹的質性調查能夠挖掘用戶的意見，光是這個優點，反而會比開發團隊關起門來沙盤推演更快直指核心，因此用戶測試是重要且必要的環節，能幫助開發團隊了解使用者在乎的重點、使用的理由，以及對產品的觀感，進而產生有用的洞見。