译文 | 交互设计的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

相关推荐

  • 最近很火的租衣APP用户体验报告

    以下内容并非广告,但是如果衣二三和女神派的营销部门看到的话,要不要考虑来主动给我发点广告费?其实租衣APP这个东西应该火了好一阵了。有我微信的宝宝们可能知道,我这个人有个很大的毛病就是喜欢买衣服。且买来并穿不了一两次,接着就开始在朋友圈各种亏本卖闲置。最近整理衣服发现实在太多真的不能再剁手了,因为根本没地方放。然后突然想到了公司一个客户和我说过她一直用一个租衣APP叫衣二三。看到这个APP的时候我的内心是激动的 --- 终于有软件解决我...

    2018-03-30
  • 小欣浅谈 | 用户体验为什么如此重要

    前言说到我们日常所使用的那些产品和服务,我们对它们的情感可谓爱恨交织。它时而让我们为之欢呼雀跃,时而让我们感到挫败沮丧。时而让生活变得简单明了,时而使生活复杂无常。即使这样,我们每天还要和不计其数的产品打交道。而我们的产品开发人员,注意力的重点往往在95%以上都放在产品本身,而用户使用过程中的体验却常常被忽视。而这部分,常常成为一个产品投入市场后的隐形“杀手”。|糟糕的用户体验以我们办公室的饮水机为例:加水的按键分为“高\中\低”三档,...

    2018-04-16
  • 【Mockplus教程】重命名

    对页面和分组的重命名可以选中单个页面,然后使用F2进入名字修改状态,改完之后鼠标随便 点击其它地方即可完成修改。 对于选中页面也可以双击页面节点进入修改状态。 完整演示如下:

    交互设计 2015-09-10
  • MECC UED年终惊喜大放送

    时间是让人猝不及防的东西;岁月是一场有去无回的旅行。岁末年初,我们用一场部门小聚来辞旧迎新。有美食,有美景,更有大惊喜哦~首先要感谢在背后默默筹备了1周的工作人员,感谢组织为大家准备了这个充满惊喜的小聚会~感谢她们!👏👏👏👏👏这次我们年末小聚的地点是位于岭南天地——Loccy餐厅三楼那一天天空很高,风很清澈,从头到脚趾都快乐(就是有点冷)清新的绿植、简约的装饰、精致的餐具~最吸引人的还是这满满的礼物堆!现场准备了许多小道具供大家卖萌装逼...

    2018-02-24
  • 交互设计背后隐藏的万亿级医美市场在哪?

    你一定过很多书,走过很多的路,可书山瀚海,究竟那一句改变了你?当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放我期待张雨生 - 未来感谢你的阅读,百无一用是书生,十有九八堪白眼。什么是互联网交互:简单的是指互联网与手指或者语音之间的直接联系,2010年前简单的视频影音播放器还没有意识到用户和用户之间交互的强大之处,所以很多播放系统后来才加了弹幕功能,交互设计强调独立个体我与众多个体的交流交叉联系,微信微博是目前市场上最大的交互...

    微信热点 2018-02-26
  • 【交互设计-UX/UE】评论回复

    前项目有做到评论回复功能,途中遇到一些不解,就是回复某个人的时候,到底回复的类容是紧接着被评论者的下方,还是按时间另起一栏? 我们可以先对比一下QQ和微信.....keep watching!!! 微信版本号:V6.3.16 QQ…

    2016-08-03
  • 未来全新的用户界面将重塑设计师的工作【UXRen译#156】

    副标题:图形用户界面更进一步的思考 作者:Paul Boag  |  翻译:文松,校审:林有九   我们目前的生活已经离不开图形用户界面,它萌芽于施乐帕克研究中心(PARC),目前已经成为PC很重要的部分。不光这样,随着网页…

    交互专题 2017-08-07
  • 交互设计师的60日计划第十七天

    #交互设计师的每日#20150815 雨天和大学最好的朋友的离别,最后一顿饭吃了王品台塑,果然一分价钱一分货。以用户体验为招牌的海底捞告诉我们要排队2小时等位…但是贵的王品台塑不仅立刻有位,服务也要比海底捞更胜一…

    2015-08-20
  • 用好这些可用性原则,你就能简单做好交互设计!

    做产品经理不懂交互设计,那就是寸步难行。“交互原则多,体验出彩少”,既然要做好产品体验,那么吃透基本的交互设计原则,就是必须且必然的事儿。今天给大家挖了很多可靠的栗子,直接给你提供干货,拿走不谢。

    2017-05-20
  • 如何设计移动端的文本输入框?

    基于移动设备的ux设计有很多难点。其中最大的设计挑战之一是在有限的屏幕空间上解决点击输入的问题。对于ux设计师、开发人员和产品经理来说,让这个过程变得易于用户使用就显得至关重要。

    2017-05-22