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

起因

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

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

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

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

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

改版方案

「1-1. 問(wèn)題」

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

「1-2. 解決方案」

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

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

對(duì)此，我們思考的是：

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

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

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

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

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

「2-1. 問(wèn)題」

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

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

另外，圖標(biāo)沒(méi)有配備相應(yīng)的文案說(shuō)明，功能認(rèn)知成本較高，特別是那些不常見(jiàn)的圖形。帶來(lái)的弊端就是用戶(hù)不愿去點(diǎn)擊——因?yàn)槿说奶煨跃褪菚?huì)對(duì)不熟悉和陌生的信息產(chǎn)生不信任感。

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

「2-2. 解決方案」

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

這樣的好處是：

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

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

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

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

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

為此，我們?cè)黾拥搅?7 個(gè)字號(hào)大小、6 類(lèi)字型、 5 種閱讀背景色，提供用戶(hù)更多的選擇空間。在此手動(dòng)@饅頭和 Jonycool 兩位視覺(jué)同學(xué)，nice job 。

定性定量效果跟蹤

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

另外，改版也是得到了用戶(hù)的肯定，以下是測(cè)評(píng)團(tuán)期間部分用戶(hù)的評(píng)價(jià)：

“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~”

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

— Webnovel 論壇用戶(hù) 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)于這個(gè)版本，我是這樣覺(jué)得的：

-喜歡閱讀時(shí)可以有很多字體選擇

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

— Webnovel 論壇用戶(hù) 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)識(shí)他們”

— Webnovel 論壇用戶(hù) 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. ”

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

— Webnovel Facebook Group 用戶(hù) Aileen Estrada Liban，2019/04/29

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

結(jié)語(yǔ)

作為一款閱讀類(lèi)產(chǎn)品，Webnovel 一直在為海外用戶(hù)提供最豐富的內(nèi)容和極致的閱讀體驗(yàn)。所以，這次改版并不是終點(diǎn)，任何有益于提升用戶(hù)閱讀體驗(yàn)的事情，我們將持續(xù)輸出，不斷優(yōu)化。

作者：俞璐

公眾號(hào)：閱文體驗(yàn)設(shè)計(jì)YUX