1.5 易用性
怎么让你的产品更加容易操作呢?要回答这个问题,首先得了解操作流程这个概念。操作流程指的是用户为了达到某个目标所需要经历的操作和场景转换。举一个生活中的例子,小时候我爸带我去电信营业厅交电话费。当时交电话费的操作流程为:从家骑自行车去电信营业厅—排队—查询话费—交钱—骑车回家。所需要经历的场景转换是:家—营业厅—家,如图1-33所示。
图1-33 交电话费流程
而在产品设计中,我们可以将“操作”理解成交互方式,将“场景转换”理解成经历的页面数。所以,优化操作流程、提升易用性可以被划分为两个方向:优化交互方式,减少不必要的场景转换(页面)。“易操作”原则会极大地影响产品的用户体验,我对我们公司的用户反馈的问题进行了分类后,发现超过30%的用户反馈都可以被归纳为“易操作”原则,可见用户对易用性是非常看重的。
1.5.1 减少操作步骤
对于交互方式的优化,我们可以从两个方面来入手:减少操作步骤和降低交互成本。
让用户在更少的操作步骤下完成操作,其实就是提升信息的录入和反馈效率。一些新技术的应用可以帮助我们实现这个目的。
例如,现在在产品中绑定银行卡的时候,一些产品引入了OCR技术,即拍照即可直接识别卡号,这样用户就不需要手动输入卡号,如图1-34所示。这样可以减少用户的点击次数,而且还降低了用户手动输入错误的概率。此外,还有一些指纹支付、刷脸登录这样的生物识别功能,这些新技术的应用可以极大地提升用户的交互效率。所以,产品和交互设计师对新技术的持续关注是非常有必要的。
图1-34 OCR技术的应用减少用户操作步骤
当然,这并不意味着我们需要埋头于追求新技术。很多时候只要利用好现有的技术,同样可以优化产品体验。例如,如图1-35所示,在性别录入的时候,设计师使用的是下拉列表,但是我觉得使用单选框会更加合适,因为总共就两个选项。使用下拉列表,用户需要用拇指在输入项和底部栏中来回地切换,而选择单选框,则可以减少用户的点击次数,降低了操作难度。
图1-35 性别录入选择下拉列表是否合适?
从上面这个例子我们可以发现,有些组件在功能上有重叠的部分。一旦一个功能可以由多个组件来完成,那么我们必须要找出最优方案。所以,交互设计师和产品经理的一个基本功就是明确每个组件的最适用场景,并在原型图中予以明确。具体每个组件的使用方法,会在第5章中详细说明。
评估每个操作的重要程度和风险性也可以减少操作步骤。为什么这么说?因为有些操作步骤的冗余是故意防止用户误操作。例如对一些风险较大或不可逆的操作,系统都需要用户二次确认。但是对于一些风险性不是很高的操作,大胆地减少操作步骤更加合适。例如同样的缓存操作,A站用户需要选择好视频,最后点击“离线”选项开始缓存。这个点击缓存选项的操作真的有必要吗?在选择视频的时候,系统就已经知道你要下载的视频,为什么还要再点击一次缓存选项呢?与之对应的B站的用户只需要点击一下视频就开始缓存,减少了一步操作,如图1-36所示。
图1-36 缓存视频操作
这个例子可能会有人存在异议,A站的处理方式对用户误操作更加友好。但是误操作毕竟相对来说是小概率事件,我们不能因噎废食,而且误下载视频并不会带来多么严重的后果。
1.5.2 降低交互成本
以上内容的重点是减少操作步骤,接下来主要说一说降低交互成本。这里的交互成本可以被理解为单次动作的成本,同样的一个点击动作,如何减少成本呢?交互成本主要有两方面:移动距离和落点范围。
由动作A到动作B,虽然操作次数还是一次,但是拇指的移动范围应该被纳入成本的考量中。下面看一个案例,如图1-37所示,以前当用户想删微信中的好友时,微信会从底部弹出一个对话框让用户确认一下。但是新版微信的“确认删除”操作直接在消息栏中展示了。其实改版前后用户的点击次数都是一样的,但是新版微信的反馈具有更强的指向性,用户的目光(注意力)不会发生转移,拇指的移动范围也更小。
图1-37 哪个“确认删除”样式更好?
在第2.4节中着重分析了点击和滑动这两种手势。其中滑动的一大优势在于更模糊的落点,点击动作要生效,则拇指必须落在对应的范围内,而滑动手势更多的是全屏操作。更模糊的落点范围,意味着用户需要更少的“瞄准”时间,如图1-38所示。
图1-38 滑动手势在产品设计中应用的越来越广泛
上面提到了用户的目光,这里介绍一下人类眼球对于视觉信息的处理过程:
(1)基本信息提取,处理多个视角特征;
(2)根据目的需要,筛选关注信息;
(3)保存关键目标,联想相关特征。
其中第一阶段中的基本信息涵盖了形状、颜色、位置、轮廓等。每次用户收到一个反馈,进入一个新的页面时,都要重新去获取这些信息。为了提升用户对视觉信息的处理效率,我们可以提供相同的形状、颜色、位置、轮廓等。如果在同一个产品中不同的页面样式存在差异,例如在这个页面中标题是居中的,在另一个页面中是居左的;这个按钮是有圆角的,另一个却没有。这些不一致的元素对用户来说是陌生的,需要花时间去熟悉,这样会影响处理其他信息。就好比我们要换工作,发现新公司里有之前熟悉的老友,那么自己会更快地适应新环境。这就是一致性原则可以减少用户的学习/操作成本的原因。例如前面介绍的微信的例子,旧版本微信底部对话框的反馈样式,需要用户重新识别位置和形状,而新版微信的反馈样式则不会出现这种情况,更加易用。
1.5.3 减少场景转换
同样一个实名认证流程,你的产品需要4个页面才可以完成,而你的竞品只需要3个页面。更少的页面意味着更加精简的操作流程,对产品的易用性来说是一个巨大的提升。那么,如何才能减少不必要的场景转换呢?
如何判断哪些是不必要的场景转换呢?我们可以尝试把它删除,看看会不会对当前的操作流程造成影响。例如,用户在酷狗音乐APP里打算下载一首歌,这时会出现一个弹框通知用户下载这首歌需要开通会员或者直接购买单曲。而在QQ音乐和网易云音乐APP中,用户直接可以进入会员开通页,会员开通页里包含了购买单曲的选项,如图1-39所示。仅从减少场景转换的角度来说,我们可以考虑删除弹框,当然这里弹框的使用可能是为了更好地引导用户去开通会员。
图1-39 引导用户去开通会员的对话框是否有存在的必要?
在产品中,“不必要的场景”的集合非空页面莫属。为什么?就是因为它“空”啊。“空”意味着没有,空页面相对于常态页面来说,没有向用户展示足够重要的信息和内容。
举一个例子,“咕咚”是一款我常用的运动类APP。其在“我的”页中有一个功能是“训练计划”(见图1-40左图),如果用户当前没有训练计划,那么点击它就会进入一个空页面(见图1-40中图),用户点击“查看”按钮可以查看全部的训练课程,自行添加自己想要的课程(见图1-40右图)。我之前一直觉得这种处理方式没有什么不妥,直到我看到了英语流利说APP。在英语流利说APP中,有一个类似的场景,但是处理方式却完全不一样,如图1-41所示。
图1-40 咕咚APP中的空页面
图1-41 英语流利说APP
如果用户没有添加课程,那么课程入口就会直接显示一个“添加课程”按钮。英语流利说APP删除了空页面,我非常赞同这种做法。因为如果只是想告知用户当前没有添加过课程,那么为什么非要通过一整个页面来传达这个信息?这样未免太过奢侈了。一般的空页面由“空状态”和“去添加”组成。“空状态”告诉用户当前没有进行任何操作,“去添加”告诉用户操作路径。“空状态”是非必需的,因为用户看到了“去添加”按钮也能感知到“空状态”。
按照这个思路,在咕咚APP中,如果用户当前没有训练计划,那么在“我的”页中可以给用户展示“发现/添加训练课程”的文案,用户点击后可以直接进入全部课程页。因为在空页面中,无论那个“去添加”按钮做得多好看,它的转化率也不可能达到100%。所以,适当地删减空页面场景,不仅可以减少用户操作步骤,还可以提升转化率,如图1-42所示。
图1-42 引导没有训练计划的用户去直接添加课程
1.5.4 合理的限制
合理的限制可以提升产品的用户体验。为什么我们要限制?因为多,我们才要限制。多会带来哪些坏处呢?内容多,用户处理不过来;选项多,用户会挑花眼;时间多,优惠券没有有效期限制,用户懒得用。在设计圈中有一句俗语:Don't make me think(不要让我想)。其实我更倾向于把think(想)改成choose(选择),因为没有choose哪来的think。所面临的选项越多,用户就越难做出决策。这就好比很多条件非常优秀的人一直是单身,因为挑花了眼。所以,为了避免用户在使用产品过程中陷入“挑花眼”的境地,我们应该考虑去弱化甚至隐藏一些选择场景。
选择场景可以分为两种:殊途同归和分道扬镳。
殊途同归:从A出发,遇到一个岔路口,告诉你现在有3条路可以选,不管选择哪条都会到达B(见图1-43左图)。
图1-43 两种选择场景
分道扬镳:从A出发,遇到一个岔路口,告诉你现在有3条路可以选,选择不同的路会到达不同的目的地B、C、D(见图1-43右图)。
对殊途同归的场景来说,既然无论选择哪条路都能到达同样的目的地,那么说明这个选择场景不是必需的,可以考虑将其隐藏。怎么隐藏?可以提供一个默认路径(状态)。
以实名认证为例,常见的实名认证方法可以是输入姓名及身份证号、上传身份证的正反面照片或者人脸识别。一般的流程是:用户点击实名认证按钮,进入下一个页面,在这个页面中让用户选择验证方式。其实我们可以考虑直接给用户一个默认的认证方式,例如,埋点数据表明,超过90%的用户都选择上传身份证正反面照片这个方式,那么我们可以让用户不用选择,直接进入上传身份证正反面照片的页面。为了防止用户对默认的认证方式不满意,再提供一个选择其他认证方式的超链接,这样的设置对于没有进行二次选择的用户来说等于减少了一个步骤,如图1-44所示。
图1-44 提供默认值,避免不必要的选择场景
其实从上面的例子中我们可以看出,所谓限制用户的选择场景,不是不让用户选择,而是选择后置。不要让用户过早地做出选择,过早地做出选择会有哪些坏处呢?还是以前面的下载歌曲为例,酷狗音乐APP就属于让用户过早地做出选择。后续用户进入的开通会员页和单曲购买页是两个独立的页面,如图1-45所示,用户无法获知另一个页面里的内容,这就造成了信息的不对称性。而做出正确的决策必须要消减信息的不对称性,用户在不知道“音乐包”和“豪华VIP”的权益和费用的情况下,如何知道选择购买单曲是否是最正确的决策?
图1-45 酷狗音乐APP
1.5.5 定制化
“定制化”也可以减少场景转换。所谓“定制化”,就是给用户权限,让他们根据自己的实际需求调整产品的页面布局、内容模块和视觉样式等。例如,我们可以根据自己的喜好更换产品的界面主题,当然这种定制化无法减少用户的操作步骤。在支付宝APP中,用户可以自行添加常用的功能,这样就不需要每次都去相应的模块中找,非常方便,这样的定制化处理减少了用户的操作步骤,如图1-46所示。
图1-46 用户自定义首页功能模块