[译]交互设计的5大支柱

1464103735-3021-B9yibobL5vyjpfUVBNfRwucvLRTQ

正如同我在《交互设计最佳实践:卷1》中描述的那样,要做好交互设计,需要对多个学科有着深入的了解和熟练的掌控,因为要使一个由一系列对象组成的系统让人用起来感觉良好、易于学习并且有用,是很不容易的一件事。

首先让我们从交互设计最基本的概念说起,分解其核心设计原则,然后通过五个步骤来更好地进行交互设计。

优秀的交互设计是由人类的连接驱动的。但是到底是什么驱动着人类连接,并且它又是如何转化为数字化界面的呢?这些问题的答案不是非黑即白的。在我们的经验中,优秀的交互设计依赖于基础用户体验设计的完美执行。

一、目标驱动的设计

即使你不亲自参与进行用户研究,但你还是需要知道对设计的构建有成熟的认知。

1464103736-5388-KdMn8PicUlq7kUJiajEmXd6oHBNg

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

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

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

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

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

二、可用性

确保可用性是最低限度的设计。如果你的产品无法让用户正常地使用,还谈什么吸引用户。系统的可用性必须保证让用户觉得毫不费力。用户在探索系统上耗费的时间越短,就越能更快地完成操作。

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

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

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

1464103735-9445-ASePW61ic0ng4kf9ZNJODmkMtFjA

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

1464103746-1342-2ZOvOLAykSXXQ1icPJiciakpFn3w

表意符号也可以比喻或者暗喻的形式存在,因为人们还需要知道为什么要与界面交互,而不仅仅是能不能交互。在上面的iPhone Dock示例中,隐喻的图像(手机、信封、音符)达到了沟通的目的,你会知道点击按钮可以达到什么样的目的。

四、易学性

在理想情况下,每个用户只要进行过一次操作后就能记住所有功能。然而现实情况并非如此。熟悉感和直觉性必须被设计到每一个界面中去。

成功的交互设计是通过创建一致性和可预测性的设计来降低整体的复杂度的。例如,有的页面应该保留,链接尽量在新页面中打开;而有的页面涉及到特定的操作和流程,不能在新页面中打开,防止用户重定向。

一致的设计确保了设计的可预测性,进而提高了易学性。

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

1464103745-4829-CsuzoPNXOKwwhADmRp9HGFOGjqpQ

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

五、反馈和响应时间

反馈是交互的核心。因为每次交互都是用户和产品之间的对话,所以你的产品最好保持着友好、有趣且有用的特性。

无论是精心设计的动效、有趣而生动的微交互,还是一个简单的哔哔声,你的产品必须同用户进行沟通,给予反馈,不论这个操作是否完成。

在下面这个是来自于Hootsuite的例子,如果用户较长一段时间没有操作的话,这只猫头鹰就会“睡觉”,这样的反馈是聪明而有趣的,并且实际上把一个可能算是负面的体验(停止更新数据)转变成了一个积极的体验。

1464103750-8517-F15TubOvWCc1KrWgMXlrB7U4kE4g

反馈的另一个关键因素是响应时间。最好的状态当然是立即响应。想象一下,如果你在弹吉他,每个音调都在弹奏后好几秒才出来会多么让人烦躁。

改进交互的5个步骤

现在你已经知道了那些基础原则,接下来我们来介绍改进交互设计的方法。

著名的交互设计师斯蒂芬·安德森建议过,当你作为用户使用你的界面时,如果有个真人扮演你的界面与你交互,将会令你大开眼界。任何一个尴尬的反馈都会被放大,你会在这个过程中学会规避反人类的交互设计,一旦你完成了这些角色扮演,就可以开始编写交互的脚本,并重新组织你的交互了。

过程是这样的:

1)角色扮演和互动:随便抓两个人过来,一个作为界面,另一个做笔记。做一个浏览器窗口的牌子由扮演界面的人举着,再把界面用投影仪展示出来。然后,你扮演用户,同“界面”进行对话,其中你作为用户解释你的目标,而“界面”只能通过标签,菜单以及UI中的其他元素与你进行反馈。好好地观察并记录,看看结果会怎样。

1464103758-3453-B9yibobL5vyjpfUVBNfRwucvLRTQ

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

1464103763-8266-BPtUSthjxykBWKEVyibCTWar29cw

3)简化步骤:有时候用户要达成目标需要经历许多步骤(比如在网上订机票)。在制作原型的时候,就应该将一个复杂的目标分解成为一系列简单的步骤(比如询问目的地,然后设定出发/到达日期,等等)。例如,维珍航空的阶梯型设计,就是为了让预订过程更简单易行。

1464103765-1494-ZMlSD0xK6gFVVfLCxhAXIq9dw5qg

4)限制用户的选择:这可能是最困难的一步,但是你必须尽量减少用户的操作。时刻提醒自己,这个步骤当中的每一个选项是不是非要不可的,如果不是,将它分离到其他的非关键位置。

5)注意微时刻:Micromoment,这是一个新的合成词,指的是用户在与界面进行交互的时候可能会犹豫,前进,或者突然停止。回想角色扮演的环节,你会记得那些犹豫、忐忑的时刻。为了让交互更清晰,你应该充分考虑每一个细节上的文案,结合可靠的UI模式,引导用户在这些微时刻作出对的选择。

不注意细节魔术师的魔术会失败,同样的道理,糟糕的交互会毁掉整个用户体验。上面的流程可以帮你让交互设计成为界面和用户沟通的桥梁,而非单纯地让界面“动起来”。

结语:

交互设计并不单单是关于界面的行为,它是一项基于用户行为的适应性技术,你必须知道你的目标用户在功能和情感上的喜好和期望。然后在技术限制的情况下,设计出令人满意的产品。

最好的交互设计大概就是这样的:你的产品要能及时响应,不要让人有太多的思考,并且操作起来很顺手。

-END-


作者:Jerry Cao,一位就职于UXPin的内容策略专家

原文地址:http://thenextweb.com/dd/2015/03/03/the-5-pillars-of-interaction-design/

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

(0)
iouedioued
上一篇 2016-05-24 23:26
下一篇 2016-05-24 23:34

相关推荐

  • 现在!极限UI设计的时间到了

    毫无疑问,数字设计其增长突飞猛进超过过去五年和服务设计更是如此。合并用户体验、 客户体验、 交互设计和技术创新有助于更好,并协助组建健壮的规则、 模式和人民已经认识到的用户界面语言。然而,我不禁感到东西死了前进的道路。

    2014-12-28
  • 交互系统和设计目标

    交互设计:是针对用户与产品之间的“交互行为”来进行设计。可以理解为对交互系统的设计。系统的概念系统可以类比为自然间的生态系统、人体的生物循环系统、公司也是一个系统。他主要有一下几个基本概念:1、系统是一个有机的整体,各个元素之间不可分割,相互作用构成系统。2、这个系统定具备明确的功能,可以用来完成某项任务或支持某些行为。3、系统的功能是由所有的要素共同支持的。4、系统的功能应是稳定的,在各种使用场景下,都能提供功能。5、系统的功能应具备...

    微信热点 2018-02-11
  • 用Axure水平菜单做导航菜单原型

    哈喽,"梯子"们好,这么多天都没有更新过Axure的教程了,理由如果是"沉迷吃鸡,无心做教程"未免也太勉强了,额......这个理由好像并不勉强啊,其实就是休息了一段时间。 好了,下面就来介绍一下这几天收集的比较多的"A技",额......Axure的技巧在浏览网页的时候,我们会经常性的点击或者鼠标悬停在"总有一款适合你"的顶部选项,这个就是顶部导航菜单。有的"梯子"就直接从元件库中拖拽一个"矩形"或者"文本标签"直接使用,如下图:其实...

    2018-03-16
  • 【媒体观察】“爆款”G一代,好品质给用户体验“上保险”

    春夏交替的四川地级市资阳,天气多变。但降温和阴雨,还是没能阻挡住中国西南最活跃经济区域,吊装用户的热情与期待。2018年4月23日,将近400位用户,来到了“徐工G能大咖&新产品交接仪式”现场。到场用户的业务范围、规模、设备不尽相同。其中既有已经开始“公司化”运营者,也有依靠零散数台吊车积累第一桶金的“拼搏者”;既有跟随上一轮热潮涌入的新手,也有从业十几年甚至几十年的“老司机”。虽然对市场的理解,对未来的规划各有所取,但谈及徐工G一代产...

    2018-04-29
  • 【总结】阿里UED内部资料 ▏优秀的交互设计师这样养成

    一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。 大约五年前选择了这个职业,一路走来,质疑过、探讨过…

    2015-12-04
  • 网易云音乐交互设计:如何让用户感知到个性化推荐

    一般用户会以为都是热门推荐,只有非常细心的用户才可能发现,比如你最近听了不少古典音乐,那在首页上就会看到古典相关的歌单推荐。

    2016-10-25
  • 聊聊UI界面中搜索入口的设计

    搜索几乎是现在所有网站,APP甚至操作系统的标配,不论是电商还是论坛等等。它是一个站内给用户直接到达目的地的通道,起到了一个引导用户走向的重要作用。在不同的系统,不同用途的网站上搜索呈现的方式都有所不同。

    2017-05-16
  • 破茧成蝶读书笔记

    01什么是用户体验  用户体验:使用一个产品时的主观感受 用户体验设计:提升用户体验而做的设计 书中讲到首先我们要明确什么是设计?设计不等于艺术。我了解到的是,设计是解决问题的,艺术是提出问题的。 书中两口…

  • 3D Touch 会为 iOS APP 的交互和界面带来什么变化?

    知乎最新关于3D Touch的讨论 仪思奇,爱好摄影的软件工程师的回答 从官方的应用案例来看,有三个特点: 可以Press的元素一定可以Tap。 触发的界面大多是隐藏式的。 触发的功能大多是非刚性的。 第一点很好理解,因…

    交互设计 2015-09-14
  • 交互译文—清晰度,可读性和可理解性:让用户阅读你的文章

    所谓成本是指:阅读你的文字所带来的长时间、理解内容带来的困惑、混乱的排版所带来的负面情绪等。
    所谓收益是指:阅读你的文字能让我获得的信息内容和质量,以及获得的积极情绪。

    2017-05-31