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

相关推荐

  • 用户体验是一门玄学秘籍

    Part 01 - 用户体验和用户体验设计关于“用户体验”这个词,很多刚入行的新人都觉得它玄之又玄,妙不可言。一方面是不知道他具体到底是什么,就好像那是一块理想地,看不见也摸不着,另一方面呢糟糕的用户体验,作为用户是能清晰感觉到它的存在。所以呢,在这里,会围绕“用户体验”这个词做一个科普性质的解释和综述,希望对初学者一些小小的帮助。1.1 什么是用户体验?用户体验的定义有很多种,我比较倾向的解释是:“用户体验是人对于使用一个产品、系统、...

    2018-02-22
  • 一次关于梦想、音乐和代码的交互设计体验

    ▲ Arcade Fire··[Way to Go] 这是树林里的一次漫步, 这是一次惊人的互动体验。 一个不安分的全景, 一次手工制作动画, 用360度视频(精选)拍摄, 混合着音乐、梦想、还有…

    2017-08-02
  • 视觉设计,是优秀产品不可或缺的一部分

    视觉设计的重要性跟这个世界看脸一样,不言而明。译者注:Huggies是一个婴儿尿不湿的品牌。译者注:有时候设计师会先收集一些图片文字之类的东西弄出一个合集,作为设计的参考和灵感来源,这类东西叫做moodboard。具体介绍可参考:https://en.wikipedia.org/wiki/Mood_board

    2017-05-07
  • 【搞笑篇与交互无关】哈士奇究竟是怎样的“神犬”?

    哈士奇一辈子不认识主人,它们可能会觉得你有点特殊,但是它们也不会细琢磨,毕竟它们被智商局限的死死的。 养哈士奇永远不要撒手,它们也不是逃走,只是傻,要跑出去玩几个小时才会发现"矮马!我家呢? 求求你别再…

    2015-04-19
  • 分身乏术?来学学交互设计的优先级判断与排期协同

    在被密集需求轰炸(需求本身都具备一定合理性,不包括那种应该拒掉不接的需求),同时自己还有一堆想自发驱动去做的事情时,交互设计师该如何进行合理的设计优先级判断,分解需求排期推进呢?来看今天的实战经验!

    2017-05-23
  • 华景招聘用户体验分析师啦!

    作为华景员工,除了能体验旅游之外,还能体验华景食堂的凉皮儿和拉面,包子和油条,腊牛肉和酱猪肘,狮子头和卤肉饭,肉夹馍和艇仔粥,老婆饼和豆沙酥,酸辣汤和叉烧饭,泰式河粉和肉酱意面,干煸四季豆和蒜蓉蒸茄子……华景集团招聘1. 用户体验部    用户体验分析师岗位职责:*负责产品的用户研究,分析用户的使用习惯、情感和体验需求*负责原型/产品用户体验评估工作,参与产品的交互界面的设计,分析影响产品用户体验的因素*定期开展用户测试,观察用户使用产...

    2018-05-04
  • UE网APP现已发布:UE小组,致力于自学UE。

    UE小组是为:ue自学者提供一个自学UE的渠道和平台,希望能帮助到大家 UE小组的官网:UE小组 豌豆荚、360市场也可直接搜索“UE小组” 进行下载 现在支持安卓版本,稍晚些支持IOS,请广大苹果用户持续关注。 IOS和安卓…

    2015-05-27
  • 【设计观点】如何从商业/产品/体验/视觉多角度构建设计形态?

    目标:现时代设计师不应只看到美感,从长远而言,需要从商业/产品/体验/视觉多个角度综合考量构建设计形态。 资料:交互设计精粹,用户体验五线谱,集创思维矩阵-纯色。 分享:星夜Design 现时代的设计师不应只看到…

    2016-08-30
  • 用户体验:从幽灵按钮到空心元素,它们一直在流行

    幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比,吸引力也一般,它们的视觉效果主要取决于周围的对比度和环境本身,一句话,缺点很多。即便如此,它们并没有很快消失,相反依然活跃在设计的一线。它们能够如此,很大程度上是因为我们对于这些元素已经习以为常了。它们最初出现在 UI 界面上的时候,用户所感到的迷惑和混乱,已经逐步消失,我们都知道,它是一个按钮。现在的幽灵按钮和类似的元...

    2018-05-04
  • 【UXRen原创】杀死转化率的 4 大 UX 错误

    作者:Sean Ellis   译者:吆喝科技   本文编译自 Sean Ellis 所撰写的《UX mistakes that are killing your conversions 》 ,作为资深交互设计师, Sean Ellis 谈论 UX 在转换率优化的重要性。Sean Ellis 是 Qual…

    交互专题 2017-08-07