UX用户体验设计 ·

Webnovel app阅读页设计改版思路

作为阅文集团的出海阅读产品,Webnovel 上线两年以来,随着用户量的不断增长以及产品功能的持续迭代,原先的阅读页体验已然滞后。今年五月初,我们对 Webnovel 的阅读页进行了一次改版优化,以下是此次改版的经验总结。

 

 

起因

本着 MVP(最小化可行产品)的思想,Webnovel 上线之初并未对阅读页体验做太多深入的考量,但随着产品功能的不断叠加和调整,我们意识到是时候对阅读页进行一次体验升级了。

以下是体验升级的三个方向:

一,让新用户的首次阅读体验更顺畅。

二,提升阅读页功能布局的可扩展性,以及优化单手操作体验。

三,完善视觉表现,让用户可以在阅读页的字号、字型、背景色三个方面有更丰富的选择空间。

 

 

改版方案

「1-1. 问题」

改版前,新用户首次进入阅读页时,会显示阅读页主要功能的引导介绍,用户需要点击五次屏幕才能看完这些介绍,继而能够开始阅读作品。这样的引导流程过于冗长,阻碍了用户快速进入正文阅读的诉求——由此带来的可能后果是用户在这个节点流失。而且漫长的引导流程与我们希望用户能够尽快产生阅读行为并成为留存用户的核心目标冲突。

 

「1-2. 解决方案」

首先,我们来看一下这些引导分别是什么:

1)点击屏幕中间区域来唤起工具栏;2)字号大小和字体选择以及翻页模式设置;3)夜间模式;4)离线阅读;5)TTS 听书。

对此,我们思考的是:

A)用户真的需要被引导吗?离开了这些引导,用户当前的主要行为是否无法继续?B)展示的这些引导内容,用户能不能记住?

针对 A,我们尝试定义这样的一个原则:省略或是尽可能简化与用户当前主要诉求没有强关联的任何说明和暗示。就用户进入阅读页的行为来看,其主要目的是浏览作品内容,字体设置/夜间模式/离线阅读/TTS 听书这几项功能对于用户当前的主要目标没有任何帮助。不展示这些引导,用户的阅读行为不会无法继续,所以无需展示这些暂时无关紧要的内容。

因此,改版方案中我们只保留了两项内容,即告知用户:a)点击屏幕中心区域可以唤起工具栏;b)左右滑动来翻页。另外,去除了原先的黑色半透明遮罩,使用了半弹层的形式,做到最低程度的视觉干扰,确保展示引导的同时,用户仍然可以浏览正文内容。

对于用户是否能记住引导内容这一点,考虑到新用户对整个 app 还不怎么熟悉,所有 app 内的特性、功能等等,包括这些引导内容,对于他而言都是新鲜的,想要让用户一股脑将这些内容短时间内消化,确实是个不小的挑战。

另外,用户经历了从书城筛选出感兴趣的作品 → 进入这部作品的详情介绍页 → 最后决定开始阅读的三部曲,可想而知用户必然是想快速进入作品正文的阅读,对于和阅读行为本身没有很强关联的引导,大多是兴趣缺缺,自然也就不会想去记忆这些内容。

 

「2-1. 问题」

再来看第二个优化方向:提升阅读页功能布局的可扩展性,以及优化单手操作体验。

首先,上下两栏功能布局的方式,视觉层面上看会显得很局促,尤其是当我们想要把更多重要的功能外露在工具栏上时。

另外,图标没有配备相应的文案说明,功能认知成本较高,特别是那些不常见的图形。带来的弊端就是用户不愿去点击——因为人的天性就是会对不熟悉和陌生的信息产生不信任感。

最后,从人机交互层面上来说,随着大屏手机的普及,对于单手操作的用户而言,放置在上方和屏幕两侧的功能越来越难被点按到。

 

「2-2. 解决方案」

对此,我们使用了从下往上弹出以及分栏的交互形式来布局功能。

这样的好处是:

1)视觉层面更优雅,从上而下的视觉动线也更符合人的浏览习惯

2)功能层面也做了归纳分类:常用功能 & 阅读显示设置相关。方便用户更明确地去定位自己要找的功能,不用在一堆功能中慢慢检索

3)图标加文案的形式解决了单图标可能带来的认知障碍

4)设置弹出的工具栏高度为屏幕高度的 60%,单手操作也能轻松应对,拇指体验更友好

 

 

「3. 完善视觉表现」

为此,我们增加到了 7 个字号大小、6 类字型、 5 种阅读背景色,提供用户更多的选择空间。在此手动@馒头和 Jonycool 两位视觉同学,nice job 😎。

 

 

定性定量效果跟踪

新版本上线后,我们跟踪了数据来验证改版效果——对比上个版本,多数功能的点击都有了不同程度的提升。尤其是下载,分享作品和 TTS 听书,分别提升了 210%、616%、235%。

另外,改版也是得到了用户的肯定,以下是测评团期间部分用户的评价:

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

“喜欢新的阅读页工具栏,但还是要花点时间适应一下新界面。工具栏弹出的转场效果很快很顺滑。我最喜欢的部分—更换背景色!一直很期待的功能~而且还有更多字体选择,开心~”

— 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.”

“关于这个版本,我是这样觉得的:

-喜欢阅读时可以有很多字体选择

-夜间模式比上个版本更好,眼睛也更舒服”

— 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.”

“反馈:

• 工具栏内的「显示」功能列表很棒

•「内容创建者」更清晰地展示了译者和编辑信息,帮助我们更好地认识他们”

— 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. 💯💙”

“没体验到任何问题。只想推荐这个新版本。不知道为什么,但是阅读背景看着很舒服。新的显示设置和阅读字体也值得推荐”

— Webnovel Facebook Group 用户 Aileen Estrada Liban,2019/04/29

但从用户反馈邮件来看,改版后阅读页的反馈数量却是激增,主要集中在亮度调节层面的反馈。于是我们迅速定位到了问题:是 Android 阅读页亮度调节的 bug 导致了用户反馈数量的增加。在后一个版本中进行了 bug 修复,但仍然存在不少亮度调节的反馈邮件,关于这一点后续会和开发同学深入沟通这一块功能的调整,并持续观察。

 

 

结语

作为一款阅读类产品,Webnovel 一直在为海外用户提供最丰富的内容和极致的阅读体验。所以,这次改版并不是终点,任何有益于提升用户阅读体验的事情,我们将持续输出,不断优化。

 

 

 

作者:俞璐

公众号:阅文体验设计YUX