为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

随着单页式设计和移动端的兴起,网页中的交互设计越来越重要了。为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解。

正如同我们在《交互设计最佳实践(卷1)》中所述,要做好交互设计,需要对多个学科有着深入的了解和熟练的掌控,这也是非常符合逻辑的——你要试图让一系列事物所构成的系统令人感到友好,易于学习并且非常实用,这并不是一件简单易行的事情。

所以,让我们从最基础的交互设计的概念开始,深入了解核心设计原则,并且借助五步设计流程,更好地完成交互设计。

真正优秀的交互设计,是由人情纽带所驱动的。那么问题来了,人的情绪纽带又是如何转化成数字化的界面和接口的呢?答案的当然是存在的,但是并非是由非黑即白的是与否、对与错所构成。根据我们的经验,真正成功的交互设计立足于基本用户体验设计的完美执行。

看起来不像是一个答案?没事,我们慢慢看下去。

1、结果驱动式设计

即使不亲自参与用户研究,但是你还是得知道如何对设计构建成熟的认知。

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

我们在《用户体验设计师必备的4种UX文档》这篇文章中对于交互设计师必须知道的四种UX文档有了深入的介绍,这些文档——或者说过程,可以帮你构建起有血有肉的“用户”,对具体的产品流程有更真实的还原:

1、用户角色(Persona):Persona文档(控制在2~5个)通常需要包含你的目标用户。作为Persona中的虚构的角色,它的属性和特征是 基于产品研究和用户定位来设定的,用作后续设计过程中所面对的“理想用户”,本质上,它就是一个占位符。作为人物设定,其中会包含个人信息,远不止于年龄 和收入信息这么简单。Persona 文档的目标是利用角色来验证你的目标用户是如何感受如何看待你的设计的。

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解2、移情地图(Empathy Map):它像是一个轻量级的Persona文档,在资源短缺时间紧的状况下,可以使用这个文档。Empathy Map 将 Persona 中的角色的个性和性格部分移除了,更加专注于用户在特定情况下的感受。

3、用户剧本(User Scenario):如果Persona 是帮你设计了一个故事中的角色,那么User Scenario 就是故事的剧本。用户剧本通常是围绕着一个特定目标来设计的。比如说,第二天是母亲节,要为母亲预订一份礼物。目标很明确,要达成目标,用户需要点击几次 按钮,走哪些流程,需要多长时间,如何在过程中融入情感,贯穿始终。对整个用户流程有了预判之后,设计师对于UI和UX的设计就有了把握。

4、用户地图(Customer Journey Map):这份文档同上门的用户剧本很像,但是它比起前者跨度更大,贯穿体验设计始终。设计人员可以对产品的背景有更深入的了解才能更好地设计,而产品投 入使用之后也不是最终结束,这也是跨度如此之大的原因所在。用户旅图将会涵盖角色信息、用户剧本和移情地图的全部信息。这么设定并不是要让用户旅图成为一 个大杂烩,而是要将用户性格和用户流程、交互过程结合到一起来看待问题,每个阶段不同环节,都牵涉到不同的情绪和情感。

2、可用性设计

确保可用性是最低限度的设计。如果你的用户都无法正常使用产品,就更谈不上吸引他们了。看看下面的 EventBrite 的座位设计吧。

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

这个在线的APP允许活动的组织者从活动创建之初就可以保留特定的座位,整个流程保留了大量的细节(特定的行、列,是否靠近舞池等),设计者将多个步骤、多个流程整合到一个流程当中。

就像EventBrite 这样,复杂的系统尤其要保证它的易用性,整个流程要流畅,让用户感到不费吹灰之力就能搞定。在探索系统上耗费的时间越短,用户就越能做好手头真正重要的事情。

3、可供性设计和能指

可供性设计,在我们之前的文章中曾经解释过:

Affordance 是 James J. Gibson 造出来的一个词,Gibson 是20世纪最重要的认知心理学家之一,他的生态学式视知觉论和直接知觉为认知心理学开辟了新的领地。affordance 是 afford (提供、给予、承担)的名词形式,环境的 affordance 是指这个环境可提供给动物的属性,无论是好的还是坏的,所以我认为“可供性”是一个合适的翻译。Gibson 用来解释 affordance 的例子是这样的:如果一块地表面接近水平(而不是倾斜的),接近平整的(而不是凸起或凹陷的),以及充分延伸的(与动物的尺寸相关),如果地表面的物质是 坚硬的(与动物的重量相关),我们可称它为基底、场地或地面,它是可以站上去的(stan-on-able),可让四足或两足动物保持竖直姿势,它是可以 行走(walk-on-able)和跑动(run-over-able)的,它不像水表面或沼泽表面之于一定重量的动物那样是可陷入的(sink- into-able)。列出的四项属性——水平、平整、延伸和坚硬——它们是这个表面的物理属性,如果以物理中使用的度量衡去衡量它们的话,但是对于特定 动物的支撑可供性,它们必须与动物关联上才可以被衡量,它们不是抽象的物理属性,它们是为所指动物特定的,与动物的姿势和行为相关,所以 affordance 不能像我们在物理中那样来衡量。

我们在探讨交互设计的可供性之时,认为一个功能应该能为自己发声,通过合理的方式声明它本身的用处(道路可供人步行)。

能指(Signifiers)是个语言学概念:

能指和所指是语言学上的一对概念,能指意为语言文字的声音,形象;所指则是语言的意义本身。按照语言学家或者哲学家们的划分,人们试图通过语言表达出来的东西叫”所指”,而语言实际传达出来的东西叫”能指”。

简单说来,可供性设计所传达出来的东西,就是它的能指。(地面是平的表明人可以用脚在上面走路)

没有能指,用户也就无法真正察觉到其中的可供性设计。

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

在上面的案例中,你能看到按钮设计的进化和发展。第一个按钮仅仅只是单词,没有能指,而第三个按钮加上了圆角边框和阴影层次,反映出它作为“按钮”的特征。

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

能指同样可以以比喻或者暗喻的形式存在,因为人们需要明白他们为什么要同这个对象进行互动,而不止是知道他们可以。正如同上门iPhone 屏幕底部的托盘,你能看到圆角边框的按钮,从而了解我们可以按它,其中的电话、邮件和音符等符号,则以特定的形象暗示用户,点击按钮可以达到什么样的目 的,做什么样的事情。

4、可学习性

在理想情况下,用户对任何功能操作过一次之后,都会记住如何使用,然而现实情况并非如此。直觉化的操作和便于熟悉的设计必须贯彻到每个界面当中。

成功的交互设计,应该充分借助一致性与可预测性的设计,来降低整体的复杂度。举个例子,有的页面值得保留,链接尽量在新页面中打开;而有的页面涉及到特定的操作和流程,不能在新页面中打开,防止用户重新定位。

一致的设计确保了设计的可预测性,也提高了整体的可学习性。

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

UI模式是提升交互可学习性的常见战术。许多网站和APP都已经开始使用UI模式了,模式化的设计确保了一致性,也便于用户熟悉,同时也可以在此基础上添加更多大量的创意设计。

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

面包屑就是网页设计中最常见的一种UI模式,它引导用户更为有序地浏览网页。不论你在网站哪个地方,面包屑会直观告诉你浏览路径。这种熟悉化的设计提升了网站的可学习性。具备可学习性的网站会鼓励用户使用它们,自然而然地提高了可用性。

5、反馈和响应时间

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

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

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

在下面的案例中,Hootsuite 通过猫头鹰来展现用户长时间不操作而“进入睡眠状态”,这是符合逻辑且非常有趣的,这种反馈将停止更新的负面状态设计得有趣而好玩。

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

另外一个给用户反馈的重要因素是响应时间。通常给予用户最好的反馈就是尽快、尽早、立刻给予反馈。绝大多数时候,延时反馈会让用户感到非常烦躁的,除了极少数特殊的情况。

提升交互设计的五步流程

了解了交互设计的五大支柱之后,接下来我们来介绍提升交互设计的方法。

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

著名的交互设计师 Stephen P. Anderson 曾经说过,如果有人假装是你的界面,当你同他进行交互的时候,会大开眼界的。任何一个尴尬的反馈都会被放大,你会在这个过程中学会规避反人类的交互,当你完成整个过程,就可以开始编写交互的脚本,调整结果了。

接下来,我们说说具体的流程:

1、角色扮演和互动:找两个人来,一个扮演界面,另外一个记录笔记。为扮演界面的人手持一个浏览器窗口纸板,并且同时通过投影仪投射出界面。你扮演 用户,同“界面”进行对话,你阐述并解释用户的目标,而“界面”则仅限于标签、菜单和其他的UI元素来为你的操作进行“反馈”。

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

2、勾勒出叙事线索:记录者记录每一个步骤的细节,包括任务和情绪。完成这个步骤,可以借助User Scenarios文档来完成。

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

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

为了打造流畅而可靠的用户体验,你需要对交互设计有更加深入的了解

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

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

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

结语

交互设计并不只牵涉界面行为,它是一项基于用户行为的适应性技术。用户在功能和情感上喜欢什么,期待什么,这是关键。但是也正是基于这样的限制,你 所设计的产品应当是针对这些期望和需求而做的。所以,最好的交互设计大概是这个样子:对于用户响应迅速,不会夹杂太多的思想,就如同一个完美的魔术,流 畅,值得期待,又符合逻辑。

译文来自:优设

原文地址:thenextweb

优设译者:@陈子木

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

(0)
iouedioued
上一篇 2015-08-26
下一篇 2015-08-26

相关推荐

  • 通知邮件,潜移默化地影响着用户体验

    在打造一个产品的过程中,创业公司往往会把绝大多数的财力和精力用在开发应用或者搭建网站上,很少投入到给用户发的提醒邮件上。

    2017-05-31
  • Axure RP 8 入门手册 – 第6章(三)

    第8节检视功能-元件属性Alice.:小楼大大好!小楼大大帅!我有些小困惑,想请你帮我指点下。可以吗?小楼:你诚实直白的我无法拒绝。Alice.:嘻嘻!我的问题有点多哦。小楼:来嘛!Alice.:我想做个密码输入框,就是输入文字时只能看到圆点那种。帅帅的小楼老师,这个怎么实现呢?小楼:这个是文本框的类型,看来你对这个元件的属性不太了解呀!我给你详细讲解吧!在检视功能的属性面板中有每个元件的属性设置,不同元件的属性会有差别。这里我对各类元...

    2018-04-22
  • 【交互设计-UX/UE】数据加载

    数据加载是设计中比较容易忽略并且又比较重要的环节,以一种合适的方式告诉用户正在发生什么,将会发生什么,让用户对于加载后的内容有明确的时间预期,减少用户的等待感,尽可能消除焦躁情绪。 一、6种常见数据加…

    2016-08-03
  • 设计实战案例!谈谈网易严选企业购的交互设计

    网易UEDC – 柴蒙:企业采购是现今市场经济下一种最主要最主流的采购形式,其特点是大批量采购商品。传统的企业采购方式不可避免地会带来如回扣、效率低、采购过程不透明等诸多问题。

    2017-09-21
  • 如何基于反馈迭代用户体验?

    作为互联网从业者,大家都知道,任何一款互联网产品的迭代,都一定离不开用户反馈和数据。如何通过这两个部分对产品的现状进行分析,并且提出产品功能迭代和体验优化是所有产品经理和设计师日常工作都需要面对的课题。作为一名城市规划建筑师,你接到一个任务,是要在横穿城市是一条河上造一座桥,你拿到这个任务的时候你会想些什么,“我该在哪个位置造这座桥?”,“我该造一座什么样的桥呢,斜拉桥还是拱桥?”还是“这座桥是木制、铸铁还是钢筋混凝土?”,这些都不对,首先应该想的是“为什么要建桥?”,如果你得到的答案是需要将人送到河对岸去,那么基于这个目标,你还觉得一定需要造桥,挖个隧道是不是也可以,建个轮渡也行啊。如果答案是需要将某些信息送到对岸去呢?整个命题就发生了巨大的变化。这就是设计思维在思考问题时的重要意义。

    2017-05-20
  • 你离互联网产品经理,只差一句自我肯定!

    从2014年开始,伴随着越来越多产品人转岗心路历程的分享,产品壹佰为此专门开辟专栏,记录了他们这一段学习路程中的点点滴滴。他们之中,有对未来茫然无措的大学生、不甘于现状的互联网从业者、郁郁不得志的传统行业人、孤立无援的产品新人以及举步维艰的创业者……在他们的诉说中,有着转岗前的不安、惶恐,也有刚转岗成功的喜悦、激动,更有成为产品经理后自我知识的输出!分享!如今,这些记录成长历程的人儿们如疾风般快速的蜕变着,梦想实现,更幸运的是,其中的出...

    微信热点 2018-03-10
  • 留白这种设计手段的4大必要功效

    留白不只是空白的画布,它是一个功能强大的设计工具。留白是很难掌握的,留白的应用是包含艺术与科学。真正了解多少空白位置才足够创造一个良好的布局需要多实践。你设计得越多,你就会学得越多。“Whitespace is to be regarded as an active element, not a passive background” — Jan Tschichold
    “留白不单单是一个被动的背景,而是一个活跃的元素。”Properly using whitespace between paragraphs and in the left and right margins can increase comprehension up to 20%
    适当的运用段落之间的留白和左右边距的留白能有效增强理解力高达百分之20.The more whitespace around an object, the more the eye is drawn to it
    越大的留白空间包围一个物件,越多的目光就会集中在这个物件身上。As designers, it’s our responsibility to create usable communication vehicles.
    “作为设计师,我们职责就是去创造“沟通手段””Let the products speak for themselves
    让产品自身为自己说话。

    2017-04-28
  • 交互设计和我-一个大四学生的探索交互设计之路

    我不敢说交互设计是什么,因为我没有真正的项目经验,我现在所理解所定义的一切,都是根据交互前辈们的经验以及相关的经典书籍和部分项目讲解。所以用一句不好听的话来说,就是纸上谈兵,对于这个十分刺激我的事实…

    2015-07-27
  • 实例剖析尼尔森十大交互设计原则在设计中的用法

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。本文作者(熊猫小生)通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法~一、雅各布·尼尔森(Jakob Nielsen)简介雅各布·尼尔森(Ja...

    2018-01-30
  • 为什么交互设计师总觉得自己的方案不完美?

    最近和一个交互设计师闲聊,聊到了关于对自己设计产出物的满意度问题,感触颇深,专门整理了一下分享给大家。

    2017-04-29