Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
第一次的亲密接触
用户注册流程案例分析
http://webkeji.net/
翻译并改编自adaptivepath的“Patterns for Sign Up & Ramp Up“报告
用户注册流程设计的四原则
为
用
户
提
供
绝
妙
的
加
入
理
由
设
计
使
用
户
感
到
轻
松
的
注
册
过
程
不
要
让
新
用
户
“
悬
着
”
加
快
初
始
好
友
建
立
过
程
为用户提供绝妙的加入理由
要说服新用户注册,网站应一方面
提高自己在潜在用户心中的价值估
价,同时降低用户加入所需要投入
的成本。简单地说就是要让这个
(价值-成本)的差值越大越好!
1.1:简单明了的网站价值诉求
目的
• 在第一时间将网站的价值传递;
设计考虑
• 强调网站对于用户的价值,不是简单告诉他们在这里能做什
么,而是为什么做这些对他们有价值;
• 格式上让用户方便“扫描”,例如突出关键词等;
• 有可能的话可以...
1.1: Examples
1.2:网站功能演示/如何使用网站?
目的
• 从视觉上给用户介绍网站主要功能,经常是”1-2-3”的格式
设计考虑
• 以讲故事的方式将介绍流程有逻辑地串起来;
• 采用祈使语句或者第二人称;
• 介绍流程不应该超过三步,并且为每一步都配上有...
1.2:Examples
1.3:列表-为什么应该加入的原因
目的
• 帮用户列出应该加入这个网站的理由,例如行动(上传视
频),承诺(帮你省钱),特色(腾讯旗下网站)
设计考虑
• 不要单纯做个功能列表,而是强调这些功能能带给用户的价
值;
• 尝试加入一些图标或者辅...
1.3:Examples
1.4:注册流程预览
目的
• 让用户明确看到加入这个网站有多么简单;
设计考虑
• 从视觉上保证这个注册流程预览和实际注册流
程一致;
• 采用简单,积极的用词;
• 注册预览流程介绍要和实际注册按钮呼应,具
有引导性;
1.4:Examples
1.5:设饵让用户加入
目的
• 设下诱饵让用户主动认识到需要加入的理由,这样他们注册的概
率更高(例如必须注册才能留言);
设计考虑
• 这种情况下弹出的注册窗口必须同时具帮助性和说服力;
• 不要让这个弹出窗口感觉像个错误提示,而是介绍如果...
1.5:Examples
1.6:首页的精彩内容
目的
• 通过在首页列出站内精彩内容来暗示对用户价值,同时也显示有
其他用户正在如何使用;
设计考虑
• 重质不重量;
• 给出为什么挑选这些内容来显示的理由(例如最新上传)
• 有时强调一个特定内容来传达信息反而比4-...
1.6:Examples
1.7:定制信息引诱用户加入
目的
• 让用户不用加入就能预览一些定制信息,例如我的哪
些好友在用?在满足好奇心的同时提供个性化的价值;
设计考虑
• 让用户简单快捷地从首页就获取到个人感兴趣的信息;
• 让用户付出很小的代价就能看到回报,不要...
1.7:Examples
1.8:网站导游(Site Tour)
目的
• 以类似演讲胶片的形式分步骤向用户介绍能在网站做什么,尤其
是很多本来必须注册后才能看到站内体验;
设计考虑
• 使用清楚易懂的标题,内容要视觉上吸引且有趣(just like an ppt!)
...
1.8:Examples
设计使用户感到轻松的注册过程
成功引导用户按下“注册”按钮只是
第一步!网站还需要一个让用户觉
得轻松舒服的注册体验!如果注册
过程是便捷快速的,用户会更倾向
于尝试各种其他服务,就算他们并
不确定到底会得到什么好处。
2.1:简单的初始注册流程
目的
• 只要求用户填写最少的信息就可以完成注册,经常后面伴随一个初
期设置精灵(setup wizard);希望是用户一旦做了初期投入后就会继
续使用;
设计考虑
• 约傻瓜越好!不要问任何需要用户思考的问题(例如...
2.2:详细的初始注册流程
目的
• 在注册页面就详细收集为了体验核心功能所需要的各项关键信息;
设计考虑
• 告诉用户为什么要问这些信息(填写了这些会有什么回报?);
• 提示用户哪些信息是以后还可以修改的;
• 明确地说明哪些是必填,哪些是...
2.3:初期设置精灵( Setup Wizard )
目的
• 手把手引导(多数是3步)用户完成注册,好处是不用一次将大量信
息展示,而且有机会单独介绍每一步对用户的价值。此外,有时特
定注册步骤需要较大空间(例如上传图片);
设计考虑
• 用...
2.3:Examples
2.3:Examples(进度尺)
2.3:Examples(清单 - Checklist)
2.4:填写项解释和错误处理
目的
• 向用户解释为什么需要填写每一栏,并提供填写帮助以避免用户浪费时
间;同时又不至于添加太多视觉骚扰;
设计考虑
• 当用户操作焦点移动到特定栏的时候才在保留区域显示提示,当焦点离
开的时候则进行校验并反馈(...
不要让新用户“悬着”
对新用户提供的指引信息不应在他
们注册后就停止。将新用户抛弃在
一个不熟悉的页面或缺乏下一步如
何行动的提示只会使用户感到迷惘。
因此应想办法向新用户们隐形或显
性地指导他们下一步可以做什么。
3.1:高亮区域
目的
• 通过视觉上的高亮来提示用户如何进行下一步;
设计考虑
• 在一方面用高亮提示用户下也要注意不要导致同页其
他元素被完全忽视;
• 提供一个去掉高亮提示的方法(例如完成特定任务);
可能存在问题
• 高亮可能会对用户造...
3.2:空白模块诱导用户操作
目的
• 通过空白模块来诱导用户点击内含有文字提示的操作链接
(例如上传照片);
设计考虑
• 利用空白模块的“空白”来解释这个模块是什么以及如何操
作;
• 各个模块中引导用户操作的格式保持一致,可以考虑使用有
...
3.3:欢迎页面诱导用户操作
目的
• 建立一个在用户完成注册操作后立刻显示的欢迎页面,
建议他们下一步可以做什么;
设计考虑
• 提供3-5项可以点击的操作可能;
• 对各项操作链接进行一定解释;
可能存在问题
• 用户一旦选择了特定操作离开...
3.4:可操作的欢迎模块
目的
• 在用户的个人主页(dashboard – 一般是登录后显示的第一个页
面)添加一个欢迎模块,通常用清单的格式来提示一些具体操作;
设计考虑
• 给用户直接(关闭按钮)或间接(完成提示操作)撤掉这个欢迎
模块的...
3.5:实时提醒 (Callouts)
目的
• 在相关环境下实时提醒特定功能,这样帮助用户
快速发现一些以往需要较长时间才能找到的功能 ;
设计考虑
• 弹出的实时提醒需要和用户当前操作有关,但是
不能影响当前操作;
可能存在问题
• 实时提...
3.6:开路先锋(Trailblazing)
目的
• 有逻辑性地用高亮方式向用户逐步推荐特定模块,但是也
给与他们操作其他模块的灵活性;
设计考虑
• 在对推荐模块进行了高亮就行,不要改变其外形;
• 当用户完成推荐操作或者几次登录后任忽略推...
加快初始好友建立过程
对于新加入社区的用户来说,如何
开始建立自己的社交圈子是最大的
障碍。如果没有好友,很多基于社
区的服务会失去很大价值。因此,
帮助用户迅速找到和添加好友是留
住用户的关键。
4.1:寻找已经在本社区的其他好友
目的
• 通过用户手动输入或系统自动寻找来帮新用户
和那些已经在本社区注册的其他好友立刻联系
上;
设计考虑
• 如果需要用户提供信息,只问最必要一项/几项;
• 有可能的话尽量尝试使用用户在注册过程中已
经...
4.2:任意邮件邀请
目的
• 直接让用户输入其他好友的电邮进行邀请;
设计考虑
• 在提供一个默认邀请信的同时也给与用户手工修改的自由;
• 在邀请信内容中考虑如果收信方已经是注册用户的情况;
可能存在问题
• 用户输入的其他好友电邮中可能包...
4.3:导入联系人名单
目的
• 让用户批量导入其他服务中的联系人名单来寻找其他已经注册的用
户,以及选择性地给那些还没有加入的好友发邀请;
设计考虑
• 给那些不想进行批量导入方式的用户提供其他快速添加好友的方式;
• 从视觉上将打算添加的好...
Thanks!
More postings at http://webkeji.net/
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
第一次的亲密接触 -- 如何设计用户注册流程
Prochain SlideShare
Chargement dans…5
×

第一次的亲密接触 -- 如何设计用户注册流程

7 320 vues

Publié le

http://webkeji.net/

Publié dans : Technologie
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/qqcrxrw } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/qqcrxrw } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/qqcrxrw } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/qqcrxrw } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/qqcrxrw } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/qqcrxrw } ......................................................................................................................... .........................................................................................................................
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • GOOD
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • 好东西,值得学习!
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • 如何设计用户注册流程
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • 如何设计用户注册流程
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

第一次的亲密接触 -- 如何设计用户注册流程

  1. 1. 第一次的亲密接触 用户注册流程案例分析 http://webkeji.net/ 翻译并改编自adaptivepath的“Patterns for Sign Up & Ramp Up“报告
  2. 2. 用户注册流程设计的四原则 为 用 户 提 供 绝 妙 的 加 入 理 由 设 计 使 用 户 感 到 轻 松 的 注 册 过 程 不 要 让 新 用 户 “ 悬 着 ” 加 快 初 始 好 友 建 立 过 程
  3. 3. 为用户提供绝妙的加入理由 要说服新用户注册,网站应一方面 提高自己在潜在用户心中的价值估 价,同时降低用户加入所需要投入 的成本。简单地说就是要让这个 (价值-成本)的差值越大越好!
  4. 4. 1.1:简单明了的网站价值诉求 目的 • 在第一时间将网站的价值传递; 设计考虑 • 强调网站对于用户的价值,不是简单告诉他们在这里能做什 么,而是为什么做这些对他们有价值; • 格式上让用户方便“扫描”,例如突出关键词等; • 有可能的话可以将这段话和注册按钮或者logo进行结合; 可能存在问题 • 如果网站的主要功能明显可能显得多余;
  5. 5. 1.1: Examples
  6. 6. 1.2:网站功能演示/如何使用网站? 目的 • 从视觉上给用户介绍网站主要功能,经常是”1-2-3”的格式 设计考虑 • 以讲故事的方式将介绍流程有逻辑地串起来; • 采用祈使语句或者第二人称; • 介绍流程不应该超过三步,并且为每一步都配上有意义的图 片; 可能存在问题 • 只给介绍一个使用案例可能会导致用户误解网站只有这个功 能;
  7. 7. 1.2:Examples
  8. 8. 1.3:列表-为什么应该加入的原因 目的 • 帮用户列出应该加入这个网站的理由,例如行动(上传视 频),承诺(帮你省钱),特色(腾讯旗下网站) 设计考虑 • 不要单纯做个功能列表,而是强调这些功能能带给用户的价 值; • 尝试加入一些图标或者辅助小图片来帮助用户更好“扫描”; 可能存在问题 • 有些用户可能会认为列表格式无趣而自然忽略;
  9. 9. 1.3:Examples
  10. 10. 1.4:注册流程预览 目的 • 让用户明确看到加入这个网站有多么简单; 设计考虑 • 从视觉上保证这个注册流程预览和实际注册流 程一致; • 采用简单,积极的用词; • 注册预览流程介绍要和实际注册按钮呼应,具 有引导性;
  11. 11. 1.4:Examples
  12. 12. 1.5:设饵让用户加入 目的 • 设下诱饵让用户主动认识到需要加入的理由,这样他们注册的概 率更高(例如必须注册才能留言); 设计考虑 • 这种情况下弹出的注册窗口必须同时具帮助性和说服力; • 不要让这个弹出窗口感觉像个错误提示,而是介绍如果用户加入 后能获得什么(例如能查看其他用户更多照片); • 做这个弹出窗口时需要平衡已有用户/新用户体验 可能存在问题 • 诱导用户投入大量精力后才告诉他必须要注册才能完成流程可能 导致用户反感;
  13. 13. 1.5:Examples
  14. 14. 1.6:首页的精彩内容 目的 • 通过在首页列出站内精彩内容来暗示对用户价值,同时也显示有 其他用户正在如何使用; 设计考虑 • 重质不重量; • 给出为什么挑选这些内容来显示的理由(例如最新上传) • 有时强调一个特定内容来传达信息反而比4-5个内容更有效; 可能存在问题 • 在单页放上大量内容可能导致无重点,关键信息无法传达; • 精选出的内容只能符合部分用户口味,难以定向; • 挑选出的内容未必有代表性;
  15. 15. 1.6:Examples
  16. 16. 1.7:定制信息引诱用户加入 目的 • 让用户不用加入就能预览一些定制信息,例如我的哪 些好友在用?在满足好奇心的同时提供个性化的价值; 设计考虑 • 让用户简单快捷地从首页就获取到个人感兴趣的信息; • 让用户付出很小的代价就能看到回报,不要要求他们 填写超过1-2栏的信息; • 在提供用户个性化内容反馈的同时顺势引导他加入;
  17. 17. 1.7:Examples
  18. 18. 1.8:网站导游(Site Tour) 目的 • 以类似演讲胶片的形式分步骤向用户介绍能在网站做什么,尤其 是很多本来必须注册后才能看到站内体验; 设计考虑 • 使用清楚易懂的标题,内容要视觉上吸引且有趣(just like an ppt!) • 有明确的步骤提示(1,2,3...),这样用户可以跳到特定步骤; • 在导游的每一页都不忘提醒用户注册; 可能存在问题 • 如果基本站内功能无需注册也能体验可能没有必要做Site Tour; • 如果帘幕下的站内功能不是超级吸引的话,可能直接引导用户立 刻注册尝试效果更好;
  19. 19. 1.8:Examples
  20. 20. 设计使用户感到轻松的注册过程 成功引导用户按下“注册”按钮只是 第一步!网站还需要一个让用户觉 得轻松舒服的注册体验!如果注册 过程是便捷快速的,用户会更倾向 于尝试各种其他服务,就算他们并 不确定到底会得到什么好处。
  21. 21. 2.1:简单的初始注册流程 目的 • 只要求用户填写最少的信息就可以完成注册,经常后面伴随一个初 期设置精灵(setup wizard);希望是用户一旦做了初期投入后就会继 续使用; 设计考虑 • 约傻瓜越好!不要问任何需要用户思考的问题(例如昵称),因为 用户在这一步待得时间越长就越容易流失; • 使用字体长相一致并对齐的填写框等来减少视觉上的可能骚扰; • 不应该超过3-6个需要填写的元素; 可能存在问题 • 如果用户已经有意愿加入网站,可能他们更愿意一次完成初期设置;
  22. 22. 2.2:详细的初始注册流程 目的 • 在注册页面就详细收集为了体验核心功能所需要的各项关键信息; 设计考虑 • 告诉用户为什么要问这些信息(填写了这些会有什么回报?); • 提示用户哪些信息是以后还可以修改的; • 明确地说明哪些是必填,哪些是可选(最好分开两块); 可能存在问题 • 如果在用户不明确注册价值的时候就询问大量信息可能导致用户 怀疑,同时也提高了加入门槛;
  23. 23. 2.3:初期设置精灵( Setup Wizard ) 目的 • 手把手引导(多数是3步)用户完成注册,好处是不用一次将大量信 息展示,而且有机会单独介绍每一步对用户的价值。此外,有时特 定注册步骤需要较大空间(例如上传图片); 设计考虑 • 用进度尺或检查表提示用户已经完成了哪些步骤,还需要完成什么; • 明确注明可选步骤,让用户可以直接跳过; • 各个步骤从视觉上要统一,例如使用一致的标头; 可能存在问题 • 如果每一步用户要填写的信息很简单而且无需思考的话,可能用户 更希望一次填完;
  24. 24. 2.3:Examples
  25. 25. 2.3:Examples(进度尺)
  26. 26. 2.3:Examples(清单 - Checklist)
  27. 27. 2.4:填写项解释和错误处理 目的 • 向用户解释为什么需要填写每一栏,并提供填写帮助以避免用户浪费时 间;同时又不至于添加太多视觉骚扰; 设计考虑 • 当用户操作焦点移动到特定栏的时候才在保留区域显示提示,当焦点离 开的时候则进行校验并反馈(例如填写正确或具体错误); • 使用明确的图标来区分不同提示信息(正确,错误,解释等); • 当用户点击最终确认按钮后如果还有错误,在注册表格的上方(或者预 留区域)提示错误在哪儿; 可能存在问题 • 有些栏目的填写错误要到最后提交的时候提示才更有意义(例如留空的 填写项或不完全生日项); • 不能替代整页查错功能,而是应该作为补充;
  28. 28. 不要让新用户“悬着” 对新用户提供的指引信息不应在他 们注册后就停止。将新用户抛弃在 一个不熟悉的页面或缺乏下一步如 何行动的提示只会使用户感到迷惘。 因此应想办法向新用户们隐形或显 性地指导他们下一步可以做什么。
  29. 29. 3.1:高亮区域 目的 • 通过视觉上的高亮来提示用户如何进行下一步; 设计考虑 • 在一方面用高亮提示用户下也要注意不要导致同页其 他元素被完全忽视; • 提供一个去掉高亮提示的方法(例如完成特定任务); 可能存在问题 • 高亮可能会对用户造成视觉骚扰,尤其是无法简单关 掉的话;
  30. 30. 3.2:空白模块诱导用户操作 目的 • 通过空白模块来诱导用户点击内含有文字提示的操作链接 (例如上传照片); 设计考虑 • 利用空白模块的“空白”来解释这个模块是什么以及如何操 作; • 各个模块中引导用户操作的格式保持一致,可以考虑使用有 图标的链接来引导; 可能存在问题 • 用户可能不想立刻执行特定操作(或者永远不想),最好是 提供一个能撤除空白模块的功能;
  31. 31. 3.3:欢迎页面诱导用户操作 目的 • 建立一个在用户完成注册操作后立刻显示的欢迎页面, 建议他们下一步可以做什么; 设计考虑 • 提供3-5项可以点击的操作可能; • 对各项操作链接进行一定解释; 可能存在问题 • 用户一旦选择了特定操作离开这页后可能无法回来尝 试其他的建议操作;
  32. 32. 3.4:可操作的欢迎模块 目的 • 在用户的个人主页(dashboard – 一般是登录后显示的第一个页 面)添加一个欢迎模块,通常用清单的格式来提示一些具体操作; 设计考虑 • 给用户直接(关闭按钮)或间接(完成提示操作)撤掉这个欢迎 模块的方法; • 当清单上特定操作被完成时,及时给与反馈以鼓励用户继续; • 欢迎模块必须很容易被用户注意(设计,位置等) 可能存在问题 • 如果初始的用户个人主页就已经包含了大量信息,可能导致欢迎 模块不受重视;
  33. 33. 3.5:实时提醒 (Callouts) 目的 • 在相关环境下实时提醒特定功能,这样帮助用户 快速发现一些以往需要较长时间才能找到的功能 ; 设计考虑 • 弹出的实时提醒需要和用户当前操作有关,但是 不能影响当前操作; 可能存在问题 • 实时提醒可能会被用户认为是骚扰;
  34. 34. 3.6:开路先锋(Trailblazing) 目的 • 有逻辑性地用高亮方式向用户逐步推荐特定模块,但是也 给与他们操作其他模块的灵活性; 设计考虑 • 在对推荐模块进行了高亮就行,不要改变其外形; • 当用户完成推荐操作或者几次登录后任忽略推荐操作的话 就取消高亮; • 确定用户能清楚知道如何对于高亮推荐模块进行操作; 可能存在问题 • 用户可能不想完成推荐的全部/特定步骤;
  35. 35. 加快初始好友建立过程 对于新加入社区的用户来说,如何 开始建立自己的社交圈子是最大的 障碍。如果没有好友,很多基于社 区的服务会失去很大价值。因此, 帮助用户迅速找到和添加好友是留 住用户的关键。
  36. 36. 4.1:寻找已经在本社区的其他好友 目的 • 通过用户手动输入或系统自动寻找来帮新用户 和那些已经在本社区注册的其他好友立刻联系 上; 设计考虑 • 如果需要用户提供信息,只问最必要一项/几项; • 有可能的话尽量尝试使用用户在注册过程中已 经提供的信息来自动生成这个其他他可能认识 的人列表;
  37. 37. 4.2:任意邮件邀请 目的 • 直接让用户输入其他好友的电邮进行邀请; 设计考虑 • 在提供一个默认邀请信的同时也给与用户手工修改的自由; • 在邀请信内容中考虑如果收信方已经是注册用户的情况; 可能存在问题 • 用户输入的其他好友电邮中可能包括了一些已经注册过的人; • 门槛较高 – 需要用户能够记住其他好友电邮,或者愿意手动 copy/paste;
  38. 38. 4.3:导入联系人名单 目的 • 让用户批量导入其他服务中的联系人名单来寻找其他已经注册的用 户,以及选择性地给那些还没有加入的好友发邀请; 设计考虑 • 给那些不想进行批量导入方式的用户提供其他快速添加好友的方式; • 从视觉上将打算添加的好友和打算邀请的好友区分开; • 提供明确的隐私说明来减轻用户的担心; • 提供一个如果用户中途反悔的取消入口; 可能存在问题 • 由于需要用户提供在其他服务中密码,需要用户有充分的信任,而 且认同导入联系人名单能带给他的价值;
  39. 39. Thanks! More postings at http://webkeji.net/

×