04
老司机带你提高设计效率
刘伟 刘伟
一、设计师的成就感源于不同层面的认
人作为社会性群居的高等动物,逃脱不了社会和环境的影响,设计师也不例外,工作这么多年,我把设计师的成就感来源分层5个层面。越是底层的越容易做到,所以自我认可的变化就是设计师的成长之路, 可以拿以前自认为做的满意作品来看看,如果觉得还是不错,那需要给自己敲个警钟,自我成长速度不够或者方向不对,需要向牛人取取经来突破自己。
1-1
二、设计师的价值源于“设计赋能对商业贡献”的程度
在很多设计师看来,设计本身就是在赋能业务,所以会很奇怪为什么还会有这样的一个话题,但是我们扪心自问或者回顾下自身的经历就会发现:有一部分的设计师的作品总是能够给人惊艳,各方都点赞,为什么?对于商业公司中的设计师,想要获得更大的话语权,必须有处理完成日常的设计工作以外额外的设计价值,所以我对“设计赋能”从因果上面进行思辨发现:设计赋能,设计师以自身经验做设计方案,最终达到商业赋能(也有可能只是满足设计需求),这种情况下有可能产生 设计方案很惊艳,但是技术实现不了,或者不是业务所要的。赋能设计,设计师以商业赋能作为出发点,有针对性的进行赋能的设计,最终实现商业目标,这种情况下即使设计方案不惊艳,但是最终能够满足商业目标,那么设计师的价值也会得到认可。以赋能设计的设计思维作为起始点,在不同的方案中不断锻炼自己的设计手法和技巧,内外双修才能修成正果。
1-2
三、保姆逻辑和乐高逻辑
在讲方法之前先讲一个我们经常熟悉的场景: 业务方给一个frd,要你出方案,只给非常短的时间; 然后我们基于frd,快速画原型,出视觉; 然后方案评审的时候,各种意见纷踏而来, 然后我们就陷入了痛苦的修改和评审的死循环中; 最要命的是,好不容易全部搞定,发现我们只是一个画图的美工; 最坑的是我们还没有发现问题,每天不断的重复着这样的事情。这个是最常见的协助业务进行设计的场景,那么我们怎么做才能解决这个问题呢?
向前走半步,深入理解业务,协助产品梳理逻辑,以用户的视角来思考业务 向后走半步,提取和使用可复用的组件,并协助技术实现成组件,并沉淀成组件库,提升设计和技术的效率。
1-3
1. 向前走半步之保姆逻辑:5字心法
深入理解业务,协助产品梳理逻辑,以用户的视角来思考业务。想:思考的出发点,项目或需求解决用户什么问题,满足用户什么期望,商业价值是什么等等 看:项目(需求)包含了哪些页面,页面的类型和结构用什么方式最合适 试:用户的行为路径是什么样的,在路径中页面之间有什么关系记:用户信息和行为的记忆是否有考虑,是否有提前的信息预设,是否有后续的行为预测 防:考虑极限情况、出错情况的处理方案防止发生意外时对用户的伤害。
1-4
2、 向后走半步之乐高逻辑:5层组件
组件化思维能够帮助设计师在设计的过程中把可复用的组件单独提取出来并建立标准化的组件库,通过前端技术的实现,帮助设计和前端技术提升效率,这种思维模式在设计前&设计后都需要去应用,当建立了自身的组件库后,设计的效率的提升会出乎你的意料。 在实际组件的建设过程中,我们会把组件层&功能层都叫做组件层,工具层&产品层都叫做应用层,层次越往上越复杂,复用性就越差。
1-5
1-6
逆向思维,从产品层到元素层对页面进行拆解,来学习一些其他公司在组件上的深入层度。 所以对于设计第一层更多的是对技能训练和内容的沉淀, 通过保姆逻辑的“5字心法”帮助我们更加系统化的思考商业需求和项目, 通过乐高逻辑帮助我们理解产品构成的元素和组件,养成项目做完后组件沉淀的习惯。
你还在用轮播图吗?
徐燕 徐燕
轮播图(Carousels)这样的交互方式,在web时代似乎已经司空见惯。当一群人在会议室里争夺首屏焦点图的优先级时,使用轮播图,似乎能够不费吹灰之力地解决这场争端,没有人是输家。然而,轮播图这种方式真的有效吗?如何设计才能带给用户更好的体验呢?
事实上,“万能和事佬”轮播图的点击率通常都很低,转化效果也并不好,却往往占用了页面最抢眼的大面积位置。想象这么一个场景:当你走进图书馆想找一本特定的书阅读时,一个销售员挡在你面前让你先看一个大广告图,然后等你还没读完具体讲了什么内容时,他又突然换了一张,是不是很惹人厌呢?大部分轮播图的设计也是如此。
一、确保你真的需要使用轮播图
首先,设计不当的轮播图容易被用户当成与他想浏览的内容不相关的广告图片而直接无视。在各种网页中早以身经百战的用户,会选择最快速的方式找到和浏览他们想要看的内容。把精力放在翻看没有预期的轮播图上显然是低效的,一上来就自动进入了用户的视觉盲区。下面的热力图展示了用户的浏览行为习惯:快速扫描找到想要阅读的区域,然后再进行有序的沉浸式阅读,毫无例外他们都忽略了看起来像广告的图片部分。
26
2-2-2
除此之外,在2013就有研究结果表明,轮播图的交互效果十分不理想: 只有 1% 的用户点击了轮播图上切换按钮,其中 84% 的用户只在首屏点了1次。
2-3
还有学者针对30多个B2B的网站的网站进行了研究分析,根据轮播图的内容分成了三类:品牌宣传(Branding)、白皮书/在线研讨会(Thought Leadership)、服务推广(Service Promtion),发现不管是哪一类的内容,点击率都很低(0.16%~0.65%):
t2-4
不仅如此,不少使用轮播图的网站还存在以下几种SEO问题: 1、复杂的大图导致网站性能低,加载速度慢。一般轮播图都会承载大量的图片信息,尤其是那些首屏就被高分辨率轮播图铺满的网站,这样庞大的图片信息会对加载速度造成很大影响。每多加载1秒,就会流失更多用户。无论是用户还是搜索引擎,都偏好加载更快的网站。 2、使用轮换的标题。不少开发者倾向于给页面最上方的轮播图片打上标签,使页面上出现轮换的4-5个不同的标签,导致相关关键词的检索能力降低。 3、Flash的使用。部分网站的轮播图使用Flash去展示内容,它能够做出很酷的效果,但却无法被任何搜索引擎抓取。 4、综上所述,设计不当的轮播图容易被忽略,点击率不理想,还可能会对SEO造成负面影响。所以,我们不应该在还没有仔细思考过页面希望给用户传达内容的优先级和希望达到的效果时,就哪里“需要”哪里搬。
二、其他方式也能解决问题,并带来更好的效果
1、找到最需要触达给用户的内容,将次要内容放在次级位置展示。 谷歌云平台的产品与服务种类繁多,但并没有使用轮播图展示全部产品和特性,而是将浓缩的品牌价值和理念清晰地展现在用户面前,并提供主(免费试用)、次(与销售人员联系)两个明显的转化入口。同时,将其他次要入口铺在下方,让用户可以选择通过顶导航或者继续往下浏览,快速找到感兴趣的内容,如下图:
t2-5
2、让它成为内容的一部分。 氧气是一个专注于提供内衣购买推荐的app,当你按顺序滚动浏览页面的商品时,促销信息会以和通常产品推荐一样的形式出现在你面前,打扰感低,对进入沉浸式阅读的用户转化效果好,如下图:
t2-6
3、砍掉不重要的推广图,直接展示内容 右边的图片似乎看起来更 “好看” ,更 “吸引人” ,然而在实际场景中用户总是习惯性的忽略banner部分的内容,选择性的浏览正文部分,直接展示用户需要的内容,可以提高用户的检索效率,从而带来更高的转化率:
t2-7
所以,当你的合作伙伴告诉你他想“加一个banner,能轮播的那种”,先别急于着手画图,不妨按以下的几个步骤和他展开探讨: 1、这么做的目的是什么,当用户打开页面时,最希望他关注什么内容,这些内容是否能分出优先级。 2、通过已有的研究结论,理性认识轮播图的效果(并非万能,如果设计不当可能带来负面效应)。 3、思考是否有更好的方式去达到同样的目的。 4、当无法抉择时,做ABtest。 读到这里你可能还会产生这些疑惑:轮播图真的都这么低效难用吗,那为什么还有那么多网站使用呢?为什么我的网站的数据和上面的数据有出入?上面的数据都是基于web场景下的,在移动场景下会有什么不同吗? 诚然,有的场景就非常适合使用轮播图——当用户希望查看的信息以图片形式承载效率最高,并且图片同属于某一类别下,用户有所预期时。谷歌图片的体验就是个典型的例子, 用户在搜索了摸个图片的关键词之后,先看到小图列表,点进其中一个小图查看原始图片后,就能通过左右箭头或者相关图片推荐去浏览更多同类型的图片:
t2-8
除此之外,还有其他纯粹展示图片或者对外出租广告位的场景也同样适用。 另外,在移动端场景下,由于屏幕的垂直高度更小,轮播图所占的比例更大,交互操作又比web端用鼠标点击有更大的触发区域,点击率通常会更高一些。有学者专门针对移动端的电商网站轮播图交互效果进行了研究分析,得出了与Erik略为不同的结论:23%的用户点击了轮播图上的内容,其中的54.1%在第一张图上完成了转化,其中的15.7%在第二张图上进行了操作。虽然数据图表同样是线性递减的,但无论是轮播图本身的点击率(23%)还是第一屏之后的点击率(总和占所有对轮播图点击的45.9%),都高于先前Erik在ND.edu网站上得到的数据。
t2-9
由于不同网站的历史背景、用户习惯、关注点和设计方案有所差异,得到的数据可能千差万别。我们需要知道的是,是否使用轮播图本身并非是影响点击转化率的决定性因素,是否有结合实际场景设计合适的方案,才是关键。在适宜的场景下,体验好的轮播图也可以带来令人惊喜的效果。
三、体验好的轮播图应该如何设计
1、让轮播图看起来像是站点的一部分 将品牌元素贯穿设计始终,使用一致的字体及排版方式,让轮播图成为站点中统一的门面,而不是容易被直接忽略的花哨无序的贴片广告。提供清晰,区分标题、正文和转化入口的层次,提高可读性,如下图:
t2-10
2、慎用自动切换 “固定静止的banner图比自动切换的banner图能带来更高的有效点击率。如果你还不够了解你的用户,投放100%符合他们预期的内容几乎是不可能的,这时似乎在内容上给他们提供更多选择=更多点击率=更多销售额。这实际是行不通的。” —— 电商专家 Depesh Mandalia Web易用性大师Jakob Nielsen也曾专门针对会自动切换的轮播图做了可用性研究,结论表明自动切换的轮播图会惹恼用户并更容易被他们忽略。
img-6
这种设计似乎非常普遍:在一个固定的区域中,每5秒自动切换展示一张图片。这看起来似乎很方便,提高了更多内容的曝光率。然而实际并没有多少用户会盯着图片为了未知的内容耐心等待5秒,这样做太低效了,他们的视线早就转移到了其他地方。除此之外,当用户对当前的图片内容感兴趣进入阅读状态时,突然的自动切换会打断用户的阅读进程,让用户丧失可控感,感到沮丧和恼怒。最关键的是,自动切换的图片会比默认静止的图片看起来更像广告而非原生站点的一部分。
t2-12
还有一些网站用了比较折中的方式,当鼠标 hover 至 banner 上时停止自动切换,或者在 banner 上提供了暂停的按钮,这样做比原始的不分场合的自动切换要高级一些,但却无法解决移动端的一致性适配问题。因为在移动场景下,并不存在 “ hover ” 这一状态,暂停小按钮的可用性也非常差。同时由于移动端的一屏内容有限,用户不会做过多的停留就会往下翻看其他内容,“自动切换”这样的交互方式不仅起不到曝光更多内容的作用,反而影响了体验。好的做法是,让你的页面保持稳定的状态,通过进度指示点或者隐藏部分内容的方式,提示用户可以左右滑动查看更多。 在下面的豆瓣app的这个例子中,推荐的第二个小组还有一部分没有显示出来,让用户明显能够感知到后面还有更多类似的推荐,可以左右滑动进行查看:
t2-13
Instagram在推荐用户时也用了类似的做法,除此之外,还给出了展示全部的操作入口。不仅对用户的打扰最小,操作效率也更高。
t2-14
所以,让你的图片默认静止在最新或者最重要的内容上,给出可以切换的操作预期,由用户自主触发切换操作时才进行切换,是更好的选择。
3、给予清晰的操作反馈和内容预期。 展示信息的信息应该面向大部分的访问用户,属于同一类别或有所关联(如都是某个酒店的图片,都是旅游城市的地标图,都是当季发布的新品图等等),引起访问者的兴趣并诱发进一步切换探索,而不是随机地将一些无明显关联的图片放在同样的位置。让用户能够快速识别点击区域,减少出错的可能。提供更大的点击区域和hover反馈,让用户能够清晰的感知到哪些区域是可点的。
44
同时,对于面积较小的点击区域(如定位指示点),给予适当的容错区间。
img6-7
提示用户所在的位置,提示用户操作后可见的内容。当用户对切换后的内容有所预期时,他能够更容易地找到自己感兴趣的内容,点击率也更高。下图的例子将步骤与定位指示点相结合,图片按顺序展示了当前步骤的指示。
img6-1
在下图的案例中,banner区域的下方展示了不同视图下的缩略图和标题文字,让用户能够在不进行任何切换时,就获取隐藏的信息内容,然后再选择自己感兴趣的进行操作。
img6-2
4、保证可用性,兼顾SEO。
本文的主要目的主要是强调不是所有网站都必须使用轮播图,轮播图也不是万能的,如果设计不当还会打扰到用户对网站的浏览。当然,在设计时考虑到网站的加载速度切体验好情况下,用一些轻量的轮播图是可以提升点击率的。所以这就要求我们做产品时对内容进行优化,使用轻量的图片元素和转场动画,保证网站的可用性。
如何平衡广告变现与用户体验
孙蕊 孙蕊
在PC互联网时代,广告、游戏、电商是互联网公司创收的三驾马车。随着移动互联网的兴起,游戏和电商率先实现平滑迁移。移动广告则是要慢一步,受限于屏幕尺寸、用户习惯、支撑技术等因素,广告移动化的速度落后于游戏和电商。如今,随着移动互联网的加速普及、“移动优先”消费趋势愈加深入,以及基于大数据的精准营销成为现实,移动广告自然就迎来了最美好的时代。市场研究机构IHS Markit的最新报告显示,2016年全球移动广告收入达830亿美元,同比增长了60.5%。美国知名移动视频广告平台AdColony近日针对移动开发商所做的一份调查报告显示,广告收入已经占到他们总收入的55%以上,其中最主流的广告形式为视频广告、展示广告和原生广告。
s3-1
随着移动广告的泛滥,相信大家在用APP或是用手机浏览网站时,都遇到过这种情况-广告内容的低下、遮挡主体内容、不小心点击跳转不明网站等等,在手机屏幕这寸土寸金的地方,这应该是移动用户最反感的内容。但是为什么现在还是有大量的广告充斥着我们的手机屏幕?在《中国手机应用行业趋势绿皮书2015》数据中显示,排名top500中68%的APP是在2013年就上线了,而后进场的APP处境尴尬,不仅没有先发优势,也没有雄厚的背景支持,又面临竞争激烈大环境,要想延续生命,广告是最直接的变现方式,但糟糕的是移动广告与用户体验相背离,结果不仅导致收入降低,还导致用户流失。怎样做到移动广告变现与用户体验之间的平衡呢?下面就聊一聊这个问题:
一、广告变现过猛易伤害用户体验
谈及广告变现伤害用户体验的案例,微博是一个绕不过去的典型。这个中国版Twitter自2013年遭遇重大危机以来,老用户和大V流失,流量和月活用户下滑,尽管营收和利润显示正迎来第二春,但广告过多影响体验的顽疾似乎并没有离它而去,网络风评一如既往的不佳。
simg-8
从财报上看,自2013年以来,微博广告占总营收的比例一直在扩大,已经由当年的72%上涨到最近财季的85.4%。广告分布上,从APP开屏页到搜索栏,从话题栏到信息流,从短视频片头到每一个可以塞进banner广告的缝隙……都被微博加入了广告。在刚刚过去的七月底,微博CEO王高飞剧透微博将在评论区也加入广告,再次引发用户吐槽和反感。
实际上,微博已经经历了一次老用户逃离、新用户补位的用户群结构变化。一方面,微博用户的覆盖重点从一二线下沉到了三四五线城市,后者的月活用户占到了50%以上。另一方面,16-25岁的年轻用户占到了微博用户的70%以上,老用户基本都被稀释掉了。可以说,微博遇上了一次幸运的起死回生,但“退守”的代价是沉重的。微博尽管在市值上超越了它的老师Twitter(100亿美元级别),但极有可能错失了成为中国版Facebook(市值接近5000亿美元)的机会。另一个广告变现太过而伤害用户体验的要数小米的ROM产品MIUI。这个曾经开启小米发烧文化的桥头堡产品,如今也沦为米粉吐槽的对象。MIUI的最大问题在于,它的广告会出现在系统自带的天气、下载管理、日历、安全中心、文件夹、搜索、短信等所有力所能及的地方,甚至连插入耳机都会弹出广告……
s3-3
上图是MIUI系统下音乐播放器的播放界面广告。MIUI在长期的版本更新中都没有解决广告泛滥的问题,反而有愈发增多的迹象,以至于用户经常用“更多广告”之类的调戏回怼小米的更新,并呼吁小米推出“会员去广告”之类的功能。 综上,微博和MIUI最初推出时都算得上惊艳,如今从营收和用户规模上也算是成功的互联网产品,但在版本迭代过程中,两者都因广告变现过猛而伤害了用户体验,遭致了老用户的逃离和吐槽,一定程度上制约了产品价值的兑现。
二、如何平衡广告变现和用户体验?
广告变现和用户体验,这看起来互相矛盾的双方,却又是一对形影不离的CP。今天,包括谷歌、Facebook、阿里巴巴、腾讯在内的全球最成功的互联网公司,以及上面提到的微博和小米,都把广告变现当作了重要的收入源。同时,它们也无时无刻不在思量如何平衡广告变现与用户体验,以实现持续稳健的发展。
如何平衡广告变现和用户体验?往大了说是公司价值观、产品初心的问题,往小了说需要企业实力、成长阶段的考量——不同规模、不同阶段企业的侧重点有所不同,因而可能对这两点的优先级安排有所不同。但可以肯定的是,随着互联网粗放式跑马圈地的上半场结束,进入垂直化、精细化运营的下半场后,所有人都应该重新思量、认真对待广告变现和用户体验的博弈。具体到一款移动应用产品,我建议运营者可以从以下几个方面去尝试平衡广告变现和用户体验:
(1)保持节制。面对移动广告爆发式增长的红利,是细水长流还是涸泽而渔,考验的是开发者在利益面前的控制力。如果一款产品不是定义为“垃圾站”,打一枪换一地,而是立足长远发展,以期长期占据某一垂直入口,那么对广告量保持节制是必要的。在特定行业轴上,当格局分明,多款产品同台竞技时,最终胜出的不是最会赚钱的,而是最得用户心的。 (2)合理而正确地规划广告位。在移动端,广告位的多少和大小直接影响用户对产品的使用体验。由于手机等移动终端可用的屏幕尺寸有限,广告的展示位置不能喧宾夺主影响可视内容、不能出现在不该出现的位置制造混淆,也不能导致用户无法接收到相关内容。例如,下图的案例中,头部接连两个广告,将应用的主页内容严重挤压,用户从首屏只能看到一条内容,严重影响了体验和观感。
simg-9
(3)追求原生广告和创意广告。相比随机分配的广告,原生广告和创意广告无疑更有利于维持用户体验。原生广告是一个2012年新提出的概念,对其定义各界众说纷纭,我比较同意这个说法—“当你用内容的形式并冠以该平台的版本,就是一种原生广告。原生广告就应该以一种消费者本身使用该媒体的方式去接触消费者。例如,下图是虎扑体育的一则篮球袜广告,其以资讯形式呈现给应用内关注NBA的用户,毫无违和感。
simg-10
创意广告则是一个更大的话题,它几乎伴随广告行业发展的每一个阶段,具体形式也随着技术进步而花样百出、精彩纷呈。8月初火爆朋友圈的人民日报客户端发起的“穿上军装”H5营销,引发全民参与,堪称创意广告成功的典范。
s3-6
三、未来广告变现和用户体验将呈现哪些新模式?
需要明确的是,好的用户体验是一个不断变化的东西,很多过去流行的广告模式在今天OUT了,同理,今天时兴的广告模式,也会随着时间的推进而变迁。要维持上佳的用户体验,必须与时俱进、随时求变。在这个移动广告发展与探索的阶段,腾讯社交广告下的朋友圈广告似乎已经找到了一条适合自己的路径。
相较其他平台,微信并不是一个纯媒体属性的平台,它的社交与连接属性尤为明显。平台规则导致的相对封闭的社交关系链天然地对外部信息侵入高度敏感,这样的基因决定了它尤为重视粗滥广告信息可能对用户体验造成的损害。而微信团队本身的产品美学也让他们自身非常重视用户体验,微信曾在一次分享中提到对用户体验的目标是做到“自然”。这句话具体到商业变现的层面,就是绝对不会用体验去交换短期的“商业价值”。几乎没有一位业内人士能够否认,腾讯社交广告在信息流广告方面的动作相当“节制”。而表面节制的背后,更多地还有在技术层面的深耕。不同于搜索广告这类被动供给商业信息的模式,信息流广告这种主动推送的方式对技术的要求甚高。往本质上说,技术决定了广告投放是否精准,而这一方面关乎广告效果,另一方面关乎受众体验。 在巨大的商业诱惑面前努力“节制”,可能是朋友圈广告相较其他平台给用户留下的最深刻的印象。通过对广告曝光频次的严格控制,在用户端确保了体验,在企业端也让商家投放的广告信息更加突出,不会湮没在其他商业信息之中。
s3-8
另外,如果受众没有与广告信息产生互动,那么这条广告在24小时内就会消失在用户的朋友圈信息流中。除此之外,消费者还可以主动点击右上角的“不感兴趣”,剔除那些不被欢迎的广告,而这种用户的主动反馈也能很好地起到增强体验的目的。 线上广告发展至今,“原生”这个词反复被提及,大多数平台都能做到“形式原生”,即广告的外在包装形式与其他资讯别无二致;部分平台能做到“内容原生”,即精心安排的内容不会让消费者产生排斥的心理;但极少有平台能做到“意图原生”,即直接满足消费者此刻的需求。 “广告,也可以是生活的一部分。”这是微信广告的slogan。对于具备庞大数据量和技术实力的腾讯而言,这也成为了它努力达到的目标。
广告不会消失,而是无处不在。今天,基于大数据挖掘和分析的精准定位营销已经开始发挥效应。在Facebook、微信等平台,用户已经可以收到称心如意的广告信息,而不是接受无差别的大规模轰炸。未来,随着语音交互、全息视频、VR/AR/MR、人工智能等技术的发展和应用,广告和用户之间的关系必将被重构,相处也会更加融洽。
交互设计中的心理学原理
姚健 姚健
怎样设计出一款用户体验非常棒的产品呢?
随着互联网产品市场的竞争加剧,功能与技术的竞争已经到达瓶颈期,所以UI与交互设计在产品中的地位被互联网企业提升到了战略级的高度,越来越多的互联网公司开始意识到好的产品用户体验给企业所带来的价值。那么,在产品设计中,我们怎样设计出一款用户体验非常棒的产品呢?我想,除了最基本的设计学知识,心理学在其中起的作用非常之大。心理学是研究人的心理和行为的,对心理学的研究能够帮助UI设计师和交互设计师学会用科学的方法去分析人的行为,让设计师有更合理的理论依据去做下一步的具体设计。所以借此机会,也整理了一下认知心理学中对交互设计有所启发的一些知识点,包括: 1、中央凹与边界视野——如何呈现信息以获取注意力 2、格式塔原理——如何处理不同界面元素的关系 3、时间感知——如何让应用具有高响应度 4、意识与无意识——别让用户思考! 5、记忆的局限——如何降低工作记忆负担。
一、中央凹与边界视野—如何呈现信息以获取注意力
原理:人眼主要通过视网膜成像。视网膜中的视锥细胞大约占据视网膜面积的1%,主要集中在中央凹中,在中央凹之外(称为边界视野)视锥细胞分布的密度很低。边界视野主要分布的是视杆细胞,大约占据视网膜面积的99%。
中央凹处的成像最清晰、分辨率很高;而边界视野分辨率极低,人眼在边界视野基本处于“失明”状态,所见的东西差不多跟通过覆满水雾的浴室门看东西的效果一样。中央凹并不大,当用户与电脑屏幕距离正常时,它在屏幕上只有1-2厘米的大小。中央凹成像的区域就是我们的眼睛的注视点,因此我们每个瞬间看到的景象都只有注视点是清晰的,其他区域非常模糊。但既然边界视野的分辨率这么低,为什么我们会觉得自己所见的景象其实全都很清晰呢?这是因为我们的眼睛注视点会以每秒三次的速度快速跳动,有选择性地对周围环境进行注视,大脑再根据这些视觉输入和我们已有的经验去填充视野的其他部分,让我们能够对周围环境形成一个足够清晰的感知。
边界视野看东西很模糊,但是也有其不可替代的作用。它能够发现周围环境中的关键信息,一旦发现这种关键信息,它就会引导中央凹去仔细查看这个信息。边界视野对运动的物体非常敏感,这是因为在进化过程中我们需要很快发现周围运动的物体,它可能是可以吃的小动物、或者企图吃掉我们的猛兽。所以我们常常会对边界视野中的运动物体比较敏感,一旦发现我们几乎会不由自主地看向它。边界视野还有一个特殊能力就是能够在黑暗环境下很好地工作——视锥细胞习惯高亮度,而视杆细胞更适应黑暗环境。所以在黑暗环境下不直接注视物体反而更能够看清楚。
启示: 操作反馈和错误信息: 1. 反馈信息尽量落在中央凹中。如果要对用户当前的操作进行反馈,反馈信息与用户当前的注视点不要超过1-2厘米,否则这些信息就会处于边界视野,用户很可能觉察不到。 2. 边界视野上的反馈信息必须足够清晰,比如使用大字体、独特的颜色,或者使用动效。想象一下把边界视野都打上马赛克的样子,如果这时候提示信息仍然能够吸引注意,我们才有理由认为用户能够看到。 3. 边界视野上的反馈信息要有统一且易识别的特点,比如使用用户习惯的警示符号,或者标准的红色字体表示错误。这些易于识别的特点让用户能够轻易分辨出这是什么类型的信息。 4.必要时使用对话框。对话框中止了用户当前的操作、要求用户注意特定信息并作出响应。对话框要谨慎使用,因为会对用户造成打扰,尤其是模态对话框。使用对话框还有另一个弊端就是用户会有习惯化(habituation),即重复暴露在刺激环境中会导致对该刺激反应倾向降低——对话框的泛滥让用户对对话框非常不敏感,往往不看内容就会直接关闭。
让用户更快找到信息: 1. 页面上的重点信息,可以通过颜色、字体、形状等要素与其他信息做出差异化的显示。用户通过边界视野的引导和注视点的跳动来在界面上寻找信息。如果要让用户更快找到所需的信息,就要让这些信息在边界视野上也足够明显。 2. 如果信息很多并且无法预测用户的目标(比如菜单栏、应用中心),就尽量通过图标差异化地显示每个选项。要让每个图标都容易辨认有点困难,比较好的方法是赋予每个图标独特的颜色和轮廓,不要太华丽也不要有过多的细节。
二、格式塔原理——如何处理不同界面元素的关系
我们获得的视觉输入是独立的点、线和区域,而我们会在神经系统层面上将这些信息知觉为整体的形状和物体。
1、接近性原理:在位置上相互靠近的物体倾向于被感知为一组。 如 iOS 系统的设置,通过位置亲疏关系来体现分组。
04
2、相似性原理:看起来相似的物体倾向于被感知为一组。 如支付宝首页的元素虽然很多,但是根据相似性可以清晰地分为几组。
yi-3
3、连续性原理:我们倾向于将线条和形状感知为连续的整体。 典型的例子是 IBM 的 logo 设计,我们并不把这些元素感知为独立的横线,而是感知为整体的字母。
yi-4
交互上典型的例子是滑动条,如iOS的亮度调节,我们不会把左右两边视为独立的横线,而是会在心中把它们连接起来,视为一个整体。
yi-5
4、封闭性原理:与连续性原理相关,我们倾向于将分散的元素感知为封闭的物体。 下图是印象笔记 PC 与 Mac 端多选笔记的显示效果,我们会将后面的线条视为一个封闭卡片(代表着一个笔记)的一部分,而不是视为独立的非封闭图形。
yi-6
5、主体 / 背景原理:我们倾向于将元素区分为主体和背景,其中主体占据了我们主要的注意力。iOS 系统的选项菜单、toast、对话框等都利用了这个原理,将用户原本操作的界面作为背景,而将当前需要用户去关注的信息作为前景。
s6-6
6、共同命运原理:一起运动的物体倾向于被感知为一组或者彼此相关。 这比较多用于动效设计,通过不同元素的共同运动体现其亲缘关系。
s7-1
几种格式塔原理之间并不是相互独立的,在设计中往往需要综合运用。
三、时间感知——如何让应用具有高响应度
一个交互系统的响应度,即能否即使告知用户当前的状态而不需要他们无故等待,是影响用户满意度的最重要因素。 下面列出的是与人机交互有关的一些时间间隔,以及与之对应的认知原理:
yi-8
除了让系统反馈保持在要求的时延之内,还有一些提高响应度的tips: 进度条需要让用户感到系统正在运作、并且清楚进度和需要等待的时间,不要一直停在 99%,也不要只显示已完成而忽略未完成。
尽量不要在单位子任务内发生延迟。上文提到用户会将任务拆解为子任务,完成每个子任务期间用户都是处于高度专注的状态,此时发生延迟影响较大。
如果加载需要长时间,先渲染出重要信息让用户看到。
利用空闲时间先做些事情,不要等待用户发出指令后才开始慢吞吞地行动
四、意识与无意识—别让用户思考!
人脑可以认为是由三个部分组成:旧脑、中脑和新脑。旧脑主要由脑干组成,掌管着人的本能反应和身体的自动调节功能。中脑位于旧脑之上新脑之下,控制着情绪反应。新脑主要由大脑皮层组成,掌管着只有高级哺乳动物才具备的意识活动。 我们的思维可以分为两种:由旧脑和中脑产生的无意识的、自动化的、情绪化的思维,称为系统一;由新脑产生的有意识的、理性的思维,称为系统二。 系统一只会根据自己已知的东西做判断,不在乎逻辑性和准确性,并且反应更加快速,它在大部分情况下都运作良好,因此也不需要系统二出马。 系统二掌管的是更加高级的认知能力,它往往在系统一无法做出合理反应、或者我们对反应结果的要求比较高的时候,才会亲自出马。系统二运作的成本较高,需要进行有意识的监控并消耗有限的注意力资源,并且只能按照顺序一件一件完成。相比之下系统一的运作就轻松得多,也允许“多线程”操作。 举个栗子:当你早期刷牙时,打字时,开车时,都几乎不需要费力去想如何完成这些事情。因为这些是你已经习得的行为,只需要使用系统一就能够完成,你甚至可以一边唱着一首熟悉的歌曲,一边给自己做早餐。但是,要用到系统二时,比如算一道数学题、背出你部门里 30 个人的名字、决定今天中午吃什么,我们就会开始觉得这些事情“有难度”,它需要消耗我们的认知资源。 这些知识给交互设计的启发是,尽量让用户使用系统一就能够完成操作,尽可能少消耗用户的认知资源,这样用户会觉得系统很“易用”。 用户已经学会的操作可以用系统一轻松完成。因此在设计时尽量保持用户已有的操作习惯,让用户使用以往的经验、而不需要重新学习,就能完成任务。 用户对软件系统存在很多图式(即 schema,是认知的基本单元,用于解释感知、调节行为和存储知识),所以他们往往根据对特定界面或控件的特定期望进行反应,而不仔细去看实际显示在界面上的内容。 如果某个元素的设计符合用户对按钮的图式,用户就会认为它可以点击;如果用户的图式中对话框的确定操作在右边而取消操作在左边,他可能在意识到你调换了操作位置之前就已经完成了点击。我们要减少消耗用户的认知资源,就需要去了解、遵循用户已有的图式,以及在应用中建立稳定的图式,这也是为什么我们需要在设计中遵循一致性原则。 不要让用户去思考:A 跟 B 的概念有什么区别?为什么没有反应、我到底操作成功了没?找不到删除订单的操作、它应该在哪里?这个东西选中后会有什么效果?用户对这些事情想的越多,就说明系统越难用。用户的注意力是有限的,应该尽量减少用户对工具的注意,这样他才能全神贯注去完成他的目标任务。
五、记忆的局限—如何降低工作记忆负担
人的记忆分为短期记忆和长期记忆。短期记忆也称工作记忆,是为了完成任务而临时储存的信息,一般保留几分之一秒到几秒。长期记忆是我们“记住”的东西,长期记忆包括但不等于“永久记忆”,保留时间也可能只有几分钟、几天、几年。 长期记忆对应着神经系统的某个活动模式,参与该模式的神经元通过突触建立联系,神经元上的这种变化可能是长期的甚至是永久的。神经活动模式可以被再次激活,这就是我们回忆的过程。神经活动模式如果经常被激活,其连结也会变得越来越稳固,这就是为什么经常复习有助于巩固知识。 工作记忆是感觉、注意和长期记忆留存现象的组合。来自人体各个感觉器官的信息,会被短暂地存储下来,其中一部分可以被注意到,进入到工作记忆中。长期记忆中的内容也是工作记忆的候选来源。而注意机制负责对感觉和激活的长期记忆进行筛选,因此进入工作记忆中的信息都是我们“注意”到的部分,是属于上一部分所述的系统二的工作。 我们一次只能注意一件事,如果你觉得你能同时注意两件,那是因为你在两件事之间快速地切换你的注意力。 工作记忆的容量有限,大约是 4±1,即我们能够同时记住的互不相关的东西的数量在 3~5 之间。此外,工作记忆还非常不稳定,如果我们将注意转移到新事物上,之前工作记忆中的内容就可能遗失。 Tips: 1、避免使用模式,即避免同个操作在不同模式下有不同的效果。用户常常会忘记当前处在哪个模式下,因此很容易犯错。除非在使用模式时非常清晰地将模式标示出来。 2、让用户知道他使用的搜索词是什么。“用户居然会笨到忘记自己搜的是什么吗?”了解了工作记忆的特点之后,也许我们会更能理解这种问题。 3、每个页面应该只有一个行动召唤按钮(Call To Action),避免干扰用户注意。 4、提供操作提示和帮助时,不要一次呈现太多信息,用户记不住。 5、层级低的导航更好用,因为用户会忘记自己所处的位置。
UI与交互是产品与用户沟通的桥梁,一个互产品(不局限于互联网产品)的品质,UI和交互设计是产品开发中十分重要的一环,UI与交互设计师要深入透彻地了解与分析用户的心理规律,将心理学应用到产品的交互设计中,才能达到绝佳的使用体验。同时,需要指出的是,我们在设计一个产品时,这些原则可以作为参考,但是“设计”这件事情本身并没有规则,我们做此研究的意义并不是告诉大家设计师如果遵守某个黄金准则,产品就能脱颖而出了,我们研究这件事情的意义在于:我们需要找出产品为什么优秀的规律,并且尝试完善它、灵活运用它甚至打破它,这才是设计师应该做的事。
大有学问的搜索设计
李旻华 李旻华
“搜索是移动应用上的一个主要功能,甚至有些人认为,搜索是仅次于打电话的最常用的手机功能”。而我想说的是,在这个移动互联网的时代,电话已经很大程度上被微信语音电话、视频等取代了。搜索功能的使用已完全超过了打电话,我们每天打开着各种应用,不知不觉的使用着搜索。
搜索,做为一个很常见的人机交互对话的途径,人们每天通过搜索,得到自己想要的东西。提升搜索体验,降低人机沟通成本。那我们今天就来好好研究下“搜索”,了解搜索中需要注意哪些事项。
gi-1
什么时候用搜索呢?
1、目标对象很难找到时; 展现给我们的对象很多时; 不知道目标对象的具体位置时(如在mac磁盘中查找某类型文件时); 数据很难找到时;如在一篇长文本中搜索某个字符串时。 2.需要查找特定的内容时;比如我们在淘宝中搜索匹配某种特征的商品时。 3.不知道具体目标时(比如不记得这首歌叫啥,通过歌词来搜索;不知道这个植物是啥,通过图片搜索)
搜索有哪些方式呢?
搜索,我们第一印象就是通过文字来搜索,生活中常用到淘宝购物、iPhone查找应用程序等,这些都是文字搜索方式。但是文字搜索也有自己的局限性,随着技术的不断发展,也越来越多的搜索方式供我们在不同场合使用。目前常见的搜索方式有:文字搜索、语音搜索、图片搜索、AR搜索。 那我们就来一个个的了解它们吧。
文字搜索
最基本的搜索包括以下过程: 打开一个搜索文本框, 输入查询并提交, 显示搜索结果集。
gi-2
入口设置
首先,我们要明确我们为啥要使用搜索,那就是帮我们找到想要的东西,如果你连这个入口都很难找,那你又怎么让用户通过它来找其他的东西呢。所以,入口的设置要明显。 根据我们的商业产品目标,应用内搜索中有两种主要的模式:持久性搜索(persistent search)和可扩展搜索(expandable search) 持久性搜索(persistent search) 当搜索是你应用中的主要关注点时,适合使用持久性搜索。 一个已准备好接受焦点的文本框显示在内嵌的搜索框中。 用户可以点击麦克风按钮来激活语音搜索。(语音和文字搜索是经常搭配在一起的) 可扩展搜索(Expandable Search) 当搜索是不你应用中的主要关注点时,适合使用可扩展搜索。 通过工具条中的搜索按钮(标记为一个放大镜图标)来代替搜索文本框。
gi-3
模糊搜索、定向搜索和定向筛选的使用
从交互来理解,其实是分为模糊搜索和定向搜索;从数据处理量层面分为开放式搜索、封闭式搜索。模糊搜索一般对应的是开放式搜索,定向搜索对应的是封闭式搜索。 对于移动端来说,简单易用是最基本的设计要求。它不需要像pc端那么复杂,通常是把模糊搜索和定向搜索结合起来使用。常见的类型有: 定向筛选和模糊搜索(定向搜索)-定向筛选, 模糊搜索(定向搜索)-定向筛选, 定向搜索(定向搜索)-无筛选。通常我们会两者结合使用,比如淘宝,它将筛选宝贝和店铺分类前置,结合搜索内容进行搜索,到后面通过筛选找到自己想要的内容。前面的定向筛选主要是用来区分城市、类别等,具体是否使用,要结合具体的业务。
6s
动态搜索与静态搜索
动态搜索,指输入搜索条件时的实时搜索+实时展示。这种设计也被称为动态过滤,即输入文本数据,对应搜索结果将会动态过滤显示在屏幕上。同时,这也是一种特殊形式的辅助输入,动态搜索我们也可以理解为自动联想(自动补全),帮助用户更快的找到自己想要的结果。
s4-6
静态搜索,这种交互方式比较陈旧了,以前的网页搜索中用的比较多,但现在已经基本被取代。它就是输入文字内容,点击搜索按钮后,只针对输入的文字进行匹配搜索。虽然这种方式很成就,现在很少单独使用了。它是和动态搜索结合起来。虽然现在的搜索都有联想功能,但并不是每次联想都是用户满意的结果,所以用户还是会点击搜索按钮进行搜索。大家可以注意到,搜索中,搜索按钮还是时刻保留着的,动态与静态搜索结合,才是搜索应有的状态。
键字高亮显示
高亮显示,有效的帮助用户对信息进行筛选,但高亮在设计中使用的方式有多种。在搜索联想时,通常下面联想的内容会进行高亮显示,也有很多没有进行处理,还有一种就是把搜索的内容灰色显示,其他的内容高亮显示。具体怎么用,你可以自己决策,建议应该采用一种方式,而不是不予处理。
gi-4
历史记录与热门推荐
在链家新房频道中,输入“丽江”后,app保存我的输入记录。下一次进入搜索页面,将会把上次的“丽江”展示出来,形成历史记录。历史记录也是减少用户输入成本的有效手段。在设计整个搜索体验的过程中,你应该始终记住一点:尊重用户的努力。
热门推荐,在电商行业用的非常多。当用户目的性不是很强的时候,他会去关注一下现在热门的东西。在搜索中加入热门推荐,增加转化率。如果想突出商品,热门推荐放在搜索中,是一个不错的选择。
gi-5
搜索等待
用户在输入完成后,点击搜索,或者直接点击联想出来的内容。网络有快和慢,当网络比较流畅的时候,点击搜索,搜索内容就直接展示出来了;但是当网络不好或者内容过多的时候,一定要给一个搜索状态展示(或进度展示)。小贴士:动效可以有效的分散用户等待过程中的无聊感,让用户实际等待的体验更好。
gi-8
语音搜索
语音正逐渐代替打字成为人们日常交流的重要方式。稍微观察周围便可发现,人们在走路、骑车、开车等场景下往往都会选择用语音进行交流。究其原因,不外乎打字不方便,懒得打字,或者打字效率不高。那么语音未来会取代键盘吗?这个我倒不觉得会,毕竟场景不一样。但是,语音的价值是非常大的,尤其是在智能时代,语音的作用越来越大,成为人机交互的有一重要方式。
入口明显, 入口基本是伴随着搜索框一起的,百度更加突出语音搜索,在下面的tab中也放了一个入口。
gi-9
录入语音给予反馈, 在录入语音和没录入的时候,给予反馈,告知用户手机是否在接收语音。通常情况是,输入的时候音波曲线在上下大幅波动,给予反馈。
ig-13
另外一些图形化说明书式的做法也是能让用户快速熟悉提升认知
te1
图片搜索
图片搜索是通过搜索程序,向用户提供互联网上相关的图片资料的服务。图片搜索的目的是查找出自己所需要的特定图片。图片搜索,一般的应用中比较少,常见于搜索类浏览器(如百度),还有专门进行图片识别的app,比如形色,就是对植物花卉进行识别,识别成功率还很高。图片搜索的方式有两种,一种是拍照搜索,一种是相册读取图片搜索,两种方式的使用场景不一样。
ig-12
AR搜索
AR搜索,目前应用较少,可去看百度的ar搜索做了解。虽然应用较少,但是却是一种大的趋势,有兴趣的童鞋可以深入去了解下。最后想说的是,搜索,我们不要局限在文字搜索中,应该与时俱进,探索更多的搜索方式,提升产品体验。我们也不要局限于百度、谷歌等浏览器搜索,其实微信、微博、豆瓣、知乎等这些媒体也在给我们提供着另外一种搜索方式。
s-17
如今,搜索做为一个很常见的人机交互对话的途径,被广泛应用。文字搜索被大众熟知并广泛使用,但是也存在一定局限性。随着科技发展图片搜索、语音搜索各种高科技搜索层出不穷。搜索也和我们的生活的联系越来越紧密,衍生的各种智能生活产品也是未来的重头戏。
ZOL第四期UXD月刊
ZOL第四期UXD月刊
老司机带你提高设计效率,走出你的设计瓶颈期。