译文 | 交互设计的5大支柱

文中提到的《交互设计最佳实践:卷1》/《用户体验设计文档指南》/《2014年Web UI模式》可在此处下载,建议先保存到网盘~

原文来自theNextWeb,作者Jerry Cao,一位就职于UXPin的内容策略专家。

译文 | 交互设计的5大支柱

就像在《交互设计最佳实践:卷1》中描述的那样,交互设计需要掌握用户体验的多个学科——这是有意义的,因为使一个由对象组成的系统用起来令人感觉友好,可学习并且有用,这是很不容易。

让我们首先来定义交互设计,分解核心原则,然后解释如何通过五个步骤来更好地进行交互设计。

良好的交互设计是由人类的连接驱动的。但是到底是什么驱使着人类连接,并且它又如何能转化为电脑界面呢?这些问题的答案不是那么直白的。在我们的经验中,我们发现交互设计的成功依赖于基础用户体验的完美执行。

一、目标驱动的设计

即使你不亲自进行用户研究,你还是需要知道如何把观察成果融入你的设计中。

译文 | 交互设计的5大支柱

我们找到了以下的用户体验设计过程,可以帮助你与那些有血有肉的用户保持同理心:

1)创建角色,角色是根据你的目标用户的行为和心理虚构出来的人物。当你在做至关重要的设计决策时,角色往往能作为参考派上用场,例如,“作为季节性购物者,莎莉会喜欢什么样的结帐过程?”

2)用户场景——与我们创建的角色相呼应,用户场景解释了角色在使用网站时将如何采取行动。例如,“黑色星期五,季节性购物者莎莉在工作之前就准备好了一长串要的网购礼物清单。“用户场景迫使你探索角色与你的产品交互的上下文。

译文 | 交互设计的5大支柱

3)体验地图——从用户场景更进一步,体验地图记录围绕单个交互的所有条件,包括情感和外部环境。“令莎莉生气的滑雪旅行以她的腿部骨折为结束,作为季节性购物者,莎莉必须尽快进行她的圣诞购物了。”

这三个技巧帮助我们构建出了一幅完整的体验画面:用户、场景,整个情感旅程。

二、可用性

可用性是设计的最低限度。如果你的听众不能使用产品,他们肯定不会想要这个产品。让我们来看看EventBrite的座位设计。

这个在线应用程序允许活动组织者创建可以预留座位的活动,包括从开始到结束的流程甚至还有高水平的细节(如确定座位行数、桌子数量和如果有需要的话还可以提供一个舞池)。它把一个多步骤,多任务的过程固化为一条简单线性的操作路径。

译文 | 交互设计的5大支柱

译文 | 交互设计的5大支柱

就像EventBrite这样,系统的可用性必须使用户觉得毫不费力。让用户越少地花精力弄明白系统本身,他们可以越多地完成手头的任务。

三、功能可见性和表意符号

功能可见性的概念是指,一个功能必须为自己说话,并表明自己的用途(比如道路用来提供给用户行走)。而示意物则象征或者暗示了功能可见性(比如道路的平坦表面暗示你应该用脚走路)。

没有表意符号,用户可能无法感知到功能的可见性。

译文 | 交互设计的5大支柱

在上面的示例中,您可以看到按钮设计的进化。第一阶段它没有任何表意,看起来就像标准的文本,而第三阶段则类似于真实的按钮,具有圆形边缘和渐变。

译文 | 交互设计的5大支柱

表意符号也可以是隐喻,因为人们还需要知道为什么他们与界面能交互,而不仅仅是能不能交互。在上面的iPhone Dock示例中,隐喻的图像(手机、信封、音符)达成了沟通的目的,你便知道了带圆形边缘的按钮是可以与我们交互的。

四、易学性

在理想世界里,每个用户只要经过一次使用后就能记得所有功能。但现实是完全不同的。熟悉感和直觉性必须被设计到每一个界面中去。

成功的交互设计是通过创建一致性和可预测性化解复杂性。例如,不要让部分链接在新标签打开,同时又让其他链接只在当前页重定向。同样,不要让一些图片在模态窗打开,同时其他的却是在新标签页打开。

一致性构成了可预测性,进而提高了易学性。

译文 | 交互设计的5大支柱

提高可学习性的一个常见的策略是使用成熟的UI设计模式。许多网站和应用程序都已经在使用这些模式,所以用户对它们很熟悉(其中模式是具有一致性的),而你仍然有足够的创作空间来定制你站点中的设计元素。

译文 | 交互设计的5大支柱

例如,面包屑是一种常见的网页设计模式,用来帮助用户浏览网站。不管你在什么网站,如果你看到面包屑,你就理解它们是如何工作的。这种熟悉感有助于提高产品的可学习性。当产品是易学的,就能鼓励人们去使用这些产品,自然就可以提高了可用性。

五、反馈和响应时间

反馈是交互的核心。因为每次交互都是用户和产品之间的谈话,你的产品最好能是友好的,有趣并且有帮助的。

译文 | 交互设计的5大支柱

不管是否精心设计了一个动画,一次美好的微交互,或者一声简单的哔,你的产品都必须保持向用户沟通任务是否完成(和下一步要做什么)。

在下面这个来自Hootsuite的例子,经过一段较长时间用户没有活动的话,这只猫头鹰就会简单地去“睡觉”,而这是有意义的,因为应用程序是从Twitter获取数据的(并且也不想让数据接口过载)。这样的反馈是聪明而有趣的,并且实际上把一个可能算是负面的体验(停止更新数据)转变成了一个积极的体验。

译文 | 交互设计的5大支柱

反馈的另一个关键因素是响应时间。最好的响应时间是尽可能立即响应。想象下如果这是你在弹吉他,每个音调都在弹奏后好几秒才出来会多么让人懊恼。

改进交互的5个步骤

现在你已经知道了基础元素,我们将介绍一系列我们发现的很有助于完善细节的设计步骤。

译文 | 交互设计的5大支柱

著名的交互设计师斯蒂芬·安德森建议过,当你作为用户使用你的界面时,如果有个真人扮演你的界面与你交互,将会令你大开眼界。你会听完所有界面反馈的大声而尴尬的响应,这将帮助你避免创建冰冷的机器人式交互。一旦你完成了这些角色扮演,你就可以开始起稿你的故事,并重新组织你的交互。

过程是这样的:

将交互变为角色扮演——随便抓两个人,一个作为界面,另外一个做笔记。做一个浏览器窗口的牌子由扮演界面的人举着,再把界面用投影仪展示出来。然后,开始与你进行对话,其中你作为用户解释你的目标,而“界面”被限制了他们的反应只能有标签,菜单以及UI中的其他元素。好好地观察视频和文字记录,看结果会怎样。

译文 | 交互设计的5大支柱

绘制出故事——把体验的每一步都记录成文档,包括每一步的任务和用户情感。就像在《用户体验设计文档指南》中所讨论过的,这可能简单到只是几个用户场景,也可能复杂到是一个四层级体验地图。

译文 | 交互设计的5大支柱

简化步骤——用户有时会有一些需要很多步骤的目标(比如在网上买车,预订机票)。指南推荐的原型、用户界面必须能够把一个单独而复杂的目标分解为简单的步骤(像是简单地请求下目的地,再然后是出发/到达日期,等等)。例如,美国维珍网站的台阶式表单设计把预订过程变得比实际感觉容易得多。

译文 | 交互设计的5大支柱

限制用户的选择——这可能是最困难的一步,但你确实必须最小化你提供给用户的操作。总是问自己所有的选项在那一刻时间是不是都是关键的。如果不是,就把它放到另一个会话里。

注意微时刻——微时刻是当一个用户与界面交互时可能犹豫,前进,或者停止的时刻。如果你回顾角色扮演练习,你会想过来一些能理解的时刻。为了让谈话变得清晰,可以利用缩微复制和UI模式,比如带上下文的操作和选择依赖式的输入框(我们已经在《2014年Web UI模式》讨论过)。

就像如果关掉细节,魔术师的技巧将会失败那样,一个糟糕的交互可以毁掉整个用户体验。上面描述的过程中,我们将帮助你把交互作为一种谈话而不是一种动画界面来设计。

如果你想要更多的灵感和优秀的交互设计案例,这个Quora问题里囊括了从电影到Core77和PatternTap这类电影网站等在内的很多优秀来源。

结尾辞

交互设计不是关于界面的行为,它是关于如何适应现有技术并且基于人的行为的。你必须知道你的目标用户功能和情感上的喜好和期望。然后基于技术限制,去设计令人满意的产品。

最好的交互设计几乎就只是这样:只需要你的产品能及时响应,无需多余的思考,并且工作起来立竿见影。

文中提到的《交互设计最佳实践:卷1》/《用户体验设计文档指南》/《2014年Web UI模式》可在此处下载,建议先保存到网盘~

 

本文由 @lrioLee(微信公众号[简并]) 翻译发布于人人都是产品经理 ,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30239/

(0)
CatherineCatherine
上一篇 2017-05-27 17:12
下一篇 2017-05-27

相关推荐

  • 产品学习——用户体验要素

    最近看完了这边和产品相关的书籍——《用户体验要素》,读完之后感觉这本书写的挺好。下面做了一些思维导图,做的比较详细,这样就可以当做是读书笔记了。自己的不足:1,读起来的困难是这本书翻译的不是特别好,所以为了理清楚这个本的脉络,还是花费了比预期要久的时间。2,是第一次使用xmind,在一边做思维导图,一边学习使用xmind上面花费了一些时间。3,是专注度还是不够,集中精力的时间太少了,所以做一件事的时间就会拖的太久。第一章:用户体验为什么...

    2018-02-23
  • 选择极简主义风格做设计,不是没有道理

    极简主义设计并非万能的。但有一件事是肯定的,界面越简约,设计目标和针对性就越明显,而设计师要投入的时间和精力也越多。你并不需要更多的空间,你所需要的是更少的东西。

    2017-08-04
  • 《用户体验要素》 读书笔记 (3)第四章 范围层

    范围层主要解决功能规格和内容需求只有明确定义出来,你和你的团队才知道你正们在做什么同时你才知道你不需要做什么1. 范围层定义1)范围层需要同时做两件事情:规定过程(日程安排和里程碑);生产产品。2)范围层的功能和内容要明确的定义出来:只有明确定义出来,你和你的团队才知道你们正在做什么,团队中的不同角色才能有共同的参照标准;同时你才知道你们不需要做什么,同时你才知道你不需要做什么,因为这个过程中会不断出现新的需求,要结合你的规划、新需求与...

    2018-04-09
  • 前车之鉴:一个视觉交互设计失败的案例

    最近在做产品设计时,遇到了一个非常典型的设计失败案例。这个案例反应了一些老生常谈的问题,我觉得非常有意思。

    2017-06-01
  • 伦艺交互设计(MA)offer入手,工科出身、完全零基础的她是如何做到的

    对于零基础申请的同学来说,短时间内接触并掌握一个陌生的专业,既需要勇气,又需要决心。这是因为,科班出身的同学申请国外名校尚有难度,更何况是毫无专业基础的同学,过程中遭遇困难、挫折也可想而知。正因为申请难度大,如果能从其他同学的申请过程中吸取成功经验,规避问题,少走弯路,必然会有利于未来申请。本期,简清为同学们请到了拿下伦艺交互设计(Interaction Design Communication)专业offer的L同学,作为一名零基础申...

    2018-04-12
  • H5三个设计方向的自我定位

    如今,移动端H5如雨后春笋般迅速发展花样繁多,无论是宣传产品、内容介绍、新闻推广都会想方设法搞套H5出来。那么如何在众多H5中脱颖而出?如何使手上的资源发挥最大化?如何扬长避短,做出吸睛的H5?都是摆在我们面前的问题。

    2017-05-27
  • 如何改版一个3亿用户的神奇网站

     #交互学堂#十年后的今天,随着58的业务越来越壮大以及一些创新产品的加入,单纯的形式越来越难以承载业务含义,统一的样式也越来越难很好地满足用户的需求。  为什么要改版 58同城自2005年创立以来在APP、M、PC主…

    2016-11-03
  • Sketch强大新技能: 支持多个设计师之间同步组件啦!

    ▵优设品牌号,旗下新品及内测邀请码资格均在此号,关注推送掌握动态,有机会第一时间获取。封面设计:Graphéine团队里多个设计师之间经常需要共用一些设计组件和元素,如果可以有一个包含这些组件的 Symbol 库,并且自动和所有人保持同步就好了。现在 Sketch47 就搞定了这个问题, 再也不用像过去一样通过发邮件、QQ 来同步了。如果你的团队需要多人共享一个 Sketch 组件库, 只需把这个包含公共 Symbol 的文件在你的 S...

    2018-03-02
  • [译]可用性之外:使用劝导式模式设计(下)

    上篇文章为:[译]可用性之外:使用劝导式模式设计(上)用户注册了你的产品之后,是时候给他们一个良好的第一手经验了。你的目标是让用户掌握你产品能提供的所有功能。让我们来看看你能做些什么来使用户体验到产品的真正价值。

    2017-05-27