UCD设计:以用户为中心的产品设计(二)

释放双眼,带上耳机,听听看~!

为什么用户体验很重要?之所以现在的互联网越来越强调以用户为中心的产品设计,是因为市场激烈,产品同质化越来越严重,并且产品的用户获取成本也越来越高。在一个高速发展、变化迅速的市场下,很难有第二次机会去接触用户。所以当你的用户因为产品的用户体验而造成流失,并且习惯了竞品的话,就很难再回来……

UCD设计:以用户为中心的产品设计(二)

交互设计中的一些重要原则

在做产品的交互设计时应遵循一些基本的准则,我们平常聊到比较多的理论有像菲茨法则(Fitts’ Law)、 席克定律(Hick’s Law )、尼尔森(Jakob Nielsen)提出的【十大可用性原则】等等……得益于这些方法论,如今的互联网产品的交互设计也越来越人性化。

这里总结梳理了一些重要的基本原则:

1、一致性原则

一致性原则,是指包括视觉和交互的一致。无论是视觉风格、组件样式还是图形文字等都应做到统一。保持交互样式的一致,能让用户在使用过程中有一种掌控感,降低用户的认知和学习的成本。

布局结构/组件的一致性:保持页面结构布局及相关组件的一致性,有助于适应用户的使用习惯。以企业微信和钉钉的【工作台】页面为例,企业微信的各项功能入口都统一使用了“九宫格”的这种image lists的形式,界面布局清爽直接。而相较之下钉钉工作台就显杂乱了一些,钉钉的工作台里使用了多种元素。布局中也用到了banner、lists item这些组件,并且不同类型的功能icon,尺寸和样式也有差异。复杂的布就导致了用户学习成本的增加。

UCD设计:以用户为中心的产品设计(二)

(企业微信工作台)

UCD设计:以用户为中心的产品设计(二)

(钉钉工作台)

页面布局尽量保持一种类似的结构,使页面组织简洁有层次感。复杂的结构变化会让用户思考,规则的排列顺序能减轻用户的思考负担。

操作的一致性:操作的一致性是指用户在界面上的操作及收到的反馈,符合交互操作的一些基本统一规范。以下图的图片详情页为例:左右滑动图片可进行切换;双指拉动,可以缩放图片……不要另辟蹊径,通过一些不常用的手势来实现交互,一些基本的操作,要符合大众的一致性。即基本操作的交互反馈,应该符合交互统一规范,符合用户已养成的操作习惯。

UCD设计:以用户为中心的产品设计(二)

(对图片的操作,符合操作统一的规范)

样式的一致性:样式的一致性,就包括了界面组件的风格、色彩色调、文字的一致性。举个简单的例子:

同一个组件你不能在你的APP中,在某一个页面是Ios Interface Design的设计风格,另一个页面又变成了MaterialDesign的设计风格;

APP的主色调是蓝色,不同的页面又换成了其他色系。

……

样式和视觉的一致性,会让使用者更觉得舒服。

UCD设计:以用户为中心的产品设计(二)

(京东的主题色系以红色系为基准)

UCD设计:以用户为中心的产品设计(二)

(各个层级页面的标签、文字样式都同样基于主题色)

2、主次原则

“什么都突出,等于什么都不突出”

在我们的应用中,页面、入口等一定要有层级,而且要根据用户的使用习惯、调用频次有层级的主次之分。

在页面内容比较多,可放空间比较少的情况下,主要的内容优先显示,次要的内容搁置在更深层级的页面中。

以Apple Music的播放器为例,为了让页面简洁,层次清晰,播放器页只保留了基本的【播放模式】、【歌词】、【更多】的一级入口。而像歌手信息、专辑信息、歌单操作、音质选择等等,通过点击一级入口【更多】,在下拉显示的二级菜单中来统一显示。通过主次划分,让界面更清爽。

UCD设计:以用户为中心的产品设计(二)

UCD设计:以用户为中心的产品设计(二)

(不同的功能入口,按主次层级分级显示)

3、防错原则

防错原则的定义是:通过系统的设计、重组或特别安排,防止用户出错。即在我们的重要、关键的操作/交互中,尽可能的设置一些防错机制,以帮助用户减少犯错。

举一个简单的例子,在web或APP中凡是有表单数据提交的地方,我们一般都会对用户填写的表单数据进行前端的JS 正则校验。通过正则验证,来保证用户提交到服务器数据的完整性、正确性。

UCD设计:以用户为中心的产品设计(二)

(在App登陆注册场景,当手机号正则不匹配,发送button是禁用状态,用户不能执行表单提交操作)

通过设置防错的机制,在用户操作动作发生之前,提醒或防止用户混淆和做出错误的操作。

UCD设计:以用户为中心的产品设计(二)

(微信群中陌生人加入安全提醒)

4、希克定律

一个人面临的选择越多,所需要作出决定的时间就越长。同样的,在人机交互中界面中选项越多,意味着用户做出决定的时间越长。因此在这类交互场景下,要提高用户的引导性。

比如在菜单栏的设计过程中,对选项进行同类分组和多层级布局,这样用户事件操作所用时间会更短、使用效率会更高。通过关联归类,让菜单层次清晰,来提高引导性,帮助用户快速定位。

UCD设计:以用户为中心的产品设计(二)

(电商导航菜单中加入多层级菜单聚类分布)

5、直接原则

在人机交互界面中,菜单、页面的多层级意味着入口的变深,但我们可以通过一些组件、规则来满足用户快速操作的需求。让用户在用户当前所在的位置可以直接去操作,而不用去跳转链接、多层级加载页面,从而直接向反馈用户结果。

UCD设计:以用户为中心的产品设计(二)

(通过3D touch组件,可直接跳转收付款等页面,减少用户层级跳转的操作)

UCD设计:以用户为中心的产品设计(二)

(爱奇艺影视列表中,当鼠标hover在影视卡片上时,影视卡片会自动播放该影视的宣传短片并显示影视的类型、主演、故事概要等基本信息)

6、少做原则

类似于直接原则,即在人机交互过程中,让用户选择大于让用户输入,尽可能的减少用户的操作负担。通过揣摩用户的心理预期,尽量地成让用户做选择,而不是更主观的去做操作。

一个例子是搜索引擎,比较常用的策略是在搜索页面上会展示用户的搜索记录或根据用户输入的关键字进行匹配,帮助用户快速查询。

UCD设计:以用户为中心的产品设计(二)

(展示搜索历史)

UCD设计:以用户为中心的产品设计(二)

(关键字匹配)

再比如滴滴的一键打车功能,通过对用户的出行记录、常去目的地进行分析,提供打车的快捷入口,简化了用户的约车流程,使用户的使用更高效。

UCD设计:以用户为中心的产品设计(二)

(滴滴根据用户习惯提供的一键打车功能)

7、反馈原则(状态可见原则)

产品想要做到人性化,一个基本要求就是要对用户在人机交互中的每一步操作进行及时的反馈(响应),让用户知道目前的状态,减少疑虑。

产品界面中通过合适的反馈(如弹窗、toast提示、动画、状态标签颜色变化等),让用户时刻清楚当前发生了什么事情。也就是快速的让用户在交互中了解自己处于何种状态、对数据未来去向有所了解。成功就进行成功的提示,失败了就告知失败。总之一定要让用户知道系统运行良好稳定,做到适时明确的反馈,营造和谐的人机对话环境。

UCD设计:以用户为中心的产品设计(二)

(对用户人机交互给予清晰的结果反馈)

UCD设计:以用户为中心的产品设计(二)

(web页面,根据用户的鼠标当前的操作事件,反馈一定交互效果向用户显示当前所处的状态)

8、减少等待原则

上面说到要及时向用户反馈人机交互的结果,如果在等待状态怎么办?

减少等待,才能帮我们留住用户。

许多研究都表明,用户能够忍受的最长等待时间的中位数在 6~8 秒之间。这就是说,8 秒是一个临界值,如果你的页面打开速度、操作响应等待在 8 秒以上,都会增加用户的焦躁情绪,甚至因此而导致用户放弃产品。

一个思路是在产品中的相关业务逻辑尽可能通过异步的方式实现,让用户在结果响应之前可以做额外其他的事情。比如用户在微博点击【上传视频】后直接跳转首页,可以马上转而做其他操作。通过这种异步的形式,可以在设置一些人机交互的小组件让用户实时知道事件进展,或只需在结束这个事件后告知用户结果即可。

UCD设计:以用户为中心的产品设计(二)

(微博用户在选择上传短视频后,可以并行进行其他的操作)

另外一个思路是让用户在等待中转移注意力。比如在等待状态下通过动画、进度条来展示实时情况,而不是通过直白的文字来显示。

UCD设计:以用户为中心的产品设计(二)

(通过有趣的动画,让用户在枯燥的等待过程中产生惊喜感)

9、引导性原则

没有用户会喜欢阅读使用说明书

用户只会越来越懒,没有用户愿意为了使用一个产品而去阅读使用说明。因此我们的产品一定要减少用户的学习成本,并且增强用户的使用引导性。

增强引导性,举个简单的示例说明:在移动应用中,当用户首次安装或应用更新新增了功能、页面布局发生了变化时……通过【遮罩】这种小组件来向用户展示新的内容。相较于使用说明文档、视频,可交互的、直观的引导说明,能让用户更快地熟悉产品。

UCD设计:以用户为中心的产品设计(二)

(通过【遮罩】展示应用新内容)

10、纯粹原则

产品的使用属性永远第一位

在做交互设计中,还有很重要的一点是要纯粹。交互设计要遵循用户的需求,不要为了设计而设计,要为使用而设计。

雨伞是用来遮雨的,但如果为了美观将雨伞设计成镂空、加上蕾丝……那它就只能用来遮阳,失去了遮雨的本质初衷。交互设计也一样的,如果脱离了产品功能、产品业务,再有创意的设计只会让人觉得华而不实。所以在做交互设计时不要忘了纯粹的准则,人机交互的本质还是需要回归产品和用户本身。

总结

以上就是我们平时在做产品设计时需要时刻考虑到交互规范。

好的交互是一种在人机操作、信息流动过程中很自然、舒服的掌控感(sense)。

而这种设计能力需要自己在各类产品的不断体验中来得到锻炼和提升,这也就是为什么很多大厂在招聘PM中总会提问:你的手机中装了多少应用。

同时,我们也必须要积极地去关注行业的设计趋势和理念。像今年的WWDC2020,以前我们谈到苹果的设计理念,就会想到扁平、极简。而从即将推出的 IOS 14 和 macOS Big Sur 上我们可以看到,苹果也在尝试变革。在一些地方的设计中加入了阴影、纹理的元素,也在更多地向展示视觉物理层级感做尝试…

努力去培养自己的那种 sense 掌控感吧,与君共勉!

相关阅读:

UCD设计:以用户为中心的产品设计(一)

给TA买糖
共{{data.count}}人
人已赞赏
产品设计

短视频时代,H5被彻底抛弃了?

2020-7-31 20:54:27

产品设计

PC客户端设计,产品经理需要知道的那些点

2020-8-2 9:26:57

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索