FACEBOOK PAPER新用户引导背后的设计思路

   从设计上讲,Paper 是我个人很喜欢的产品,除了它创新的移动 App 交互方式和众多令人惊喜的设计细节,初次使用时的磁性女声引导也颇为令人称道。这篇文章是在看过 4 月 18 日 Facebook 在 YouTube 上发布的 Paper 团队小范围技术分享会中关于新用户引导的演讲后,想与大家分享所作。

  背景:4 月 18 日,Facebook 在 YouTube 上发布了 Paper 团队小范围技术分享会的视频,会中 5 位 Paper 团队成员分别介绍了在 Paper 的开发过程中包括新用户引导、UI、动画、手势交互等方面的设计思路和具体方法,并配以案例说明;也是在这场分享会中,官方首次公布了 Paper 背后的动画引擎 Pop 即将开源的消息(昨天 Github 上已开源,动作很快)。

  打开 Paper 可以看到,不像常见的 App,Paper 的主界面中是没有导航栏的。这样做的目的是,在有限的屏幕上尽可能多地呈现给用户有用的内容,而不是被各种功能按钮所占领。可以比较一下 Facebook for iOS 和 Paper 的首屏:


  后者的有效内容占比明显多于前者(下图,黄色之外):


  但这样做是有风险的:用户已经习惯了进入一个 App 中点击导航按钮来进行各类操作了,现在失去了导航,必须得想其它的办法来告诉用户如何使用这个 App——什么样的方式比较好呢?

  Paper 的办法是引导 / 教程(Tutorial)。Tutorial 有不少好处,例如会让用户学习 App 使用的过程变得有趣,像寻宝一般;但缺点也耳目昭彰,例如可能会打断用户体验(想想如果正在进行某项操作,却被屏幕上飞出来的引导打断的感觉有多糟;更不要提当看到与当下操作无关的引导时的心情了),以及可能会给用户强迫感(为什么一定要逼我学习这些功能?特别是当刚打开 App 就出现 5 步 Tutorial 时:我还不清楚你的 App 是做什么的,怎么可能学会记住?),等等。

  Paper 做 Tutorial 的原则

  不要一次性告诉用户所有功能及操作方法

  每个功能点的 Tutorial 在用户操作的相应场景中才出现

  及时给用户反馈(如下图,当用户按照引导倾斜手机后,显示成功反馈)

  保证整个过程在 App 中

  Tutorial 可被关闭(避免给用户强迫感)

  通过观察各类游戏的交互获得灵感,让 Tutorial 尽可能有趣


  Tutorial 的出现机制

  为了适时提供用户需要的帮助,同时秉承避免打扰用户的原则,Paper 定义了 Tutorial 出现的机制:

  Tutorial 必须在相关的场景中出现

  也就是说,假如用户正在 Settings 页,那么系统决不会显示与 Settings 无关的 Tutorial。

  根据相关性测试判断一段 Tutorial 是否该出现

  举个例子:用户正在浏览一个帖子,此时系统本应为他 / 她显示与浏览帖子相关的 Tutorial;突然用户点击了通知按钮,若此时继续显示帖子相关 Tutorial,则与用户正在进行的操作(查看通知)无关。

  Paper 不想向用户显示与当下动作无关的引导,因此设置了 Tutorial 的相关性变量。当检测状态显示相关性为 True 时才启动 Tutorial;若为 False,则搁浅当前 Tutorial 至教程中心。

  Tutorial 的启动延迟

  这样做的好处有二:

  1、用户在 A-B-C 连贯操作时,避免在操作 A 和操作 B 间出现 A 和 B 的 Tutorial。

  2、给用户自己弄明白功能的时间,只有系统认为用户需要帮助时才启动 Tutorial。

  Paper 团队做引导的感悟

  用户喜欢引导,前提是引导对用户真的起到帮助的作用

  因此引导要做到真正帮助用户解决问题,在合适的时间点给用户合适的内容。

  用户面对新 App 的典型反应是「我想先自己试试,搞不懂的话再查看帮助」

  因此要给用户自己尝试的机会,而不是立刻就出现引导。

  找到「帮助用户」和「烦用户」之间的平衡

  过多的、非当前场景相关的引导会令用户厌烦,合适且适时的引导才真正会起到引导的作用。

  p.s. 这段视频,对于从事移动应用开发、尤其是对类似 Paper 的动态动画有兴趣的同学是非常值得一看的,干货很多。本人不才,不懂动画,只看得懂 General Principles,讲到具体实现方式就歇菜了 T^T。

时间: 2024-12-31 01:19:40

FACEBOOK PAPER新用户引导背后的设计思路的相关文章

新浪微博和腾讯微薄的注册与新用户引导流程

前言 最近微博很火热,以新浪微博和腾讯微博为代表,体现了不同的产品设计理念. 新浪保持了一贯的媒体路线,腾讯仍希望发挥出草根们的强大动能. 对于两家互联网大公司的微博产品,在下不才进行了一些观察,不敢说点评,把自己观察到的一些细节分享给大家,以启发思维. 先从简单的和具体的说起吧,本篇主要比较一下二者的注册与新用户引导流程. 由于腾讯微博暂时只能通过邀请获得,所以我对比的流程均为邀请注册. 我假设自己为新用户,分别获取了来自朋友的腾讯微博和新浪微博邀请. 一.新浪微博 1.1.1.进入邀请链接后

Apache RocketMQ背后的设计思路与最佳实践

阿里中间件官网:https://www.aliyun.com/aliware 演讲嘉宾介绍:冯嘉(花名鼬神),阿里巴巴中间件架构师,具有丰富的分布式软件架构.高并发网站设计.性能调优经验,拥有多项分布式.推荐领域的专利.开源爱好者,关注分布式.云计算.大数据领域.目前主要负责阿里巴巴消息中间件生态输出.MQ商业化 ,Apache RocketMQ 联合创始人,社区布道者,目前主要负责Apache RocketMQ的云端商业化版本Aliware MQ. 本次的分享主要围绕了以下四个议题: 一.分布

如何设计新手用户引导

引言:这篇文章是小柒.墨轩.淡月.和我4个人一起工作的成果,在今年9月的STS设计分享会上演讲过一次.我们的设计分享会一共有4个演讲主题,另外几个话题稍后会陆续在这里和大家见面~ 一个新的网络产品,或者一个全新的功能要想吸引用户的使用兴趣,就需要让用户在刚一接触到的时候能够快速地了解它是什么,能做些什么,并且能马上开始一些简单的操作.如果看了很久还没弄明白这些,那么很可能就彻底放弃了. 所以,设计新手用户引导,就是设计用户前一.两次使用产品时的体验,设计目标是让新手用户快速.无痛苦地成为中间用户

传奇游戏纪念碑谷背后的设计秘密

  我们将那些传奇.富有潜质而独特的公司称为独角兽,而纪念碑谷又何尝不是游戏领域的独角兽呢?这个传奇般的游戏让我们整整着迷了一整年,在令人难忘的世界中迷失,在炫目精巧的场景中欲罢不能,这让我们不得不好奇,这个游戏是如何诞生的.今天,我们来揭开秘密. 对于屡获殊荣的著名手机游戏纪念碑谷,你肯定不陌生.从未露脸也为出声的艾达公主带着你在一系列精致华丽的迷宫当中穿梭,探索出路,寻求宽恕. 这个游戏里没有敌人,故事中也没有杀害,就这样一个和残酷现实"背道而驰"的游戏,自2014年4月推出至今已

手机产品设计之用户引导

在手机产品的设计过程中,由于手机界面的承载能力有限,产品功能的不断膨胀,必须要在用户打开应用之后告知他某些新奇的功能,引导他完成某些主要任务流程,让用户不至于迷失在陌生应用中不知所措.帮助用户快速掌握应用的使用方法,体验到应用的乐趣,新手引导成了一个必须考虑的设计环节. 用户引导的直接目标是帮助用户更好的使用产品,终极目标是提升用户满意度.虽然,大多数情况下,我们可以通过合理的设计,尽可能的简化功能,让用户无需引导和帮助,就可以完成必要的任务.但是实际上,手机产品的限制和对强大功能的追求,导致这

Facebook推新功能,允许用户对内容保密设定进行设置和调整

北京时间7月2日<商业周刊>文章指出,Facebook今日推出一项新功能测试,允许用户对他们在网站上贴出的任何一部分内容的保密设定进行设置和调整.在此之前,Facebook刚刚宣布了一项新设定,即用户可以在发布内容的同时选择是否向所有人公开.许多人认为,Facebook的这些举措都是为了应对微型博客Twitter的快速增长. Facebook计划下周让4万美国用户来测试这些新功能,然后再将测试范围扩大到全球.这些修改后的功能并没有让Facebook变得更容易访问和设置.新的设置页由40多项不同

网站用户引导设计:利用数字引导用户选择

文章描述:目前在用户引导设计里面采取数字引导设计的主要集中四类网站或产品:(1)购物网站,譬如团购站,他们使用数字来制造稀缺印象以及激励跟风:(2)系统优化软件,譬如360软件等,利用数字来造成用户心理恐慌和使用愉悦:(3)社交网站,利用数字提醒来满足用户的期待心理 SociaBeta之前发过一篇文章"4种巧用"数字"激励用户行为的方法",描述了一些利用数字来激励用户行为的案例设计.最近正好在进行一个项目,涉及到数字方面的引导,找了下相关文章,做了一些对比思考,记录

用户引导设计:数字激励引导用户

文章描述:用数字激励用户?情景和用户心理引导的意外. SociaBeta之前发过一篇文章"4种巧用"数字"激励用户行为的方法",描述了一些利用数字来激励用户行为的案例设计.最近正好在进行一个项目,涉及到数字方面的引导,找了下相关文章,做了一些对比思考,记录下来. 目前在用户引导设计里面采取数字引导设计的主要集中四类网站或产品:(1)购物网站,譬如团购站,他们使用数字来制造稀缺印象以及激励跟风:(2)系统优化软件,譬如360软件等,利用数字来造成用户心理恐慌和使用愉悦

Facebook日增60万新用户 活跃用户量将破2亿

中介交易 SEO诊断 淘宝客 云主机 技术大厅 据国外媒体报道,美国科技博客网站近日撰文称,过去数周中,美国知名社交网站Facebook平均每日新增用户数量高达60万人,而数月前这一数字为30~40万.该博客网站还表示,按照目前趋势发展,明年3月份Facebook活跃用户量有望突破2亿大关. Inside Facebook是一家专门报道Facebook各种进展事项的外部博客网站,而非Facebook官方博客.Inside Facebook称,本月初Facebook活跃用户量突破1.3亿大关,而目