1. 六大用户体验要素:有用性、可见性、易感知、易用性、容错性、一致性
2. 有用性:产品是功能的集合,功能的存在意义在于解决用户的痛点,满足用户的需求。
当用户进入一个产品页面时,他会对这个页面中的内容有一个心理预期,这个心理预期就是他的需求,我们要尽量满足。
KANO模型:基本型需求、期望型需求和魅力型需求。
3. 可见性:建立有效的产品导航体系,明确产品的功能路径,让用户找到并使用功能。
信息架构的作用:帮助用户找到期望的功能。
搭建合理的信息架构注意点:平衡好信息架构的广度与深度、注重信息架构的逻辑性。
广度:指页面的长度,尽量保持在1.5屏以内,因为页面超过一屏后,页面的曝光量会急剧下降。
深度:指页面的层级。层级越深,用户的查找路径越长。
平衡好广度和深度,意味着避免出现“宽而浅”和“窄而深”的问题。
逻辑性:信息架构的设计要符合用户的逻辑认知。例如,大多电影院都在商场顶层,用户的心理预期是电影院就应该在顶层。如果你把电影院安排在二楼,这就是不符合逻辑。不要挑战用户的固有认知。
跳转动作、快捷入口均可减少用户的操作路径,降低用户记忆成本。
浮动类入口的优点是吸引用户注意力,缺点是会遮挡界面内容,可能伤害用户体验,让用户随意更改浮窗位置可以避免遮挡内容。
4. 易感知:提升用户对信息的感知效率,让用户在短时间内获取到他们期望的信息或者我们希望他们感知到的信息。
如何实现易感知?信息优先级、缩短路径、信息可视化、化繁为简、隐藏机制
信息优先级:梳理信息优先级,通过合理运用位置、间距、配色、形状和阴影等视觉要素,建立信息层级实现要素区分,让用户快速看到感兴趣或我们希望他们关注的信息。
比如,近几年B站从小众向大众化发展,用户量增加,原先以二次元为主的内容不能满足新用户的需求,需要不断扩展内容类型,这就需要更多不同赛道的创作者添砖加瓦。在改版后,B站在导航栏上添加并着重突出了发布视频的按钮,本意上也是想要引导用户发布视频。
再比如,首页是用户进入产品的必经之路,具有非常大的流量价值,因此通常在首页设置banner也是利用了位置、配色等来加强广告或活动的宣传,让用户看到我们想让他看的,比如支付宝的五福活动占了接近三分之一屏幕的位置,用户想不看到都难。
缩短路径:让用户可以更好地获取信息,我们要缩短信息的获取路径。
比如,在下面的页面中,用户想要查看账户的昨日收益,只需要1个步骤即可完成(点击“我的”),而不需要再点击账户总览,进入下一个页面才能查询昨日收益,这样就降低了用户获取信息的成本。
再比如,对比一下美图秀秀和醒图的选图流程:
美图秀秀的流程是用户点击“美化图片”,跳转到”最近项目“这个相册里,这里直接跳转到“最近相册”,而不是先让用户选择相册,可以理解为用户一般都是在有新照片时才会有修图需求。
但有一些爱拍照的用户,一般都是一次性拍十几张甚至上百张照片,然后在这些照片中选出自己满意的照片,并将其收藏。再打开修图软件在“个人收藏”这个相册中选择已经筛选过的照片进行修图。
对于这类用户,他们在打开美图秀秀的“美化功能”后,还需要再退出当前相册,重新进入“个人收藏”相册。这个过程能不能再优化一下呢?
看看醒图的做法,醒图将相册和照片合并在同一个页面,用户可通过左右滑动页面上方的相册栏更改相册,然后上下滑动选择相册里的照片,对比美图秀秀和醒图的选图流程,醒图不仅缩短了操作路径,而且让用户的拇指始终保持在屏幕的容易区和伸展区。个人认为醒图的选图流程更胜一筹。
信息可视化:字不如表,表不如图”。用户对于具象元素(表格、插画、icon和图像等)的感知能力更强,具象元素也更能传递情绪。
比较常见的是放大镜表示搜索框,信封表示消息。
作者还举了个例子:朋友圈晒图获得的点赞和评论量高于分享歌曲和文章,其中一个原因是信息的可读性,点赞和评论的前提是能明白动态的意思,对于照片,一秒钟就能明白其含义,但对于歌曲和文章,需要花更长的时间来理解,所以评论关于歌曲和文章的朋友圈所需的时间成本太高。
化繁为简:“一个页面,一个任务”原则,更利于用户消化信息。
比如,新用户注册账号时填写基本信息,一般都是一个页面填写一个信息,而不是所有信息都在一个页面内完成,否则用户可能望而却步,发现要填的东西很多而放弃注册。另外,即便是一个页面一个任务,最好也要让用户知道他所处的任务步骤位置,不然用户无法预知还要填多少信息才能完成,也可能因此失去耐心放弃注册。
隐藏机制:某个场景下用户对于特定功能的诉求很低,可以考虑隐藏这个功能。
从用户的行为去判断用户的心理状态可能会带来不一样的收获。例子:在网易云音乐APP中,如果用户点赞一首歌,就会出现一个小动画来引导用户去分享。因为一旦用户点赞了,就说明用户喜欢这首歌,系统就会抓住这个契机来引导用户,此时用户的分享意愿会更高。类似的例子还有B站看视频截图提示分享、小红书点赞提示设置消息提醒。
5. 易用性
操作流程:用户为了达到某个目标所需要经历的操作和场景转换。
优化操作流程、提升易用性两种方式:优化交互方式,减少不必要的场景转换(页面)
减少操作流程:让用户在更少的操作步骤下完成操作,其实就是提升信息的录入和反馈效率。
比如,拍照识别银行卡号,性别录入采用单选框而不是下拉列表。
此外,评估每个操作的重要程度和风险性也可以减少操作步骤。有些操作步骤的冗余是故意防止用户误操作。比如对一些风险较大或不可逆的操作,系统都需要用户二次确认。但是对于一些风险性不是很高的操作,大胆地减少操作步骤更加合适。
交互成本两大类:移动距离、落点范围。包括拇指移动范围、眼球视觉信息处理、页面设计一致性原则。
减少场景转换:如果将页面删除后,不影响当前的操作流程,说明是不必要的场景转换。
合理的限制:不要让用户选择,不要让用户思考。
选择场景两大类:殊途同归和分道扬镳。
殊途同归:从A出发,遇到一个岔路口,告诉你现在有3条路可以选,不管选择哪条都会到达B。
分道扬镳:从A出发,遇到一个岔路口,告诉你现在有3条路可以选,选择不同的路会到达不同的目的地B、C、D
限制用户的选择场景,不是不让用户选择,而是选择后置,不让用户过早地做出选择。最常见的例子就是登录账号,一般有手机号、邮箱、微信、QQ号登录这几种方式,但是一般是默认为手机号登录,用户不想手机号登录再另选其他方式登录,这样的设置对于没有进行二次选择的用户来说等于减少了一个步骤。
定制化:给用户权限,让他们根据自己的实际需求调整产品的页面布局、内容模块和视觉样式等。这样也可减少场景转换。
例如,支付宝用户可以自行添加常用的功能,这样就不需要每次都去相应的模块中找,这样的定制化处理减少了用户的操作步骤。
6. 容错性
容错性三个阶段:引导、报错和解决。首先通过简洁、易懂的引导来帮助用户规避那些错误;当用户不得已犯错之后,会给予提示,告知用户犯错的原因及解决方案。
引导:消减信息的不对称性,让用户做出正确的决策。
常见例子:常见例子:新手引导、输入框中的输入提示。
另外,会影响用户做决策的因素必须要及时反馈给用户。
如果对用户足够了解,在用户录入信息时还可以设置合理的默认值。因为对用户来说,填写信息永远都不是一件有趣的事情,设置合理的默认值可以节省用户的操作时间,更能避免用户犯错。
报错:包括报错方式、报错时机
如何选择合适的报错方式:重要性、字数和指向性。
对于一些非常重要、必须保证用户可以看到的报错信息,最好不要使用Toast。(Toast承载的信息量少,且用户可能禁用Toast)
文字、颜色提示代替弹框提示可以减少用户操作步骤。
解决:报错文案要简洁、干练、概括性强。
如果可以给出具体的解决方案,报错原因其实并没有那么重要。比如,由于系统维护导致从晚上22点到次日8点无法提供服务,则可以直接简化成“系统维护中,今晚22点至次日8点暂停服务”。用户不在乎具体是什么原因,他们在乎的是什么时候可以恢复服务。
7. 一致性
实现一致性原则两阶段:发现共有要素,将共有元素植入产品设计中。
追求一致性要适度,过度追求一致性就会损害易用性。