【交互】利用状态可见性原则测试基金产品的问题(上) 25/36

引言:

在生活中,我们希望“心里有数”,即对于自己身处何处、在做什么事情、前后发生什么等状态有清晰的了解,以便做出准确的判断,从而进行下一步的计划和行为。


同样地,当我们在使用产品时,也希望对于系统状态是“心里有数”的,例如对当前页面所属的板块或流程、操作的成功与否等状态有清晰的了解,以获取信息或者完成某项任务。



1

基本情况

一、尼尔森十大可用性原则

尼尔森十大可用性原则”:是人机交互学博士尼尔森(Jakob Nelson)于1995年发表的可用性设计准则,包括状态可见性原则、环境贴切原则、用户可控原则、一致性原则、防错原则、易取原则、灵活高效原则、优美且简约原则、容错原则和人性化帮助原则。

状态可见性原则是“尼尔森十大可用性原则”中的其中一条。尼尔森十大可用性原则是我们进行产品设计以及产品评估阶段的参考标准特别是在评估阶段,可以通过其来测试产品设计存在的问题,寻找原因和修改方向。


二、状态可见性原则

系统状态可见原则(Visibility of system status):指系统是否时刻让用户了解自己所处的状态、对过去发生、当前目标及未来去向有所了解。


简单来讲,“状态可见”可以理解为我知道基本的状态,包括“我知道我现在在什么页面”、 “我知道我现在要做什么”、“我知道现在的情况”、“我知道前面发生了什么事情”、“我知道下一步要去哪儿”等等。这些都是系统中用户的基本状态需求。


状态不可见通常给用户带来困惑或其他不愉悦的感受,干扰到用户正常操作,甚至造成获取信息失败或者任务中断


三、基本思路

那么我们如何通过状态可见性原则来测试产品问题呢?

首先我们需要了解两条基本思路

1、页面元素/反馈-认知-实际状态

针对某个元素进行判断和测试

(1)有没有:首先判断有没有表达状态的页面元素或者反馈。

(2)对不对:然后看元素表达的内容与形式是否准确。

(如图)判断表达状态是否与实际状态背离;判断状态本身表达是否足够清晰或详细,是否会带来误解。

(3)好不好:判断在状态表达准确的情况下,元素是否足够具体和清晰;表达是否足够充分,结合用户心理预期,帮助提高效率或情绪。


2、任务-流程-环节-步骤

整体的角度,在产品中对于某些页面状态提示进行评估时,结合流程角度进行思考,(如图)完成某项任务的流程可以进行分解,通过整体和分解的角度结合原则来进行产品用户体验的测试。



2

状态可见性原则

的相关元素

一、页面本身的元素

1、标题:告知用户当前所处的页面,是在获取哪一方面的信息,还是在进行哪一项操作。


2、文案内容:通过例如提示语等文字内容直接表达状态。

3、控件样式:通过页面控件的设计样式对状态进行提示。


例子1:登录页面的按钮,灰色按钮呈现不可点击状态,告知用户当前页面/填写内容是“还不能提交”的状态;颜色正常呈现可点击状态,告知用户页面为可提交状态。

例子2:单选和复选的按钮有圆圈和方形打勾的不同设计样式。一是在对于单选或复选的操作行为进行提示;二是在点击之后,也在对用户反馈其操作的成功状态。

单选

复选

4、进度条/加载条(图)/流程图

对于环节较多或环节过渡不自然的流程页面,通常需要流程图的指引。一是告知用户整个流程需要哪些步骤;二是告知用户当前进行到哪一步,以帮助用户有明确的判断和计划。

(1)进度条+数字:

告知用户参与风险测试的当前进度

(2)加载条/加载图:

无进度提示的:告知用户页面正在加载中,需要一些等待时间


有进度提示的:提示当前页面加载的进度,让用户对等待时间有所判断

(3)流程图:

提前告知用户为完成实名认证/开户(任务)需要进行哪些环节,当前处于什么环节,前后是什么操作,对整体操作流程和当前状态有一个清晰的把握。


注意

表达状态的元素实际效果如何,需要结合用户需求、通过用户测试与反馈进行考虑和设计,并非给予用户越多状态提示越好


例如,并不是所有流程或环节都需要提供流程图,多余的设计会干扰到主要信息的获取;也并不是所有加载情况都需要对用户进行提示,在加载时间很短的情况下以有趣的动画让用户“忘记加载”比一直提示用户“还需要多长的等待”这件事情效果更佳。


二、反馈

这里的反馈指的是用户操作后出现的反馈包含但不仅局限于页面自有的设计元素。与状态可见相关的反馈有两种,可以通过反馈的样式和文案来进行判断


“可见”的反馈不仅仅指眼睛可见,还包括例如触觉反馈和声音的听觉反馈。例如我们在手机键盘上打字,敲下字母时可以设置听到按键音效或者感受到手机的震动,这都是给了我们即时的反馈,让我们知道:我确实敲下了某个字母;我打字这件事情是真的在进行。


1、成功反馈,即告知上一步操作是成功的

(1)非弹窗反馈

例1:上面提到的复选按钮,点击之后打勾填充状态(控件样式)就是一种操作成功的反馈,表达“用户已经选择这个选项”的操作成功状态。


(2)弹窗反馈

例2:微信收藏某篇文章之后会出现如下弹窗和文字提示,告知用户收藏任务已经成功完成。

例3:在基金产品中,关注某只基金,通常会出现“关注成功”的反馈弹窗,部分弹窗还会在文案上会结合用户预期,指引其“到我的关注中查看”。

2、错误反馈

即用户操作错误或失败的反馈,最基本的“状态可见”就是告诉用户“你这里错了”


但除此之外,这种情况还需要考虑比较多的因素。结合用户预期,通常在反馈上告知更详细的状态,包括错误的原因是什么,可以怎么纠正错误,正确的做法是什么等等,进行下一步的指引,让用户提前预知。这里也涉及到了十大可用性原则的另外一个原则——容错原则。


如上图的弹窗反馈,表达错误状态(当前),提示原因和做法(下一步状态)


三、案例分析

1、哪些元素在表达页面状态:提示语;蓝字获取验证码按钮;灰色确定按钮;反馈弹窗

2、这些元素分别表达什么状态:提示语-验证码已发送;蓝字获取验证码按钮-按钮可点击,验证码可以获取;灰色确定按钮-目前页面还不能提交,不可进行下一步;反馈弹窗-错误反馈

3、出现问题:验证码是发送了还是没发送?有错误反馈,那这个页面是否有效?

4、总结原因:出现表达状态矛盾/混乱的元素。


分析处理:具体结合表达形式来分析是哪些元素的问题,是形式上的问题还是根本的错误,对此怎么进行修改。



3

小结

利用状态可见性可以对产品用户体验设计进行一些检测,基本思路是判断元素的有无、对错与好坏。


本篇我们提取了状态可见性原则的相关元素,最基本的判断即表达状态的元素是否存在(有无提供了反馈等),下一篇我们将具体分析如何判断表达的对错与好坏。


产品设计-交互专栏阅读:

基金App首页设计探讨(三) | 首页设计样式总结

基金App首页设计探讨(二) | 如何构建首页模块

基金App首页设计探讨(一) | 导航的多种设计可能