第二讲在线视频

我们先看一个例子

这个是荷兰博物馆主页的界面

看起来非常简洁

实际上呢它的内容是相当丰富的

我们在浏览时很容易发现

信息组织的规律

想找的内容呢也很容易找到

除了视觉设计

它的信息结构和交互设计

也是相当出色的

那在上一节课中我们讲到

信息结构要考虑情景 内容和用户

在操作层面上

借助任务分析这个工具

可以帮助我们将前面的分析

转换为人机之间的交互任务

任务分析的目的呢

是思考特定的交互模式下

怎么样将用户的意图

转换为合理有效的人机对话过程

这句话说起来有些拗口

我们还是举例来说吧

咱们回到刚才这个

荷兰博物馆的设计案例

访问网站的主要用户呢

可以粗略的分为两类

一类是想去看展览的

还有一类是随便去看看的

那么想去看展览的用户当中呢

有一类是想直接订票的

还有一类

是想先看一看展览信息

再决定是否订票

当然这个用户的意愿

还可以分的更细

比如说订票的时候

我们还想同时看到票价

和交通信息等等

那我们把对用户意图的这种分析呢

可以画成这样的图表

可以看到

这个里面呢画了7种

分解了的用户意图

我们通过进一步的分析

还可以把这些意图归归类

分分主次

梳理出界面需要提供给用户

哪些交互任务

给它们起一个容易理解的名字

比如说要满足直接订票的用户呢

我们可以设计一个订票任务

对想看内容的用户

设计一个参观访问的任务

那么其它可以让用户执行的任务呢

包括交通信息 看评价等等

我们在对每个任务的完成过程呢

逐个进行输入和输出过程的设计

比如说用户点击订票以后

系统应该出现什么反馈等等

那这个分析过程

就是任务分析的方法

Don Norman呢把人和外部世界的交流

解释成左图所示的这种过程

我们来解释一下

在人们采取行动之前呢

会先有一个目标

比如说我想去参观博物馆

那接下来呢

就会形成比目标更具体的意图

比如说我想先去订票

那么这个就是意图

那么为了完成这个订票这个意图呢

我们还要采取更具体的订票的行动

那这个订票行动呢

还包括了一系列的有顺序的动作

比如说先问一下一张票多少钱

在得知有团购优惠的时候呢

还有可能打电话问一问

亲朋好友谁会跟我一块去

那么这样可以一起订票享受优惠

那么在接下来呢会选择

是电话订票呢还是网络订票等等

那么执行这些具体的动作时候呢

还要时时的判断感知动作执行的结果

形成自己对结果的解释

比如说订票成功了没有啊

如果成功了

就完成了一个订票行动的闭环

接下来呢在开始第二个动作意图

比如说查看交通信息

坐车去博物馆等等

以此类推

一直到完成参观博物馆的目标为止

那在这个例子中

参观博物馆这个目标呢

需要形成多个意图

执行若干项具体的动作才能完成

人机互动和人们与真实世界的互动

是相似的

这个过程可以被转化为右面这个图

我们还是以参观博物馆这个目标为例

比如说用户还是要先订票

那么我们可以把订票这个意图

转换为界面上的可选任务

用户在界面上的订票过程呢

可以被设计成一系列具体的操作

比如说点击订票按钮

系统识别到用户点击的操作以后

马上提供反馈的结果

比如说输出一个订票的可视化界面

这个界面被用户看到以后呢

会产生相应的解释

比如我的这个操作对不对

下一步我应该点什么

购票的数量和价格对不对等等

直到完成订票任务的闭环

不知道通过这两个图的对比

你对任务分析是不是有了一定的认识呢

由于界面呢需要和用户发生交互

我们不仅要规划静态的信息结构

还要对输入和输出的动态过程

进行规划和设计

用户的每一步操作

会带来什么样的结果

怎样返回上一级的信息

怎样回到首页等等

任务分析呢是一种工具和方法

它可以帮助设计师关注用户的目标

并且以用户目标为导向

设计合理的交互方式

任务分析的时候呢

需要分析完成不同任务

需要的所有动作和流程

对人和机器的行为呢进行划分

规划出人做什么机器做什么

比如说右图所示的这个图表

在这张图表中呢

显示了对现有ATM机取款任务的规划

这个表格第一栏呢用户意图就是取现

中间呢是人需要进行的操作

最右侧呢是ATM机需要执行的任务

这个图表显示了怎样将用户的意图

转化为操作任务

用户的第一个任务序列呢

是插卡和输入密码

第二个序列是选择取款任务

并且确认

第三个任务是选择金额并且确认

和用户任务相对应的呢

是系统需要负责的任务

比如说在用户插卡以后

就要反馈系统读卡的状态

提示下一步的操作等等

对取款过程更具体的设计呢

还可以用这样一个流程图来表示

那么这类图呢

可以表现用户完成一项操作或一项任务

需要经历哪几个步骤

有哪些逻辑判断

一般我们用矩形框加文字说明

来表示一个操作步骤

那用菱形来表示一个逻辑判断

或者需要用户做出的选择

我们来讲一下这个图表呢

首先它是按照

用户执行操作的流程来设计的

根据这个交互设计我们可以看到

为了取款

用户需要阅读欢迎界面

并且在界面的提示下先插入IC卡

这是一次用户输入

同时呢我们可以设想

每一次的用户输入

ATM机都应该有引导和反馈

左侧呢我们列出了每一次用户操作的时候

ATM机屏幕需要出现的引导信息

接下来屏幕会出现一个

要求输入密码的提示和输入框

引导用户输入密码

用户输入密码后系统核对信息

这个时候呢屏幕上出现了

正在核对信息的提示

如果输入错误会返回到前面一步

如果输入正确

屏幕就会出现用户可以操作的选项

包括取款查询缴费退出等

用户选择取款

屏幕出现输入金额的提示

用户输入金额后

系统出现确认的按钮

要求用户确认

确认后系统吐出钞票

并提示用户退卡或者继续

这两种图表呢都是任务分析的结果

左侧的图呢

关注的是从产生意图

到实现意图的人机任务的分配

右侧的这个图表呢

关注的是实现某个意图

需要完成的具体动作和逻辑判断

我们把右边这种图表也叫做流程图

通过流程图

我们既可以理解交互过程是怎样的

还可以在几个不同方案中进行比较

选择更快捷更方便的方案

比如说这两张图表进行比较呢

可以看出哪些不同呢

第一张取款的流程

比第二张多了一个步骤

仔细看呢原来第二张图的取款流程

采用了指纹识别代替密码输入这个步骤

尽管取款只节省了一步

但是使用者还是会感觉到更快捷

你可能会质疑

这不过就少了一步吗

能有多大改进呢

你还别不信

咱们对比一下iPhone的指纹解锁屏幕

和密码解锁屏幕

这两种操作你更愿意选哪一种呢

当然是指纹解锁

因为手指一按就解锁了

相比之下呢输入密码再解锁

就显得麻烦多了

一般来说

完成一个用户意图

需要的交互步骤越少

给用户带来的体验就越好

这是流程图的另外一种形式

它列出了ATM机可以完成的所有任务

任务分析还有很多其他的方法

比如说右侧的这个列表

反映出了任务执行的层级结构

执行的顺序和所属的关系

比如哪些是平行的可选任务

哪些是平行任务的子任务

哪些是顺序执行的任务等等

不同的任务分析方法

可以体现不同的任务逻辑关系

例如这是另外一种任务分析图

它适合表达多个用户之间

怎么样进行协同的任务

这个图是点餐的流程

顾客提交食物订单以后

系统会同时把信息

告知服务生和厨师

厨师接到信息开始加工食物

同时呢服务生会把食物

及时送到顾客的那里

那么这个任务分析的图示方法呢有很多

我们这里只是介绍了其中的一小部分

如果感兴趣

可以选择有针对性地进行学习