移动APP用户体验
4. 一致性与规范性原则(Consistency and standards)
5. 防错原则(Error prevention)
6. 易取原则(Recognition rather than recall) 7. 灵活高效原则(Flexibility and efficiency of use) 8. 优美且简约原则(Aesthetic and minimalist design) 9. 容错原则(Help users recognize, diagnose, and recover from errors) 10. 人性化帮助原则(Help and documentation)
移动APP用户体验
交互&操作体验评估维度
尼尔森十大交互设计原则
1. 状态可见原则(Visibility of system status )
2. 环境贴切原则(Match between system and the real world)
3. 用户可控原则(User control and freedom)
27
案例二:容错原则
例如Twitter注册页面的错误提示:用户在注册Twitter账号时,第一步要输入名字和手机号码,当用户输入正确的时候, 输入框后边会有绿色的对勾圆圈,提示用户输入正确,可以进入下一步操作了,而当用户输入错误的时候,输入框会变 为红色并且在下方出现红色字的错误提示,这样让用户很清楚的知道用户输入错误以及错误的原因,这样用户就知道怎 么修改了,这也是容错原则的一种体现。如下图:
15
五、防错原则(Error prevention)
比一个优秀的错误提醒弹窗更好的设计方式,是在这个错误发生之前就避免它。可以帮助用户排除一些容易出错的情况, 或在用户提交之前给他一个确认的选项。在此,特别要注意在用户操作具有毁灭性效果时,防止用户犯不可挽回的错误。
16
案例一:防错原则
比如知乎的登录操作:当用户在知乎中登录时,在没有填写完手机号码和密码前,底部的登录按钮是置灰不可点击的, 只有两项都填写完整底部的登录按钮才会变为可点击状态,也就会蓝色的,这就是为了防止用户犯更多错误,也是防错 原则的一种体现,如下图:
每个产品针对的用户不可能是全部所有的用户,都是有一定的设计定位的,针对主要的用户去设计,而不能仅仅为了一 小部分用户进行极端设计,尽量满足大部分用户的需求是最重要的原则。
22
案例一:灵活高效原则
比如支付宝首页的应用,用户可以根据自己的个人兴趣定制自己适合的应用排列方式,这就叫做用户定制常用功能,也就 是灵活高效原则的一种体现,如下图:
28
十、人性化帮助原则(Help and documentation)
帮助性提示最好的方式是:1、无需提示;2、一次性提示;3、常驻提示;4;帮助文档。
29
案例一:人性化帮助原则
APP的新手提示。
30
视觉体验评估维度
保持色彩平衡32性能体验评估Fra bibliotek度性能体验
产品稳定性
23
八、优美且简约原则(Aesthetic and minimalist design)
页面中的内容应该弱化或去除不相关的信息或几乎不需要的信息。任何不相关的信息都会让原本重要的信息更难被用户察 觉。
24
案例一:优美且简约原则
不同于大多数app,滴滴出行采用了抽屉式导航。这种导航方式一般应用于“只有一个最核心高频功能,其他功能都为辅 助”APP。抽屉式导航可以更好地突出核心功能,使APP简洁又不失重点。
17
案例二:防错原则
比如微信发朋友圈动态时,点击返回按钮出现的提示弹窗。用户可能因为误操作退出当前状态的时候,使用弹窗是个不 错的选择,这就是防错原则的另外一种体现,如下图:
18
六、易取原则(Recognition rather than recall)
尽量减少用户对操作目标的记忆负荷,动作和选项都应该是可见的。用户不必记住一个页面到另一个页面的信息。系统 的使用说明应该是可见的或者是容易获取的。
5
案例二:状态可见原则
如当用户点击关注按钮之后,页面中间会出现一个“成功关注”的提示;类似这样操作之后的提示也是状态可见原则的一 种。
6
二、环境贴切原则(Match between system and the real world)
软件系统应该使用用户熟悉的语言、文字、语句,或者其他用户熟悉的概念,而非系统语言。软件中的信息应该尽量贴 近真实世界,让信息更自然,逻辑上也更容易被用户理解。
3
一、状态可见原则(Visibility of system status )
系统应该及时且明确地让用户了解自己处于何种状态、对过去发生、当前目标、以及对未来去向有所了解,一般的方法是 在合适的时间给用户适当的反馈,缓解用户等待时的焦急感。
4
案例一:状态可见原则
头条页面的刷新功能使用的是下拉刷新的交互方式。当用户下拉页面时,页面状态栏跟内容区中间会出现“新年快乐”的 提示,当松开页面中间会出现“推荐中”的动态提示,加载完毕之后中间出现一条“今日头条推荐引擎有8条更新”的文 字提示;这一系列的提示就是我们所说的动态可见原则,如下图:
25
九、容错原则(Help users recognize, diagnose, and recover from errors)
错误信息应该使用简洁的文字(不要将系统或后台记录的错误代码或专业性描述等直接抛给用户),帮助用户去发现、 判断错误,并且提供解决错误的方法。
26
案例一:容错原则
用户在网易163电脑端注册邮箱时,在输入出错时不但会出现错误的提示,还会给出相应的建议,帮助用户进行正确的 抉择,这样就避免用户出现更大的失误并且提高了注册的效率,这也是容错原则的一种体现,如下图:
14
常见错误:一致性与规范性原则
间距与边距
文字与数字
线的运用
页面边距间距合理,且具有统一性。常见 错误包括间距乱用,致使页面看起来杂乱
无序。
文字的大小应有统一的设计规范,常见的 错误包括字号乱用。数字展示符合常识, 一般不能出现展示小数点后三位的情况。
线属于版式设计的一部分,分为贯穿式和 内嵌式,常见的错误主要是贯穿式乱用。
产品使用过程中是否稳定,有无崩溃、报错等情况发生。
页面流畅度
产品页面响应时间在合理范围内,页面打开顺畅,无延迟感。
Thanks
用户体验为公司创造价值
12
案例二:用户可控原则
在谷歌相册中删除一张照片的时候,它会在底部出现一条提示框,框内后边就会出现撤销的提示,这也是用户可控原则 的体现,如下图:
13
四、一致性与规范性原则(Consistency and standards)
产品设计风格、设计元素含义保持一致。一致性原则是比较重要也是比较基础的原则,其实在平时的设计中,见到最多的 就是UI设计里的一致性原则。
9
案例三:环境贴切原则
传音手机
大功率手电筒 扬声器
头戴式耳机 四卡四待 大功率电池 非洲版美颜
10
三、用户可控原则(User control and freedom)
用户常常会误触到某些功能,我们应该让用户可以方便的退出。
11
案例一:用户可控原则
很多用户发送一条消息、总会有他忽然意识到自己不对的地方需要撤回。比如微信聊天中的撤回功能,可以避免一时没 想好而错发消息,这就是用户可控原则,具体看下图:
19
案例一:易取原则
蚂蚁借呗清晰地展示了还款时间、每次还款本金、利息、总额,清楚直观。某银行只展示了月利率和年利率,需要用户 自己计算贷款成本。
蚂蚁借呗
某银行白领通
20
案例二:易取原则
Android手机复制验证码的功能降低记忆成本。
21
七、灵活高效原则(Flexibility and efficiency of use)
7
案例一:环境贴切原则
我们手机中的计算器软件设计界面基本上跟我们现实中使用的计算器的样式差不多,这样设计能让用户很快上手,易于 操作,这就是环境贴切原则。
8
案例二:环境贴切原则
微博的中文版和国际版的logo和内部页面风格、语言、结构布局包括交互方式都不一样。国际版不仅在语言方面做了 调整,在页面布局设计方面都针对外国人使用习惯做了改变。这就是环境贴切原则,具体看下图: