争论点:用户体验设计师的交互指南
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

1.3 可见性

从操作流程的角度来说,用户要使用一个功能,首先必然要找到这个功能。如何让用户快速找到目标功能呢?我们需要建立有效的产品导航体系,明确产品的功能路径。

1.3.1 合理的信息架构

信息架构是一款产品的骨架,其本质就是分类。为什么要分类?因为产品是众多功能的集合体,如果不对其进行分类整合,那么用户很难找到自己想要的功能。

信息架构不仅仅存在于互联网产品中,投射到现实生活里,导视图就是商场的信息架构,目录就是书籍的信息架构(见图1-11)。不管是导视图还是目录,目的都是帮助用户尽快地找到自己想要的。那么到了产品中,信息架构的作用就是帮助用户找到期望的功能。

图1-11 生活中的信息架构

搭建合理的信息架构要注意两点:

第一,平衡好信息架构的广度与深度。广度指的是页面的长度,深度代表页面的层级。页面越长,可以展示的功能越多,但是这也并不是好事。

埋点数据表明,页面超过一屏后,页面的曝光量会急剧下降,用户很少会查看一屏以外的内容。因此,虽然你的产品功能处于一级页面中,但是只要超过了一屏,其曝光量说不定还不如二级页面。要注意控制页面的长度,尽量保持在1.5屏以内,如图1-12所示。

图1-12 超过一屏的内容用户其实很少去看

当然这个问题说起来简单,可操作性非常差。因为每一个功能的业务方都希望自己的功能入口可以被放在产品的“首页”和“我的”这样的一级页面中,这就导致了一级页面非常长。我们可以考虑根据用户画像给用户进行个性化推荐,让每一个用户看到的内容都是不一样的,由“千人一面”转变到“千人千面”。这样在保证内容可以精准地触达目标用户的同时,还有效地控制了页面长度。

页面不能太长,也不能太深,层级越深,用户的查找路径也就越长。以图1-13所示的设置页为例,其中一些功能被放到了四级页面中。不是说不能出现四级页面,四级页面并不是原罪。只是在当前页面中还有1/3空间空闲着的情况下,出现功能层级过深是不合理的。埋点数据显示,一些四级页面的流量比三级页面的还要多。所以,对设置页进行信息架构的重建是非常有必要的。

图1-13 窄而深的信息架构

在搭建信息架构时,首先应该确保页面的长度在1~1.5屏内,在此基础上,要注意协调功能的层级,避免出现“宽而浅”和“窄而深”的问题。

第二,信息架构的逻辑性经常会被我们忽略。用户并不是互联网“小白”,在使用你这款产品之前,他们可能都用过上百款APP了。他们在使用那些产品时所积累的经验会让其在心中建立出一个产品画像,这个产品画像就是逻辑。不符合逻辑的设置会对用户造成干扰。例如,大部分的电影院都位于商场的顶层,所以,用户的心理预期是电影院就应该在顶层,可能会下意识去顶层找电影院。如果你把电影院安排在二楼,这就是不符合逻辑。不要挑战用户的固有认知。

以图1-13为例,如果你是用户,打算修改账户的手势密码,那么在这个界面中,你是点击“账户安全中心”选项,还是点击“密码设置”选项?对于我来说,我会点击“密码设置”选项,因为在我的认知里,手势密码属于密码的范畴。而这个产品将手势密码放在账户安全中心里,在我看来,这样的分类是不合逻辑的,会给用户造成干扰。

1.3.2 跳转动作

如果说信息架构是地图,可以让用户清楚地了解目的地在哪里,那么跳转动作就是交通工具,带你快速地到达目的地。跳转动作可以让用户对功能信息快速定位,减少用户的操作步骤。

如图1-14所示,这里有一个报错场景,需要用户重置支付密码。如果使用左图所示的对话框样式,那么用户需要返回至“我的”页,找到设置页后再进入支付密码设置页,完成支付密码重置,整个步骤特别烦琐,而且对新用户来说,他们甚至都不知道在哪里重置支付密码。如果使用右图所示的对话框样式,给予用户直接去重置支付密码的选项,则减少了用户的操作步骤。

图1-14 用户可以直接点击文字按钮去重置支付密码

图1-15所示的是两款竞品,具有同样的客服功能。在左图所示的产品中,如果用户想修改绑定的手机号,那么会自动回复更换绑定手机页的路径:“我的—安全设置—修改手机号”。这个做法其实对用户来说非常不友好,因为如果功能层级过深,则会使用户的记忆成本很高。如果这里直接提供跳转超链接,如右图所示,让用户可以直接跳转到目标页,就会方便很多。

图1-15 提供跳转超链接,减少操作步骤

1.3.3 快捷入口

对于一些热门的功能,可以考虑为给其提供一个快捷入口,就像“任意门”一样,缩短用户的操作路径。我们最熟悉的快捷入口有Shortcut或者3D Touch等,如图1-16所示。

图1-16 提供快捷入口

具体到产品内部,快捷入口在展示形式上可以被分为两类:浮动类入口固定类入口。浮动类入口顾名思义就是浮在界面上的入口,例如虎扑APP中的“发帖”功能和链家APP中的“地图找房”功能都采用了浮动按钮样式,如图1-17所示。

图1-17 浮动按钮

浮动类入口的优点在于可以很好地吸引用户的注意力,缺点在于会对界面中的内容造成遮挡,有的时候遮挡到重要的区域会极大地伤害产品的用户体验。例如,如图1-18所示,这里的网络故障提示直接把返回按钮给遮挡了,用户要离开这个界面必须得停止程序进程,这非常不合理。

图1-18 浮动方元素会对界面内容造成遮挡

如图1-19所示,微信的浮窗可以随意更改位置,避免遮挡重要内容,这是一个很好的处理方法。

图1-19 用户可以自由调整浮窗的位置,避免对重要内容造成遮挡

固定类入口一般被融入界面中。为了不破坏当前页面的布局,其一般会出现在页面的顶部栏或底部栏中,因为页面中间一般为内容区,而内容百变,很难做到与其完美融合。

例如,我们一般会在页面的右上角提供“帮助中心”的入口,其实用户使用“帮助中心”的频率并不是很高,但是它又不得不存在。在网易云音乐APP中,其大多数页面的右上角都有歌曲播放图标,用户点击可以直接进入歌曲播放界面,如图1-20所示。

图1-20 顶部栏的快捷入口

底部栏菜单也可以作为快捷入口,但是只有一级页面中才会有底部栏菜单。用户点击进入更深层级的页面后,这个快捷入口也就消失了。当然我们也可以更加灵活一点,以蜻蜓FMAPP为例,在一级页面中,播放界面的入口被放在底部栏菜单中,而进入二级页面后,入口变成了浮动按钮,如图1-21所示。

图1-21 不同的层级,不同的展示样式