交互设计及用户体验

设计师必须掌握的交互知识

分享达人


交互设计 Interaction Design 也被成为IXD。交互设计建立起了人与计算机便捷沟通的通道,它的目标是创造可用性和用户体验俱佳的产品。作为UI设计师,我们在工作之中经常会对接交互设计师和产品经理,他们具有丰富的交互知识和经验。那是不是我们作为UI设计师,就只需要专心做好视觉层面的工作而不需要了解交互设计了呢?当然不是,在视觉设计层面更多地考虑布局和交互原则才可以让我们的界面更友好,视觉设计师是交互设计中非常重要的角色。

 


为何如今的产品总给人千人一面的感觉?

博博

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

编者按:这篇来自产品设计师 Eugen Eşanu 的文章解开了我长久以来的一个疑惑,其中的思考和经验值得我们共勉。结尾的 One more thing 是我额外补充的内容和一点想法,和当下产品设计的困境相关,也是试图补完这篇文章,希望能给你一点帮助。

为何如今的产品总给人千人一面的感觉?

当你在寻找一个能够满足你需求的应用的时候,会不会因为太多相似的产品而无从选择?当你想要在两个甚至更多相似的产品中进行选择,一切都显得那么困难。而唯一能够进行快速区分的因素似乎是设计,但是紧接着会发现连设计都是那么相似。

为什么市场上所有的应用看起来都长的同一副面孔呢?

在回答这个问题之前,我想简单澄清一些事情。为了创造出能够解决需求的产品,通常需要采用以人为本的方法来进行设计,但是事实上,那种状态太过于理想,几乎没人能够真正做到。

以人为本的设计方法,确实能够极富创造性地解决问题。当采用这种方法来为目标用户进行设计,最终能够得到了一个为这些用户量身定制的解决方案。但是,这种设计方法需要设计者具备无与伦比的同理心来真正站在目标用户的角度来思考问题,由此获得大量的想法和灵感,建立一大堆可能有效的原型,同目标用户分享你正在做的事情,验证你的感受和想法,最终将你的创新的解决方案推向世界。但是这是理想的状况。

那么为什么世界上那么多伟大的公司,依然无法真正采用这样的方法成就真正优秀的产品呢?因为几乎所有的产品身上都有一种病毒,它的名字叫做特征蔓延。

为何如今的产品总给人千人一面的感觉?

产品开发流行病:特征蔓延

特征蔓延的英文名叫做 Feature creep,它的主要症状就是不断向产品中添加功能。

现如今,绝大多数的产品,无论是物理实体还是存在于手机中的各色 APP,几乎全都面对着激烈的竞争。

激烈的竞争使得每个人都面临着压力,产品所属的企业中,从领导到产品经理再到最底层的开发者和设计师,所有人都面对着来自对手和潜在对手的压力。

这种竞争压力基本上是源自于三个方面:价格,功能和质量。非常不幸的是,绝大多数时候,这三者的压力从前到后是依次递减的。价格竞争的压力通常是最大也是最直接的,然后才是功能和产品质量,至于这个顺序意味着什么,就不赘述了。

同时,产品上线的速度和顺序也很重要。谁是进入市场第一人,这个是必须争一下的。

这样一来,想要尽快杀入市场的产品,在很大程度上是伴随着「偷工减料」的。没有足够的时间来对产品进行足够多的迭代,没有办法把系统调整到最优,没有办法把硬件缺陷都找出来,没有办法把软件中每一个 Bug 都尽量找出来,甚至绝大多数企业的领导都抱有「没事,我们随后再把问题找出来解决掉。」从电脑到汽车,从 Windows 到 iOS,从来都是如此。

没有什么 Bug 是一个补丁解决不了的,如果不行,多打几个。——Windows开发团队

为何如今的产品总给人千人一面的感觉?

当然,能够通过后期补丁解决的问题终究是少数。实际市场上绝大多数的产品确实随着补丁和修改逐步提升了,但是绝大多数仍然没有解决用户的问题。

对于特征蔓延这种病症,早在1976年就已经被发现,并且在产品设计圈当中有着非常广泛的认知。对于这种产品病有一个非常学术的描述:

特征蔓延是指一产品(如APP)的软件机能持续膨胀或增加的情形。产品基本机能以外的扩充机能,会使产品比原始设计要更复杂。长时间来看,额外或不需要的机能慢慢的进入系统中,使系统超出原来设定的目标。

假设我们拥有一个非常强大的产品团队,设计师拥有足够的同理心,开发和测试也非常靠谱,他们使用以人为中心的设计方法,探索了所有用户使用场景,并且遵循产品流程认真设计仔细测试,最终输出了一个用户想要购买的优质产品。假设这个问世的产品在各个层面上都是完美的:拥有直观的界面,良好的感觉和优秀的视觉,贴合用户的体验等等。它只有一个使命,那就是以有意义的方式满足人们的需求,让人们能够更好地生活,产品因此而走向成功。谁都想来一个。(就像解决了信号问题的 iPhone 4)

非常不幸的是,产品上市之后,各种各样的影响因素开始出现,情况开始向着并不理想的方向发展。

  • 现有的用户非常喜欢这款产品,但是他们想要更多的功能,各种各样的功能,包括带孩子。
  • 竞争对手开始推出新款,并且具备一些全新的、我们的产品所不具备的功能。从公司领导到用户都开始催我们的团队增加新功能。
  • 客户对于产品总体上是满意,但是买的人多了之后,市场趋于饱和,销售额不可避免的下降了。是时候添加新的或者创新的功能来促使用户更新或购买新版本了。

特征蔓延就是这样出现的,产品在现有的功能上不断增加更多的功能。各种各样的理由会促使产品不得不增加功能,各种各样。然后产品开始膨胀,臃肿,直到用户实在不太想用或者彻底没法用。

而在如今的市场和商业竞争中,特征蔓延并不是唯一的绝症。

为何如今的产品总给人千人一面的感觉?

竞争驱动式设计的泥潭

哈佛大学教授 Youngme Moon 认为,产品和竞品之间的攀比对抗是让产品陷入千篇一律的境地的主要原因。通常,企业为了提升产品的市场份额,会让自家产品拥有对手一样的功能,来确保竞争力。对手的团队协同软件的售价是20美元?没事,我们开发个功能一样强大的,定价15美元好了。他们的移动端的 APP 只需要加1美元就能获得?那我们的移动端版本直接免费和桌面端绑定好了。

当产品陷入和对手刺刀见红的局面之时,两败俱伤的结果就不远了。试图逐个功能和对手竞争,必然会陷入同质化的竞争,很难让用户真正爱上其中的某个产品。

这种就是竞争驱动型设计。令人遗憾的是,即使产品的第一版是以用户为中心设计出来的优质产品,在竞争驱动下诞生的后续产品,就很难赢得用户的真心了。

很多时候如果你想创造真正卓越的产品,你不得不花费更多的时间。而即使你创造出来这样的产品,在市场上也不一定能在销售排行榜上杀入前三,屈居第四是很正常的事情。那么你还愿意这么做么?

我们都听说过先发优势,但是你真的知道获得先发优势,将会付出什么样的代价么?

为何如今的产品总给人千人一面的感觉?

用1年写一册畅销书,还是花5年成就一本经典?

以写书来举例也许更加直观。当你决定写一本关于设计的书,然后登上畅销榜,名利双收,好像挺不错的。如果它的内容是之前没人写过的,并且确实比较有市场,在内容上稍加打磨,几个月后引爆设计圈似乎不是太大的问题。事实上,它上架之后,和自己的预期相差不远,挺好。不过,不知道为什么,1年之后,热点消退,这本书也没什么人买了。

换一个做法,写书的过程中可能需要勒紧裤腰带过日子,花上5年时间仔细揣摩,写一本拥有持续价值的书,然后在之后的100年时间当中,成为设计圈中每个设计师的必读书。写书的过程中,你需要专门地进行研究,仔细地调整内容,对于每个细节都精雕细琢,花费更多的时间,让这本书有对抗时间的价值。

从长远来看,只看眼前、偷工减料的公司会自然而然过时,然后被人们所忘记。浪潮过后,谁在裸泳一目了然。

为什么总忍不住添加新的功能?

和对手的对比,总能看到自家产品的缺陷,然后补完缺陷,这有什么不对么?似乎没问题,但是这种思维方式并不会打造更好的产品。更好的策略是:

专注于自家真正擅长的领域,并继续深挖自己的长处。在自己的优势领域,集中自己的研发能力,并作为营销重点。这样才能让自己的产品从平庸走向卓越,真正能在惨烈的红海中脱颖而出。用更少更精锐的功能来成就自己,而不是在成堆的功能中与对手同归于尽。

还记得一代的 Google Pixel Phone 么?他们的营销口号是「有耳机插孔的手机」,对标的正是取消耳机插孔的 iPhone ,而这个文案正是嘲讽 iPhone 的设计太过愚蠢。令人惊讶的是,随后的 Google Pixel 2 也跟着取消了耳机插孔。现在还有谁记得 Google Pixel 系列呢?

为何如今的产品总给人千人一面的感觉?

是聚焦长处,还是忙于跟随?

伟大的设计需要脱离苟且的竞争和来自客户的压力。开始专注于你认为重要的事情,以及你目光所及的远方。在你最优秀的地方,集中精力。你必须确保你的产品是一致且连贯的。这意味着领导层需要足够睿智,也足够坚定,这样才能抵挡来自用户和市场部门不断增加产品功能的各种需求。

成就最好的产品,设计者要屏蔽来自竞争对手的声音,专注于用户真实的深层需求。

不要觉得我的话是凭空而来的。Amazon 的 CEO 兼创始人 Jeff Bezos 也提到过类似的方法,被称为「客户迷恋」。在他看来,将所有精力集中在客户的需求上,而不是竞争。重点在于三个简单的问题上:「客户需要的是什么?」「他们的需求如何才能满足」「我们可以做什么来提高客户服务和价值?」Bezos 还认为,专注于客户才是首要目标,其他的问题会迎刃而解的。如果你一开始就被市场竞争吸引了注意力,很难作出真正对的决策。产品质量通常只关乎客户和解决真实的需求。

One more thing

想要从激烈的竞争中抽身出来, 创造真正独特的产品,是许多产品设计师的愿望。但是这真的不是一句话说得清楚的事情,真实的情况比我们想象中还要复杂。

竞争驱动型的设计确实是一个很难绕过的问题,驱动产品的不仅仅是领导和客户的声音,深陷市场竞争,许多时候确实身不由己。

采用以用户为中心的设计的设计流程,还绕不开一个常见的因素:最佳实践。经过前人验证、时间打磨、用户习惯之后所获得的最佳实践,是设计师和产品在很多时候必须依托的东西。比如我们如今所看到的许多表单的设计策略和汉堡菜单的使用。用户和市场已经「塑造」出了许多最优的设计策略,设计师通常会直接拿来使用,而我们感到「千人一面」的 UI设计当中,确实有各种最佳实践所「作出的贡献」。

为何如今的产品总给人千人一面的感觉?

包括我们现在正在不断探索的动效设计,虽然力图在视觉和体验上有所创新,但是早在近百年前,迪士尼的动画设计师们已经总结出一套人性化动画设计的策略,实际上我们今天许多优秀的动效设计,依然是围绕着这一套「最佳实践」来进行设计和重设计的。

为何如今的产品总给人千人一面的感觉?

违反「最佳实践」的特立独行的设计并非不可,只不过它通常需要遵循「每次仅只能打破一个规则」的原则。在用户已经被市场培养出大量习惯的前提之下,大量采用反直觉、反习惯的设计,只会让产品死的更快。

那么是不是就没有办法了呢?当然不是。新鲜有趣的、独树一帜的设计并非没有办法设计,设计师需要在最佳实践以外的部分寻求改变,探索可能性,甚至等待契机。不同的设计趋势、元素、技法、排版布局、配色、动效进行多样化的组合,依然可以创造出让人眼前一亮的设计。但是这还不够。

为何如今的产品总给人千人一面的感觉?

早在上世纪30年代的时候,包豪斯设计学院的先哲们就已经提出过「形式追随功能」的设计箴言。这句话强调的是设计的科学性,便捷性和经济效益,而不再是围绕着装饰性和简单的形式感来进行设计。在今天这个用户体验至上、以用户为中心的设计趋势之下,UI 和视觉所代表的「形式」所追随的「功能」应该是用户的真实需求。而在这个语境下试图创新,或者恰如其分地融入一些贴合场景和目标的艺术元素,也许是个不错的突破口。

正如同在上一篇文章《熟知用户行为的这7个层面,你的设计才会走进人心》中所说的,客户买钻头的时候,需要的并非钻头而是洞,同样的,用户下载一款阅读APP 的时候,他的真实需要并非是阅读器,他需要的是内容,是信息,是满足他求知欲的文章,或者填补碎片时间的有趣的故事。

为何如今的产品总给人千人一面的感觉?

内容为王这句话早就已经不是口号了。围绕着内容做设计已经成为了诸如 Medium 和 Twtter 这样的企业的新策略,而国内的许多一线企业也开始拥有自己的「首席内容官」。让设计追随内容,让真正吸引用户的东西来撬动产品,拉升体量,才是正途。

设计和内容的结合方式多种多样,根据内容所需要的语境来搭配相应的设计是目前已知的最常见的做法。根据内容本身所具备的故事性和环境特征,视觉化地表达,让 UI 和视觉服务于内容,是许多成功的设计所验证过的技巧。

比如下面的 voyage-electrique这个网站,借助 C4D 构建的 3D 可交互式的场景来呈现电力系统的运作,清新可爱的画风和令人愉悦的音乐让原本沉闷的主题显得颇为有趣,让人心生好感的设计,使得相关的信息更容易被用户接受。流程化的信息呈现方式隐约具备了故事性的表达,即使你并不懂法语也会流连忘返,在点击和探索中多停留一会儿。语言苍白,不如点进去看看。

为何如今的产品总给人千人一面的感觉?

最后需要注意一个问题:人类先天就是喜新厌旧的生物,再新鲜有趣的东西,在获得之后都会快速地适应(适应性认知偏差),并不再感到新鲜。在内容和设计策略上,适时地注入新鲜的内容(不违反基本设计规则和产品方向的前提下),是维持活跃度而必须做的事情。

原文作者 : Eugen Eşanu

译者/编辑 : 陈子木

译文地址:https://www.uisdc.com/design-product-like-everyone-else

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

这7种广泛存在的认知偏差,影响了我们太多的决策

雪涛

如今心理学和行为学已经是UX和产品设计领域当中诸多理论的来源和实践的依据,它们是UI/UX设计师和产品设计师的必修课。

系统的心理学和行为学的知识,对于设计工作其实有着极为深刻的影响。用户体验设计很大程度上是在心理学和行为学的研究基础上逐渐进化和发展起来的,对于想要深耕这一领域的设计而言,心理学和行为学是绕不开的必修课。

心理学和行为学早已并非是单独存在的学科,它们和许多不同领域的知识交汇融合,围绕着人性进行多维度全方位的探讨。如今我们所熟知的许多优秀的产品,也大多从这些领域技汲取营养,不少四两拨千斤借力逆袭的成功案例,也往往借助的是这些深深植根于人性的杠杆。

这两个宏大的命题并非简单几段话说得清楚,但是这当中有许多有意思的现象,非常具有启发性。许多植根于人性本能中的非理性心理和行为,在日常生活中主导着我们作出决策,有的是一些不易觉察的心理效应,有的仅仅是不算太显著的认知偏差,但是在设计和实际产品当中运用,则常常呈现出极为惊艳的效果。

对于这些心理学效应和认知偏差,设计人员需要在自身进行决策时候尽量回避,避之不及确实会面临车毁人亡的局面;在设计过程中,可以巧妙地将这些因素纳入到考虑当中来,因为它们同样可以影响用户,成为撬动产品打开局面的重要的契机。

幸存者偏差

幸存者偏差(Survivorship bias)虽然被称为认知偏差,但是实际上,它更接近于是一种逻辑谬误下产生的一种错误认知。幸存者偏差指的是人往往会注意到某种经过筛选之后所产生的结果,同时忽略了这个筛选的过程,而被忽略的过程往往包含着关键性的信息。

读书无用论是一种最常见的幸存者偏差。读书无用论中最多的说法是XX并没有好好上学但是照样挣大钱了,而XX努力读书反而混得并不好。

这些个案并不涉及到具体数据,从数据角度上来说,也不难解释这种“主观感受”的成因。根据第六次全国人口普查,大专及以上学历的人口仅占总人口的8.7%,高学历者落魄更容易受到媒体的关注,而低学历中的成功者也常常能够吸引普通人的目光,即使低学历人口中涌现的成功者的比例远低于高学历者,由于基数差异,这个数值对比也是相当可观的。正是因为忽略了数据中沉默的大多数,读书无用论这种错误的观点才“得以成立”。

枪击案中的幸存者大多伤的是手和脚,那么是否要加强手脚的保护呢?实际的情况上,在躯干和头部中枪的人,大都没有挺过来,相反更加需要保护是躯干和头部。就像能活着回来的战斗机中弹的通常都是翅膀和机身,因为引擎中弹的大都已经牺牲了。这个案例也许能够帮你更好地理解幸存者偏差。

对于事件发展过程中筛选机制的忽视,容易让人产生错误的结论,从而导向错误的方向,在设计决策过程中,出现这样的过程中,极有可能是致命的。

在需求分析和调研过程中,如果忽视了幸存者偏差,很有可能搜集到的数据,体现的仅仅知识少部分用户的需求和想法,最终将伪需求和小众需求当作主要需求来作为设计易于,则可能让产品从一开始就走向万劫不复。

在搜集产品的用户反馈信息的时候,也很容易遭遇幸存者偏差。绝大多数的用户在正常使用产品的时候,如果没有合理的触发机制,或者产品没有特别突出的特点的情况下,很少会主动“好评”,相反,遭遇问题的用户则更倾向于主动吐槽并分享糟糕的体验和问题,这也很容易造成“这个产品哪哪儿都是问题”的错觉。

基本归因偏差

基本归因偏差这个名词同样源自于心理学,比较学术表述是“对他人行为进行归因的时候,往往会倾向于把别人的行为归因为其内在因素,而低估了情境因素的影响,而对于自身的行为归因的时候,则倾向于把自己的行为归因为外在因素,而忽略自身因素的影响”,基本归因偏差的含义表述可能有点拗口,但是并不难理解。

基本归因偏差是一种重要的人类心理防御机制,是人类进化过程中所产生的一种局限性的思维定势。和复杂多样的环境因素相比,行为者本身的问题是更容易被发现的,所以观察者在观察行为者的时候,诸如社会环境、社会角色、情景压力等外部因素更难以引起注意,将问题更多归因于行为者本身的行为举动和个人内因。比如,当看到某个人生活拮据的时候,会简单归因于他不够勤奋等等。类似的,在面对生活中的诸多不顺的时候,直接归因于“水逆”而很少会仔细思考是否有自身的原因。当事人和观察者对于事件的归因不同,争议和问题往往因此而起。

对于UX设计师而言,基本归因偏差是矛盾和问题的常见的来源,而且这种认知偏差存在于用户也同样存在于设计师本身。无论是面对设计问题,还是做调研,进行测试,涉及到多方面影响因素的时候,基本归因偏差都会对设计方案、设计决策产生影响。

这需要设计师能够清楚地分辨“我的观点”和“我的行为”,能够真正将自己从自己所处的立场、角色、职能上抽离出来,复盘整个局面,首先接纳全部的状况和现实,包括他人的想法、观点,先不去判断对错,而是先接纳所有的状况和全部的元素,明白事物的动态变化过程,不再单一地去判断,任何一个视角必然会存在一个立场,它们是当前事物诸多层面中的一方面而已。

面对复杂多变,但是因果清晰、逐步成长变化的事物,用动态而全面的思维方式来看待,才能真正看清楚事物变化的轨迹,更有针对性地设计,作出合理的决策。

后视偏见

后视偏见(Hindsight Bias)则是另外一种常见的认知偏差,它指的是人在事情发生以后觉得自己在事情发生之前就已经预测到结果了,实际上,他们并不如自己想象的那样能够准确的进行预测。这种行为在观察者眼中常常会被称为“马后炮”。

后视偏见在很多人身上都存在,人的主观性和记忆本身会造成这种偏差。对于设计工作者而言,厚实偏差的存在无疑是会带来负面影响的。后视偏见会让人沉迷于“我早就预料到了”这种感受当中,相应的无法真正从事件中真正汲取到有用的经验,也难于使用公平的眼光来评判客观事物和他人,主观上也很容易选择性忽略许多客观条件和事实。

后视偏见确实会给人带来快感,相应的,会在工作中影响决策的正确性和公平性,从而带来潜在风险。纠正后视偏见的方法并不复杂,在确知事情结果之前,记录下自己的想法,事后做验证,并统计成功与失败的数据。

事件的结果并非是最好的判断因素。在调整好认知之后,对于事件和情况的过程和相关因素进行相对全面的衡量,尽可能少的掺杂主观情绪来进行分析,这样的决策的有效性会更强。

曝光效应

曝光效应(the exposure effect)也被称为多看效应(和多看这款应用并没有关系),接触效应。曝光效应本身的描述也不复杂:人会更加偏好自己熟悉的事物。在社会心理学领域,曝光效应的另外一个称谓是“熟悉定律”,这可能更好理解。

自己总倾向于购买自己熟悉的品牌的产品,谈恋爱的时候总会有绕不开的老同学和老朋友,这些都是曝光效应之下的人类认知偏差。我们常常说的“一旦接受了这个设定还挺带感的”就是对于这一效应的真实侧写。

曝光效应在广告行业、产品营销和社交媒体有着天然的亲和力,对于营销人员、运营人员、品牌设计师和UX设计师而言,这一效应的活学活用是非常有必要的。

不过曝光效应本身并非是无条件的,相反它和产品属性、品牌设计、企业形象以及运营策略有着极为紧密的关联。

曝光效应在许多不同的社会实验当中呈现出一种不稳定性,可能是因为相关的影响因素多而复杂。有的研究表明,即使产品和服务曝光过程中绝大多数的内容是正面的,公司和企业本身的名气高低和品牌形象,同样会影响曝光效应的高低。

曝光效应在发挥的过程中,即使曝光的内容全部是正面的,对于用户的影响也会逐步呈现出一种矛盾性,也就是用户会对产品或者服务产生正面联想的同时,还会产生不利的、负面的感受。

曝光效应发挥效果最好的时段,始终是绝大多数用户对于产品认知不足的阶段,这个时候曝光效应会最大化的对用户产生影响。

值得特别注意的是,一开始就让人觉得厌恶和不适的产品是无法产生正面的曝光效应的,如果一开始存在冲突,曝光效应只会加深误会和冲突。过量的曝光一定会带来厌恶,由于复杂而大量不可控的影响因素,甚至会导致失控式的崩盘。

对于UX设计师和产品的策划和运营者而言,在合适时机加大产品的正面曝光是有效度最高的策略。深入了解曝光效应,才会明白何时放,而何时收。

可得性偏差

可得性偏差(Availability Heuristic)也是一种常见的认知偏差,它是启发式偏差的一种,人们往往会根据自己认知上的易得性来判断事情的可能性,甚至于会根据自己看到和听到的只言片语来做决策,而不是根据统计学数据和系统化的知识来做判断。

可得性偏差同样是一种广泛存在的认知偏差,用户认为自己熟悉的、更容易获得的信息在复杂的系统中发挥着更大的作用,主观上忽略其他的部分。可得性偏差和熟悉定律(也就是曝光效应)有些许共通的地方。

可得性偏差在金融领域有着巨大的影响,许多准备上市的企业会在上市前夕吸引大量的新闻报道,让投资者在信息的狂轰滥炸之下不知不觉地去关心,无意识地去了解,并最终购买这支股票拉高股价。这种策略就是借助投资者的可得性偏差来实现的。下面是谷歌搜索关键词阿里巴巴的频率和阿里巴巴的股价变化情况,两者呈现出一种明显的关联性。

可得性偏差的广泛存在,使得设计师甚至可以在自己的产品中借助有有意识的设计,来引导用户的行为。作为设计师本身而言,可得性偏差同样是会影响到设计决策,因为可得性偏差同样会影响产品设计中的设计决策的走向。消除可得性偏差的方法也不难,需要设计者不要被已知的信息和容易想起来的信息所左右,而是尽量深入地从多个角度来考虑问题,跳出固有的思维定势,多角度看待问题,作出合理的决策。

锚定效应

锚定效应也被称为沉锚效应,它一样是一个听起来高大上但是含义并不复杂的概念,它指的是人们对某人某事作出判断的时候,容易受到第一印象或者第一信息的影响和支配。这种现象就像船只被锚固定在特定位置而无法移动,因此而得名。

人们在做判断的时候,往往会受到第一印象和首个接收到的信息的影响。就像鸟类会将第一个看到的生物视之为自己的母亲一样,人们往往会借助第一印象来作为后续判断一个事物的参考标准,甚至在人际交往中都是金科玉律。即使是没有刻意地去参考第一信息,人们也会在潜意识当中,重视第一次获得的数据。

锚定效应的另外一个层面是对比,当拥有了锚定的参考之后,用户在后续会以此为基准进行对比。对比并不存在绝对意义上的好坏,但是在不同的基准之下,或者说参考的基点不同的情况下,发挥的作用其实是截然不同的。

举个简单的例子,粥铺的服务员问客人“加一个鸡蛋还是加两个鸡蛋”比“要不要加鸡蛋”所产生的销售额高出不少,因为前者会人的心理基点是“要加蛋”,而后一种问法,则让客人先思考“要不加蛋”,前者的转化率自然更高。

正是因为先入为主这种心理现象大量影响着用户的决策,使得市场竞争中,许多企业和产品都不得不去力图争个第一,赢得主导权。

iPhone X的刘海屏对于手机市场有多大影响想必大家有目共睹。而后续的蓝绿两厂的升降式摄像头设计和“真·全面屏”也因为其突出性和强大的“第一印象”的构建,而赢得了无数赞誉。

但是静下心来想想,开机解锁还要等待摄像头升起,好像还是一个蛮奇怪的事情。可是最早的“真·全面屏”确实够惊艳。

免费认知偏差

优惠促销是各种产品销售中最常用到的一种策略,而在花样迭出的促销手段当中,有为数不多的集中手段,呈现出令人惊艳的效果。

免费的赠品和满额减免就是这其中的典型。购买产品A,赠送一款B,这种赠品策略的玩法可以说是效果极佳,早年间阿芙精油声名鹊起的阶段,其中最令用户欲罢不能的,就是他们的“赠品”。用户每一次购买精油产品的时候,阿芙的团队会随之一起发出精油的入门口袋书以及多达五六种精心挑选的精油试用装,这种体贴且让人觉得“狠赚一笔”的心理感受,使得许多新用户迅速转为稳定客户。

置于满多少减多少,则同样是一种成功的促销策略。各种电商平台和购物节都会采用花样繁多的满减服务,相应的,用户在这种服务之下,总忍不住“凑单”。平心而论,真实的情况是,用户购买了自己真正需要的商品,以及一系列为了凑单而同时购买的非必须商品,对于商家和平台而言,这种策略很好的拉高了销量,也减少了许多商品的库存,而用户也感觉自己赚到了,皆大欢喜。

至于“包邮”,我就不赘述了。这个效果同样非常突出。

相比之下,打折促销所产生的效果,好像就没有那么显著和“暴力”了。归根结底,问题是出在“免费”的认知偏差之上。对于用户而言,无论是赠品、满减还是包邮,本质上都会让用户迅速地在大脑中形成一种“免费获得某种东西”的感觉,赠品对应的是免费的物品,满减对应的是免费的现金回馈,包邮则是免费的邮寄服务。

心理学家和行为学家通过大量的实验验证了免费确实和折扣等其他的促销策略有着本质的差别,它所带来的非理性行为要明显太多,免费的吸引力无与伦比,说是认知偏差毫不为过。

你一定特别想点击上面的图片免费下载素材。不好意思它只是个图片。

人类本能地惧怕损失,选择免费的赠品不会有损失,而相比之下选额其他则会让人在潜意识中产生风险感,可能会蒙受损失。这样一来,免费的赠品在人心中的价值就开始高于实际价值,随之而来的就是非理性消费。

在设计的过程中,想要让免费的认知偏差发挥效果,让人快速地感知到这种“免费获得”的感受,应当是明显的,否则很难快速地触发非理性的反馈。

结语

人类先天的生物性无处不在,我们自诩的理智在现实生活中发挥的作用并没有我们想象中那么多,无处不在的各种认知偏差主导了太多的

如何知己知彼,做好视觉竞品分析?

博博

如何知己知彼,做好视觉竞品分析?

美丽的UI 2018-02-05 18:08:13

竞品分析是设计师了解产品的一个重要途径,通过对竞品分析,设计师在了解竞品的特点后,能够更好地做出符合当前产品的设计方案。

为什么要做竞品分析?

经常有设计师朋友问如何做竞品分析,做分析最主要目标是通过竞品可以让设计师了解产品的一个重要途径,也就是常说的设计思维,通过对竞争对手产品检测,多观察了解对方的产品特点,然后在自己业务场景下提供符合当前产品解决方案。

当对竞品了解足够深的前提下,产出的设计方案自然而然会比自己想的正确可能性更大,因为你看的足够多了,心中对各个业务模块,视觉样式能如数家珍,自然而然设计的正确性能提高,但是很多设计师做不到这一点,比如谁能默写出微信4个主导航里面的每个功能结构?包括我自己都未必都背出来。

所以需要做竞品分析帮助我们了解产品功能,了解设计可能性,另外能随时知己知彼,在设计时做出正确设计决策。

如何知己知彼,做好视觉竞品分析?

竞品分析的维度? 

竞品分析有两个纬度,一个是功能交互纬度,另一个视觉纬度。今天只讲视觉维度,在APP中就是:色彩、UIkit、按钮、图文关系、表单、icon、导航、弹窗等,也可以理解为形、色、字、构、质去分析。

  • 形:品牌符号、图形 

  • 色:颜色、对比色、品牌色、饱和度等

  • 字:页面中字体、不同字体感受是不一样的

  • 构:结构,界面在结构是居中,还是偏左或偏右

  • 质:质感,扁平、3D、拟物化等

以上是构建设计的所有元素,任何设计都离不开这些,那么在看竞品的时候同理也是围绕这些点去分析。可以分析单个APP,也可以横向对比分析。

竞品的选择 

以电商为例,需要研究全球TOP如ebay、亚马逊、韩国的SSG和R9CM、以及国内垂直领域独角兽,和一些设计优秀的应用,如Airbnb、Pinterest、Instagram等。

跨领域分析,比如想做图文排版分析,那么除了竞品外,还需要关注新闻领域的,比如Yahoo News、网易新闻等,这些APP的图文板式是做的最好的,值得去学习。

下面我围绕一个简单技法,页面中分隔来做个分析,梳理出业内通用技法特点,定出设计决策依据。

1.灰色描边强调分隔

白色或浅色商品图四周添加1像素灰色描边强调分隔

2.页面留白分隔

足够大的留白来强调图片和图片之间关系

3.灰色透明蒙版分隔

白色商品图上叠加3-5%透明度黑色,形成图片轮廓

4.结合设计趋势

设计更轻量化,简洁,利用留白来强调图片和图片之间关系

如何知己知彼,做好视觉竞品分析?

设计策略产出 

  • 设计技法1:根据不同场景,在需要明确页面风格,达到页面统一效果,在白色商品上增加灰色透明蒙版,形成页面栅格对齐。

  • 设计技法2:内容左右留白的展示图片相关处理:商品图片叠加在底层背景。

▲ 上周边留出2px边框,解决白色背景的商品显示问题

  • 设计技法3:根据具有可表现的业务,图片个性化效果,可以增加渐变效果来凸显业务特殊性。

▲ 在原图上增加一层彩色蒙版,样式叠加为--线性光,增强图片特殊场景个性化

通过分析我们可以得出新的设计规范,以及不同场景处理分隔的技法,可以根据场景去得出设计的确定性,让你的设计更加科学。

除了分析技法,其实分析产品,分析交互,分析功能大同小异,重点是要掌握这种分析路径,让我们更加了解产品!

看似简单的喜马拉雅FM主播等级体系,是如何做改版设计的?

雪涛

喜马拉雅主播等级体系算是喜马各业务线中资历比较老的一员了,主要服务于主播用户查看自身等级,以及特权享受,这次整理了近期关于主播等级线现存问题的改版。

一、产品背景

1. 产品层面

这次迭代的目的是:

  • 把流量分发的核心参考点「专辑质量分」作为主播等级主要评判标准之一。
  • 让主播能够清楚的认知自己在平台的地位/影响力。
  • 给主播升级目标,促进升级。

通过沟通我们知道产品希望通过这次迭代来引起用户注意,增加主播用户和产品之间的互动,而提升页面日活以及次日留存。

2. 设计层面

设计师的基本出发点是需要设计出不低于竞品且更加精致的稿件,能够更加有效传达品牌理念和视觉延展性,进而理解产品与竞品之间的差异化,增强用户认知。

3. 用户层面

此次迭代需要考虑到主播用户的教育成本和接受程度,能否让用户感受到产品的差异性,能否让用户在第一时间看到我们希望用户关注的东西。

二、设计前期分析

通过沟通我们明确了产品需求点,接下来需要针对需求进行分析,我们从竞品视觉分析、设计关键词提炼两点来进行设计决策。

1. 视觉竞品分析

针对性的通过对 VIP、等级等属性的页面进行视觉收集。

2. 设计关键词提炼

主播等级页面的服务理念是为主播用户提供更加清晰的等级提升指引。区别于喜马其他等级线,整个流程中除了满足等级查看的基本需求和特权展示的标准化流程,更多的差异是对目标用户需求的洞察和挖掘,我们从目标用户需求定义了主播等级线设计差异化的关键词。

三、设计执行

通过与产品沟通需求点,我们了解到视觉层面需要满足或改进的内容;通过视觉竞品分析我们获取产品未来的设计趋势以及具有前瞻性的设计概念;接下来在稿件输出的过程中我们就可以打散原有页面的信息层级并进行重新分组,分析所有层级信息字段的属性,然后整理出不可变动信息、可变动信息、可增加的信息、可变的布局样式,不断尝试重组信息结构,找出合适的视觉决策点。

针对设计稿件,开展设计内部视觉评审,针对视觉稿件还邀请了产品以及交互进行意见收集,最终选择方案一作为主播等级迭代方案。

四、业务线视觉延展

在主页面色彩偏好、功能布局定稿之后,为了在关键转化点给用户带来统一有趣的视觉体验,以主页面视觉为参考以动效、ICON、插画三个维度进行设计延展,保证与竞品的品牌差异性以及设计的统一性。

1. 特权ICON

为了达到设计稿件色彩倾向、品牌差异设计贯穿用户每一个关键转化点保持特权 ICON 视觉语言统一,并增加趣味性拉开与竞品的差异,提升用户点击转化率。

2. 插画延伸

针对产品等级攻略个性化需求的诉求点,围绕等级提升的不同要求绘制场景化插画,并保持视觉层面的输出配套,通过十字交叉分析有针对性的进行精准推送。

3. 动效延伸

围绕温暖、成就感两个关键进行延展,在用户点击等级主页入口的第一时间感受到等级提升的成就感以及统一色彩倾向带来的重视感,通过特权展示达到所见即所得的直观感受。

结语

设计并非一念间的灵感迸发,设计师对整个业务需要有清晰的理解,明白产品定位并通过前期设计分析奠定设计理念而进行设计产出。

设计是一个逐渐崭露头角的过程,而我理解的设计师则应该是快乐的战士而不是轻言放弃的赌徒,还是那句话:每个人都有属于自己的一片森林。一点工作总结希望对大家有多裨益,同时欢迎各位大佬加入喜马拉雅FM。

如何成为有交互和视觉思维的UI 设计师?

雪涛

UI 在拿到产品原型时该如何思考?如何着手设计界面?最近跟一些设计师朋友交流 UI 设计方案,总结了一下在方案优化的思考过程,在这里分享给大家。

一、两道思维

很多 UI 拿到一个页面原型的时候,就立马打开各大设计网站找参考,然后照着参考页面上的效果,生搬硬套到原型上,这只是达到了单纯美化页面的效果。
那么拿到原型后应该带着怎样的思维来进行思考呢?

第一道思维:交互思维

先了解页面实现什么功能,功能的交互操作流程是怎样的,也就是说用户操作这个页面上的功能时,用户的行为路径是怎样的。

第二道思维:视觉思维

了解完功能、交互后,提取原型中视觉组成元素,细分归类,每一类应用统一性原则进行设计。

然后交互与视觉一同结合来设计界面。

二、思维应用

结合案例我们来看下两道思维是如何进行的。

第一道思维:交互思维

了解功能交互流程。

根据实例原型分析出用户行为路径:

用户行为路径:

注意点:

  • 用户行为路径的获取,一定要跟产品经理、交互设计师进行沟通确认清楚。
  • 用户行为路径某些步骤中,也有先后之分,比如第1步中,用户输入了账户地址后,才会有账户的相关数据显示。
  • 用户行为路径可以支撑信息内容进行归类分组。
第二道思维:视觉思维

提取视觉组成元素。

视觉元素:

注意点:

  • 提取视觉组件元素尽量详细归类。
  • 如有视觉规范,视觉组件元素风格应用请遵循视觉规范。
  • 如无视觉规范,同类视觉组件元素应用统一性原则进行设计。

三、检验方案

我们带着两道思维来检验一下这位设计师输出的方案:

问题1:交互层级

问题所在:

数据显示在前,输入在后,交互操作层级有点混乱。

问题截图:

问题解决:

用户行为路径中,第1步有个先后顺序,先输入地址,后显示数据,在进行信息内容布局设计的时候同样需要有先后顺序,所以交互操作层级一定程度上影响着布局排版。

问题2:步骤关联

问题所在:

「批量转账」按钮归类到了第1步的信息模块中,交互操作逻辑有点不通畅。

问题截图:

解决方案:

用户行为路径中,用户核心费用信息后,最有可能的行为就是点击「批量转账」按钮,所以「批量转账」按钮与转账费用信息的操作关联性比较大,应该在同一模块里会更符合交互操作逻辑。

问题3:颜色应用

问题所在:

主色、点缀色、辅助色各自的应用范围没有规则,颜色应用混乱。

问题截图:

问题解决:

一个页面或者项目中,各种颜色的应用范围需要有一定规范,文字使用什么颜色、按钮使用什么颜色、输入组件使用什么颜色、背景使用什么颜色都需要有对应的使用规则。

问题4:输入控件

问题所在:

输入类组件样式存在多样性,同样是输入框,有多种样式,会造成用户交互操作上的认知有误。

问题截图:

问题解决:

一个页面或者项目中,输入类组件样式应用统一性原则,保持视觉风格一致,从而减少用户操作认知偏差。

问题5:按钮样式

问题所在:

按钮样式应用到不具备按钮点击属性的对象上,用户会认为也是可点击,会造成用户交互操作上的认知有误。

问题截图:

问题解决:

一个页面或者项目中,不具备按钮点击属性的元素尽量不要套用按钮样式,减少用户操作认知偏差。

举个例子:人形的稻草套上人的衣服,成功了欺骗了人们,造成了认知偏差。

问题6:信息展示

问题所在:

同类信息内容的展示存在多样式,传达过程中加重了用户的认知负担。

问题截图:

问题解决:

一个页面或者项目中,同类信息内容的展示应用相似性原则保持视觉风格一致,因为相似性的布局可以更加地传达信息。

举个例子:电商页面,金额信息展示;理财页面,收益信息的展示;都是应用相似性的布局,即统一又地传达信息。

问题7:图标风格

问题所在:

图标风格不一致,图形反白风格,立体风格,线性风格。

问题截图:

问题解决:

根据产品的特性,建议统一的图标风格,选择线性、面性、渐变、立体等风格。

问题八:对齐间隔

问题所在:

页面元素的对齐、间隔没有规律,整体视觉显得松散,不严谨。

问题截图:

问题解决:

可以利用栅格系统,把页面信息内容规整起来。

四、优化方案

根据发现的问题,我们来看一下优化后的设计方案:

优化1:交互路径

根据用户行为路径,将相关联的信息归类到一个模块,每个步骤划分到一个模块,相关联的步骤合并到一个模块,模块内完成各自的操作展示任务,模块之间信息内容互不干扰,但从结构布局又能够形成符合交互操作逻辑。

优化2:颜色规范

规范颜色,配色的方法在这里不做深入讨论,这里方法的是基于品牌色通过饱和度、亮度、透明度的变化来得出文字各层级的颜色、边框的颜色。

优化3:输入控件

对输入类控件的样式进行了统一,让用户从视觉上就能够清楚地分辨出哪些是可以进行输入操作的,从而减少用户对交互操作上的认知成本,提高信息输入效率。

输入控件进行交互时,要有交互状态反馈,默认状态、选中状态、错误状态。视情况而定,可以增加鼠标移上状态和不可输入状态。

状态变化时的颜色应用,可以通过变换色相的透明度来保持色彩的一致性。

优化4:按钮规范

对按钮进行了分类,分为常规按钮、图标按钮、文字按钮;对按钮样式用颜色进行了统一;按钮要有交互状态反馈,不可点击状态、可点击状态、鼠标移上状态、鼠标按下。

状态变化时的颜色应用,可以通过变换色相的饱和度、亮度、透明度来保持色彩的一致性。

优化5:信息展示

对信息内容应用相似性原则进行了排版的统一处理,每个小类信息的标题与内容采用统一排版格式,然后重复应用,有助于提高信息获取效率。

优化6:图标风格

这里的图标应用于功能性图标,统一采用线性圆角风格。功能性图标需要注意图标的形状要能够正确有效地传达出功能的含义。

优化7:对齐间隔

应用栅格系统对视觉元素之间的对齐、间隔进行调整,使页面视觉更加严谨,页面信息更容易阅读。

五、总结

交互思维

了解页面中的功能交互流程,梳理用户操作行为路径,可以对行为步骤中的信息内容进行归类分组提供依据,最终有助于页面信息内容的排版布局。

视觉思维

提取视觉组成元素,对颜色、文字、控件、图标等每一类应用统一性原则进行规范设计,再通过视觉元素本身相互组合,最终应用回信息内容上,建立规范的视觉感。

设计一个页面,交互思维和视觉思维是互相配合的,缺一不可,最终都是为了共同去构造符合交互操作逻辑、满足视觉美感的界面。

我是如何从零搭建起一款健身O2O产品的?

博博

我是如何从零搭建起一款健身O2O产品的?

人人都是产品经理 2018-06-17 18:24:59

本文作者讲述的是他如何从零搭建起一款健身O2O产品的?一起来文中看看~

我是如何从零搭建起一款健身O2O产品的?

我在年初参与到“SHAPE”这款健身产品的研发中,也算是第一次以产品经理的身份,从0开始负责一个产品的建立。

产品是一款O2O的智能健身连锁店,目前产品已经上线3个月,线下店铺也已经扩展到第5家,正是回顾梳理的好时机~

一、项目/竞品调研

目前在线健身产品做的比较大的是超级猩猩和乐刻,以下的数据分析也都是针对这两家产品的。

1. 竞品体验

我是如何从零搭建起一款健身O2O产品的?

(由本人亲自到店体验课程得出的一些观点和结论)

2. 竞品用户反馈

我是如何从零搭建起一款健身O2O产品的?

我在微博和appstore还有应用宝都浏览了一些信息,反馈量不大,有价值的就更少了。后来开阔了一下思路,在大众点评上找到了更多的高质量的评论。

关于反馈的整理和分析之前写过一篇更完整的分析文章,有兴趣的童鞋可以去看看

3. 竞品分析结论

基于线上产品线下店铺体验两个方面,去借鉴竞品的优点和补足其短板。

(1)产品优化

  1. 将“约课”和“我的”作为主要的两个tab做,产品结构清晰,操作流程简短明了。
  2. 对用户位置和约课习惯进行记录,优化课程的推荐算法。
  3. 将课程特色明确标出,减少用户选课困惑。
  4. 沉淀用户运动数据,一方面可以通过用户习惯和完成度推荐用户更合适的课程,另一方面可以打造荣誉体系,将数据转换为成就,甚至价值。
  5. 用户数据变化报告,完成度/运动量/排名,增加用户专属感觉。
  6. 优秀用户图片的应用(墙面装饰/推送),让用户有自豪感,归属感。
  7. 增加评价体系,让用户有话语权,也从另一方面对教练,场馆和课程加强管理。

(2)实际体验优化

  1. 场馆的管理,包括装修/质感/空气质量,也包括卫生情况和器材的清洁度。
  2. 课程和教练的管理,教练需要更专注,更关注学员,能尽量给出适当的指导,能在高阶课程中随机应变给出降阶动作。

二、明确产品方向

课程上的创新和智能设备的应用会成为我们与竞品之间最大的区别,以此为基础,我们会为会员提供更好的运动监测,不仅为用户提供可视化的实时运动状态,还会将用户数据沉淀下来,让用户更好地计划运动频率和强度。

我是如何从零搭建起一款健身O2O产品的?我是如何从零搭建起一款健身O2O产品的?我是如何从零搭建起一款健身O2O产品的?

公众号主要是用户约课的载体,这是它的第一功能,因此需要突出课程预约,减短订单查看路径。另外,也需要展示和沉淀用户的数据,以及作为后期产品运营的工具。

另一方面,为使得线上线下产品配合流畅,我对O2O业务逻辑进行了梳理。

1. 用户行为基本阶段

我是如何从零搭建起一款健身O2O产品的?

2. 线下流程梳理

我是如何从零搭建起一款健身O2O产品的?

“公众号了解/预约课程-到店体验课程-线下心率监测系统-公众号报告和数据沉淀”,由此完成一个用户体验闭环,为用户提供流畅的健身体验。

另一方面,也是为用户积累数据,将后来能将身体数据变化通过可视化的形式更加直观的展现给用户,也为将后来的用户荣誉体系打好基础。

三、产品原型绘制/修正

我是如何从零搭建起一款健身O2O产品的?

(用户端/线下APP/教练端产品架构图)

绘制完成产品架构图后,进入具体的原型绘制和制作。

原型绘制阶段把主要的两个产品端制作成可操作的原型,提供给了技术和业务团队去试用,不断沟通,反复验证业务流程和模块。

我是如何从零搭建起一款健身O2O产品的?

(不方便放原型链接,将就看下~)

作为 Sketch 重度使用粉,必须要说 Sketch 越来越牛了,现在可以直接链接模块和页面,在 preview 的时候完成跳转,完美助攻前期简单检查页面逻辑。

1. 原型的修正

我是如何从零搭建起一款健身O2O产品的?

2. 订单调整

  • 【原稿】:订单简单按照课程时间从近到远依次排列。
  • 【问题】:有取消和完成的订单混排在所有订单中,影响用户寻找可操作的订单。
  • 当用户预约多次课程,需要即时操作的其实是离现在最近的课程。
  • 【修正】:取消和完成的订单,折叠到“历史订单”中。排序根据上课时间距离现在时间,从近到远排列。未完成的订单,显示层级最高,根据上课时间距离现在,从近到远排列。

3. 分享名额流程

我是如何从零搭建起一款健身O2O产品的?
  • 【原稿】:公众号支持一个用户购买多个名额,但由于心率监测设备绑定和报告定向推送,需要将名额对应到具体用户。因此需要购买多名额的用户将名额分享给他其他来上课的朋友。
  • 【问题】:分享名额的入口不明显,提示不强,用户容易忽略。文案不清晰,用户没有理解必须将名额分享给朋友才可以。
  • 【修正】:修改文案,强调必须分享名额给用户才可以让朋友体验完整的上课内容。

购买多名额的用户,购买完成后,增加分享提示弹框,强提示需要分享名额。名额未发放完的订单,用户进入订单详情中时,分享提示弹框还会重复弹出继续提示用户。

4. 其他不一一列举

  1. 原课程列表图片为课程封面,线下同事反馈图片并不能说明课程内容,且很多学员非常在乎上课教练,因此将图片替换为上课教练的头像。
  2. 课程类型原分类为自研课程和合作课程,然而这并不是站在用户角度的分类。为了便于用户理解课程类型,将所有课程重新根据功能性修正为“综合训练/私教小班/舞蹈/身心”。
  3. 原订用户到店后通过扫码进入签到和绑定心率设备页面,但实际线下前台二维码比较多,进门和购买饮品都是二维码,二维码过多影响用户体验。另外多名用户同时到店的时候,不好扫码。因此在订单列表中,增加了一个“可签到”状态,(介于未开始和已签到之间)。该状态可点击,进入绑定页面。

用户体验是一种过程,而不是结果

雪涛

任何人都抵挡不了时间的力量,你可以斥责它的无情,也可以赞美它的给予,在这个成长的历程中,我们寻找的不是时间给我们带来了什么,而是这个过程中我经历了什么。后者,才是我们需要深思并感恩的。

与「用户体验」一样,许多人会评判一个产品用户体验的好与差。但是「好」与「差」只是整体上的一种结论,普通人可以说这两个字。但作为设计师,必须懂得在体验过程中,知晓哪里好与哪里差,更要知道为什么好为什么差。

就好像评书似的,真正读过某本书的人,不会单纯的说:「这本书太好/烂了」。他一定会有一种感悟,哪怕只是一句话。

既然是为了提升「用户体验」,就得与用户一起进行体验的走查,才能有根据的进行优化。

一般我们会建立一种用户体验路径,其目的是为了了解用户的动机、关注点和需求点。所以为了提升用户体验,就必须邀请用户参与体验路径的设计过程。

用户在使用一款产品时,他们中的大多数只是为了完成某个任务,所以在这个过程中,也许用户只使用了部分功能,也可能使用了所有功能。

因此,不要将体验路径的设计限制在特定的产品或功能服务上,要理解完整的用户体验路径,针对性的进行走查,与用户一起提升产品易用性。

一、让用户参与产品设计流程

真实的用户体验路径需要通过不同用户的参与互动,不管是一对一的讨论或焦点小组,都需要大量的数据才能得出真实的结论。

任何没有基于研究报告的尝试、假设、数据,都将使它在很大程度上只是理论性的。所以我们一定要通过不同用户的不同体验结论,客观的进行分析路径中的哪一环可以继续优化。

与用户的交流沟通是其中的关键,在用户的帮助下,你很容易找到可提升的体验点。

因为,用户情绪的波动和心情的愉悦、满足、怀疑、失望以及懊悔的表现是无法在报告中准确反映出来的,所以设计师要重视这些用户反馈,包括这些互动的场景可以使设计师产生共鸣,通过同理心来设计并优化功能。

然而,没有任何产品或功能服务能够满足过程中的所有用户需求,所以,要深入了解每一个阶段出现的需求点,因为它们都会衍生出不同的因素,这使我们能够理解产品如何更好的服务于用户的生活。

同样,没有任何灵丹妙药能积极地改变用户体验,而是通过与用户的持续接触。也许你会说很难进行与用户直接的对话,所以你通过客服回访、用户反馈等方式收集信息也未尝不可。

可能到这里你还没有完全明白其中的道理,下面我举个例子详细说明。

二、拆解 – 用户体验之旅

让我们来举一个旅游平台的例子,这个平台是供于各种各样的人和商务旅行者使用的,其中包括了航班、酒店、出租车租赁等在内的度假套餐。

为了让各位深入了解体验路径,以及更好地了解我们的用户,让我们对旅行者的体验路径也做一个拆解。如下图:

这个路径将全面地了解用户的想法、感受和行为,因为他们会经历不同的阶段,帮助填补我们路径中的空白点,帮助我们更好的进行产品的设计。

1. 计划旅行

在计划旅行时,设计师认为用户的想法是什么?

  • 目的:休息、假期、出差;
  • 目的地的候选名单,检查距离和到达目的地的时间;
  • 出行方式选择:飞机、火车、巴士、游轮、自驾;
  • 查看酒店位置与评论好坏;
  • 评估旅行成本(如航班、酒店等费用);
  • 可取消功能(如已订的航班、酒店等)。

2. 用户角度

通过与用户的走查、回访、反馈,可以帮助我们了解用户内心真实的想法,帮助我们增强以及简化用户的体验方式。

  • 在条件允许的情况下,提供尽可能多的价格;
  • 经常出差的人会为了飞机上的最佳座位而自愿增加费用;
  • 出来旅行的家庭想要知道目的地有哪些有趣的儿童活动;
  • 显示符合用户自定义预算的旅行套餐;
  • 帮助用户估算旅行成本;
  • 给出评价信息,可供用户评判(朋友、预订平台、Facebook等)。

3. 特殊情况

产品是否有处理特殊情况的功能?

  • 由于个人原因,推迟了旅行计划;
  • 目的地天气或其他情况不利。

我们是否可以帮助用户更好地应对这些情况?通过及时提供有关目的地天气状况、备选旅行计划或建议类似目的地的信息等。

那么通过第一个内容的拆解,我们就可以发现,这个点能做的功能就有很多。而且这些功能还能排列优先级,设计师能主动进行推进,提升设计师自身的价值。功能走查的重要性相信各位也看出来了。下面继续。

1. 完成预订

是时候确定目的地、日期、旅行方式和停留地点了。(依然是设计师角度)

  • 设计有序、直观的预订体验;
  • 安全流畅的付款流程,包括多种支付渠道的选择;
  • 旅行模式的确认细节,包括驾驶方向和帮助热线电话号码;
  • 酒店确认:房间详情和热线电话。

2. 用户角度

  • 直接能从航空公司/酒店确认信息,这样会比旅行社确认更具价值;
  • 目的地指南(视频、天气、穿着、提示、要做的事情、文化等);
  • 建议的旅行路线;
  • 紧急求助热线(如果客户在预订过程中拨打电话,呼叫应该能及时取得联系)。

3. 特殊情况

  • 预订未确认,付款已处理。

1. 出行与酒店

设计师考虑的用户需求。

  • 舒畅的旅行体验(飞行准时等);
  • 入住酒店,快速办理手续;
  • 干净,方便,光线充足的房间(特别是床,洗手间);
  • 体验当地的美食和文化;
  • WiFi 覆盖;
  • 干净整洁的出租车等交通工具;
  • 与家人和朋友实时分享照片;
  • 合理的分配时间。

2. 用户角度

  • 主动跟踪用户的行程,确保一切顺利(发送提醒,与酒店确认);
  • 目的地指南(事件、当地交通、天气、衣服、提示、要做的事情等);
  • 当地餐厅/购物券/优惠等。

3. 特殊情况

  • 航班延误或取消;
  • 紧急的医疗情况;
  • 信用卡透支。

1. 旅程与归来

旅途中的回忆和收获。

  • 在脸书/ Instagram / Twitter / WhatsApp 上共享更新和照片;
  • 与家人和朋友分享经验;
  • 回忆当地的美食;
  • 经验与旅游前的期望不相符,过度炒作;
  • 航班和酒店服务;
  • 评论旅程的整体情况。

2. 用户角度

  • 提醒携带基本药物;
  • 帮助预支旅行预算;
  • 关于外汇转换;
  • 当地医疗建议、

3. 特殊情况

  • 剩下的钱如何兑换;(如国外游)
  • 退款;
  • 行李丢失。

通过以上的拆解说明,可见体验路径对于功能设计的重要性,各位设计师一定不要主观认为「你就是用户」,而是结合用户需求进行分析,设计出更合理的功能。

小结

设计师要不断完善用户的体验路径模式,因为它会一直发展,将产品优化的越来越好,而不仅仅是停留在:「这个产品我做完了」的想法上。

所以为什么说用户体验是一种过程?因为它始终在不断变化,所以作为设计师也要持续的自我增值,才能跟上产品迭代、时代发展的步伐。

用户体验是一种过程,而不是结果

UI设计掌握的交互知识

博博


云和数据西安中心 2018-06-05 17:38:27

交互设计是什么?

交互设计 Interaction Design 也被成为IXD。交互设计建立起了人与计算机便捷沟通的通道,它的目标是创造可用性和用户体验俱佳的产品。我们在工作之中经常会对接交互设计师和产品经理,他们具有丰富的交互知识和经验。那是不是我们作为UI设计师,就只需要专心做好视觉层面的工作而不需要了解交互设计了呢?当然不是,在视觉设计层面更多地考虑布局和交互原则才可以让我们的界面更友好,视觉设计师是交互设计中非常重要的角色。

用户体验

在工作中经常听到UED(用户体验设计)和UCD(以用户为中心的设计),可见互联网行业非常重视用户体验,而用户体验绝不仅仅是要样子好看。有些设计师只关注视觉层面,认为产品战略等用户体验维度和自己的设计无关,那么就会和产品经理等角色处于不同的世界了。“他们为什么要我这么改?”、“为什么这里文字要浅一点?”有时不理解对方的思考角度就会造成争执。用户体验(User Experience)是用户使用产品的心理和感受,用户体验体现了产品设计以人为本的设计精神。其实早在互联网出现之前就有“顾客先点鸡就先有鸡”、“顾客就是上帝”这种说法,并且西方很多大公司如施乐、联合利华等大公司早在互联网行业出现之前就已经开始进行研究用户体验了,可见用户体验对所有产品是多么的重要。但是让人摸不着头脑的是,用户体验有时非常地主观:因为用户体验背后影响用户的因素有人的喜好、情感、印象、心理反应等,有些人明明有摩拜却要走很远找OFO,也有人只吃肯德基而不吃麦当劳。这些选择并不是优胜劣汰,而是有背后的原因的。要想让我们的产品被人喜欢,我们需要研究用户。

UI设计师必须要掌握的交互知识

用户研究七种方法

但用户可能是几百万人呢!我们面对这样抽象的群体然后告诉自己要以他们为中心设计这多么抽象啊。这么多用户甚至有时用户自己的声音也是矛盾的。我们到底怎么样了解用户的心声呢? 

用户画像

根据产品的调性和用户群体,用户研究团队可以设计出一个用户的模型,这种研究的方式被称为用户画像。用户画像是由带有特征的标签组成的,通过这个标签我们可以更好地理解谁在使用我们的产品。用户画像建立后,每个功能可以完成自己的用户故事:用户在什么场景下需要这个功能。这样,我们所设计的功能就会更接近用户实际的需要。比如我们现在要设计一个女装购物应用,那么我们可以做这个用户画像:小美,在北京国贸CBD上班,21岁,收入8000,喜欢淘宝购物和电视购物。使用我们产品的目的是为了寻找正品时尚大牌服装进行网购。小美因为刚毕业所以一方面喜欢大牌一方面又资金短缺(启发:我们的产品是不是要解决这两个痛点?)小美是时尚OL,审美很高,不喜欢俗气的设计。(启发:界面设计是否考虑不要使用粉粉嫩嫩的颜色而使用大牌的黑白色?)。看,即使小美并不真实存在,但是她指引了我们的产品设计。接下来,我们还可以给小美增加一个头像,在做设计时我们想象这个人就是真实存在的用户,她会对我们的设计有什么看法。当我们完成用户画像之后,还可以接着设计用户故事:小美经常需要在工作场合穿符合工作气质的衣服,也需要在约会时有晚礼服之类的服装,可是小美的收入有限,她眼光较高但是对价格过高的服装无法承担,她使用我们的APP就是为了寻找正品且价格适中的服装。那么,小美在哪里用我们的APP呢?这就要为小美继续设计一个用户使用场景了:小美在开会时可能会打开看看、在地铁里也会浏览、在清晨打开衣柜时也会浏览。基本来说是碎片时间,而且是有着装需求时。(启发:我们是不是需要把字号调大以适应地铁里颠簸的阅读环境?我们是不是需要设计省流量模式免得刚刚毕业的小美花一笔巨大的流量资费?)

UI设计师必须要掌握的交互知识

用户画像

用户访谈

邀约用户来回答产品的相关问题,并记录作出后续分析。用户访谈有三种形式:结构式访谈(根据之前写好的问题结构)、半结构式访谈(一半根据问题一半讨论)、开放式访谈(较为深入地和用户交流,双方都有主动权来探讨)。用户访谈设置时要注意:用户不可以是互联网从业的专业人员、不可以提出诱导性问题、不要使用专业术语。用户访谈适合产品开发的全部过程。

问卷调查

可分为纸质调查问卷、网络问卷调查。依据产品列出需要了解的问题,制成文档让用户回答。问卷调查是一种成本比较低的用户调查方法。问卷调查适合产品策划初期对目标人群的投放,另外注意一个问题最好收集10个问卷,也就是如果你有10个问题那么至少要收集100个问卷才是有效的。要知道不是所有人都愿意耐心地填写问卷,很可能敷衍了事的回答会扰乱我们的判断。

焦点小组

焦点小组一般有6-12人组成,由一名专业人士主持,依照访谈提纲引导小组成员各抒己见,并记录分析。并且在焦点小组的房间里会有一扇单向玻璃窗,用户是看不到里面有谁的。而在里面坐着的通常是开发团队,他们可以清晰地看到用户是如何吐槽他们的产品的,但是他们没有权利直接和用户进行解释。焦点小组需要特殊的房间和设备,主持人也需要训练有素,焦点小组特别能够分析出用户在没有我们说明的情况下如何使用我们的产品和对产品的不满。

可用性测试

通过筛选让不同用户群来对产品进行操作,同时观察人员在旁边观察并记录,可用性测试的要求是用户不可以是互联网从业者而应该是真实产品的用户群体。但是可用性测试一般要有一个可用的软件版本或者原型供人测试才可以,在软件开发的前期不适合用这个方法。

眼动测试

使用特殊的设备眼动仪来追踪用户使用产品时眼睛聚焦在哪里,盲区是哪里。比如一个网站通过眼动测试可以知道用户的视觉会自动屏蔽网站的常见广告位置,这时如果希望提高广告的点击,就需要把广告位放置于用户聚焦时间较长的位置。眼动测试的设备比较专业,通常在小公司较难开展。

用户反馈和大数据分析

根据市场提供的反馈和数据得出客观的判断和合理的推测。用户反馈也是用户研究的一个重点,用户反馈主要是用户通过产品的反馈入口主动向开发者提出的意见。

有了这些方法,我们就能更好地了解用户和接近用户了。但是要注意,用户研究也是有陷阱的。比如:填写问卷和参与调研的用户可能并不是核心用户;提交用户反馈的用户之外可能有更多沉默的用户等。总之用户研究是一个必要的手段,但是仍然需要产品团队来对产品的方向做出决断。

用户如何使用产品

使用场景

刚才我们介绍了用户使用的场景是根据产品的功能和平台决定的。电脑的使用场景是正襟危坐,手持鼠标。而移动端则是随时随地使用,我们的用户可能在地铁里、在厕所里、在吃饭时、在上课中怕老师看到把手机藏在桌洞里、在工作中领导巡视后偷偷瞄、在辗转反侧睡不着的时候没有开灯地浏览等。这时我们要为用户考虑,如果他们在使用我们产品的各种场景中有什么需要,是不是需要省流量、是不是需要调整字号、是不是需要过滤蓝光、是不是需要护眼模式、是不是不方便看视频、是不是需要缓存视频、是不是界面目前单手不太友好、是不是扫二维码时需要个手电功能、是不是需要语音提醒、是不是需要清除访问记录。一个不考虑用户使用场景的产品一定是会遭到吐槽的。很久之前我听同事在吃饭时抱怨过“大爷的,也不搞个提示,早晨在地铁里用4G看流量以为是在家用WIFI,结果看了一集《甄嬛传》花了80块钱”、“哎?你是不是早晨开会时玩游戏了?你的比分都给我们推送了哈哈哈”。

UI设计师必须要掌握的交互知识

我的产品中的用户使用场景表格

操作手势

网页设计所处的电脑端目前主要还是依靠鼠标点击来操作。鼠标点击的最小单位甚至可以是一像素。而移动端不太一样,移动端设备中我们使用手指来操作界面。一般来说,手指点触区域最小尺寸为7×7 mm,拇指最小尺寸为9×9 mm。也就是在我们@2x设计中为88px(或44pt)。这个神奇地88PX在移动端应用很广泛:很多表单单项的高度是88ox、导航栏高度也是88px等等。那您可能会说,也不对吧,有些界面上的图标看上去没有88px啊。是的,但是那只是视觉,我们可以通过增加图标点击区域的方式(比如给60像素大小的图标左右增加22像素的透明区域)来让图标更好点击。千万在设计时不要把操作区域放得特别近,可以把所有点击区域用88px标记看是否有重叠的情况,避免点击一个图标时误点另一个图标。除了点击区域,移动端还可以利用各种手势来进行各种操作的设计。主要的手势有:

UI设计师必须要掌握的交互知识

单点触碰(Tap):点击用来选择一个元素,类似鼠标的左键,是最常用的手势。

拖曳(Drag):点击某个元素然后拖拽进行移动,类似现实生活中移动物体的感觉。

快速拖曳(Flick)速度很快的拖曳操作。

滑动(Swipe):水平或垂直方向的滑动,比如翻阅相册和电子书翻阅的手势。

双击(Double-Click):快速点击一个物体,通常会在放大、缩小操作中使用。

捏(Pinch):两根手指头向内捏,捏的动作会使物体变得更小,通常在缩小操作中使用。网易新闻客户端中正文页面即可通过捏的动作来缩小字号。

伸展(Stretch):两根手指向外推,现实中这种操作会使物体向外拉伸,元素可能会变得更大,通常会在放大操作中使用。网易新闻客户端中正文页面可以通过伸展放大字号。

长按(Touch and hold):手指点击并按住会激发另一个操作。比如朋友圈的相机图标长按可只发文字。但是注意,长按不是一个常态操作,所以一般不太建议用户进行该操作。但长按操作又是有需要的,所以会把删除、只发文字状态等操作隐藏其中。

除了用户使用场景、点击区域、手势,那么还有一个影响我们设计的使用情况,就是用户怎么拿手机很重要。用户可以:单手拿手机、双手拿手机、直向拿手机、横向拿手机。我们需要考虑这些可能发生的特征进行手势互动的规划与设计。比如OFO为了让单手(说不定是左手还是右手)操作方便,主要按钮在下方并且做的很大,左右手都可以轻松点击。而微信的很多按钮也都是大长条,方便左右手的触发。横屏使用场景一般是游戏、视频等,所以一般的APP并不支持横屏操作(微信、支付宝、微博均不支持横屏操作),

格式塔:我们如何认知?

我们发现有些用户在使用设计好的界面时找不到一些重要的功能按钮。“奇怪,分享功能不就在更多按钮里面吗?”、“用户怎么连这个也找不到啊”你也许会说。我们要来了解一下用户是如何认知我们设计好的界面的。在初高中考试的时候您一定见过完形填空这种格式吧,“格式塔”源自德语“Gestalt”,意即“整体”、“完形”的意思。格式塔心理学认为,我们在观察的时候会自动脑补出一些逻辑和含义来,会让观察对象变成一个完整的、整体的、常见的形状。

"研表究明,汉字的序顺并不定一能影阅响读,比如当你完看这句话后之,才发这现里的字全是都乱的。"研究格式塔心理学对我们做互联网产品和设计有什么用呢?掌握格式塔的理论我们就可以让用户按照我们安排的“剧本”来交互和操作界面了。我们可以让用户比较容易地根据固定位置找到提交按钮、我们也可以让用户不经过太多思考在杀毒软件中点击杀毒按钮等。格式塔心理学对于我们做好表现层是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大记忆律两个知识点。

接近律 law of proximity

格式塔心理学认为,人们认知事物的时候,会依靠它们的距离来判断它们之间的关系。两个元素越近就说明它们之间关系更强。但是接近也是有对比的,在复杂的设计中,我们要一边考虑它们之间内部的逻辑关系一边来排版。

UI设计师必须要掌握的交互知识

A组和B组因为接近律而产生不同地阅读顺序

UI设计师必须要掌握的交互知识

距离更近的信息暗示了他们有内在的逻辑关系

相似律law of similarity

认知事物时,刺激要素(比如大小、色彩、形状等要素)相似的元素我们倾向于把它们联合在一起或者认为它们是一个种类。比如,我们能轻易的分辨出拨号页面中拨号键和按键群的区别。

UI设计师必须要掌握的交互知识

相似的元素暗示了他们属于一个种类

UI设计师必须要掌握的交互知识

类似外形的单元会被我们人脑默认为同一属类

闭合律law of closure

就算没有外形的约束,我们也会自动把图形脑补完全。比如半个形状或者有缺口的形状我们不会认为是一条线,而是一个完整的形状。闭合是指一种完形的认知规律。

UI设计师必须要掌握的交互知识

左边的图中我们会认为是圆形有缺口而不是一条曲线

右边的图形中我们会认为是圆形被三条线截断了而不是四个图形

UI设计师必须要掌握的交互知识

界面设计中露出一半内容,闭合律让我们感知右边还隐藏着更多内容

连续律law of continuity

在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线,使曲线继续成为曲线,也就是视觉的惯性。利用连续律我们可以让用户操作界面时不经过思考就点击一个固定的位置。

UI设计师必须要掌握的交互知识

深谙连续律的流氓软件

成员特性律law of membership character

如果我们有很多同样的按钮,如何让某个更重要的按钮突出但是仍然让用户感知还是按钮呢?那就要用到成员特性律了。成员特性律赋予了集体中某一个元素特殊的一些刺激元素从而突出它。

UI设计师必须要掌握的交互知识

独特的外形暗示了它与别的元素有不同的功能

UI设计师必须要掌握的交互知识

拨号页面中拨号键与微博发布微博图标都与其他按钮不同

记忆律:我们如何记忆?

接着格式塔五大律还有专门研究用户记忆的格式塔记忆律。格式塔心理学家沃尔夫对遗忘问题所作的经典性研究得出了格式塔的三大记忆律。沃尔夫实验时要求实验体观看样本图形并记住它们,然后在不同的时间里根据记忆把它们画出来。结果发现实验体在不同的间隔时间画出来的图像都有不同。有时再现的图画比原来的图画更简单更有规则,有时原来图画中显著的细节在再现时被更加突出了。还有的比原来的图像更像某些别的我们都很熟悉的图案了。沃尔夫把这三种记忆规律称之为格式塔三大记忆律:“水平化”、“尖锐化”、“常态化”。

UI设计师必须要掌握的交互知识

哪个图形才是正确的?(图片来源:网络)

水平化leveling

水平化是指在记忆中我们趋向于减少知觉图形小的不规则部分使其对称;或趋向于减少知觉图形中的具体细节。

尖锐化sharpening

尖锐化是在记忆中与水平化过程伴随而行的。尖锐化是指在记忆中,人们往往强调知觉图形的某些特征而忽视其它具体细节的过程。在有些心理学家看来,人类记忆的特征之一,就是客体中最明显的特征在再现过程中往往被夸大了。

常态化normalizing

常态化是指人们在记忆中,往往根据自己已有的记忆痕迹对知觉图形加以修改,即一般会趋向于按照自己认为它似乎应该是什么样子来加以修改的。

UI设计师必须要掌握的交互知识

情感化设计是什么?

了解格式塔会让我们把界面做得符合用户的心理预期,让用户能够明显地找到他应该找到的操作。可是用户好像还是不开心,因为用户觉得界面不好看。您是不是也会陷入这样的矛盾:可用性重要还是美感更重要?怎么样能够让我们设计的界面又好用还漂亮呢?情感化设计由唐纳德·A·诺曼博士提出,指的是设计中情感在所处于的重要地位以及如何让用户把情感投射在产品上来解决可用性与美感的矛盾。情感化设计是在抓住用户注意、诱发情绪反应以提高执行行为的可能性的设计。比如红色且巨大的购买按钮能够无意识地抓住用户的注意、可爱萌萌的卡通可以缓解用户网络不好时的焦虑等等。情感化设计有三个水平,它们是递进关系,分别是:本能水平(重视设计外形)、行为水平设计(重视使用的乐趣和效率)、反思水平设计(重视自我形象、个人满意、记忆)。

UI设计师必须要掌握的交互知识

本能水平

我们都是视觉动物,对外形的观察和理解是出于我们本能的。本能水平的设计就是刺激用户的感官体验,让别人注意到我们的设计。这个阶段的设计会更加关注外形的视觉效果。比如各大电商网站的专题页面设计,更加注重抓眼球和外观的刺激。

行为水平

行为水平是功能性产品需要注重的。一个产品是否达到了行为水平,要看它是否能有效地完成任务,是否是一种有乐趣的操作体验。优秀行为水平设计的四个方面:功能,易懂性,可用性和物理感觉。比如好用的记事本APP等。

反思水平

反思水平的设计与用户长期感受有关,这种水平的设计建立了品牌感和用户的情感投射。反思水平设计是产品和用户之间情感的纽带,通过互动给用户自我形象、满意度、记忆等体验,让用户形成对品牌的认知,培养对品牌的忠诚度。马洛斯理论把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我实现需求五个层次。我认为反思水平的设计就是提供给用户归属感、尊重、自我实现。比如Google每逢节日就会有一些符合节日化的设计、网易严选的空状态也会有品牌感的体现等。

UI设计师必须要掌握的交互知识

淘宝空状态中的情感化设计

情感化设计的表达

UI设计师必须要掌握的交互知识

画面 画面是情感化设计的重点,让错误页面或者空状态都成为一幅可爱的插画。

应景 让用户在我们的产品中体验到一些和真实世界一样的氛围变化。

游戏感 没有人喜欢做任务。试着让用户完成的任务变成游戏吧。比如每次登陆加金币,有足够的金币就可以获得什么称号。

冲突 冲突非常能够勾起人的情绪,营造一个竞争或者对抗的氛围,让用户感觉自己置身在一个比赛或者格斗中一样。

讲故事 给产品和无聊的图像一些故事内容,毕竟没有人讨厌讲故事。

隐喻 用一些大家理解,随处可见的事物表达一些无趣、生涩的概念。

互动 给用户和其他用户多制造互动机会,比如排行榜、推荐等,不要让用户感觉孤独。

交互八原则

当我们了解了产品五要素(产品设计的维度问题)、格式塔心理学(用户如何认知的问题)、情感化设计(如何让用户满意的问题)后,我还要给您介绍一大堆地交互原则。这些交互原则会帮助我们设计出更好用的界面,当然也可以帮助我们讲出这样设计的原因。不拿出一些理论怎么能够让别人信服你的设计,对不对?

费茨定律(Fitts’Law)

费茨定律指的是:光标到达一个目标的时间,与当前光标所在的位置和目标位置的距离(D)和目标大小(S)有关。它的数学公式是:时间 T = a + b log2(D/S+1)。这个定律是由保罗.菲茨博士(Paul M. Fitts)提出的所以得名。菲茨定律在很多领域都得到了应用,特别是在互联网设计中尤为深远。我们利用费茨定律估算用户移动光标到链接或者按钮所需的时间,时间越短越。比如有一个按钮在左下角,我们的操作可以细分为两个阶段:第一个阶段大范围移动到左下方向,然后再做微调到达这个按钮之上。所以这个时间受按钮和链接所在位置与按钮和链接大小影响,也就是说我们在做设计时要考虑光标默认会放在哪里、我们的链接按钮是不是太小了。

UI设计师必须要掌握的交互知识

费茨定律说明距离越短、目标大小越大,那么光标到达目标越快

UI设计师必须要掌握的交互知识

费茨定律在网页设计中的使用

UI设计师必须要掌握的交互知识

OFO和苹果音乐APP都将按钮放置手指最容易点击的区域并且按钮足够大

希克定律(Hick’s Law)

希克定律是指一个人面临的选择(n)越多,所需要作出决定的时间(T)就越长。它的数学公式是:反应时间 T=a+b log2(n)。在我们的设计中如果给用户的选择更多,那么用户所需要做出决定的时间就越长。比如我们给出用户菜单-子菜单-选项,那么用户可能会很纠结;如果我们简化成菜单-选项,就会减少用户做选择的时间。

UI设计师必须要掌握的交互知识

用户反应时间和选择数量的关系

UI设计师必须要掌握的交互知识

我们应该减少用户的选择

7±2法则

让我们先玩个游戏,请记忆下面的文字,一分钟后移开视线:

挣 多 久 可 猫 风 师 袅 崩 六 酒 望

现在闭上眼睛想一下刚才的文字您能回忆几个?大概是五个到九个之间。1956年美国科学家米勒对人类短时记忆能力进行了研究,他注意到年轻人的记忆广度大约为5到9个单位之间,就是7±2法则。这个法则对我们做界面设计的启迪就是如果希望用户记住导航区域的内容或者一个路径的顺序,那么数量应该控制在七个左右,比如苹果和站酷网站的导航个数。另外,移动端底部Tab区域最多也是五个,而页面中的八大金刚图标也是八个。

UI设计师必须要掌握的交互知识

苹果、站酷、Dribbble等网站导航数量全部是7±2

泰思勒定律(Tesler’s Law)

这个定律是说产品固有的复杂性存在一个临界点,超过了这个点过程就不能再简化了。我们只能将这种复杂性转移。比如我们如果发现页面的功能是必须的,但当前的页面信息过载,那么就需要将次要的功能收起或者转移。

UI设计师必须要掌握的交互知识

Dribbble网站导航将更多功能收起在一个表示更多的图标内

防错原则

一个表单是需要填写完毕后方可提交的。但是用户有时会漏填或者忘记填写,这是用户点击提交会怎么样?很可能有些选项会被清空(比如密码选项基于安全考虑会清空cookies)那么用户还得重新填写。这时解决办法是在用户没填写完之前把按钮设置一个看起来不能点击的样式,用户想提交时弹窗:您还有内容没有填写完哦,然后把用户定位在没填写完的项目,让那个表单高亮。(是不是真的做到以用户为中心啦?)再比如推特只允许用户填写140个字,但用户一写爽了往往会超出140个字那怎么办?解决办法是给他在旁边倒数还能写几个字。看,这些都是我们为了防止用户操作出现错误所做的努力,防错设计就是要减少错误操作所带来的灾难。错误的提示当然需要设计师的设计了。可是也许您不知道有些错误提示含糊,用户并不知道到底错的是哪里,下一步该怎么办。比如仅仅登录功能就可能会有用户名错误、密码错误、网络超时、连续三次输入密码错误、用户名为空等不同的错误,而有些产品仅仅给出“出错了”,那么用户当然会不知所措了。正向的例子比如一次我在登录Google Mail时输错了密码,它提示“密码输入错误,提示:您在1个月前改过密码”。

UI设计师必须要掌握的交互知识

BOO!APP输入密码时卡通会蒙住眼睛,输错时也会有提示

奥卡姆的剃刀法则(Occam’s Razor)

奥卡姆的剃须刀法则主要就是说我们做产品时功能上不可以太繁琐,应该保证简洁和工具化。比如产品中为用户提供了收藏功能是否就不需要喜欢了?提供了喜欢是否不需要点赞了?一定保证功能上的克制。

UI设计师必须要掌握的交互知识

QQ将更多功能收起到了头像和加号图标中

防呆原则

有一个著名的交互书籍叫作《Dont make me think》,翻译过来就是不要让我思考。这句话一直在我做设计时响起:不要认为用户是专家!不要认为用户是专家!有时我们会觉得,点击汉堡包图标当然就是菜单啊!这个按钮长按不就会调出XX功能了嘛。但是我们忘记了普通用户可能并不理解什么是汉堡包图标、什么是抽屉式导航、什么是长按、双指滑动。更何况普通用户并不会研究我们的APP,在他们眼中我们的产品只是众多工具中的一个,我们何德何能认为自己的产品是值得用户花时间学习的?一定要把交互和设计做得简单,并且让用户在别的地方“学习”过。每个页面强调一个重要的功能而不要让用户做选择题。这些都是有效防呆的好方法。防呆和不要让我思考都讲的是我们的设计要自然而然。

UI设计师必须要掌握的交互知识

运动APP KEEP 的页面中总有一个按钮是突出的

防止不耐烦原则

用户是很容易不耐烦的,你还记得你多少次看着视频加载条骂人吗?如果我们需要用户等待载入信息,一定要给一个有情感化的设计提示,避免用户产生焦虑。 比如很多游戏(比如决战平安京、王者荣耀等)加载时都会出现主角跑步的小动画,美团等APP下拉刷新时也会有几帧的动画来安慰用户。动画要好于苹果默认提供给开发的“转菊花”,因为卡通形象更有亲和力。但是好像还不够,用户需要掌控感,“哎?它一直加载,是不是死机了?”为了防止用户没有掌控感,我们可以为用户设计加载条或者加载提示。加载状态条很遗憾很多都是假的甚至是重复的,原因是其实要判断加载了多少M的素材的代码更占资源!我们本来想安慰用户等待加载的时间竟然会变得更长,那当然不行啦。于是很多时候我们会做一个假的加载状态条来安抚用户,我想您一定看过反复加载的加载条吧!加载条下的文案其实也是可以变得非常有情感化设计感受的,比如通常是:加载场景资源、加载素材这样的文案,但是有些APP需要很长加载时间时会给出这样的文案:导演正在准备、女主角准备化妆了、摄像师打开了灯光。是不是更加好玩啦?

UI设计师必须要掌握的交互知识

美团和网易严选的加载动画

总结

交互知识其实关键还要在应用和分析。一方面,我们可以在工作中积累经验,不断地思考如何和同事配合一起研究提高产品在使用时的体验;另一方面,我们也要经常积累一些产品使用时发现的交互。建议大家平时可以收集你觉得不错的情感化设计或者微交互,比如发现饿了么在下雨天送货时会有电闪雷鸣和雨滴的设计;OFO和滴滴打车在不同节日也会把地图找车里的图标换成节日相关的图标;BOO!APP在输入密码时小怪兽会捂住眼睛;WPS在晚上写作时(没错就是现在)会提示你开启过滤蓝光的护眼模式等等。一个好的设计师一定是懂得交互的设计师,也应该是非常细心的设计师,也应该是懂得为用户着想的设计师。

微信赞赏浅析

博博


人人都是产品经理 2018-06-06 18:13:32

今天上午,微信对于赞赏功能进行了升级和宣传,他的赞赏对象由公众号变为了作者。由于大量公众号的用户活跃度长时间处于衰退期,此次“赞赏”功能升级最终目的无非是想敲醒沉睡内容生产者。本文主要从它赞赏功能的升级来谈谈微信公众号。

从“赞赏”功能升级浅析:微信公众号如何挽留内容生产者?

6月6日上午微信对“赞赏”功能升级进行宣传,其最大的变化是从赞赏对象由公众号变更为作者,今后免费转载也有可能获得赞赏收益。同时支持恢复iOS端打赏,其打赏金额直接到赞赏者微信账户期间不收手续费。仿佛在呐喊“创作者们快回来吧”

根据企鹅智库《2017自媒体趋势报告》中数据显示显示:自媒体每日新增信息越来越多,加上用户碎片化信息消费方式,使阅读具有较大的随机性而缺乏粘性,不仅很多已关注的公众号信息不一定会打开阅读,打开阅读的概率以及完整读完一篇文章概率都依次递减…..

现在来看看目前的整个微信公众号主线流程:

一、核心业务

从“赞赏”功能升级浅析:微信公众号如何挽留内容生产者?

蓝色部分是整个微信公众平台核心的发动机,由内容生产者输出内容通过微信公众号作为媒介传递给用户,用户反过来以留言点赞打赏来反馈给作者,促进整个微信公众号体系正常运转。

从本次赞赏升级上看,无非是给闭环的最后一到流程增加多了一环“打赏”,这是对原创作者最大的鼓励,值得一提的是今后免费转载也有可能获得赞赏收益,支持和激励原创作者。

下面看看公众号另外2个核心业务。

二、运营加速器 1 号

从“赞赏”功能升级浅析:微信公众号如何挽留内容生产者?

内容生产者的优质内容由公众号信息流进行分发,可从而获得了打赏收入,且符合一定的资格可开通流量主获得额外的广告收入,一定程度上也了激发和鼓励作者提供持续优质内容输出。

同时微信公众号提供原创保护机制及转载和白名单操作,订阅号app的上线也为作者提供更便捷的操作及互动,促进整个内容生态高速运转。

三、运营加速器 2 号

从“赞赏”功能升级浅析:微信公众号如何挽留内容生产者?

根据用户使用场景,不断优化给用户更良好的体验去浏览查看,增加用户黏性和激发活跃度,期间不断收集意见反馈,促进整个内容生态高速运转。

四、猜测后续变化及趋势

  1. 继续丰富订阅号app功能,本次赞赏账户的各种操作,应该很快会在订阅号app里发布上线,此外编辑和发布可以使用视频目前订阅号app也不支持,想必在短视频上继续发力,该功能少不了。
  2. 丰富内容生态,在原有的“公众号消息列表”、“看一看”、“搜一搜”、“群聊及朋友圈”后继续扩大公众号文章出口。
  3. 从争夺用户数量到争夺用户时间,作者的收入不仅仅只有打赏和广告点击,可能后续纳入付费阅读,最大化协助内容创作者持续生产高质内容。
  4. 仅仅按公众号首字母排序远远不够,优化公众号列表分组管理,至于由用户手动分类还是由微信公众号进行分类在此不展开陈述。
  5. 公众号和小程序持续发酵流量互补。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档