首页

微交互:细节决定成败

鹤鹤

正如题目所说:细节决定成败,微交互就是利用细节提升产品体验和设立品牌标志。

一、摘要

直到今天,人机交互已经有很长时间的发展。从例如烤面包机的简单产品到银行应用程序类的复杂数字产品,我们每天进行上百次的交互。这些交互转化为产品的可用性,最终转化成用户满意度、信任度和产品整体体验。

在过去的二十年里,设计师们一直在关注这些交互(按钮、滚动、长按等)。从电脑大屏幕到移动设备、智能手表以及现在的可折叠设备,交互也在不断地发展。本文研究了微交互的结构及其与交互模型的关系,审美体验的不同驱动力,以及我们如何通过改变微交互的元素来优化体验。最后,我们讨论了自下而上的产品构建方法。

二、简介

自灯泡、收音机、门铃等电气设备出现以来,微交互一直存在于我们的生活。微交互和技术共同出现、发展。在我们的日常生活中充满了与周围物体的微交互,例如使用烤面包机、解锁手机、将手机切换到静音模式、控制音量等。

从简单的按下按钮到摇动手腕激活智能手表,微交互随着技术的进步而不断发展。像复制文本或移动文件这类我们如今习以为常的、无形之中的微交互,都曾是新颖的微交互。观察微交互有助于设计师改进产品。

有趣的是,设计师将现实生活场景投射到产品来建立微交互,如剪切-粘贴、放大-缩小等。这些细节不仅提高了产品的可用性,也通过直观的互动降低用户学习难度。

微交互:细节决定成败

我们如何准确定义什么是微交互,什么是交互?

论文《开启移动微交互》(Ashbrook,2010)将微交互定义为“接触设备开始到完成的时间不超过4秒的互动”。而《微交互》一书(Saffer,2013)将其定义为:“微交互是围绕着单个用例的产品使用场景——它们有一个主要任务。”整个应用程序或产品可能只是一个微交互,例如,天气应用程序(图1.1)或烤面包机,因为它们只关注一件事。

图1.1 天气应用程序能被看作是一个微交互,因为它只显示天气。

图1.2 LinkedIn 的“喜欢”按钮由两个微交互组成,(a)当你长按“喜欢”按钮时,它会打开一个空间展示多个表情符号以供选择(b)你选择表情符号发送给帖子。

一个功能可以由多个微交互构成,例如LinkedIn的“喜欢”按钮(图1.2),人们可以对帖子发送不同的表情符号。因此,微交互是一个功能模块,或者是整个产品。与产品互动时,微交互也许能帮助用户了解做什么,如何做,后续是怎样。精心设计的微交互使产品变得直观,优化了产品的用户体验。

当微交互打造了与品牌产生共鸣的特殊体验时,它化身为了品牌标志。专业术语称之为“标志性时刻——产品或服务中给人留下持久而难忘印象的突出互动”(Janhagen, Leitch & Judelson, 2020)。

Facebook的“喜欢”按钮是它的标志性时刻。微交互并不仅仅局限于视觉,它们可以是声音、触觉、实体硬件或手势交互。Snapchat的通知作为产品的标志性时刻是因其独特的声音。同样地,iPhone有一个中心按钮作为苹果的标志,它有多个微交互方式。

微交互通常首选(Narvhus, J.M. 2016):

  • 沟通反馈。
  • 开启和关闭某项功能,如将手机静音。
  • 实现一个单一的任务,如喜欢一个Facebook上的帖子。
  • 控制一个正在进行的进程:显示更改或系统状态,如加载条或状态图标。
  • 改变一个设置。
  • 防止人为错误。
  • 查看或制作内容。

我们将在之后的章节中研究一些微交互案例。

三、交互模型与微交互结构

1. 人类处理器模型

在进入交互模型之前,我们将尝试研究心智和心智表征,以更好地理解人类如何与世界上的物体互动。(Newell & Card, 1985)文章谈到了三个不同的处理器:感知处理器、认知处理器和运动处理器是如何工作以理解周围世界。

认知处理器与长期记忆和工作记忆一起工作,从现有的知识中提取物体、感觉、行动等的表征,以理解来自知觉处理器的输入。一旦认知处理器完成处理,它就会向运动处理器发出信号,以特定方式对特定情况采取行动。心智表征是现实世界中事物如何运作的心智模型或理解。

2. 诺曼交互模型

唐-诺曼的七个行为阶段(诺曼,2013)(图2)是一种更清晰的心智学形式,解释了人类如何与物体互动以实现目标。目标可能是打开一盏灯或在移动应用程序上进行在线交易。让我们把手机解锁的简单目标分解成七个行动阶段。

  1. 目标是手机解锁。
  2. 我如何解锁手机?输入密码或扫描手指指纹。
  3. 选择哪个方式?如果我选择输入密码,那么就在屏幕上按顺序点击密码。
  4. 一旦我有了行动规范,就可以执行任务。
  5. 点击回车键后,将看到后续发生的事情。
  6. 我看到我已经到达了主界面。
  7. 我根据以往经验判断是否已经完成了目标。

微交互:细节决定成败

在这个循环的每个阶段,都有一个输入->处理->输出的过程。在宏观层面上,我们也在遵循同样的过程来达到我们的目标。我们可以从行动模型的七个阶段推导出互动周期(Norman, 2013)(图3)。

交互周期包括执行过程和评估过程,前者是行动所需信息差,后者是行动发生时各类情况所需理解的信息差。整体用户体验取决于交互过程中互动周期的每个部分。微交互的目标是消除差距,使产品变得直观。现在让我们看看微交互的基础结构,了解它们如何帮助消除信息差。

3. 微交互的结构

微交互之所以强大,不仅仅是因为它们的细微交互差别或迷你尺寸,还因为它们构建的方式。微交互的结构包括四个部分(图4)(Saffer,2013):开启微交互的触发器,决定微交互如何运作的规则,以及影响微互动的元规则——阐明规则、循环和模式的反馈。

触发器可以由用户触发,例如点击图标、填写表格等,触发器也可以由系统产生,例如低电量提示框,通知用户电池电量不足。

微交互:细节决定成败

让我们以Duo应用中验证用户的微交互为例。

  • 触发器:向我发一个推送通知是微交互的触发器(图5(a))。
  • 规则:它将发送带有两个动作的通知(图5(b))。用户必须点击这两个动作中的一个(图5.(c))。
  • 反馈:一旦用户点击批准,它将显示带有“登陆”的绿色提示。(图5.(d))
  • 循环和模式:如果你选择了在7天内记住本次登陆,下次登录时它将直接显示绿色提示,而不是向你发送推送通知。

微交互:细节决定成败

现在当我们解构微交互并理解其结构时,微交互的结构支持行动七阶段理论,最终帮助消除执行和评估之间的鸿沟。精心设计的触发器便于用户进行计划->指定->执行行动,精心设计的规则和反馈便于用户进行感知->解释->对比结果确认完成目标。我们将在下一节中谈论触发器、规则和反馈的设计,以了解微交互如何有效构建所需的用户体验。

我们回看心智部分,认知处理器不仅包含了不同事物如何工作的心智模型,并且随着我们在日常生活中对新物体的体验而不断地发展。从这些心智模型中,设计师可以创建概念模型。作为关于产品和功能运作的高级计划,概念模型一旦被建立就能被转化为行动模型的七个阶段,从而帮助我们创建对用户来说很直观的微交互。这是一种自下而上的方法,用于建立交互 -> 功能 -> 产品。

四、审美与微交互

在上一节中,我们谈到了交互模型和微交互的结构,并探讨了它们如何携手使产品变得直观好用。现在我们将关注动态审美体验,以及微交互如何在产品的微观层面建立体验。

审美体验的韵律之舞有一个内在的、动态的结构。杜威指出了体验建立的相关过程,如累积、保存、紧张张力和预期,来指称体验的内部动态(McCarthy & Wright, 2004)。

完整的用户体验是这些动态的集合,它可以根据用户过往经验和知识认知而变化。过往经验和任何审美经验都取决于上下文:用户的过往和能力,人工制品的技术,以及互动发生的任一物理、社会空间(Petersen, Iversen, Krogh, & Ludvigsen, 2004)。当我们与物体/产品互动时,触觉、嗅觉、视觉和听觉都会唤起体验。

在过去的几十年里,设计师们一直在关注这些触发奇迹的交互。交互不应该仅仅是传达内容和完成任务,它应该引人思考,并鼓励人们以不同的方式思考变化。我们将展示一些唤起了不同审美体验的动态微交互案例。

微交互:细节决定成败

1)积累:指伴随着体验时间展开的积聚。我认为谷歌支付作为微交互建立了用户体验,并包含非常优秀的展开界面和支付完成音效。

这个之所以判定为其微交互,是因为它只专注于一件事,而且建立了非常充实的体验。这个交互开始于点击支付端->选择银行卡->加载->支付完成(图6)。动画和音效带来了一步步徐徐展开的体验感受。

2)留存:指保留一些过往事物的趋势,不论体验还是内容。文本或信息的保存对优秀用户体验来说确实是必要的,毕竟这样能减少认知负担。在网站和应用程序上填写表格时,许多微交互都保留了之前的填写信息。

这类微交互的一个非常简单的例子是,当你复制一个链接并试图将其输入网络浏览器时,浏览器会显示直接粘贴链接的选项,甚至显示你复制的内容(图7)。我们在这此观察到与微交互的结构不同的是重点更多地放在了交互的反馈上,它传达的状态是:你复制的内容已保存,并可以用来搜索网页浏览器。这是一个展示了我们如何调整微交互侧重点来优化体验的优秀案例。

3)张力:指体验内和参与体验的人之间的关联。这是社交媒体和流媒体平台使用的一种技术,当用户期待在短时间内快速阅览内容时,用户不断下滑来反复触发刷新的微交互(图8.) 。微交互带给用户参与感以牢牢抓住其注意力。它带来的延迟满足,让用户在想快速浏览内容时耐心等待。

这个特殊的微交互的重点是方式:即在内容加载之前显示一个加载器。

微交互:细节决定成败

4)预期:它包含两个时间阶段。第一阶段是用户在交互中开始期待,第二阶段是用户从交互中得到期望反馈。我想到的微交互是Google Pay India的刮刮卡奖励(图9)。

这个特殊的微交互为它在印度带来了巨大的成功。人们喜欢期待好事发生,即使期望没有发生。若是期望发生,那期待就是值得的。支付完成后,用户进入刮刮卡奖励界面,对刮奖产生期待,点击卡片进行刮奖。刮奖微交互的重点是动作的触发上,兼具有趣性和参与感,触发本来可以只是一个点击按钮,但他们设计了一个刮擦动作作为触发。

上文提到的各种例子可看出:通过调整微交互的元素来优化体验。微交互小而强的原因在于:它们是产品的差异化细节。好的微交互能让产品提升一个等级。

五、微交互会引人讨厌吗?

我们认识了精心设计的微交互在创造美好体验方面的力量,现在让我们来探讨一下,如果糟糕的微交互可能会引发什么问题。

我想到的案例是手机通知。并不是说通知很糟糕,而是它设计得如此之好,以至于它有违用户的意愿。通知是由系统发起的触发器,它仅显示部分信息来吸引用户点击。

每个人都会遇到这样的情况:明明只是想看看时间,但在看到通知时点击进入信息,无声无息之中半个小时就耗费了。这不仅仅耗费了时间,更严重的是人们在驾驶时也会分心看通知。

另一个案例是 Facebook 的著名的“喜欢”按钮。这个精心设计的微互动,是 Facebook 的标志,但没有人意识到一个微互动可以对人们的生活产生如此大的影响。近期 Instagram 停止显示帖子上的点赞数,因为它对用户行为产生了负面影响。上面的例子也显示出:小事情可以产生大影响。

微交互:细节决定成败

微交互也会令人讨厌,例如,在填写表单最后点击提交时,弹出一个对话框(图10),说表单填写中存在错误。这里的触发器是提交按钮,规则是显示一个对话框,反馈是静态文本——“有填写有误”。

这里的微交互形式是错误的,如果填写有误,提示应该在出错点附近。而且这里的反馈是糟糕的静态文本,对用户没有任何用处,因为它没有说明出错的位置和类型。因此,微交互的使用和场景真的很重要。

六、结论

纵观全文,我们探讨了什么是微交互,以及如何创建符合交互模型的微交互来消除执行和评估之间的差距。接下来,我们研究了动态审美体验,以及我们如何在产品的微观层面上用微交互创造美好体验。

设计师有几种方法来创建微交互,方法一是自下而上思考,把一切都想得越小越好后,再建立功能。另一种方法是把整个产品看成是一个微交互,如果你想增加另一个功能,那么就把它看成是另一个只包含一个微交互的产品。

我相信谷歌支付是以这种方式创建的,因为它是从支付开始,且只专注于支付,后来才引入了奖励和其他内容。

微交互有助于建立一个品牌标志和提升用户体验。我们喜欢或者讨厌产品的根源正是细节。细节是向用户展示你以用户为中心并为用户着想的方法。这就是微小的事情会带来巨大差异的原因。

作者:三分设

来源:人人都是产品经理

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


B端用户体验的三个层面

鹤鹤

一、前言

很多情况下,用户选择一个产品的理由是有没有某个功能,但弃用的理由却常是产品好不好用。能否打造优质的B端用户体验,成了影响B端产品用户续约的一个关键因素。

二、业务体验层 

(1)流程越短越好。 我们在上班、逛街的时候,倾向选择一条最短的路线,希望用最少的时间到达目的地。用户操作系统时也希望这样。

(2)整合功能场景。 某个功能由谁、在什么场景下操作,以及可能会遇到什么问题、需要什么关联功能来解决,如果功能点相互独立, 关联很少,会让用户用起来很不顺手,有种断层的感觉。

(3)有效指导异常。Saas 有一个特点是功能模块间会尽可能相互独立,基础数据的设置和业务上面的使用往往是在不同的功能模块内。这会导致B端用户在遇到空数据的情况下, 可能不知道该怎么操作。这时,需要要提示用户按具体步骤操作来顺利完成任务。 

三、交互体验层

交互体验,对上承接了业务,对下承接了视觉。好的交互体验能让业务流程简捷,更关注用户习惯。 B端产品的交互和C端产品差异较大,C端常用的移动客户端屏幕小,可显示的内容较少,需要不停地跳转完成操作,但B端产品大多用电脑来操作,一页可显示的内容较多。所以做B端产品交互一般需要注意下面几点:

(1)少跳转。曾有用户反馈,说某个功能操作流程太长了,操作起来很麻烦。通过走查发现流程其实是没有问题的,不能再缩减流程了。通过可用性测试发现是因为跳转页面导致,用户在操作时去了另一个界面,然后再返回来,让用户在操作时感觉流程更长。于是就把页面跳转优化成了弹窗,弹窗里面操作完点击关闭即可, 改后用户觉得流程缩短了,操作效率更高了。

B 端产品能用弹窗的时候,不要跳转,哪怕弹窗里面加弹窗,只要不跳出这个页面,用户都会觉得没有阻断他的操作。虽然,从交互的角度讲,弹窗里再加弹窗不符合规范,但在实用性面前是可以商榷的。

(2)少弹窗。 相比弹窗,在某些场景下,有更好的处理方式。比如,直接放页面上。 弹窗是点击按钮触发的,自动完成操作后关闭,或者用户手动关闭。虽然比跳转好,但比不上在页面上直接呈现高效。

页面上直接呈现是理想状态。但是往往因为内容太多,很多时候不得不隐藏起来。直接呈现对于页面的布局和设计都有极高的要求,原则是高频且重点的内容外露。

(3)交互形式统一。 整个系统里面的交互规则要保持一致,大到弹窗的出现形式是居中弹出还是右侧滑出,小到多选控件是不是一致。 在整个系统里面相同的业务都用同一个控件。虽然可能由于一些业务的特殊性, 需要对控件做个性化处理,但不要影响整体的一致性。 

三、视觉体验层 

(1)信息清晰。 信息清晰不仅指信息结构的层次,还包括页面的内容,最好让用户一眼就能看到上面写了什么,有什么功能。有些设计师不喜欢加黑、大、粗的字, 觉得不够高级,而是根据自己的美感把字体设计为一些个性化字体,且字号不大。

很多时候B端用户的操作时间比C端用户长,他们需要长时间盯着页面,所以页面信息清晰就能减少他们的疲劳。

(2)信息紧凑。 当页面上想要呈现的内容较多时,设计师一定要压缩空间,使布局合理紧凑。

(3)少用图标。 有时候,设计师会使用图标来代替文字表达,并花大精力设计很好看的图标。图标的应用在C端产品中非常常见,一是为了节省空间,二是为了美观。但在B端产品中,大多数情况下,图标越少越好,有时文字的简写比图标来得直观易懂。图标过多用户需要使用很多遍才能记住每个按钮的含义。

四、总结

B端产品设计需要非常重视用户体验。这直接影响到用户的工作效率,转而影响到软件的续约率。 为打造好的用户体验,我们通常从业务层面、交互层面、视觉层面来着手提升用户体验。 很多时候,有些好的交互方案会受到技术框架的限制,导致方案无法实施。

但是为了产品获得更好的用户体验,首要考虑的依然是用户的使用流畅度、易用性,而不是实现的复杂程度、系统现有框架的限制、现有规范的标准。 系统上的难点应当留给内部去解决,把最大的便利性留给用户。这样我们才能获得更好的产品口碑、更高的续约率、更大的市场。


作者:忻芸
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

从流程角度提升用户体验

鹤鹤

一、前言

在B端产品设计中,理解并设计好流程,对产品的体验非常重要。通常涉及到有三个方面的流程:业务流程审批流程操作流程

二、业务流程 

在企业的日常经营中,为了对业务过程进行更好的管理,企业会梳理出一系列流程、规范以及作业标准。流程化能够帮助企业各岗位的员工更好地分工合作,使企业效率更高。对于 B端产品,设计师首先要读懂业务流程,然后才能设计好产品。 业务流程,是指为达到特定的业务目标而由不同的人分工合作完成的一系列活动。活动之间不仅有严格的先后顺序限定,而且活动的内容、方式、责任等也都必须有明确的安排和界定,以使不同活动在不同岗位角色之间进行流转交接。

下图是某企业的采购流程,涉及了五个部门、多个岗位角色、多个业务活动。

业务流程大多是企业根据业务特征、自身经营特点以及资源配置情况而制定的,在业务上具有一定的通用性,但在具体应用上又充满了企业的个性。业务流程和单据是经典搭档,可以说“流程 + 单据=业务”, 每个环节的工作形成一张单据,记录着时间、地点、参与人、业务状况。当这个环站的工作完成后,进入到下一个环节的工作时,单据也会随之流转到下一个系统中对应的功能节点,并形成一张新的单据,记录新的信息。

下图是某企业采购流程中从采购到结算部分涉及的单据:

除读懂业务流程外,我们还需要应用“场景驱动的设计”方法,整理出每个环节中涉及的用户、场景,以及作业的特征,并大胆地通过设计来改造流程,最后通过设计减少人员工作量,减少流程中的多余环带, 提升企业效率。这样才能设计出对客户有价值、用户体验好的产品。企业的收货流程,要经过到货签收、质检、 收货入库等过程,每个环节都会有诸多问题。下面是梳理了某企业收货流程的简易体验地图:

经过对场景和可行性分析后,设计了一套新的业务流程。流程简化为货车司机直接将货物送入指定仓库的电子围栏,并全自动质检、入库,大幅降低了人工成本并提升了工作效率。这一步通常是产品经理去完成,作为用户体验设计师在调研的过程中发现有好的流程优化方法,或者看到好的竞品值得参考,可以和产品经理沟通一起推动产品业务流程用户体验的提升。

三、审批流程 

在企业中,出于对重点业务的管理需求,除了会制定固定的业务流程方便大家协作,还会对业务关键节点做审批。简单的审批只需要在流程进行到关键节点时,将重要结果发给相应业务管理者审批。但是,由于一些企业组织机构复杂,管理严格,为了保证业务的合规与安全,需要多个角色、多个环节的审批,这个流程即是审批流程。


(1)首先员工提交需要审批的材料(系统中是提交单据)。

(2)各环节审批者会根据流程分别对材料进行审批。 

(3)审批通过后会自动进行到下一步。 

(4)审批不通过,就此流程结束。

(5)退回则打回到流程起点,待改进后重新走流程。

(6)审批都通过后,审批流程结束。 

在实际应用中,可能会有非常复杂的流程与功能。比如除常规的审批通过、不通过、退回功能外,还会有改派、加签、抄送等。

(1)改派:当前审批人将审批材料转给其他人。

(2)加签:增加审批的步骤,在一些企业中还会有前加签、后加签。

(3)抄送:将材料同时抄送给某人或某角色。

以上只是列举一些常用的动作,在一些大型企业或者国企,流程和功能更复杂。当面对复杂而多变的审批需求时,需要将审批流程设计得更加灵活、自由,具有自定义功能。另外,需要将审批流程设计得更加模块化,可以在任何一个业务环节中加入审批过程。

在审批流程的设计中, 根据企业制定的审批规则,自动判断是否符合标准,自动审批。尤其对一些每天都在发生、经常重复而不重要的事情,可以完全省去人工审批的过程,采用自动审批,自动触发业务流程,以此来提高审批效率。

四、操作流程 

前面两个流程主要基于企业业务制定,在企业没有信息化前就已经存在了,在改造优化上还有一些阻力和困难。作为用户体验设计师,可以通过对操作流程的优化来改进用户体验。

以上文中的收货案例为例子:

(1)系统中收到若干个质检任务。

(2)逐一打印质检单。 

(3)带着质检单来到仓库,寻找需要质检的货品。

(4)找到货品,逐箱打开进行检查,业务操作不熟练的还需要询问老员工。 

(5) 将质检结果随时记在打印出的质检单上。

(6) 逐一检查完毕,回到办公室,将信息录入系统。

这个过程繁琐,而且在操作的过程中,容易出错。因此根据实际工作中的业务场景,对操作流程进行了优化如下:

整个操作流程省去了“打印单据”“重复记录单据”“询问老员工” 的过程,并简化了“寻找单据”的过程及记录结果的过程。

在对操作流程的设计过程中,也应遵循“场景驱动设计”的方法,并将物理实体、数字实体统一考虑,充分利用各自的特点,尽最简化用户的 操作流程,并降低操作的复杂度。


作者:忻芸
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

视频便捷手势 交互设计探索

鹤鹤

一、前言

视频播放器中承载着极其丰富的内容画面和播控功能,尤其是在寸土寸金的移动端视频播放器中,为使内容更沉浸消费,需尽可能克制界面中的功能元素/入口直接外露。基于此种场景下,合理的手势设计不但可为界面“减负”,还可帮助用户更快捷触达功能、提升操控便捷性。


视频场景中目前已有部分的常规单向手势已被用户广泛接受并形成习惯认知,如「单击 暂停」、「双击点赞」、「长按快进」、「横滑导航」、「纵滑切视频」、「双指捏合缩放视窗」等通用手势。

那么如何在保留用户对于常规通用手势认知的基础上,进一步对视频场景中的手势交互进行扩容升级?这也是我们接下来在手势进阶交互上的重点探索方向。

本次针对百度APP中的视频播放器场景,为提升手势操控效率,我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型,以探索如何在视频场景中构建便捷高效的进阶手势体验设计。

二、什么是「组合手势」

「组合手势」是基于常规手势的组合扩展,其通常由两种或两种以上的常规基础手势所构成,若组合方式及使用场景得当,可助力用户更便捷的触达功能。

以前述的视频场景常规手势为例,其触发机制一般可分为两个阶段:step1交互信号step2执行任务,即用户通过某一基础手势发出交互信号,系统收到信号确认后便可立即执行任务,但整个过程是线性的,手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。

于是我们在现有常规手势两阶段触发机制的基础上,尝试引入「意图识别」环节,并梳理出「组合手势」的设计模型,以探索不同基础手势相互组合后的扩展可行性。

「组合手势」触发一般可分为三个阶段:step1交互信号step2意图识别step3执行任务,前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。

由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口,因此,其差异化创新具有较大设计灵活度,尤其需根据具体的使用场景进行综合考量。

三、「长按组合手势」激活快捷菜单

1.项目背景

百度APP视频场景早期的播控功能较少,如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。

随着后续视频场景的功能建设日渐完善,我们便在基础菜单面板中拓展了一行视频菜单,专门用于承载视频场景特有的播控功能。但当前播控功能已达10余项,菜单面板弹出后还需左滑才可露出后面的功能入口,因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。

2.竞品调研及选型

通过对竞品进行调研,我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型,  分别为:长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。

选型A

「长按触发独立播控面板」:通过长按手势可激活从屏幕底部弹出的独立播控面板,此方案扩展性较强,但对视频沉浸观感体验有一定的打断感;


选型B

「长按触发浮层播控选项」:通过长按手势可触发置于视窗上层的浮层选项入口,一定程度上可延续视频观看的沉浸体验,但浮层扩展性有限;


选型C

「长按触发特定播控功能」:通过长按手势触发特定的某个播控功能(如长按“快进”),一定程度上可满足此功能的重度用户,但对于长按手势的使用效率较低;

3.设计方案

1)长按手势交互扩容

针对目前视频播控菜单存在的问题,经过和业务对上述三种长按交互选型方案进行综合考量,最终决定聚焦于以方案“选型B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置,并探索一套更便捷的触发机制,以此对视频场景中的播控菜单进行设计升级。

但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据,用户对此功能的使用频率高、并已形成较深的操控认知,若直接下线“快进”功能则会对用户使用习惯产生较大影响,尤其是视频场景的重度用户。

那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢?是否有可能将“快进”和“快捷菜单”进行融合?这也是本次项目对于便捷手势体验的重要设计探索点。

基于此,我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义,通过「长按+滑选」的机制触发快捷菜单功能项,以缩短视频常用功能路径。对应到设计模型的三个阶段分别为:

step1:以“长按手势”创建一个新模式,即发出交互信号并唤出浮层菜单;

step2:若用户未松开手指,则系统默认开始识别用户意图,是否有以“拖拽手势”滑选至目标功能项以选择功能;

step3:用户滑选锚定至目标功能后,松手释放即可完成最后的功能执行确认。

「长按+向上滑选」快捷触发对应功能项;

「长按+向下滑选」快捷触发“快进”(一定程度上兼容老用户对于此功能的使用习惯)。

2)容错性兼容
在设定「长按+滑选」组合手势的同时,考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程,我们同时也支持点选的操作模式,即用户长按后若未产生滑选行为便松手,则松手后依然可通过点选的方式触发对应播控功能项。

3)易用性打磨

差异化的创新设计形式在前期总会面临质疑和挑战,本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式,于是在DEMO开发完成后便进行了一次小范围内的定性可用性测试,以预期在上线前可先收集一波体验问题进行快速打磨优化。

我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本,并邀请了10+名不同年龄段的目标用户进行访谈测试。

测试访谈的过程中,被测用户在进行1至2次尝试操作之后,均可掌握如何使用「长按+滑选」的组合手势,这也为我们增添了不少信心。

同时,我们通过观察用户操作行为及用户主动反馈,发现仍有部分易用性细节可进一步打磨优化。

3.1 )扩展触发热区:

考虑到单手握持手机的使用场景,可尽可能扩大定义长按手势的触发热区,屏幕中除顶/底bar框架区以及本身就自带长按事件的按钮入口之外,其它大面积区域热区均可支持长按触发快捷菜单,以降低触发难度、提升易用性。

3.2 )支持跟手触发:

长按后浮出的快捷功能项,其浮出位置支持跟随手指的纵向触发位置而浮出,可减少手指在屏幕上的位移距离、操控更便捷。

3.3 )实时提示及响应反馈:

灵活判断当前手势触控状态(如滑入选择 / 松手触发),在界面中即时给出相对应的引导提示或振感反馈,以帮助用户快速适应新的手势触发机制。

方案上线及验证

以AB实验对本次设计方案进行定量测试验证:

「对照组」效果:长按触发“快进”(各播控功能入口仍归置于基础菜单面板之中);

「实验组」效果:长按触发“快捷菜单”选项(支持滑选和点选模式);

小流量实验上线后,经过近半个月的观察,大盘指标稳定、播放完成率等满意度指标稳步提升。

「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升,说明用户对部分高频功能的确有很强的快捷触发诉求。

「实验组」的“快进”虽多了一步触发步长,实验前期“快进”使用率不及「对照组」,但随着用户对于「长按+滑选」手势整体的使用占比持续走高,通过滑选触发“快进”的操作习惯也快速被培养起来,对于用户来说,长按快捷菜单带来的整体收益是大于折损的。

二期扩展方案
随着长按快捷菜单的上线推全,长按手势的渗透率也持续走高,用户逐渐对视频场景更多的播控功能有了长按触发的诉求,于是我们对长按菜单进行了二期的设计升级,在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能,用户通过长按后的可选播控项增多,播控功能整体的使用量得到进一步提升。

四、「组合手势」拓展探索

手势交互是用户在现实世界行为的映射,无论是基础手势还是组合类高级手势,都须符合用户认知习惯、并融入具体的使用场景中进行设计。

以「组合手势」设计模型为指导基础、并结合具体的项目实践,我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。

1.「右滑返回手势」激活“小窗播放”

“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。

基于用户的此种操控意图,我们以“右滑返回手势”发出交互信号而触发浮出小窗入口,随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图,若有短距上滑拖拽行为,松手释放即可快捷激活视频小窗,以提升观看体验的连续性。

2.「双指手势」激活“满屏播放”

“双指拖拽手势”可拖拽并清屏视窗画面,以此手势发出交互信号,若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为,则松手释放即可快捷激活“满屏播放”,以满足更沉浸视频浏览体验。

五、结语

便捷手势的设计出发点是为提升操控效率、缩减功能触发路径,从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发,后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。


作者:百度MEUX
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

花了三天扣的设计细节,回头看真的值了!

涛涛

今天来分享几个设计案例,主要聊聊以下四个话题:

· 信息处理

· 装饰元素的摆放

· 长页面设计 模块间要有差异

· 空间利用率

01 信息的处理

首先看这个弹窗需求,产品经理给我们提供的原型图是这样的:



先不要急着开始画,理解需求是最重要的一步。

这个弹窗最想要传达给用户什么信息?

「小窝准备完成,宠物到家了」显然是最重要的信息。排的时候就要使劲凸显。

在经过一些尝试后,我们挑选出了以下两版:



对于这个弹窗,版本 2 的层级会更舒服。

于是对版本 2 进一步优化。

1. 同样的字号下,英文看着会比中文小。这上面用英文的「TA」不如直接写中文,看着也会更加整齐:



2. 字体也是有性格的,它能够影响页面的风格。所以将字体换成圆体,让页面更活泼可爱。



3. 尽量使上下两段文字长短不一,看着会更有节奏感。



4. 标点符号的细节很重要:有的字体标点符号与文字看着不在一条线上,记得一定要对齐!



5. 标题有点单调,我们再增加设计样式,让页面更精致!



这样就完成了,但是还是差了点什么:



是整个页面太安静了,少了一些热闹庆祝的氛围,那就加一些彩带装饰吧。

02 装饰元素的摆放

在添加时,需注意大小对比、前后层次、造型差异化,才能加的自然好看。

1. 大小对比,有的彩带大些长些,有些则小点短点。



2. 前后层次,有的在卡片前面,有的在卡片后方。



3. 造型差异化,除了彩带再来点其他元素。



03 长页面设计 模块间要有差异

在一个长长长页面里,相同的排版会没有新鲜感,容易产生视觉疲劳。

我们可以通过两种方式,让设计模块有差异。

1.排版不一

2.视觉不一

比如这个例子,同样都是听音乐,但是会用不同的排版穿插展示。



就算是同样的排版,我们也可以在其中用不同的视觉。

比如以下这个案例:一开始它从头到尾都是运用的一种视觉,排版也十分相似,页面整体结构也没有主次。



在我们对不同模块的卡片处理后,就好很多。



04 空间利用率

页面的空间可以站在三维的角度去看,分为 x 轴、y轴、z 轴。



页面的空间是十分宝贵的,当页面承载的内容越来越多,我们不能只在 y 轴(高度)上一直增加页面的高度。学会利用 x 轴(宽度)和 z 轴(深度)的空间能有效减短 y 轴(高度)。

4.1 利用 x 轴的空间

我们来看下面这个例子,他一开始采用的竖排方式:



如果我们将它改成横排、滑动查看后,页面就能够展示更多的内容,就越可能捕捉到用户想看的信息。



这就是减少了 y 轴的空间,利用了 x 轴的空间。

4.2 利用 z 轴空间

z 轴空间就是利用深度、前后的空间,就像我们经常看到的「页面二楼」,下拉页面后,在页面的后面出现一些内容:



这个 banner 的滑动也是利用了 z 轴空间:



以上就是我在空间利用率上面的收获,大家心里留个印象,说不定之后就能解决一些相关的问题~

总结

不知道今天分享的大家get到了吗?总结一下~

1.信息处理:明确信息的层级关系,有助于信息处理。

2.装饰元素:有大有小、有前有后、造型不同,会让装饰元素更自然

3.长页面设计:模块与模块间要排版或视觉不一

4.空间利用率:把页面当成三维空间,除了 y 轴,也要考虑到 x 轴和 z 轴的空间利用。


      蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



作者:花菜    来源:站酷





分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司                   

方寸之间纵览世界-浅析数字时代地图设计

鹤鹤

引言

如今人们出行都离不开手机,都通过手机接触过互联网地图,手机地图凭借着可手势直观操作、地图可快速迭代、信息可实时更新的优势,形成了成熟的地图交互体验。在解析手机地图的体验设计前,让我们先看看地图的发展历程。

一、地图的发展

地图拥有着古老的历史,记录了人类对世界认知的演进过程,经历过泥板、壁画、羊皮、纸张等载体,依据使用和文化需要拥有着丰富多样的美术形式。不同时期、材质、美术形式的地图见证人们认识世界的过程。

随着照相机和飞机的发展,出现了航空摄影测量技术,让地图的测绘精准度达到顶峰。交通、旅游、印刷业的发展,让纸媒地图开始融入人们的生活,地图的平面设计更是百花齐放,有具体也有抽象,让地图兼顾功能、美感、有趣。

再随着卫星影像、瓦片地图技术和互联网的发展,人们可以日常地使用电子地图。受限于网络速度的限制,矢量地图应运而生,在特定范围显示相应的矢量瓦片信息,让互联网地图的形状趋向统一化。

iPhone革命性的触屏体验,通过手势与地图进行直观自然的交互体验,结合内置GPS、陀螺仪传感器,小蓝点成为地图定位的通用标志,激发更多地图的功能和创意。

二、手机地图的创新体验

手机地图继承了互联网电子地图的可快速迭代、信息可实时更新的优势,结合触屏手势操作后,大大的提升了地图展示信息的维度。电子地图从工具逐步被引入到各种垂类服务和社交娱乐中,这些场景也不断丰富和完善着地图的信息。

手势交互让地图从移动到缩放都高效地动起来,激励人们探索更广的区域。更革命性的是让地图从平面到立体之间的顺滑转换,帮助人们更好的映射到真实世界。 

可视化信息是互联网地图的主要优势之一,将数据转化为可视化图形,归类在不同的数据层,可以单个或多个层级叠加在地图上展示,传达位置上的数据。 

底图是手机地图的基础,通常就是地图本身,它承托着上面的可视化信息。随着地图可更自由地缩放,地图本身的内容不断细化和归类,在不同的缩放层级下,展示符合用户查看场景的核心内容。

三、手势交互:全方位呈现地图立面

触屏手势交互有别于摇杆、鼠标、触控笔等物理外设的控制方式,让用户在小小的屏幕对大范围的地图有更随心所欲的操作,让原本受矢量图形限制的地图有了更多层次、更丰富立面的信息呈现方式。

单指拖动

拖动是地图最基本的阅读操作,一般以用户的定位为初始中心点,用户可以有目的有方向地查看附近的地点。

单指划动

当用户想快速翻阅时会拨走要略过的内容,划动模拟了这一行为。地图被划动后也会模拟物理世界以一定的摩擦力停下,向用户展示地图的新区域,是比拖动要快速的浏览方式。

双指拖动缩放

物理控件只能让地图根据屏幕中心进行缩放,而触屏缩放能让地图根据两个指尖的中心点缩放,并同时位移,符合用户空间操控认知。

双指划动缩放

划动缩放和划动一样,让用户以更轻量的手势加速的缩放地图,并以一定的摩擦力减速停止,让用户快速找到目标位置。

单指快捷缩放

为了让用户能单手并可控地缩放地图,不少地图都设计了自己独有的缩放方式。 zenly,通过屏幕两侧的边缘,直接完成地图的最大和最小缩放跨度。

snapchat拖动右侧边可缘唤起缩放滑块,并使用emoji来表达距离,充满幽默感。

腾讯地图,通过划动右侧的滑块,实现单手顺滑地缩放,滑块也支持划动手势。

百度地图,通过点击一个缩放控件,让地图以当前中心点进行分段缩放。

无限循环的地图

地球是圆的,可以无限巡航,一些应用将缩到最小的世界地图做循环处理,以呼应地球的循环转动体验。

方向视角切换

在陌生的环境用户未必能分得清楚南北方向,利用手机的陀螺仪,可以告知用户正在面向的方向。定位按钮的二次点击,将地图从南北向转到用户面向的方向,有助于用户二次确认自己的定位。

更多地图使用了2D/3D视角的切换方式,2D是南北向的标准地图,3D是用户面向方向的地图,帮助用户更直观地对应物理空间。

旋转方向

可通过双指或陀螺仪旋转地图,地图上的文字也做出相应调整,保持水平、沿道路方向调整,以保证可读性。

3D的旋转也一样,在保持水平和沿道路方向的同时,文字保持垂直。

当缩小到足够远时,用户面向的方向意义就不大了,苹果在缩小到一定范围时,将地图回弹保持南北向。

双指拖动调整视角

地图3D视角也支持自由调节,通过双指平行的上下滑动,可以平顺调整3D视图鸟瞰的角度。

在地图的最低视角做回弹处理,生动不呆板。

远近也能影响鸟瞰的视角变化,视角越低越接近平视,拉进时有俯冲的感觉。

四、可视化信息:生动呈现地图动态数据

从古代开始,人们就已经懂得通过绘制山脉、河流、海洋、建筑等对重要位置信息进行标记,地图本身就是一个信息可视化工具。 互联网地图最大的优势,就是能提供实时的信息数据。将数据标记在相应位置的坐标上,并分别归类在不同的层级,叠加在地图上查看。

地图的常用数据形式可大致分为:点、线、面、热力图等,一个地图可同时唤起多种类型、多个图层的信息内容。

点数据

点数据是单个地理坐标上的标记,代表该位置上的信息,是地图上最常用的数据信息。地图通过不同的小图标来区分位置类型,使用频率越高的样式越简洁,地标建筑做形象化图形标识。

聚合图在地图上呈现也是点数据,它实质是显示一定区域内的信息聚合,但不强调具体的区域。聚合图可以避免因为该区域的点数据过多,在地图上信息过于密集。

百度的充电桩地图就是以区域聚合充电桩数量,根据缩放调整数据的聚合。

腾讯地图的文博地图也是聚合图,并根据文物的类型做了快速筛选。

线数据

线数据在地图上呈现为线性,一般都沿着可行道路展示信息。导航路线是最常用的线数据,它提供具体行驶路线方案,并实时展示线路行驶的进度与方向。

也有粗略表示进度的线路数据,如快递的物流进度路线就不需要具体的实际线路,只需要示意大致进程。

街景地图则仅展示有全景图的道路范围,不提供进度与方向。

面数据

面数据要展示地图上的具体区域,疫情环境下出现了区域风控需求,需通过了面数据画出区域范围。疫情地图采用了聚合图、面区块两种数据形式。

zenly使用了反向的面数据,根据用户的行走记录,将用户走过的范围擦亮,用户未走过的地方是一块彩色的平面,充满娱乐感。

热力图

热力图以特殊的高亮梯度显示地图上区域的热度,热力图的数据不会指向地图上具体的位置,它能呈现热度变化的趋势。百度地图用热力图直观展示地区上的拥挤程度。

高德地图的空气质量地图,使用聚合图作为空气质量评分,热力图作为空气质量范围。

snapchat使用热力图来表现该区域用户发布动态的热度,引导用户发现内容,由于热力图不指向具体位置,能更好的保护用户隐私。

热力图并不局限于面,路线也可以反映道路的热度。Strava利用用户的骑行数据,生成光点线路的热力图,可以看出些是热门的骑行线路和必经地点。

路况也是一种线性的热力图,路况使用按段测量的方式,热力值的梯度相对跳跃。

让数据动起来

地图是安静的,但真实世界是忙碌的,让数据动起来,给地图增添更多情感化设计,缓解用户的等待压力。

忙碌的商家

外卖小哥端午节雨中送餐

公交努力奔来

五、底图:为更好呈现信息的色彩系统

手机地图的底图最常使用矢量瓦片地图,因为数据体积小,在互联网环境下读取速度快。矢量地图用几何图形来表达区域,不展示具体细节,因此需要通过颜色去传达不同区域的属性或功能。 

人们对于颜色和环境是能建立一定的联想的,如绿色想到大自然,蓝色想到水,红色想到警示。根据人们对色彩的联想,给矢量地图中不同属性的区域进行配色,帮助用户理解地图。谷歌地图就曾经为不同类型的信息标记出700多种颜色,最后简化为25个颜色,形成了地图的色彩系统。

工具类地图应用以地图为核心基础,对矢量图形有最全面的归类,因而拥有最丰富的配色系统。由于人们对区域功能的颜色联想是相似的,各地图厂商的标准地图的配色都很接近。地图用色素雅,才能让多个颜色能和谐的同时存在,降低用户的视觉疲劳,并能突出地图上的信息图层,让用户聚焦所关心的数据。

而一些垂直场景的应用,地图区域功能的描述相对次要,通常会对地图的用色进行大幅度精简。以打车应用为例,地图用色少且色调相近,突出核心的打车状态信息颜色,同时体现应用的品牌特色。

不少运用地图的概念设计中,会更极致的使用单色系地图,仅突出数据信息的颜色,充满未来感。

六、未来的地图

随着网络速度的提升,手机硬件的升级,顺应AR/VR技术的发展,地图逐步进入3D和全真时代。苹果地图在现有的地图的3D视图下,已对地标建筑赋予更多细节,并在夜间模式模拟了灯光效果。

3D地图就像是虚拟世界中的基础建设一样,苹果地图添加精细地标模型后,同时应用到Carplay的导航中,在驾驶时可直观看到与现实世界对应的3D地标。

谷歌更是提出“沉浸式视图”的高保真3D地图,使用图像还原一座城市的面貌,为浏览一座城市提供了几乎真实的鸟瞰视角。

同时全真模拟日照和天气系统,和现实一样模拟东升西落的光线方向,模拟晚上和雨天下的城市面貌。

随着地图的立体全真化,地图的数据也将向空间延伸。相对全真地图而言,人们本身就身置真实的地图场景中,未来借助AR设备,人们无需对照地图即可完成导航。

结语

地图历来是人们借助艺术的手法,以极具想象力的方式对世界进行再现,它遵循科学测量的法则,使用几何的线条和形状对地球的进行抽象化。地图反映了制作者对世界的认知,而现代的科学技术让地图呈现尽可能客观。但地图并非单纯地呈现地球,而是呈现人们眼中的世界,它寄托着人们对美好生活的想象,更好的认识、探索和规划世界。

作者:腾讯ISUX
转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

如何重构用户生命周期,指导体验设计?

鹤鹤

最近几年的产品体验设计中,已经不再仅仅看重单次的交易,而是会更加关注持续的交易效果,以及与用户形成长久的协作,为用户带来长期的价值。

那么,最好的观察用户长期价值的工具,就是构建用户生命周期了。否则,很难系统化地理解商业状态,就更不要提做好体验设计了。

对于用户生命周期,可以简单理解为,就是用户在我们的产品里是如何开始使用的、如何生长的,以及最后是如何离开的。研究透彻用户在每一个阶段的特征,是制定体验设计整体策略的依据。

举个例子,比如一个瑜伽产品,那么根据用户使用的生命周期,可以把用户分成几个关键阶段:

1.不了解瑜伽;

2.了解瑜伽但没有开始;

3.跃跃欲试;

4.新手,第一次使用;

5.持续的练习者;

6.暂时放弃练习,但还关注瑜伽内容;

7.完全放弃。

明确了用户使用产品时可能出现的这 8 个阶段,基本就清楚了用户使用产品的全貌,进而就可以根据这些阶段,进行整体的策划及针对每个阶段的体验主题细节的设计。

比如,前三个阶段应当是以宣传和引导为主,从第四到第六阶段应当是以一个用户成长阶梯的体验设计为主,最后两个周期应当去努力理解用户放弃的原因及设计召回的缓解策略。

所以可以发现,用户生命周期就是用户从接触产品到离开产品的状态集合,它也是我们观察用户整体创造价值总量的尺子。用户生命周期的整个过程,就像是一棵自然界的植物,从一粒种子开始,逐渐生长成熟再到最后凋谢。如果把产品中各个层级的用户生命周期整合在一起,就可以用全局性的视角来关注产品的健康度。

而现在,又因为有了技术工具,可以将用户的生命周期数据化,并可以结合动态的算法,根据每个用户所在的周期以及他的个性化选择,来动态地做到定制化运营策略。这也已经是未来体验设计的趋势。

比如,在顺风车的车主生命周期的分层工具里,可以根据大数据系统来预测一个车主何时放弃顺风车的数据模型,然后就可以根据这个数据模型,配合流量奖励、匹配奖励、红包奖励等动作,促使该车主能够产生持续拉单的动力。另外,在面对不同的沉默用户时,系统也会根据用户的画像,不断进行召回策略的尝试等等。

所以说,只有用数据工具做到个性化的用户生命周期运营,产品才能在这个时代获得优秀的竞争力。

那么,要如何来划分用户生命周期,并为每个周期制定体验策略呢?下面我们就具体看看吧。

用户引入期:为第一次接触而设计

顾名思义,用户引入期就是用户从听说了我们的产品,到 TA 初次进来使用产品的阶段。这个阶段主要包括用户了解产品、下载注册、登录并开始使用产品提供的服务及功能,等等。在这个阶段,用户并没有与产品有深入的接触。

不过要明确的是,所有的产品,都要为用户的第一次使用而设计。

我们应该都会有这样的经历,每当开始使用一个新的 App 时,基本上都会有一个新手教程。

但其实光有新手教程还不够,还要有为用户第一次使用的运营动作,比如新手红包、介绍动画,还要能引导用户找到自己的朋友,等等,以此保证用户可以顺利地和产品发生第一次交互。

这有点儿像工业设计产品的外形和引导,好的设计总能在你第一次使用的时候,就可以让你意识到自己离不开它了。比如说戴森的吸尘器,当你握住它开始工作的第一瞬间,你吸尘的过程你就会体会到一种战士用枪消灭敌人的感觉。

比如有些像影视剧和游戏产品,初始的体验非常重要,它们能不能用 3~5 分钟就迅速把用户抓住,并且能够交代清晰整个故事体验的核心矛盾,是非常关键的。

所以说,第一次使用,是用户定义一个产品的关键时刻。这个时候,要想清楚以下这几个问题:

· 用户画像:即是谁在使用我们的产品?

· 接触场景:TA 是在什么场景下接触到我们的产品的,是手机还是 PC 或是线下体验?

· 用户预期:用户的预期是怎样的,TA 是有目的,还是随便逛逛,或者是抱着好奇心态才进来的?

· 产品完成情况:面对不同的用户,如何让我们的产品能够最大化地达成用户预期,以此抓住用户?

· 鼓励与设计:如何鼓励用户向下探索,用什么价值交换的好处来让他进行下一步动作?

成就信任的关键,是双方成功协作后获得的良好体验。所以为第一次使用而设计就是初步建立用户信任的设计策略。

用户生长期:综合分析用户场景和画像

用户生长期,就是指用户已经进入产品正常使用的循环,已经可以半熟练地在场景内成功使用产品,并逐渐地成为一个成熟用户。

每个产品对不同的用户,都会产生不同的粘性效果。除了基础利益需求的共性,每个用户都会对不同的体验“上瘾”。

所以,处在生长期的用户会以不同的留存程度来使用产品。有的人会永远不再打开,有的会卸载掉,而有的则会每天都来,这取决于用户场景的特性和产品设计的水平。

场景特性指的是我们业务的用户实际状况。

举个例子,即使一个人很喜欢卖二手产品,但 TA 必须要有足够多的换物需求场景,这样 TA 才会去使用,比如搬家、换手机场景等等。所以它的使用频率必然是和用户本身的生活特性有关。

产品设计水平指的是我们的产品能否适配好用户的使用场景。

比如书店,用户来书店,不仅是有买书的需求,还会有坐下阅读的需求,所以咖啡店的设计就非常符合用户需求,这样的设计就增加了用户来书店的频率。

所以,在用户生长期,要综合分析用户的场景和画像,进而分析用户从第一次打开以后的使用状况,包括每日的打开时间、使用时长、完成交易状况,到每周、每月的使用频率,为用户分层,以此找到对于产品最有价值的用户人群,并通过分析用户场景和画像,确定产品改进的方向。

用户稳定期:延长用户使用的生命长度

处在稳定期的用户,可以理解为是已经产生了多次付费行为的成熟用户。当用户熟悉了产品以后,就会有一个稳健地使用产品的时期。这个时期可长可短。

用户生活基础类的刚需效率产品,会稳定地生长在用户生活里的一个场景当中,比如地图、打车、效率型电商等等;而体验型的产品,则要看产品持续为用户提供成瘾体验的能力,比如电影、剧集、游乐场、游戏等等。

那么据此,就可以分析预测出用户稳定期的长短,并作出相应的体验设计来延长用户的使用周期,同时也提升服务能力。

在前面这个例子中,用户生活基础类的刚需效率产品,在通常情况下稳定期会比体验型产品更长。也就是说,要在用户的需求点上不断提升效率,并且增加附加服务,来高效闭环用户的整个场景。就好像滴滴,逐渐发展出了出行的各个产品维度,来满足用户出行中的各个场景。

另外,还要分析出用户放弃的原因,同时也要分析用户的迁移成本,来明确我们的长期壁垒是什么等等,这样就可以最大化地修正产品体验的漏洞,改进产品和服务,同时积累复利价值。不同的产品,用户迁移成本都不同,比如社交产品是关系链,硬件产品是生活习惯和数据积累,出行产品是网络效应的供应效率,等等。

除此之外,还要在用户稳定期,尽量地延长成熟用户的生命长度。当然,这也需要利用种种运营和内容手段,拉近产品与稳定期用户的关系,并促使他们愿意发展更多的新用户进入我们的商业体。

如果企业要善于利用口碑营销,并能做好用户运营,那么稳定期用户的价值就是巨大的,口碑能力以及自己的私域流量,都会大大帮助产品做好增长。

用户衰退期:分析原因与改进场景

每个产品都会有用户衰退期,比如用户生活习惯的迁移、支付能力的变化、城市地点的迁移等,这些都会让用户退出产品,很长一段时间都不会再使用。

另外,更好的竞争对手提供的方案、新技术带来的市场变迁、其它市场产生的跨维度竞争产品等,也都会导致用户的离开。所以要具体情况具体分析,有一些衰退是自然的,比如一部电影,自然就是看过以后就不再有新鲜感了。但有一些则是自己的产品逐渐落后了,用户过早地进入衰退期,那就需要好好研究。

还是拿前面提到过的顺风车案例,展开介绍一下。顺风车的大多数车主在尝试了产品以后,都会偶尔拉一拉顺风车,也有一些车主会成为核心车主,大部分的 GMV 都是由他们贡献的,但其一般使用的周期都只能维持在 2 年左右。

所以,就需要制定了一个为期两年的全生命周期的运营策略。针对车主第一次、第一周、第一个月、第一个半年、第一年的使用时长,来分别进行运营手段的设计,并且会同时根据一个车主贡献的平均 GMV,来分出一部分收益放到车主服务里面,促使车主因为服务更多地回到 App 里,共享出行,进而拉长其生命周期。

要知道,很多时候,商业的总体 GMV 虽然看上去还不错,但如果用户都进入了衰退期,那将是很可怕的状况。一旦商业大部分进入了用户的衰退期而不自知,就会像一个高血压患者,身有疾病而不自知,所以要借助工具,给企业“量血压”。

不过,对于衰退期的用户,要认真地研究场景与原因,而不是一股脑地花钱去挽留。总之,创造自然的场景来延展用户的使用周期,要比生硬的运营手段刺激有价值的多。

用户唤醒期:革新产品迭代品牌

当用户衰退以后,其实还是有可能回潮的,比如说重大产品革新或市场发生变化。这就是用户唤醒期。比如一些老品牌革新产品,在推向市场时就重新焕发了青春。

对于处在这个阶段的用户,以往很多企业所采取的方式都非常简单粗暴,比如说狂发优惠短信等等。但召回用户,绝对不是猛用活动和短信进行轰炸,而是真的要在产品上有相应的变化,以及设计出对用户有好处的服务或功能,这样才能够起到比较好的效果。

比如中国品牌的国潮风就是一个很好的例子,从李宁产品品牌的再设计,到推出多个国潮服装与球鞋,并重新设计了 Logo 与品牌策略,让李宁的整个产品线拥有了全新的气质,不仅召回了老用户,还开发了很多新的用户。

唤醒用户,革新产品与迭代品牌才能有真正的长期效果。

用户唤醒就好像重新和用户签订“服务契约”,那必然要带着诚意,效果才会好。毕竟,这个世界不缺乏套路和生硬的营销,但缺乏硬核的诚意。要明白,要想和用户做长期的朋友,是需要真诚的产品策略的。因为在这些沉默的用户中,可能存在着大量的潜在需求没有被满足的用户,时刻等待着我们的进化,他们就能即刻加入。

所以,不要轻易放弃那些沉默的用户。

产品体验设计与用户永远是共生关系

可以把产品理解为一个用户花园,一朵花就是一个用户,而在他们生长的时间里,会不断贡献 GMV。那么,就需要观察、培育这些生长在花园里的生命,为不同的花朵提供不同的服务和运营策略。如果做得好,花朵就会多贡献价值。如果做得不好,花朵就会死掉、离开或者对我们的动作充耳不闻。

同时,也要观察商业环境,就像一年四季的天气,环境好的时候就要多浇水,环境不好的时候就要保护我们的花园。

总而言之,做用户体验的核心就是要看清楚,和用户之间的服务关系和互惠价值关系,然后提供良好的解决方案和用户协作,创造相互的价值。

而用户的生命周期,则是衡量商业体的体验健康度的关键工具,也是设计体验和运营策略的重要尺度。

在关心用户生命周期的同时,一定要铭记:

1.用户来自不同场景:每一个产品都有不同的用户在不同的场景使用,不能一概而论。

2.用户来自不同状态:有激进尝鲜的用户,有随便逛逛的小白,也有目的明确的专家,要区分运营。

3.用户来自不同预期:每个用户对产品的认知都不同,要采取合适的产品设计策略去寻找最大化获取用户认知的方案。

小结

讨论了用户生命周期的各个阶段,以及如何为每个阶段去制定体验设计策略。需要记住以下这几个关键要点:

1.用户引入期:为第一次接触而设计

2.用户生长期:综合分析用户场景和画像

3.用户稳定期:延长用户使用的生命长度

4.用户衰退期:分析原因与改进场景

5.用户唤醒期:革新产品迭代品牌

制定运营策略和体验策略的关键,就是要为处在不同时期的用户制定合适的策略,来最大化地满足商业发展的需要以及用户的需求。

用户体验策略的细分运营和选择,要为用户体验增加时间维度。也就是说,当做完了用户分层模型以后,还要看用户处在哪个生命周期、分布在什么时间段。

只有这样,才能立体地掌握整个产品中的用户的状况,从而作出正确的商业选择和体验策略。

作者:设悟
转载请注明:站酷

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

人机交互系统模型应用实践分析

鹤鹤

一、背景

我们在谈用户需求的时候往往带出来一句,你有没有考虑用户场景?那什么是用户场景呢?

用户场景是由人物、地点、时间、动机、行为五大要素构成的。我们通过这些要素分析用户,来辨别需求真伪,深刻理解产品需求,帮助理清强弱场景。

“人机交互系统模型”主要用于对“行为”的梳理。举一个例子来理解“行动”元素:A打开宾馆房门,屋内一片黑暗。他走进去打开了电灯。通常我们会这么理解其中“行为”:“打开房门”、“走进去”、“打开电灯”。

但是实际的情况要复杂得多。比如“打开电灯”这个行为,实际情况可能是:

  1. A首先要知道电灯在什么地方;
  2. A想了想之前的经验,灯的开关一般放置在入口两边的墙上;
  3. A先伸手往左边墙上摸了摸;
  4. 运气真好,一下子就摸到了;
  5. 那这个灯应该怎么开呢,之前的灯一般是按下去就行了;
  6. 按下去没有反应,应该说根本按不下去;
  7. 然后尝试左右滑动,结果能向右滑动;
  8. 灯亮了起来。

可以看出一般我们对行为的理解比较粗略,没有以小颗粒度的视角理解人的行为。“人机交互系统模型”是着眼于以较小的颗粒度,梳理出用户使用流程及心理活动再进行分析的工具。

二、什么是人机交互系统模型

人机交互系统中,一般的工作循环过程可由下图所示。人在操作过程中,机器通过输入设备(如显示器、喇叭等)将信息传递给人的感知系统(如视觉、听觉等),经中枢神经信息的感知处理对信息进行传递,思维处理器对信息进行处理和储存后,再经反应处理器指挥人的反应系统(如手指、嘴等)操纵机器的输入设备,控制机器的信息处理,然后循环往复,直到完成目标任务。

核心:以较小的颗粒度,梳理出用户使用流程及心理活动。

尼尔森·诺曼在《设计心理学》中提出了行动的七个阶段:目标、计划、确认、执行、感知、诠释、对比。而《GB/T 29836-2013 系统与软件易用性》中人机交互系统模型是参考了“行动的七个阶段”。并对它进行了简化,以更好地应用在实际项目中。

三、模型实践应用

1. 问题背景

映兔app中原本应该出现商家后台上传的图片文字介绍部分内容,但实际显示“上传中”,某个地方出现了问题。

2. 确定问题范围

借助测试的帮助判断这是前端问题,后端问题还是设计问题。测试反馈,因为用户在使用“网络图片”上传图片的时候,使用了错误的地址,导致无法正常得显示图片。这属于设计需要解决的问题。

四、解决方案

1. 人机交互系统模型应用

从人机交互系统模型中,我们可以把这一连续的过程分为“感知”、“认知”、“反应”、“反馈”四个方面。下面就从这四个方面,来分析用户在输入“网络图片”信息前后的使用流程及心理活动。

步骤一:眼睛浏览到“上传图片”、“网络图片”和“插入代码”三个上传方式(感知)

步骤二:在三个方案中比较哪一个更好(认知)

步骤三:判断“网络图片”在三个里面最方便(认知)

步骤四:把鼠标移动到“网络图片”按钮(反应)

步骤五:跳出Popover(反馈)

步骤六:看见出现的Popover弹窗,看见一个input和“插入”按钮(感知)

步骤七:理解input要的内容,理解“插入”按钮(认知)

步骤八:往input中输入内容(反应)

步骤九:输入完后,点击“插入”按钮(反应)

步骤十:下方出现图片内容(反馈)

步骤十一:看到下面的网络图片内容(感知)

步骤十二:认知下面的网络图片内容是否符合需求(认知)

步骤十三:完成确认后,点击“提交”按钮(反应)

步骤十四:显示创建成功(反馈)

2. 问题分析

用户可能在什么地方出了问题,导致输入了“非图片地址”?从“感知”、“认知”、“反应”三个元素分析。只需要考虑步骤五到步骤十四,因为用户既然使用了“网络图片”上传,一定已经进行到步骤五了。

3. 感知

1)看见出现的Popover弹窗,看见一个输入框和“插入”按钮(感知)

看法:能明显看见,即使看不见也不会导致输入错误图片地址情况。非相关。

2)看到下面的网络图片内容(感知)

看法:出错的情况下,可能不容易看见“非正常”的图标。弱相关,可以进一步分析。

4. 认知

1)理解input要的内容,理解“插入”按钮(认知)

看法:用户可能不理解要输入的内容。强相关,可以进一步分析。

2)认知下面的网络图片内容是否符合需求(认知)

看法:用户对现有图片的“非正常”反馈,认为是正确的。需要更明确告知用户,现在是错误的。强相关,可以进一步分析。

5. 反应

1)输入完后,点击“插入”按钮(反应)

看法:点击错误可能造成效率上的问题,和填写错误的链接无关。非相关。

2)完成确认后,点击“提交”按钮(反应)

看法:同上。

6. 再分析

1)针对认知1,要让用户理解输入的内容是什么。

2)针对认知2,当出现错误的时候,要更明确告诉用户上传出错。

3)针对感知2,可以把非正常上传的图标明显化。

五、方案提供

从易用性的角度理解,认知对应的是“易理解性”,感知对应的是“易发现性”。我们可以用对应的方式来增强易理解性和易发现性来解决问题。以下方案仅从易用性的角度考虑,不考虑视觉效果以及开发实现。

针对认知1

方案一:

给出更多的提示内容。下面是在“商品详情”下使用了线索说明,提醒用户网络图片的错误情况。

方案二:

给出更多的提示内容。下面是在“网络图片”下使用了线索说明。相比于方案一,与上传“网络图片”的操作区域更加靠近。

针对认知2

方案三:

从“页面实际浏览效果”的文案来提醒用户,现在的是非正常上传。并且信息所在的尺寸更像手机上浏览的效果,进一步强化这种感觉。

方案四:

从技术上判断所填写的图片链接是不是“可用的”。如果检测到不可用,就使用message/error提醒用户上传链接错误。

针对感知2

方案五:

也可以强调非正常上传的图标,甚至到一个离奇的尺寸。用户不得不看到它,然后意识到现在上传的状况不对。哈哈。

六、总结

人机交互系统模型作为思考问题的模型,能够帮助我们从认知心理学的角度对问题进行细致地拆解。在使用的过程中,我们会获得许多细节。而这些细节的地方就会有对应解决方案,再从这些方案中进行筛选,最终得出优秀的方案。

值得注意的是,当我把它运用在实际的工作中,因为它颗粒度过小,所以在使用的时候会耗费大量时间。因此人机交互系统模型要用在核心的问题上,次要的问题可能并不适用。

作者:biubiu
转载请注明:人人都是产品经理

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

如何做好用户体验研究?不如尝试一下“三角测量”法!

鹤鹤

“三角测量”在用户体验研究领域正在变成一个时髦用语。它究竟是什么?它可以如何帮助你提高用户洞察的质量呢?

一、什么是“三角测量”?

1. 定义

“三角测量”这一术语源自几何学,它指的是根据已知的点向未知的点构建三角形的方式来确定该点的位置。

在社会科学领域,三角测量指采用多种调查方法来研究同一种现象(例如访谈或定量调查等)。这一概念跟法医学中的“交叉诘问”(cross- examination)接近,通过询问多位目击者的证词更易接近事实真相。这是通过发现数据的一致性和不一致性来实现的。

根据《研究设计百科全书》(Encyclopedia of Research Design)的定义:

三角测量是指使用多种来源的数据进行研究,或使用多种方法分析数据,以提升调查研究的可信度。

研究的可信度通常包含:

  • 内部有效性(或定性研究的可信度):我们在测量自己想要测量的东西吗?
  • 外部有效性(或定性研究的可转移性):我们正在测量的东西可以运用到现实世界吗?
  • 可靠性(或定性研究的可靠性):如果我们再做一次研究,是否会得出同样的结果?

2. 类型

Denzin [1] 认为,没有哪一种的方法、理论或观察员可以捕获一项研究中所有相关或者重要事物。而三角测量法正是被提出来解决这一问题的。Denzin 在 20 世纪 70 年代确定了四种主要类型的三角测量法,如今仍旧被研究学界广泛地认可。

([1]诺曼·K.邓津,伊利诺伊大学香槟分校社会学系荣誉教授,质性研究法终身成就奖获得者之一)

1)数据三角测量(多数据集)

指在一项研究中使用不同的数据源。尤其是,通过不同的样本策略收集数据,例如收集不同时间、不同环境或不同的研究对象的数据。这种方法可以用其他数据的优点来弥补当前数据存在的不足,这样可以提升结果的有效性和可靠性。

2)研究员三角测量(多研究员)

该方法指在同一调查中采用多个调查人员 / 评估人员。为了做好三角测量,每一位评估者都会使用相同方法(例如访谈、观察)进行相同的实验,之后将所有评估者的发现进行比较。如果所有研究人员都得出了一样的结论,那么其有效性就成立。

在用户体验研究中,同样可以通过让多个研究人员分析同一组定性数据来实现。使用不同种族、年龄、性别和阶级群体的研究人员可以纠正诸如观察者或访谈者偏见的问题。

3)理论三角测量(多理论)

该方法只涉及一组数据,但研究人员会采用不同的理论或替代的理论进行诠释。人们甚至通过一些相互矛盾的理论视角来看待数据。

4)方法三角测量(多方法)

指在使用不同的方法来研究一种情景或现象。其目的是用其他方法的优点补足某一种方法的不足和偏差。该类型的三角测量与在社会科学研究中所使用的“混合研究方法”(mixed-method approaches)类似,用一种方法得出的结果来提升、增强和阐述另一种方法的结果。

二、用户研究中的“三角测量”

不同的方法可以解答不同的问题,但同样也有一定的局限性。在用户研究(或者说任何一种社会研究)中没有哪种方法是完美的。

利益相关者或初级研究员们会经常来问我,究竟该如何解决各种研究方法的局限性,我的解答通常就是“三角测量”。即使是计划周密、控制得当的研究仍旧会存在局限。但针对特定的问题采用 多个视角(方法、数据点、研究人员以及理论),可以提升我们的信心,帮助我们获得可信度。

在用户体验研究中,最常用的三角测量类型就是“方法三角测量”(例如通过调查和访谈来研究同样的问题)和“研究员三角测量”(例如多个研究员分析同一组数据)。三角测量使我们对研究数据更有信心,揭示意想不到的发现,对现象有更清晰的认识。

用户研究中应用三角测量的例子

针对一个问题使用多种方法进行研究以理解用户的行为及其原因。例如,我们可以调查用户如何使用一个特定的功能,然后通过深度访谈来探究为什么用户会这样用。使用混合方法常常可以让我们用更清晰的视角看问题。

通常来说,研究会从定性的方法开始,以确定和缩小问题。例如,在做发现研究时,我们可以从访谈开始,一旦我们确定了一些主题,就可以用定量的方法来验证我们的见解。当然过程也可以反过来,这取决于我们正在研究的问题。

三、“三角测量”的局限性

无论是哪种类型的三角测量都是基于这样一个假设:使用不同的数据来源、方法或者研究员可以减少数据集或方法论的偏差。

这意味着,使用三角测量可以增加我们对自己的见解的信心。

然而使用这一方法的同时,需要警告的是,它也可能导致“证实偏差”。可能你不太熟悉这一含义,“证实偏差”就是描述我们潜在的倾向,即注意、聚焦且更相信那些符合我们现有信念的证据。

如果你之前并未使用过三角测量,请记住它有时会得出矛盾和不一致的结果。在这些情况下,要由研究者来理解数据和不一致的来源。这对于经验较少的研究者来说尤其有挑战性。

三角测量有助于我们对正在研究的现象有更宽泛的视野但仍旧不是全貌。不用说,合适的设计研究仍旧对保证可信度至关重要。如果你的设计研究较差,那么三角测量将对你帮助不大 —— 输出的质量往往取决于输入的质量

四、何时使用“三角测量”

理想情况下,我们希望有数月的时间以及无限的预算来进行研究。但是事实是,我们通常会发现我们几乎没有足够时间来严格执行某一种方法,且资源有限。这就使得应用三角测量具有相当大的挑战性,它无法应用在我们所做的每个研究中。

所以我们应该如何决定什么时候使用三角测量呢?

  • 做高度重要工作时:我们无法每次做三角测量,但是当需要做一些可能会影响业务和用户的重要的决策(例如重大的重新设计),我们需要优先考虑它。
  • 你的团队中拥有多位研究员时:组成一个小组,让至少 2 名研究员参与数据收集和分析的工作。这可以有效帮助你控制一些偏差(例如访谈者偏见)。
  • 与其他团队合作:当开始一个新的项目时,你可以从查看现有数据和产品分析开始。让数据分析师和产品经理参与进来。
作者:TCC翻译情报局
转载请注明:人人都是产品经理

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加蓝小助,微信号:ben_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系01063334945。


分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



社交临场感 | QQ音视频产品体验设计

涛涛


SITUATION ANALYSIS

——————————

现状分析

要突破用户增长停滞的困境,需从全局角度思考,对问题所处的系统进行分析与洞察,找出拓展应用场景的机会点,提供技术或价值创新的功能与服务。



SWOT分析

首先,针对QQ音视频所处行业的竞争态势进行全面、系统的分析,包括内部优劣势,以及外部机会和威胁,以此制定相应的策略与计划。


用户洞察

关注竞争对手,更要研究用户,通过用户调研洞察用户需求,找出QQ音视频应持续巩固优化,以及需考虑突破的使用场景。 



行业趋势

综观音视频的行业发展与科技趋势,有三个主要的发展方向:


1. 超高清视频


5G高带宽、低时延将开拓更多玩法和业务场景,超高清视频通话将带来更豐富的感官體驗,犹如面对面沟通。


2. 应用场景多元化


从使用场景来看,音视频已走出会议室,从单纯的沟通交流,扩展至丰富的应用场景,广泛服务于人们的日常生活。


3. 智能终端+音视频云服务


未来智能终端将具备联网连接的能力,搭配音视频服务提供商的云服务,使得通话无所不在,可随时通过智能终端进行音视频通话。





VISION PLANNING

——————————

愿景规划

综合前述分析,提出QQ音视频的用户体验愿景(UX Vision)和价值主张(Value Proposition)。


用户体验愿景

QQ音视频的本质在于沟通,其声影重现的独特优势,消弭了空间距离。未来随着通信技术的演进,高画质、低时延、实时互动的感官体验,将实现远距临场(Telepresence)的终极目标,使用户感受到近乎面对面交流的体验,就像在眼前〝一起做〞某些事。




价值主张

综上所述,提出QQ音视频为用户传递的价值——社交临场感(Social Presence)


临场感相关理论与研究,源自Short、Williams和Christie等三位学者于1976年所提出的社会临场感理论(Social Presence Theory),指的是双方通过传播媒介进行沟通的过程中,所能感受到对方真实存在的程度。QQ音视频凭借高度的媒介丰富性,提供实时响应、语言/非语言线索交互,使用户能轻易地在社交互动中感知对方真实存在,进而在心理上获得归属感与认同感。


根据过往文献与媒介特性,将QQ音视频的社交临场感分为四个层次:


1. 界面质量(Interface Quality)

界面可用性与视觉设计不会干扰操作,能让用户专注于音视频沟通。


2. 真实感(Realness)

音视频的声画体验及与人交流的方式,能贴近于真实世界。


3. 互动性(Interactivity)

用户之间的互动交流越强,越能感受到对方的存在。


4. 情感传达(Affective Expression)

通过情绪表达、环境氛围的营造与对方建立连接,在心理上感到彼此的存在。





STRATEGY FORMULATION

——————————

策略制定


围绕社交临场感的价值主张,制定突破当前困境的目标与设计策略。音视频产品除了广泛应用在通讯场景,正逐渐赋能更多创新场景。基于Q群生态和调研结果,聚焦于生活、办公、娱乐等场景进行探索。


设计目标

两个主要的设计目标:


1. 重塑体验


回归通讯本质、夯实基础体验,对通话界面进行改版设计,让用户专注于音视频沟通。


2. 场景探索


开拓应用场景,通过社交临场感赋能生活、办公、娱乐等场景需求,为用户创造价值。




设计策略

针对QQ音视频的应用场景,制定相应的设计策略。




STRATEGY I

——————————

通讯本质——专注沟通更无碍



界面质量是影响社交临场感的关键要素,然而调研结果显示,QQ音视频的通话质量和体验落后竞品,包括主界面功能复杂、通话流程痛点多、核心能力落后竞品等体验问题。

针对上述问题,提出QQ音视频改版的设计思路:


1. 化繁为简,回归本质


2. 链路排查,解决痛点


3. 补齐短板,超越竞品




化繁为简,回归本质

分析不同通话类型的用户习惯,以及各个功能的使用数据,区分功能优先级,分为核心功能、辅助功能、高级功能等三个层次,重新定义功能架构与布局。



主界面:少就是多,收折非常用功能,确保核心通话体验。


更多面板:主界面功能越少,更多功能入口越能起到引导作用,从右上角找到进阶功能。


快捷手势:通过新手引导、红点引导、快捷手势,满足高级用户的需求。



链路排查,解决痛点

运用认知走查(Cognitive Walkthrough)快速排查通话过程存在的用户痛点,并将缺失的功能与信息补齐,最终解决超过16个以上的可用性问题。




补齐短板,超越竞品

对于视频画面的思考:

QQ采用1大N小的画中画模式,适合1人主讲、他人观看的场景,主客位明显,缺少一种与他人共在的感觉;反观微信是9路宫格画面,视频画面仅聚集在上半部,有利于节省流量,但同时也限制了屏幕利用率。



兼合上述两者的优点,设计了16人视频通话的功能:


1. 100%屏幕利用率,让内容展示更完整。


2. 力求面画均等分割,最多支持16路视频。


3. 手势快速切换宫格与画中画



16人视频通话也延伸了不同的创意玩法,例如祝朋友生日快乐、拼字表白或求婚。




STRATEGY II

——————————

生活场景——与你陪伴更有感



QQ视频通话重度用户的通话对象,主要来自恋人伴侣,这类用户最希望获得〝在一起〞的陪伴感,而社交临场感的〝真实感〞是营造音视频陪伴感的关键因素——彷佛对方就在眼前,两个人一起聊天、一起做某些事。


让他 ‧ 她看到最好的你

声影的真实感,是让对方感受到你就在眼前的必要条件。真实感包括流畅度与清晰度,通过用户行为分析,发现在不同场景下,用户对视频清晰度与流畅度有不同偏好 。


为此,QQ音视频开创了的高清 / 流畅模式,用户能根据自身需求做选择,切换自动、流畅480P、高清720P三种模式,针对不同模式定制码表,匹配不同的帧率和码率。除此之外,QQ音视频也与手机厂商合作,开发QQ 5G 1080P超高清视频通话,提前布局5G应用。



记录〝在一起〞的时刻

创造情感连接,有助于拉近彼此距离,营造陪伴感。有什么是情侣、闺蜜平时会做的事,因为分隔两地不能一起做了?


循着这个思路,设计了全新的双人合拍模式。距离遥远的两人,通过QQ音视频实现留影合拍,让彼此的情感得以沈淀。另外,为了增添合拍时的乐趣,该模式结合了P图资源与人脸识别的能力,让用户可选用场景模版与挂件,创造属于两人的高光时刻。



〝一起做〞某些事

情绪之间的感染,更能强化陪伴感与互动感,据此设计了第一款支持视频聊天的一起看应用 ——视频包厢。有别于Q群一起看的广播形式,视频包厢诉求更亲密、1v1的陪伴感,彷佛对方坐在身边,一边看剧、一边聊天。视频包厢的价值,除了提升QQ音视频的互动性,也为关系链活跃拓展应用场景。





STRATEGY III

——————————

办公场景——群体沟通更高效


线上会议是办公用户主要的使用场景,一方面将聚焦用户核心需求,思考办公场景的功能设计,另一方面增强用户之间的互动性,让会议更具社交临场感,就像面对面沟通一样高效。


沟通更多元

为什么需要文字聊天?当主持人开启全员静音,此时无法回应讲者;多人通话时,最多同时听到6个人的声音;不方便开麦或摄像头,又想参与互动。


为了解决痛点、完善沟通形式,QQ音视频新增了文字聊天的功能,可通过手势快速展开 / 收起聊天界面,并支持发送表情和文字消息;这些消息只会在通话界面沈淀,不影响未参与会议的群成员,避免不必要的打扰。


轻松会议管理

对办公用户而言,线上会议需要完善的管理机制。QQ音视频尝试结合Q群管家机器人,小成本实现通话预定。用户能设置通话主题、开始时间、会议提醒,并支持分享会议链接到微信、QQ空间等其他渠道;获取链接的用户,能快速拉起QQ加入会议。


以我所⻅为你呈现

面对面分享是信息共享最有效率的方式,分享者能够当面指出要点,有效地表达与沟通。QQ音视频借助系统镜像投屏,实现边通话、边共享的能力。在商务会议中,将手机中的信息与操作,实时同步给其他参会成员,例如文件、照片、邮件内容等,并支持同步画面、设备声音。另外,诸如游戏分享、作业辅导、操作协助等场景,都能通过屏幕共享满足需求,为用户带来实质性的效益。手机端最后一块拼图完成后,QQ多端皆可实现屏幕共享,现已成为QQ音视频的口碑能力。




STRATEGY IV

——————————

娱乐场景——线上聚会更好玩



疫情期间,线下聚会被迫停止,线上娱乐应运而生。在此契机之下,借助音视频实时互动、声影重现的特性,开启了新的娱乐形态——QQ一起派对。


QQ一起派对是基于音视频展开的实时社交游戏,旨在打造真实聚会游戏体验,让游戏过程更贴近线下真实场景,就像面对面一起玩聚会游戏,能与好友边玩游戏、边聊天。通过环境氛围的营造,包括场景具象化、增强代入感等方法,实时感知好友的情感变化,从而获得社交临场感,在心理上感到彼此的存在。


此外,有别于竞品需通过点击按钮作答,QQ一起派对利用实时语音识别,让用户通过更自然的人机交互方式,在游戏过程中进行语音抢答,彷佛置身于真实世界中与好友互动。





OUTCOME

——————————

成果:深挖场景,用户为口碑功能点赞


QQ音视频经过一系列的体验重塑,获得不错的成果。基于生活、办公、娱乐等场景深挖需求,新增许多实用功能和创新玩法,为用户体验和价值创新奠定良好的基础,且归功于这些积累,以致于在疫情期间,QQ音视频能不畏竞品的挑战。除此之外,多项新增能力,例如屏幕共享、视频包厢、QQ一起派对,获得用户广泛好评;调研显示,用户乐于将QQ一起派对推荐给其他人,足见该功能获得不错的用户口碑。



结语

对于音视频行业来说,疫情迎来的爆发式增长,无法保持高速成长态势,会有一定程度的回落,但能提高大众接受度和习惯养成,体认到音视频能在一定程度上替代线下沟通,不仅限于通讯功能,音视频应用拥有更多的可能性,正逐渐赋能更多创新场景。为此,QQ音视频基于社交临场感,探索并赋能生活、办公、娱乐等应用场景,提供技术或价值创新的功能与服务,为用户创造独特的价值。


面对市场上同类竞品的崛起,作为一个UX设计师,除了因应产品思维设定目标,亦应思考如何以价值驱动解决问题:对于如何解决问题、迈向未来愿景,提出最适切、有效的方法。换言之,要关注的不只是当前面临的问题,更重要的是擘画用户体验愿景,提出该产品的价值主张,并制定相应的设计策略。


以QQ音视频来说,项目初期设计师便与产品经理共同讨论产品方向、策略和功能规划,并根据调研报告,找出拓展应用场景的机会点,借此描绘出QQ音视频的未来愿景、给用户带来的价值。尔后根据里程碑计划(Milestone Plan),从通讯本质、场景探索到新终端应用,逐步朝着远距临场的终极目标前进,此举不仅有助于产品功能先行布局,也能确保功能设计围绕用户价值。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系。 



作者:腾讯ISUX团队    来源:站酷





分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 



蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档