从零开始学交互

浅谈用户体验设计

0
登录或者登记去做吧。

这是一本交互入门书(主要偏向Web端,涉及到一部分移动端),如果你感兴趣就看看下面的内容,觉得有用的话,也去看看原书的内容。

这本书看了其实很久了,笔记也是当时记得,不过最近正好看到好朋友@elainezhu 也出了这本书的笔记,所以我借鉴了当中的一小部分,再结合自己的,重新整理了一遍我的笔记。这样不仅能记住书的主要内容,还能在运用的过程中变成自己的。你看完心里感激我就行了,不用做太多其他操作(如果你好意思的话)。

1.可用性第一定律:别让用户思考

关于可用性的定义:

有用:能否帮助人们完成一些必需的事情?(你是不是想问什么是必需的事?问问你的右手)

可学习:人们能否明白如何使用它?

可记忆:人们每次使用的时候,是否都需要重新学习?

有效:它们能完成任务吗?

高效:它们是否只需花费适当的时间和努力就能完成任务?

合乎期望:是人们想要的吗?

令人愉悦:人们使用的时候觉得有意思甚至很好玩么?

可用性第一定律:别让用户思考

1.别让用户思考 > 保持一致 > 重要的内容要放在两次点击之内 > 采用用户语言;

2.用户在使用产品时,对名词有疑问、按钮不明确,都会影响使用,会犹豫;

原则:如果做不到让一个页面不言而喻,那么至少应该让它自我解释;

1.不用用户思考的页面是不言而喻的,如果遇到复杂页面,无法做到不言而喻时,至少也要让它自我解释。

通过页面元素的外观(如尺寸、颜色以及布局),精心选择的命名等,创造出接近不言而喻的效果——就是尽量做到自我解释;

2.即不能让用户对功能进行纠结,或是使用户找不到正确的功能位置;

在用户使用产品时产生的每一个问号,都会加重用户的认知负担,把用户的注意力从完成任务上拉开,也许干扰很轻微,可一旦累积起来,就会使用户产生压力;

(我举个生动的例子给你,你上厕所的时候,结果停水,没事,水槽里还有一点够冲了,上完厕所准备擦**,竟然特么还没纸,这会你想不想爆发?)

3.为什么要创建不言而喻的页面?

因为大多数人会花上比我们想象中少得多的时间来浏览我们设计的网页。

(就像你上淘宝,那种封面做的很烂的,你会买么?好的体验就跟好看的东西是一个道理)

如下:

1.用户在使用产品时,经常会对操作的对象产生疑问;比如弹框的选择,页面的布局,都会让用户不知道怎么操作,从而导致用户体验非常差(不信自己去试试,如果没感觉,就一直试到感觉很差为止,这样就对了)。

2064cab7c148cdb2ee2e460ae9100a00

向用户解释输入框的条件,不要让用户猜忌;使页面进行自我解释。

2.关于用户是如何使用产品的两个点

用户思维:满意策略

1.用户不会去细读所有内容,而是选择第一个看到的感兴趣的部分,其余的就放弃了;
这取决于用户的时间以及事件的重要程度,用户不喜欢深入研究,只要能正常使用就行。

用户不是追根究底,而是勉强应付

1.这个产品的其他功能对用户来说并不重要,他不会花费太多时间去研究新产品,只是找到自己能用的,并一直用下去;

如下:
用户在使用支付宝的功能时,不可能对所有功能都进行浏览并去了解;有一个能完成自己目的的功能,用户就满足了。

de4e6a17edf08339fbf812d1c908409b

3.学会运用设计习惯法则

大胆尝试习惯用法的运用

1.如果你准备创新,而没有更好的创新想法,就尽量保留用户的习惯用法,慢慢再去替换;
2.同时在设计页面时,不要打破一致性,除非能让页面更简洁;

如下:
支付宝网页端的优化,为了保留用户的操作习惯,只是优化了首页的UI,并没有对功能流程页面进行更改;

02af64e8074fa43de1bc3bde52b8e543

建立有效的视觉层次

1.有效的视觉层次可以对页面的内容进行组织且区分优先级,降低用户的使用压力;
2.突出重要部分,整合相同层级内容;
3.对同一层级的内容要做相同效果处理;
4.明显区分不同层级内容;

如下:
上面明显是卡信息,下面部分是用户信息,间距也是一种处理层级的方式。

95391f3e7f9877b6713cb5d4bc2a21b7

4.帮助用户去做选择

让用户做选择时,不必去思考

1.在用户需要做选择时,不要让其进行思考,只需要提供简明的信息提供帮助即可;
当用户对页面产生“我该如何进行选择”的想法时,就会对产品望而却步。

如下:
需要用户提供反馈或信息时,不是让用户去输入,而是去选择;
一来用户输入的信息不一定准确;
二来选择可以让用户更好的总结;

06ecbf5a4f0080deb8b613678362f533

5.怎么设计产品的提示

简化文案,让用户看得更轻松

1.在设计页面的过程中,尽量消减多余的文字,可避免用户产生疲倦感;
2.简明的信息更能让用户从中发现自己想要关注的点。

及时,要在用户需要的时候出现

如下:
如登录/注册时的实时校验,都要及时让用户知道并方便用户修改;

设置合理的格式,保证一定要让用户注意到。

b8bd62b409754c0362ea2523e5277c1a

6.导航设计

导航法则:明确、简单、一致

1.每个页面都必须呈现和导航保持一致的页面名称;

导航的两个主要用途:帮助我们找到想要的任何东西和告诉我们现在身在何处;

1.在网页页面中必须呈现出回到首页的站点ID;
复杂的页面要带有“面包屑”或标签等功能,提醒用户身在何处;面包屑对于大型网站来说,还是非常必要的;
如下:
点击站点ID知乎,就会回到首页;

6d7e081d1bfa1a653c1ff292c0b0c1cc

淘宝的面包屑功能做的还是相对不错的,可根据用户的意愿来选择页面,同时用户还可以对其进行取消;

80dbb94586d30babb5339d65bff82965

用户使用网站的两件事:浏览和搜索,尽管不同网站侧重不同,但最好同时呈现给用户

如下:
新闻一般主要查看实时的消息,看过就过了,但是腾讯依然给出搜索框,让用户去搜索之前的新闻;

029499a4adb8eeb7f68258530b8d6de9

(干嘛!我就要用移动端的怎么样!)

7.主页的重要性

主页在最初的几秒会让用户决定是否去使用这个产品

1.对于展示在首页的信息,必须明确且简洁;
2.简单来说就是,当用户看到首页,就该清楚这个产品的核心是什么。
2.1 这是什么网站?
2.2 网站上有些什么?
2.3 我能在这里做什么?
2.4 为什么我要在这个网站,而不是别的?

8.听听别人的看法

不要无谓的跟其他职位的人员争执,从体验触发

1.每个人都有自己的信仰,不要试图去说服别人接受产品功能;而要用数据说话。

9.可用性测试

测试流程:
简单介绍测试如何进行(约4分钟)
了解测试者,比如他们是不是计算机高手,有没有玩过类似网站(约2分钟)
主页观光,观察用户在主页看到了什么,如何操作(约3分钟)
任务测试,这是测试的核心部分,让测试者执行一些列任务,并观察他们遇到的问题(约35分钟)

可用性测试可以发现产品的弊端

1.每个月都应该对产品做一次可用性测试;
2.可用性测试不需要特定的人,任何人都可以,并且要有人进行观察;
3.测试的目的不是在于寻找所有的问题,而是找出最重要的BUG,并进行修复,因为迭代周期很短;

和团队进行评审会议,决定优先修复的BUG

1.在问题列表中选择10个最严重的问题(这里的严重视情况而定,可能是影响用户使用的,也可能是小问题);
2.对这10个问题进行优先排序;
3.多用删除发,少用加法;
4.不要太注重用户对新功能的需求;

10.移动设备的到来

产品应该加入快乐

管理屏幕空间的挑战不应该以牺牲可用性为代价;
提醒等信息,该出现的时候一定要明确;
产品应该让用户产生可用性记忆,让他们能接受产品。

11.可用性的价值

尊重用户,考虑到产品的各个因素对用户产生的影响

1.不要对用户隐藏信息,会让用户感到失望;
2.想要提高用户好感,就必须减少操作步骤,并且提供协助,能更让用户感觉到安全感。
3.不要因为用户的操作没有按照产品设置的方式而惩罚用户;
4.网站看着要专业,才能抓住用户的眼球;
5.不要询问太多用户的私人信息;

提高用户好感的几种方式

1.告诉用户他想知道的信息;
2.尽量减少步骤;
3.为用户提供协助,如在线客服等;

12.可访问性

提高产品的可访问性

在原有基础上,提高产品的可访问性,可以让用户更好的体验产品;
每一次迭代,都要优化原有产品的功能,这样才能让用户喜欢上产品。

(我知道这里有人肯定想问怎么优化!嘿嘿,不告诉你!)

13.设计正确的产品

所谓的用户体验,就是考虑用户的需求来设计出正确的产品

不要谈论说给用户带来什么好处,而是了解当前公司内部的难题,并去解决;
不要为了试图去操控用户,而设计一个“觉得”产品是“用户想要的”东西。

克制的力量
Microsoft将向合作伙伴开放 Windows Holographic,官方放出的宣传片