交互

Webnovel app閱讀頁設(shè)計改版思路

3459

作為閱文集團(tuán)的出海閱讀產(chǎn)品，Webnovel 上線兩年以來，隨著用戶量的不斷增長以及產(chǎn)品功能的持續(xù)迭代，原先的閱讀頁體驗(yàn)已然滯后。今年五月初，我們對 Webnovel 的閱讀頁進(jìn)行了一次改版優(yōu)化，以下是此次改版的經(jīng)驗(yàn)總結(jié)。

起因

本著 MVP（最小化可行產(chǎn)品）的思想，Webnovel 上線之初并未對閱讀頁體驗(yàn)做太多深入的考量，但隨著產(chǎn)品功能的不斷疊加和調(diào)整，我們意識到是時候?qū)﹂喿x頁進(jìn)行一次體驗(yàn)升級了。

以下是體驗(yàn)升級的三個方向：

一，讓新用戶的首次閱讀體驗(yàn)更順暢。

二，提升閱讀頁功能布局的可擴(kuò)展性，以及優(yōu)化單手操作體驗(yàn)。

三，完善視覺表現(xiàn)，讓用戶可以在閱讀頁的字號、字型、背景色三個方面有更豐富的選擇空間。

改版方案

「1-1. 問題」

改版前，新用戶首次進(jìn)入閱讀頁時，會顯示閱讀頁主要功能的引導(dǎo)介紹，用戶需要點(diǎn)擊五次屏幕才能看完這些介紹，繼而能夠開始閱讀作品。這樣的引導(dǎo)流程過于冗長，阻礙了用戶快速進(jìn)入正文閱讀的訴求——由此帶來的可能后果是用戶在這個節(jié)點(diǎn)流失。而且漫長的引導(dǎo)流程與我們希望用戶能夠盡快產(chǎn)生閱讀行為并成為留存用戶的核心目標(biāo)沖突。

「1-2. 解決方案」

首先，我們來看一下這些引導(dǎo)分別是什么：

1）點(diǎn)擊屏幕中間區(qū)域來喚起工具欄；2）字號大小和字體選擇以及翻頁模式設(shè)置；3）夜間模式；4）離線閱讀；5）TTS 聽書。

對此，我們思考的是：

A）用戶真的需要被引導(dǎo)嗎？離開了這些引導(dǎo)，用戶當(dāng)前的主要行為是否無法繼續(xù)？B）展示的這些引導(dǎo)內(nèi)容，用戶能不能記??？

針對 A，我們嘗試定義這樣的一個原則：省略或是盡可能簡化與用戶當(dāng)前主要訴求沒有強(qiáng)關(guān)聯(lián)的任何說明和暗示。就用戶進(jìn)入閱讀頁的行為來看，其主要目的是瀏覽作品內(nèi)容，字體設(shè)置/夜間模式/離線閱讀/TTS 聽書這幾項(xiàng)功能對于用戶當(dāng)前的主要目標(biāo)沒有任何幫助。不展示這些引導(dǎo)，用戶的閱讀行為不會無法繼續(xù)，所以無需展示這些暫時無關(guān)緊要的內(nèi)容。

因此，改版方案中我們只保留了兩項(xiàng)內(nèi)容，即告知用戶：a）點(diǎn)擊屏幕中心區(qū)域可以喚起工具欄；b）左右滑動來翻頁。另外，去除了原先的黑色半透明遮罩，使用了半彈層的形式，做到最低程度的視覺干擾，確保展示引導(dǎo)的同時，用戶仍然可以瀏覽正文內(nèi)容。

對于用戶是否能記住引導(dǎo)內(nèi)容這一點(diǎn)，考慮到新用戶對整個 app 還不怎么熟悉，所有 app 內(nèi)的特性、功能等等，包括這些引導(dǎo)內(nèi)容，對于他而言都是新鮮的，想要讓用戶一股腦將這些內(nèi)容短時間內(nèi)消化，確實(shí)是個不小的挑戰(zhàn)。

另外，用戶經(jīng)歷了從書城篩選出感興趣的作品 → 進(jìn)入這部作品的詳情介紹頁 → 最后決定開始閱讀的三部曲，可想而知用戶必然是想快速進(jìn)入作品正文的閱讀，對于和閱讀行為本身沒有很強(qiáng)關(guān)聯(lián)的引導(dǎo)，大多是興趣缺缺，自然也就不會想去記憶這些內(nèi)容。

「2-1. 問題」

再來看第二個優(yōu)化方向：提升閱讀頁功能布局的可擴(kuò)展性，以及優(yōu)化單手操作體驗(yàn)。

首先，上下兩欄功能布局的方式，視覺層面上看會顯得很局促，尤其是當(dāng)我們想要把更多重要的功能外露在工具欄上時。

另外，圖標(biāo)沒有配備相應(yīng)的文案說明，功能認(rèn)知成本較高，特別是那些不常見的圖形。帶來的弊端就是用戶不愿去點(diǎn)擊——因?yàn)槿说奶煨跃褪菚Σ皇煜ず湍吧男畔a(chǎn)生不信任感。

最后，從人機(jī)交互層面上來說，隨著大屏手機(jī)的普及，對于單手操作的用戶而言，放置在上方和屏幕兩側(cè)的功能越來越難被點(diǎn)按到。

「2-2. 解決方案」

對此，我們使用了從下往上彈出以及分欄的交互形式來布局功能。

這樣的好處是：

1）視覺層面更優(yōu)雅，從上而下的視覺動線也更符合人的瀏覽習(xí)慣

2）功能層面也做了歸納分類：常用功能 & 閱讀顯示設(shè)置相關(guān)。方便用戶更明確地去定位自己要找的功能，不用在一堆功能中慢慢檢索

3）圖標(biāo)加文案的形式解決了單圖標(biāo)可能帶來的認(rèn)知障礙

4）設(shè)置彈出的工具欄高度為屏幕高度的 60%，單手操作也能輕松應(yīng)對，拇指體驗(yàn)更友好

「3. 完善視覺表現(xiàn)」

為此，我們增加到了 7 個字號大小、6 類字型、 5 種閱讀背景色，提供用戶更多的選擇空間。在此手動@饅頭和 Jonycool 兩位視覺同學(xué)，nice job 。

定性定量效果跟蹤

新版本上線后，我們跟蹤了數(shù)據(jù)來驗(yàn)證改版效果——對比上個版本，多數(shù)功能的點(diǎn)擊都有了不同程度的提升。尤其是下載，分享作品和 TTS 聽書，分別提升了 210%、616%、235%。

另外，改版也是得到了用戶的肯定，以下是測評團(tuán)期間部分用戶的評價：

“I like the new toolbar functions but yet again, I have to take some time to adapt to the new user interface. The transition and time it takes for the toolbar is smooth and fast. Yeet. My favourite part! Changing the background colour! Been waiting for it~ No complains for this one. Can also switch to night mode through the Displays. There’re more reading fonts. Yay~”

“喜歡新的閱讀頁工具欄，但還是要花點(diǎn)時間適應(yīng)一下新界面。工具欄彈出的轉(zhuǎn)場效果很快很順滑。我最喜歡的部分—更換背景色！一直很期待的功能～而且還有更多字體選擇，開心～”

— Webnovel 論壇用戶 BookKitty，2019/05/25

“Here is what I think:

-I really enjoy the possibility to choose from many type of style when reading

-the night effect works better in this version, it's easier on the eyes.”

“關(guān)于這個版本，我是這樣覺得的：

-喜歡閱讀時可以有很多字體選擇

-夜間模式比上個版本更好，眼睛也更舒服”

— Webnovel 論壇用戶 monique4，2019/05/16

“Feedback:

? Display is great.

? Content creator clearly shows the translator and/or editor, it is great help to easily know them.”

“反饋：

? 工具欄內(nèi)的「顯示」功能列表很棒

?「內(nèi)容創(chuàng)建者」更清晰地展示了譯者和編輯信息，幫助我們更好地認(rèn)識他們”

— Webnovel 論壇用戶 Palaso，2019/05/04

“Didn't experience any problem. I just want to commend the new version. I don't know why but its skin is very pleasing to the eyes or my eys only The new display and reading fonts are commendable also. ”

“沒體驗(yàn)到任何問題。只想推薦這個新版本。不知道為什么，但是閱讀背景看著很舒服。新的顯示設(shè)置和閱讀字體也值得推薦”

— Webnovel Facebook Group 用戶 Aileen Estrada Liban，2019/04/29

但從用戶反饋郵件來看，改版后閱讀頁的反饋數(shù)量卻是激增，主要集中在亮度調(diào)節(jié)層面的反饋。于是我們迅速定位到了問題：是 Android 閱讀頁亮度調(diào)節(jié)的 bug 導(dǎo)致了用戶反饋數(shù)量的增加。在后一個版本中進(jìn)行了 bug 修復(fù)，但仍然存在不少亮度調(diào)節(jié)的反饋郵件，關(guān)于這一點(diǎn)后續(xù)會和開發(fā)同學(xué)深入溝通這一塊功能的調(diào)整，并持續(xù)觀察。