用户行为预判的交互设计研究

#交互原型##预判设计#主要有两类目的:一是在用户初次体验某种功能时引导用户,避免用户陷入困惑;二是提前判断#用户行为#,缩短行为路径。
1478137044-7595-E69D8EE88C81-E5A4B4E59BBE
作为“剁手党”,闲暇功夫刷淘宝已经是消磨时间的习惯行为。某天看中了一件商品,想要和朋友分享,使用“HOME+锁屏键”截取屏幕时,一个push吸引了我的注意:

1478137045-6223-E59BBE1       图1  淘宝APP截图提示

这是一个很好的预判式设计,分享流程通过改进变得更加友好。在购物类应用的截图操作的目的基本只存在两种:我想看看和我想给朋友看看。淘宝的设计团队在这里预判了用户的下一步操作,并为其提供了分享的入口,省去常规分享操作流程的中间环节,缩短了用户操作路径。

回顾一下,微信团队在很早就有关于用户行为的预判的亮点设计。还记得微信的图片分享吗?当分享的上一步操作为截屏或保存图片等新增照片库图像的操作时,进入微信的首次图片分享会弹出最新添加图片的预览,便于快速分享。

1478137045-2418-E59BBE2图2  微信发送图片提示

我们可以看到,在淘宝和微信的预判设计中,预判信息只在需要时出现,并且信息展示的方式也很吸引用户的注意。实际上,满足用户行为意识层面需求的设计,更容易引起用户共鸣。我们可以将此总结为用户的“隐性需求”,而我们要做的就是行为预判,将这种需求由暗化明。

例如,当用户有社交需求时,利用社交类APP产品的特性可以达成用户目标:用户可以通过分享照片、发状态、分享视频等许多种手段来实现。完成同一份目标可能有多种不同的任务,而每一任务中也包括了多个步骤。那么预判式设计通过对操作习惯和对事件认知水平做出判断,从而对用户的下一步具体操作进行引导并简化。

预判设计主要有两类目的:一是在用户初次体验某种功能时引导用户,避免用户陷入困惑;二是提前判断用户行为,缩短行为路径。

1478137044-7239-E59BBE3图3  预判设计引导用户的思路

那么作为交互设计师,在支撑用户实现目标的过程中可以做些什么呢?绘制页面布局、纠结button样式、push形式等细节都是工作必要,它确实能为用户带来更好的体验;但在操作流程上来考虑,这些对于用户来说只是一带而过的东西,在用户目标层面来考虑,其实对产品功能和结构的改善影响微乎其微。事实上,用户的行为中渗透了意识。从用户的行为推断用户意图,将用户的意图结果化,反推之我们可获得两种预判设计方法:顺应用户行为和结合使用情景。

顺应用户行为的预判设计

用户在处理和操作的流程中步骤越多,对理解力和决策的要求越高,耗时也会相应增加。因此在理解用户操作行为的层面上的交互设计能够减少冗余步骤,简化操作流程。因此顺应用户行为的预判设计也可总结为四个字:以简驭繁。抛开繁杂的操作过程,运用最少的任务和行为来达成用户目标。简约不仅仅是视觉的形容词,同样适合行为。

顺应用户行为的预判设计主要目的是提高任务的转化效率。举个栗子,chrome浏览器的地址栏中有一项是“paste and go”,优化了“粘贴—点击—跳转”流程,将步骤汇总,简化操作。

1478137045-5495-E59BBE4图4  chrome 浏览器地址栏

同样是粘贴,当剪贴板中包含网址数据,点击UC浏览器的网址输入框时,下方会自动带入剪贴板数据。

1478137045-5401-E59BBE5图5  UC浏览器地址栏

很多用户在使用电脑时都会遇到找不到鼠标指针的情况;这种情形在屏幕切换的情形下尤为可见。大多数用户的处理方法都是:频繁的晃动鼠标以便视觉能够捕捉到指针位置。那么苹果系统是如何解决这个问题的呢?OSX10.11系统将摇动鼠标作为用户“寻找鼠标指针”的行为预判,只要用户摇动鼠标,指针就会放大,便于用户快速定位。

1478137046-9341-E59BBE6-1图6-1  OSX11.0 鼠标指针

1478137046-3712-E59BBE6EFBC8D2图6-2  OSX11.0 鼠标指针

良好的交互流程必然是尊重人的价值的。相对于建立新奇的操作体验,首先应满足用户固有的操作习惯,并分析影响和驱动这些行为的因素,再在此基础上进行设计。从用户的角度和立场来考虑,同时注重交互的效率与体验,才能设计出优雅而接地气的产品。

符合使用情景的预判

做设计时,往往需要考虑在特定情景下,用户行为背后的思考与需求。因此符合情景的预判,我们也可称其为“符合用户感知的预判”。思考用户使用产品的情景,还原常态,可以及时而高效的迎合特殊条件下的用户需求。

情景下的预判设计可以在某些特殊条件下触发。比如IOS的锁屏界面,会根据用户的地理位置推送相应APP的快捷入口。比如移动到银行附近,左下角就会出现招行的icon。

1478137046-8983-E59BBE7图7  IOS锁屏界面

其实在很多产品设计中都有涉及,举一个最常见的例子:联想功能。不得不说这是个让大脑退化的功能,但自从这个功能产生,我们便再也离不开它了。试想下没有联想功能的搜索框和输入法,简直是一场灾难。虽然联想功能背后更多的是算法的支持,但是他背后的思想依旧是用户目标的实时预测与反馈。

在Google翻译中,第二次点击发音按钮,语句的播放速度会比第一次缓慢。这是便基于使用情景的设计。为什么要播放第二遍发音?其实只要考虑了这个问题,答案很容易得到,无非是没有听清或者想要进一步学习,从这个角度来说,用户真正需要的是“更清晰易懂(学)的发音”,那么这个设计也就因此而诞生了。

1478137047-7538-E59BBE8图8  Google翻译

结语

其实预判用户行为的交互设计是建立在整个产品的框架上和对用户深刻理解上的细节迭代。用户花费着时间和精力使用我们的产品,我们理应为他们提供良好体验,让他们觉得这个设计简洁有效,并能感觉到自己在使用的过程中是被尊重的,而不是居高临下的告诉他们:“Hey,you are foolish,这么简单的功能都不会用吗!”

正如《一目了然》中所说,“当一个软件设计得很糟的时候,我们往往能立刻指出哪里做的很差;但一个优秀的软件,你却往往难以解释优秀从何而来”,因为沉浸式的流畅体验为你减轻了很多思考的路径与时间。在产品快速迭代的时代,作为设计师,理应避免仅仅只是停留在绞尽脑汁地做一些美妙新奇的设计来取悦用户、意图提供更多的附加价值,而忘记在设计中推敲细节元素、坚持以用户的角度看问题的初心。不要忽略预判设计给用户带来的感动,这是委婉表达尊敬和专业的最好方式。

原文:http://uxd.58.com/blog/66.html

作者:

文章参考文献

[1]poluoluo.com. 交互设计最重要的是态度:通过交互来引导用户[EB/OL]. http://www.poluoluo.com/jzxy/201109/143218.html

[2]xker.com. APP用户引导设计秘籍[EB/OL]. http://www.xker.com/page/e2014/0816/133304.html

案例参考网站

[1]https://www.zhihu.com/question/30361827

[2]http://littlebigdetails.com/

配图:来自pexels.com

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

(0)
iouedioued
上一篇 2016-11-02 15:28
下一篇 2016-11-03 09:53

相关推荐

  • 【酒店设计】关注用户体验的酒店设计永不过时

    位于德国巴登-巴登(Baden-Baden)的Roomers酒店,建筑的外观采用简洁的黑白灰格调,错落有致的立面构成,干净利落。建筑的外观采用简洁的黑白灰格调,干净利落、错落有致的立面构成。酒店共设有130间客房及套房,另外还有餐厅与酒吧、屋顶酒吧、500m²的水疗中心、户外花园、无边泳池等等。在精品酒店的设计中,越来越关注客人的亲身体验感,其中有几个重要的关键点:家的温馨感、艺术馆般的艺术气息、现代极致的设计感。一楼的moriki餐厅...

    2018-04-07
  • 7个未来网页设计的发展

    太多的文章会告诉你什么是酷的在网页设计中。 我要带你做一些真正的预测。 1. 手势是新的点击 我们忘记了滚动网页曾经是多么困难。 大多数用户会刻意将鼠标移动到屏幕的右边缘,使用一些“古代”称为“滚动条”: 作为一…

    2015-08-19
  • ArtCenter 2018交互设计本科详解

    交互设计无处不在,从手机应用到游戏,再到可穿戴设备和数字环境。交互设计领域正在经历着巨大的增长,市场对有经验的数字设计师的需求也在激增。专业简介ArtCenter在交互设计领域的丰富历史跨越了平面设计、交通设计、娱乐设计、工业设计和媒体设计等领域,毕业生现在在苹果、谷歌、微软和IDEO等公司担任领导职位。ArtCenter的前沿课程致力于创新。我们的学习过程强调核心方法、工具和过程,使学生在新技术出现的时候能继续前进。但这一课程并不全是...

    2018-05-07
  • 这个按钮不简单

    Slack 将保存时的「状态提示」设计在了同一按钮中。Flava 通过按钮的不同状态将「删除」与「确认」两个操作结合在了一起。Arent & Pyke 巧妙的将进度提示设计在了提交按钮中。Fantastical 2 利用了 iOS 的 Switch Button 来对 Event 和 Reminder 两种类型进行切换,并在按钮中加入了相应的图标用以识别。Wifeel 将 iOS 和 Android 版 App 的下载按钮统一设计在了一个按钮中。Tidy 在进行「归档」和「添加至相册」操作时,会在顶部以同色的方式来标识所对应的操作按钮。在 Tumblr 中关注某个用户时,「Follow」按钮会变为当前用户的头像并以一个小动画来作为关注成功的提示。

    2017-06-05
  • 从单线走向双线,第三代用户体验即将到来?

    双十一在即,加之今年的新零售狂潮,零售业从线上到线下可以说纷纷摩拳擦掌。京东天猫剑指双十一已是老生常谈,值得注意的是,今年的双十一迎来了更多样化的全民购物盛事,比如飞凡推出的“2017飞凡狂逛节”。据了解,与京东天猫等电商大促有所区别的是,“2017飞凡狂逛节”重点是线下逛,与众多剁手党网上拼杀对比,着实令人耳目一新。新零售改革加速,用户体验核心发生质变可喜的是,我们看到零售业巨头和创业者们都在深挖线下。比如今年爆红的无人便利店和无人货...

    2018-02-03
  • 电梯按钮的交互设计

    开始注意和观察电梯的按钮面板,是因为觉察到自己因常乘的两部电梯设计细节方面的种种不同而陷入了混乱。电梯常常会和自己"想的不一样",即预设的或已建立的心理模型失效了,我们不得不重新审视电梯的操作面板,重新建立心理模型,找到对应的按钮。如果日常常搭乘几部电梯,它们之间的操作规则和心理模型还不一样的话,一是容易让人混乱,二则给人增加了记忆负担,实在是很麻烦。觉得这一小块可操作区域很有趣很值得分析之后,好奇之下找了不少图进行研究,五花八门的设计...

    2018-02-06
  • 国内11个HTML5平台的星级评测

    本文以HTML5工具专业性为主要指标,不以名气论高低,内容多以企业网站介绍为依据,辅以使用体验。四个指标,功能是H5工具使用的基础,模板属于工具适用性的象征,定制服务能体现平台的生态性,易用度则是用户友好范畴。

    2017-05-30
  • Axure RP 8.0安装图解

    Axure RP 8.0下载链接:链接:https://pan.baidu.com/s/1jJFQwLK 密码:3d1yAxure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illu...

    2018-03-24
  • 扁平化设计的8个实用小技巧

    「材料设计」方兴未艾,扁平化 仍是主流设计风格。今天@正越升 同学总结了扁平化设计 的8个小技巧,字体、图标、排版、配色等都有提及,教程深入浅出,非常适合新手,学会可以直接拿来作海报和PPT设计。

    2017-05-31
  • 【专访】全美交互设计No.1:卡内基梅隆的实验性字体设计课程

    卡内基梅隆设计学院美国最Top交互设计专业辛向阳老师毕业于此此学校的毕业生大多会输出到硅谷顶级的互联网公司:google\facebook等今期为大家推荐一位学生的学习心得周于阡Bettina Chou过去4年在卡内基梅隆大学,给了我许多机会学习各种各样的设计,不管是UX/UI, 传媒设计或课外作品,我都希望作品能给观众带来欢乐。我认为任何经验都能发出灵感,所以总是在吸收新东西。现在我正在:念村上春树写的 “Absolutely On ...

    2018-03-28