把握互动设计的五个核心原则,打造令人流连忘返的网站

收藏:294

把握互动设计的五个核心原则,打造令人流连忘返的网站

浏览网站已是现代生活中普遍的行为,每天醒着的时间我们大概都在上网,让人们「看得爽快、用得愉快」是设计师当仁不让的责任。出色的互动设计是留住使用者的不二法门,但是,该怎幺把人与机器之间的互动,变得跟人与人之间的互动一般自然,并不是简单的课题,答案也不是非黑即白。UXPin 内容战略 Jerry Cao 提出 详细的经验地图

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

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

2. 可用性
把握互动设计的五个核心原则,打造令人流连忘返的网站
△EventBrite 的座位设计

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

3. 预设用途与指意

这里有两个设计名词:affordance与 signifier,

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

把握互动设计的五个核心原则,打造令人流连忘返的网站
△来源:Affordances in Design

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

把握互动设计的五个核心原则,打造令人流连忘返的网站
△来源:Affordances in Design

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

4. 可学习性
把握互动设计的五个核心原则,打造令人流连忘返的网站
△来源:Consistency as the key to better UX

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

把握互动设计的五个核心原则,打造令人流连忘返的网站
△来源:Breadcrumb Navigation in Website Design: Outdated or Trending?

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

5. 给予回馈与回应的时间
把握互动设计的五个核心原则,打造令人流连忘返的网站
△来源:Applied Interaction Design

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

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

把握互动设计的五个核心原则,打造令人流连忘返的网站
△来源:Emotionally Intelligent Interaction Design

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

改善互动的五个步骤

了解互动设计的五项根基之后,现在就来看看实际上究竟怎幺执行吧!互动设计师 Stephen P. Anderson 提了一个有点费工、但却能釐清许多事情的建议:找真人扮演介面,而你自己则作为使用者与之互动。一来一往之间,你就能发现介面可能传来的古怪回应,真正进入设计流程之后,你就能及早避免设计出机械式、欠缺人性的互动形式。

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

把握互动设计的五个核心原则,打造令人流连忘返的网站
来源:Anatomy of the experience map

描绘故事 :记下整个过程的每个步骤,包含任务与情绪。这个部分可以很简单到只记下几个使用者情境,也能複杂到含有 4 个阶段的体验地图 。想进一步了解详情,可以参考 The Guide to UX Design Documentation。

把握互动设计的五个核心原则,打造令人流连忘返的网站
△来源:Web UI Pattern 2014

简化步骤 :在网路上买车、买机票,这些都算是相当複杂的行为,设计这种类型的介面时,必须特别注意,把繁杂的目标简化为几个简单的步骤,维珍航空的订票流程非常值得研究。

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

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

就像魔术师的表演中,若有哪个细微的环节稍有不慎,就会毁了整场演出,一个糟糕的互动,也能造成整个使用者体验大崩坏。希望透过系统化的解释,能够对您接下来的设计流程有所帮助。

欢迎加入「Inside」Line 官方帐号,关注最新创业、科技、网路、工作讯息
把握互动设计的五个核心原则,打造令人流连忘返的网站