这5个技巧帮你设计出眼前一亮的App引导页

现在新手引导已经成手机客户端标配,但是通用的做法不见得是最有效的。这篇文章中我们将会看到为什么新手引导经常无效,以及如何借鉴游戏设计的原理来提高用户的参与度。

现在新手引导已经成手机客户端标配,但是通用的做法不见得是最有效的。这篇文章中我们将会看到为什么新手引导经常无效,以及如何借鉴游戏设计的原理来提高用户的参与度。

通过跟各种行业的移动团队沟通,发现这些添加额外帮助的新手引导页让用户困惑和沮丧。一个测试的参与者说“我只想打开app开始探索”。用户测试表明用户会跳过和忽略新手引导页。最好的情况下,用户会感觉到一点点不便;最坏的情况下,这会明显阻止新用户进入app。

一些常(wu)见(xiao)的新手引导页模式( 透明度标注,演示视频,3步引导)

这5个技巧帮你设计出眼前一亮的App引导页

为什么这些模式会无效?

那么,为什么这些模式会不起作用,我们可以在游戏领域寻找答案。

游戏设计师都知道,不仅不能阻止新玩家进入正在交火的房间,还要让他们享受这些经验,虽然大部分的玩家在搞清楚武器和怎么反击之前都会挂掉。

在游戏设计中,一些能让玩家深入了解游戏的模式比另一些更有效,并且这些模式对于移动端也同样适用。虽然跟游戏里的死亡不同,但是不明白如何去做这一点对于用户是一样的。当这种情况发生在大部分的用户身上时,你的app就完蛋了。

这5个技巧帮你设计出眼前一亮的App引导页

(Portal让玩家在一个安全的环境中学会新的技能)

Extra Credits在线教程系列从内行人的角度展现了游戏的各个方面,“ 教程 101 ”是一个令人拍案叫绝的视频,每个app的设计者都应该好好看。

从“ 教程 101 ”中的各具特色的有效教程,我们可以提取出一些能用在app设计上的基本规则:

1、使用的文字要越少越好。

2、前期不能有太多内容。

3、让它变得有趣。

4、通过游戏来学习。

5、聆听你的用户。

规则一:文字越少越好

当我们想解释什么的时候,文字是最简单的工具。但是,当我们希望用户了解什么的时候,文字往往会起反作用。根据“ 教程 101 ”一定要避免只依靠文字,“ 因为它会破坏速度和沉浸感,并且通常被最需要这些教程的用户跳过。”

“只说,不展示”的方式,让过多的文字无法战士移动应用的优势。正确的做法是“展示,不说”,用互动的方式让用户边桌边学。当一个人事先练习了相关的做法,要比只是用文字告诉他们怎么做要更加容易被记住。

下面是一些例子:

Boomerang vs. Mailbox

这5个技巧帮你设计出眼前一亮的App引导页

Boomerang安卓版的引导页文字太多了,同样也违背了第二条法则。

这5个技巧帮你设计出眼前一亮的App引导页

Mailbox苹果版的引导页鼓励大家边做边学。

DigiCal vs. Fantastical

这5个技巧帮你设计出眼前一亮的App引导页

DigiCal安卓版,把文字提炼成了主题。

这5个技巧帮你设计出眼前一亮的App引导页

Fantastical苹果版,邀请用户通过引导页完成一系列操作来达到学习的目的。

Catch (2013) vs. Clear

这5个技巧帮你设计出眼前一亮的App引导页

Catch的安卓版介绍了一系列功能但是不让用户尝试。

这5个技巧帮你设计出眼前一亮的App引导页

Clear的苹果版,默认视图预装了一个任务,可以让用户通过做去学习。

如果有办法去展示就不要只是用文字说明,用文字来说明“原因”,然后用做去展示“效果”。

规则二:前期不能有太多内容

“如果你试图在刚开始的时候把一切都交给玩家,” Extra Credits 在“教程101”里说“他们会淹没在大量信息中但是参与不足。将“玩家”替换成“用户”,这句话同样适用于app的设计。

一次性给用户大量的内容,他们往往会在真正需要的时候忘了;真正需要做的是在用户需要的时候提供简短容易消化的信息。请记住你在这里会给用户留下第一印象,你难道不希望留下更多用户的第一印象么?

Dooo vs. Todoist

这5个技巧帮你设计出眼前一亮的App引导页

Dooo 苹果版压倒性的11页的引导页。

这5个技巧帮你设计出眼前一亮的App引导页

Todoist 苹果版,一个小提示邀请用户去完成第一个任务。然后另一个提示介绍了选择菜单。

UserTesting的最近的文章断言“用户喜欢引导页”,这里的“引导页”指的是用户在第一次使用的时候一系列的互动提示。

这5个技巧帮你设计出眼前一亮的App引导页

别在信息超载的用户面前一下子把所有的内容都给出来,给他们合适的一小块,在他们需要的时候。

规则三:奖励

事实上,你可能还记得“教程101”中这条规则是“使他有趣”。当然了,“有趣”并不适用于所有的app。但是当视频的解说者说,“你的教程应该跟游戏的其他部分一样有吸引力”,从另一种意义来说,这条规则也适用于我们的领域。

即使我们不能让我们的app变得有趣,也可以通过其他的方法让奖励融入整个app的使用之中。一个能做到这一点的好办法是,跟用户互动,让他实际去完成事情。这赋予了用户一种力量感去加强了他们的学习。

即使有趣并不是正确的基调,增加幽默感有的时候仍然是合适的。我们来看两个实现它的不同的方法,NBC News和Flipboard,后者使用了正确的方法。尽管NBC News的新手引导页使用了“有趣的”字体,它仍然看上去像个演讲稿。另一方面,Flipboard一打开就采用了一种与众不同的戏剧性的方式。

这里没有介绍性的文字,下半部的屏幕开玩笑似的翻起一点来,挑逗你让你在它翻下去之前看看底下的内容。当它再次这么做时,你很可能已经明白向上滑动 查看下面内容的提示了。但是当你仍然没有滑动,你将得到一个邀请“继续向上滑动“。每个随后的翻转巩固了这个查看内容的手势。有趣并且有意义。

NBC News VS. Flipboard (2013) 

这5个技巧帮你设计出眼前一亮的App引导页

NBC NEWS的IOS版用了有趣的字体,但是长篇大论的叙述并没有价值。

这5个技巧帮你设计出眼前一亮的App引导页

FLIPBOARD的安卓和IOS版嵌入了好玩的提示来吸引用户,并且强化操作APP的关键手势。

规则四:通过使用强化学习

还记得那些“啊哈!”瞬间在科学课堂么?当你通过做实验明白了一个原理。这是我们这里将要讨论的,当然了,老师已经给你解释了相关原理,但是你真正的学会它是通过实验做到的。

这种方法对于新手引导页一样有用。如果你遵循了前面三个规则,这个补充规则很大程度上能照顾好它自己。它可能是一个伴随动作的非常微妙的视觉或者听觉反馈。

然后,当用户后面执行这样的动作时,同样的反馈会加强他们的学习。

这条规则补充了第二条“不要什么都放在前面”。让用户逐步深入的去了解APP,而不是立刻把什么都展现出来。通过时间的推移去揭示更多的功能或者当他们进步时给予意想不到的奖励,你将会在用户使用程序的时候加强他们的学习。

这5个技巧帮你设计出眼前一亮的App引导页

Palar提供了一个小贴士,用户完成了一些测验之后。Duolingo的用户当他们学会了高级的技巧时会得到一个奖励。

这5个技巧帮你设计出眼前一亮的App引导页

Any.do把一个工具放在安卓的桌面屏幕上,鼓励用户参与并且自然而然的提供奖励。

学习并不是一次性的事情。使用一个app的过程中应该加强那些在引导页中希望用户学会的事情。

规则五:聆听你的用户

考虑到你已经深入你的app,建立和完善它好几个月了,谁是检验它的最佳人选?可能不是你,按照“教程101”中解说员说的“当你是一个为这个项目工作了一两年的设计师,很容易对一些不容易理解的事情想当然。”

正确的进行用户测试将会很容易的发现你的绊脚石,观察你的用户看看他们是在哪里卡住了和在哪里出了问题。聆听他们在与app互动时候的评价。在结束前不要打断他们;如果你在他们使用的过程中问他们问题,这就很有可能把他们引导向你想要的答案。

Snap Payroll的设计师们最终发现通过用户测试,一个经验性的引导,或者上下文提示,产生了最好的效果。经过四轮在RetailMeNot的测试,我们得到了同样的结果。

这5个技巧帮你设计出眼前一亮的App引导页

Snap Payroll的小提示的用户测试结果非常的好,同样的结论也在RetailMeNot的测试中得出。

熟悉感会像百叶窗一样蒙蔽你,让用户在用户测试中告诉你他们需要什么。

 

原文来自:优设

原文地址:smashingmagazine

 

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

(0)
CatherineCatherine
上一篇 2017-05-22 19:37
下一篇 2017-05-22 21:31

相关推荐

  • 人工智能对用户体验的影响

    最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以...

    2018-03-26
  • 译|构建用户体验地图的时机和方法

    用户体验地图结合了两个强大的工具—讲故事和可视化 ,以帮助团队了解和解决用户需求。 虽然体验地图会根据不同的场景和商业目标采取各种各样的形式,但通常都包含一些元素,并且有很多可以遵循的潜在基本规则,使得用户体验地图为设计提供帮助。定义:用户为了实现目标而经历的过程的可视化,它用于了解和解决用户的需求和痛点。

    2017-04-29
  • Adobe XD 中文汉化包 - UI/UX design in Adobe Experience Design

    Adobe XD 中文汉化包 - UI/UX design in Adobe Experience Design

    2016-03-30
  • AR场景下的交互设计研究——以中文输入为例 - UXPA中国2016行业文集

    增强现实场景下的交互设计研究         ——以中文输入为例1门文,百度时代总部,北京  2胡也畅, 邵颖,国际商业机器(中国)投资有限公司 摘要:随着近些年一系…

    2017-08-01
  • 关于交互设计师的工作内容,这篇讲得最全面!

    交互设计师的工作,并不仅仅是输出设计方案,我们需要参与前期的需求讨论、后期开发、测试验收等等产品设计与实现的多个环节。本篇将介绍我目前参与交互设计的工作流程以及各个阶段的工作职责。

    2017-05-18
  • 善用Axure写PRD:产品逻辑的五种呈现方法

    每天一篇好文章,2018年第2期不管是APP、web网站还是pc客户端的软件,流程&页面&交互&逻辑始终是最重要的几环,分享一下我呈现逻辑的几种方法,大部分PM应该也采用过类似的方法。一、直接不写逻辑最开始根本没有写逻辑的概念,只是用交互事件加上基本的页面跳转。当技术童鞋来问的时候,口述给他。经常会被鄙视。二、直接写到页面里开始学乖了,把一些逻辑直接写到页面里。不过很快就发现了弊病,某些逻辑不应该呈现给用户,只能给前后端童鞋看。同时也造...

    2018-03-27
  • 优化App的设计:防止用户错误,并建立良好的错误信息

    “错误”时有发生。在App与生活中都会发生。有时是因为我们犯了错误,有时是系统错误。无论错误原因是什么,它们——还有解决方式——对用户体验影响深远。但它往往不被重视,草草处理错误、组织混乱的错误信息会使用户沮丧,最终抛弃你的应用。相反,处理得当的错误提示,能把失败变为惊喜。在本文中,我们会讨论如何优化app的设计,来尽力防止用户错误,并建立良好的错误信息。

    2017-05-13
  • 总结七大设计原则,打造高素质的UI界面

    虽然好设计的原则是老生常谈,但是我们还是要经常总结,结合自己的设计,三省吾身。

    2017-05-11
  • 别闹,你以为学个Axure就算懂交互设计了?

    前些日子在一个产品、交互设计交流群里,有几个初学交互不久的人讨论如何学习交互,不出意外地他们的讨论方向拐到了Axure、墨刀等交互原型制作工具的使用上。从他们的言谈中看得出,他们觉得交互就是做界面原型,做…

    2015-09-11
  • 沉沉的干货,必读平面设计技巧!

    在过去几年中,我们见证了软件和应用界面设计从3D及拟物化向扁平化和极简化的快速转变。尽管这一趋势现在已经无所不在,但我们不妨拿出一点时间来思考今天的结果是如何形成的,以及其对界面设计整体有着何种影响。另外,我还会和大家分享一些有关设计扁平化界面的小技巧和注意事项。

    2014-12-28