• UID15
  • 登录2017-07-17
  • 粉丝48
  • 关注40
  • 发帖447
  • 主页
  • 金币1848枚
社区居民
喜欢达人
原创写手
janking 发布于2015-08-31 16:59
1/2150

如何设计用户引导页

楼层直达
一个新的网络产品,或者一个全新的功能要想吸引用户的使用兴趣,就需要让用户在刚一接触到的时候能够快速地了解它是什么,能做些什么,并且能马上开始一些简单的操作。如果看了很久还没弄明白这些,那么很可能就彻底放弃了。
所以,设计新手用户引导,就是设计用户前一、两次使用产品时的体验,设计目标是让新手用户快速、无痛苦地成为中间用户。

一、设计时的注意事项


无论是什么类型的产品,新手用户在尝试时都会经历一些共同的情感历程:他们会对新产品和新功能有一些好奇和茫然,希望能快速了解它的概念和范围。在尝试使用时会比较敏感、容易受挫。如果身边有非常了解产品的专家级用户,一般会十分相信这个专家用户对产品的介绍和判断。
针对新手用户的这些情感上的特征,我们试着提出来一些设计新手用户引导时的注意事项。
1. 尽量少的新手任务
首先,我们要让新手快速了解产品是什么、能做什么,并且能快速上手,那么完成这个过程必须经历的任务一定不能多,要特别有针对性。引导用户阅读说明
或是尝试操作都要围绕着“了解产品的概念、范围”这个目标展开,尽量不超过三个新手任务。“将用户想象成非常聪明,但非常忙的人。”──Alan
Cooper。
2. 最好的引导是无形的
如果一个产品的用户界面做得足够好,体现了用户的心智模型的话,那么就不需要设计所谓的新手用户引导,而是能让用户一看到就知道要如何操作。另一方面,在新产品中延续用户在其他同类产品中已养成的使用习惯也是将引导化为无形的一种手段。
3. 容易发现和理解
当新功能确实复杂到需要特别的引导时,我们需要让引导信息容易被用户发现和理解,提供明确的操作入口。
4. 适当夸大用户成功的程度
在新手还比较敏感、易受挫的时候,给她一些鼓励和积极的反馈能够帮助她建立起使用信心。这个做法在游戏中特别常见,针对新手的任务一般都很简单,奖
励积分会来得特别容易,一旦上手之后就越来越难了。为用户设置符合她使用水平的任务,并帮助她成长,这也是符合Mihalyi
Casikszentmilhalyi的心流理论的。

5. 原谅用户出错
用户在不了解产品的时候最有可能在里面到处乱逛,因此产品需要提供一个安全的、可供探索的环境。系统提供的防错、纠错、帮助从错误中恢复等机制,针对新手用户的任务可以做得更加细致和周到,可多花一些成本。

二、设计思路


以上提出的注意事项要如何在产品中体现呢?我们查阅了一些资料,也学习了目前比较受欢迎的网站的常见做法,在此基础上提出我们的设计思路。还远谈不
上是什么设计方法,因为还很不严谨。只是想提出来供大家探讨,拍砖也是可以的。我们暂且叫它做“以新手任务为中心”的设计思路。
1. 确定新手任务
谈到以新手任务为中心,那首先第一步就是要确定什么是新手任务。我们知道产品设计永远是以中间用户为主,不会针对新手用户单独设计一个产品。在为中
间用户设计界面的基础上,提炼出一些新手任务来帮助新手用户成长。前面提到了最好的引导是无形的。如果做到了无形的引导,那么就没有必要设置专门的新手任
务,但是很多情况下,新手任务是必要的。
我们首先为产品整理出一份功能清单,然后从中筛选出新手用户的任务。

筛选依据以下原则:
  • 前3次使用产品需要操作的任务;
  • 非完成不可的任务,否则无法继续使用产品;
  • 聚焦到不超过3个新手任务。

2. 分析任务特征
确定新手任务之后,对任务的特征进行分析。我们从两个维度来分析一个任务:任务难度操作频率。下图是以SNS网站为例,列举了4个任务,分别对应了4种不同的任务特征:
  • 注册:低难度、低操作频率;
  • 建立个人资料:高难度、低操作频率;
  • 写博客:低难度、高操作频率;
  • 建立朋友圈子:高难度、高操作频率。

3. 分析用户类型
根据用户使用产品的目的明确性,我们把用户分为3个类型:无向型、探索型和定向型。
  • 无向型:没有目标,不知道自己要什么;会偶尔发现感兴趣的信息;对使用产品的粘性弱。
  • 探索型:有模糊的目标,但无法准确表达;目标范围过广,无法迅速确定;对使用产品的粘性一般,可能会选择竞争对手产品。
  • 定向型:有计划、有目的的访问网站,有时候甚至清楚怎么做;有耐心,包容性强;对使用产品的粘性强。

把新手任务的特征和用户类型按以上方式大致分析归类之后,接下来就是确定如何在界面上展示这些任务去引导用户一步步操作下去,也就是任务的具体表现方法了。我们总结出7种常见的表现方法,并且与任务特征和用户类型逐个去对应。

三、表现方法


1. 大喊大叫式
用视觉等手段达到让新手任务“大喊大叫”的效果,旨在吸引新手用户立刻采取行动。
图片来源:Backpackit
  • 适用的任务特征:独立的主要任务或分步骤的简单任务、操作频率低;
  • 适用的用户类型:无向型、探索型。


2. 填补空白式
利用人们本能的填补未完成的心理,在界面上制造空白,吸引新用户填充内容。
图片来源:Flickr
  • 适用的任务特征:独立的主要任务或分步骤的简单任务、操作频率高低都可;
  • 适用的用户类型:探索型、无向型。


3. 全局导游式
引导用户按照设定的路径一步步阅读产品的功能说明,以及尝试操作,逐步将产品的概念、范围、核心功能介绍给用户。
图片来源:新浪轻博客
  • 适用的任务特征:任务复杂、步骤多、操作频率低;
  • 适用的用户类型:定向型、探索型。


4. 任务向导式
将一个复杂的大任务拆分成多个子任务,用步骤条分步引导用户操作。
图片来源:Facebook

  • 适用的任务特征:操作步骤复杂、操作频率低;
  • 适用的用户类型:定向型。


5. 新手练手式引导用户在明确指引下尝试首次完成一个任务。
图片来源:360°全景摄影社区

  • 适用的任务特征:任务复杂、操作频率高;
  • 适用的用户类型:定向型、探索型。

6. 榜样激励式利用新手用户相信专家户的心理特征,以中、高级用户的成功案例激励新手用户,引起她学习新产品的兴趣。
图片来源:虾米网
  • 任务特征:任务较复杂,操作频率高;
  • 用户类型:无向型、探索型。
7. 嵌入帮助式在用户操作任务的过程中,适时在场景中提供帮助,通常是精短的文字信息。
图片来源:淘宝网
  • 任务特征:任务简单,可依赖简短帮助完成操作,操作频率高低均可;
  • 用户类型:定向型、探索型
最后把这7种表现方法作个总结,针对新手任务的特征以及不同的用户类型,可以选择相对应的表现方法。
以上就是我们总结出来的关于设计新手用户引导的一些思路。再次申明不是什么严谨的设计方法,欢迎探讨,拍砖也可。参考资料:1. Simple for beginners and rich for aficionados: How Starbucks’
drink framework and ordering language engage customers at all levels,
Dubberly Design Office
 2. Task-based user interface design, Martijn van Welie
转自淘宝ued

0人打赏
  • UID7461
  • 登录2016-06-08
  • 粉丝1
  • 关注0
  • 发帖211
  • 主页
  • 金币191枚
社区居民
忠实会员
android_chao 发布于2016-03-07 14:28
沙发F
有条有理,赞一个。
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 77261/375   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 44171/191   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 43803/0   Python爬虫:常用浏览器的useragent

  • 40349/259   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 38046/145   省时省力的Android组件群来了,非常棒的原型参考

  • 29329/142   2016抢红包软件及源码

  • 29005/2   超全!整理常用的iOS第三方资源

  • 28891/71   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 23649/159   Android版类似UC浏览器:非常赞,产品级的源码

  • 22611/30   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 22305/25   Android工程师面试题大全

  • 22171/27   2016程序员跳槽全攻略

  • 21769/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 20717/20   码魂:程序员的牛B漫画

  • 18815/10   2016年最全的Android面试考题+答案 精编版

  • 18682/85   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 18554/42   一个绚丽的loading动效分析与实现!

  • 18549/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 18545/3   吐槽那些程序员的搞笑牛逼注释

  • 17474/1   iOS 动画总结

  • 17326/45   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 17138/81   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 16975/104   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 16865/23   个人收集的Android 各类功能源代码

  • 16361/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 16268/21   Android福利第三波【Android电子书】

  • 16253/10   女程序员的梦,众网友的神回复

  • 16136/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 16121/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 16031/81   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 15945/11   年会上现场review代码是怎么样的体验!

  • 15798/0   iOS中文版资源库,非常全

  • 15773/23   珍藏多年的素材,灵感搜寻网站

  • 15085/18   65条最常用正则表达式,你要的都在这里了

  • 14594/15   基于Android支付宝支付设计和开发方案

  • 14009/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 14003/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 13673/46   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 13496/0   GitHub iOS 库和框架Top100 

  • 13393/7   用程序员的姿势抢过年的火车票

  • 13356/7   一张图搞定iOS学习路线,非常全面

  • 13240/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 12964/10   成为Java顶尖程序员 ,看这11本书就够了

  • 12889/10   微信支付终于成功了(安卓,iOS),在此分享

  • 12810/18   一张图搞定Android学习路线,非常全面

  • 12558/29   【持续更新中】Android福利贴(一):资料源码

  • 12502/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 12209/4   46 个非常有用的 PHP 代码片段

  • 11762/3   即时通信第三方库

  • 11271/8   流媒体视频直播方案

  • 11194/18   八个最优秀的Android Studio插件

  • 11070/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 10898/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 10804/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 10719/10   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 10071/6   开箱即用!Android四款系统架构工具

  • 9890/10   十大技巧快速提升Android应用开发性能

  • 9810/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 9711/1   Android性能优化视频,文档以及工具

  • 9668/3   一张图看清Linux 内核运行原理

  • 返回顶部