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

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

圖1 討論區APP舊版畫面

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

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



第一次內部評比

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

圖2 由左至右:版本01、02、03、04

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

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

綜合以上11點意見,版本04有兩個主要問題(圖3紅框處):

  1. 文章分類融合在標題中,不夠明顯,很像是發文者手動輸入的文字。
  2. 暱稱與時間放在一起很怪,也太過擁擠。
圖3 第一次評比 版本04的主要問題

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



第二次內部評比

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

圖4 由左至右:版本01、02、03、04

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

這次版本04(圖5)的意見回饋如下:

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

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

圖5 第二次評比 版本04的主要問題



第三次內部評比

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

圖6 第三次評比 從上一次的版本01衍生的五個版本
圖7 第三次評比 從上一次的版本04衍生的五個版本

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

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

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

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

圖8 第三次評比 最高分版本




第四次內部評比

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

圖9 第四次評比 追加兩個版本

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

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

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

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



第一次用戶測試

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

圖11 兩個用戶測試的版本

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

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

4位受測者的回饋如下:

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

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



第二次用戶測試

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

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

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

圖12 第二次用戶測試 版本01~05(左至右)
圖13 第二次用戶測試 版本06~10(左至右)

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

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

用戶版本10的評分舊版的評分其他看法
153跟舊版相比,新版看起來比較舒服。
24.5
全新感受新介面
4.5
有更新按鈕,習慣。

35
資訊閱讀清楚
4
其實現在的就蠻好的
– 標籤統一顏色不知道會不會比較好,看起來多種顏色有點不搭。
– 喜歡字大的版本。
– 舊版的可能因為標題長短有比較亂的感覺。
– 如果改版的話不會受影響。
44
喜歡
1
不好閱讀
554.5
已經習慣



圖14 最後定案

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

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

圖15 文章列表:舊版(左);新版(右)

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *