人脑与机器的交往 怎做互动设计

（图／取自网路)

浏览网站已是现代生活中普遍的行为，让人们「看得爽快、用得愉快」是设计师当仁不让的责任。出色的互动设计是留住使用者的不二法门，但是，该怎么把人与机器之间的互动，变得跟人与人之间的互动一般自然，并不是简单的课题，答案也不是非黑即白。

1. 目标导向的设计

也许你不太懂使用者研究，但还是得学会如何在设计中注入关于使用者观察的洞见。利用以下这两种技巧帮助你加强同理心：

塑造人格：人格是从观察目标使用者的行为与心理，所创造的虚构角色。思考「像是週期性的购物者，会怎么进行结帐流程？」这类问题有助于进行重要的设计决策。

假想使用情境：使用者情境与「人格」有关，它解释了人格怎么使用网站。比方说「今天是黑色星期五，Sally 列了一长串礼物清单，准备在工作之前在网路上通通解决。」设想情境，让你得以探究人格与产品之间的互动过程。

绘制体验地图：把促成单一行为的各种事件，或者该行为触发的后续状况与情绪，全部写下来。「Sally 因为在滑雪假期摔断了腿而闷闷不乐，她得加紧脚步搞定圣诞节购物计划。」

这三个方法塑造了完整的体验图像：使用者、情境以及整个旅程的情绪，都清晰可见。

2. 可用性

「可用性」是设计的最低要求，如果使用者根本不知道怎么用你的产品，当然也就不会想要拥有它。我们可以看看 EventBrite 的座位设计，这个服务让使用者得以建立对号入座的活动，每种可能的情境都不放过（座位是一排一排的、还是圆桌，需不需要加上舞台），他们把复杂的多重步骤转化为单一的线性路径，使用起来不会头昏眼花。如同 Eventbrite，系统的可用性必需让使用者不费吹灰之力，使用者愈不需要思考「该怎么用」，他们愈能轻易完成整个流程。

3. 预设用途与指意

这里有两个设计名词：预设用途与指意

预设用途（affordance）的概念意味着，功能必须含有解释自我的能耐，比如一条马路在眼前，不用多加说明，人们就知道可以行走，而「指意」则提示了「预测用途」，用个例子来解释就是，「平整」的路面，代表人类能够安心的「用双脚走在上头」。

但是如果缺乏「指意」，使用者就很难察觉「预设用途」。在上面这个例子中，你可以看到按钮设计的过程，最左边的按钮没有任何「示意」的象徵，只是一般的文字而已，但是第三个多了圆角与渐层，网友自然知道这是可以点选的东西。

「指意」也有隐喻的作用，因为设计师也应该让使用者知道「为何」他们要与某个功能进行互动。以 iPhone dock 来说，圆角的模样让我们知道这是可以点按的东西，而带有隐喻性的图像（电话、信封、音符），则传达了互动的目的。

4. 可学习性

理想上，使用者在使用第一次之后，下次就该能反射性的执行所有动作，但是现实没有这么美好。良好的互动设计应该建立连贯性（consistency）与可预测性（predictability）。举例来说，连结的处理，要嘛统一开新分页、要嘛就全部都在原页重新导向，不要两种混在一起。图片也是，不是全部都用 lightbox 呈现，不然就是都用开新分页处理。连贯性能够带来可预测性，使用者自然学得比较快。

另外一个改善「可学习性」的常见策略则是使用既有的 UI 模式。比如「breadcrumbs（中文译作麵包屑）」，引导使用者在不同的页面层级中切换浏览。无论使用者在哪个网站，这都是令他们熟悉的样子，不用重新适应，当然你可以依照网站整体的设计风格，稍加调整。如果你的产品能够让人自然而然地学习，也会加深人们继续使用的动机，同时也有不断改善可用性的功效。

5. 给予回馈与回应的时间

「回馈（feedback）」称得上是互动的核心。每个互动都是使用者与产品之间的对话，产品应该更加友善、趣味而且益处多多。

可以是细緻的动画、优美的微互动，或者只是「哔」一声，无论是哪种方式，都在传达讯息给使用者，提示他们任务完成与否，以及下一步该怎么做。比如社群网站管理服务 Hootsuite 的招牌猫头鹰，在使用者长期静止、没有在 Twitter 上发出任何讯息时，就会「睡着」。这不只是个能让使用者会心一笑的「小动作」，还可能将负面状况（不再发送讯息）转为正面行动。

此外，回应时间的重要性也不在话下，总之，愈快愈好。想像一下，如果弹吉他时，每个声音都延迟两秒才出来，你会有多恼怒。

改善互动的五个步骤

了解互动设计的五项根基之后，现在就来看看实际上究竟怎么执行吧！

互动设计师 Stephen P. Anderson 提了一个有点费工、但却能釐清许多事情的建议：找真人扮演介面，而你自己则作为使用者与之互动。一来一往之间，你就能发现介面可能传来的古怪回应，真正进入设计流程之后，你就能及早避免设计出机械式、欠缺人性的互动形式。

角色扮演：找两个人来，一个人扮演介面，一个人做笔记。制作一个立体的浏览器，让扮演介面的人举着。接着，你扮演使用者，开始跟介面对话，「介面」只能透过标籤（labels）、选单以及任何在 UI 上的东西，回应你的目的。

描绘故事：记下整个过程的每个步骤，包含任务与情绪。

简化步骤：在网路上买车、买机票，这些都算是相当复杂的行为，设计这种类型的介面时，必须特别注意，把繁杂的目标简化为几个简单的步骤（比方说先问终点、接着预计出发与抵达的时间），维珍航空的订票流程非常值得研究。

限制使用者的选项：这应该是最难的一步了。但是你一定要尽可能减少使用者所能进行的动作。在设计的过程中，反覆询问自己，是不是所有选项都一定要被塞在某段互动里面，如果答案是否定的，那就以开启另一段对话的方式，继续互动。

注意「犹豫期」：使用者犹豫不决或者甚至停止互动的时间，称为「micromoment」。回想先前角色扮演的练习，一定有某些时间是裹足不前的，遇到这种状况，试着以改写说明文案（microcopy）或者承袭既往的 UI 模式，作为改善的基础。

就像魔术师的表演中，若有哪个细微的环节稍有不慎，就会毁了整场演出，一个糟糕的互动，也能造成整个使用者体验大崩坏。

【101创业大小事／整理报导】