Recomendados
Mais conteúdo relacionado
Destaque
Destaque (19)
Semelhante a 第一次的亲密接触 -- 如何设计用户注册流程
Semelhante a 第一次的亲密接触 -- 如何设计用户注册流程 (20)
第一次的亲密接触 -- 如何设计用户注册流程
- 4. 1.1：简单明了的网站价值诉求 目的 • 在第一时间将网站的价值传递； 设计考虑 • 强调网站对于用户的价值，不是简单告诉他们在这里能做什 么，而是为什么做这些对他们有价值； • 格式上让用户方便“扫描”，例如突出关键词等； • 有可能的话可以将这段话和注册按钮或者logo进行结合； 可能存在问题 • 如果网站的主要功能明显可能显得多余；
- 8. 1.2：网站功能演示/如何使用网站? 目的 • 从视觉上给用户介绍网站主要功能，经常是”1-2-3”的格式 设计考虑 • 以讲故事的方式将介绍流程有逻辑地串起来； • 采用祈使语句或者第二人称； • 介绍流程不应该超过三步，并且为每一步都配上有意义的图 片； 可能存在问题 • 只给介绍一个使用案例可能会导致用户误解网站只有这个功 能；
- 9. 1.2：Examples
- 11. 1.3：列表-为什么应该加入的原因 目的 • 帮用户列出应该加入这个网站的理由，例如行动（上传视 频），承诺（帮你省钱），特色（腾讯旗下网站） 设计考虑 • 不要单纯做个功能列表，而是强调这些功能能带给用户的价 值； • 尝试加入一些图标或者辅助小图片来帮助用户更好“扫描”； 可能存在问题 • 有些用户可能会认为列表格式无趣而自然忽略；
- 12. 1.3：Examples
- 14. 1.4：注册流程预览 目的 • 让用户明确看到加入这个网站有多么简单； 设计考虑 • 从视觉上保证这个注册流程预览和实际注册流 程一致； • 采用简单，积极的用词； • 注册预览流程介绍要和实际注册按钮呼应，具 有引导性；
- 15. 1.4：Examples
- 17. 1.5：设饵让用户加入 目的 • 设下诱饵让用户主动认识到需要加入的理由，这样他们注册的概 率更高（例如必须注册才能留言）； 设计考虑 • 这种情况下弹出的注册窗口必须同时具帮助性和说服力； • 不要让这个弹出窗口感觉像个错误提示，而是介绍如果用户加入 后能获得什么（例如能查看其他用户更多照片）； • 做这个弹出窗口时需要平衡已有用户/新用户体验 可能存在问题 • 诱导用户投入大量精力后才告诉他必须要注册才能完成流程可能 导致用户反感；
- 18. 1.5：Examples
- 20. 1.6：首页的精彩内容 目的 • 通过在首页列出站内精彩内容来暗示对用户价值，同时也显示有 其他用户正在如何使用； 设计考虑 • 重质不重量； • 给出为什么挑选这些内容来显示的理由（例如最新上传） • 有时强调一个特定内容来传达信息反而比4-5个内容更有效； 可能存在问题 • 在单页放上大量内容可能导致无重点，关键信息无法传达； • 精选出的内容只能符合部分用户口味，难以定向； • 挑选出的内容未必有代表性；
- 21. 1.6：Examples
- 23. 1.7：定制信息引诱用户加入 目的 • 让用户不用加入就能预览一些定制信息，例如我的哪 些好友在用？在满足好奇心的同时提供个性化的价值； 设计考虑 • 让用户简单快捷地从首页就获取到个人感兴趣的信息； • 让用户付出很小的代价就能看到回报，不要要求他们 填写超过1-2栏的信息； • 在提供用户个性化内容反馈的同时顺势引导他加入；
- 24. 1.7：Examples
- 26. 1.8：网站导游（Site Tour） 目的 • 以类似演讲胶片的形式分步骤向用户介绍能在网站做什么，尤其 是很多本来必须注册后才能看到站内体验； 设计考虑 • 使用清楚易懂的标题，内容要视觉上吸引且有趣（just like an ppt!） • 有明确的步骤提示(1,2,3...)，这样用户可以跳到特定步骤； • 在导游的每一页都不忘提醒用户注册； 可能存在问题 • 如果基本站内功能无需注册也能体验可能没有必要做Site Tour； • 如果帘幕下的站内功能不是超级吸引的话，可能直接引导用户立 刻注册尝试效果更好；
- 27. 1.8：Examples
- 30. 2.1：简单的初始注册流程 目的 • 只要求用户填写最少的信息就可以完成注册，经常后面伴随一个初 期设置精灵(setup wizard)；希望是用户一旦做了初期投入后就会继 续使用； 设计考虑 • 约傻瓜越好！不要问任何需要用户思考的问题（例如昵称），因为 用户在这一步待得时间越长就越容易流失； • 使用字体长相一致并对齐的填写框等来减少视觉上的可能骚扰； • 不应该超过3-6个需要填写的元素； 可能存在问题 • 如果用户已经有意愿加入网站，可能他们更愿意一次完成初期设置；
- 32. 2.2：详细的初始注册流程 目的 • 在注册页面就详细收集为了体验核心功能所需要的各项关键信息； 设计考虑 • 告诉用户为什么要问这些信息（填写了这些会有什么回报？）； • 提示用户哪些信息是以后还可以修改的； • 明确地说明哪些是必填，哪些是可选（最好分开两块）； 可能存在问题 • 如果在用户不明确注册价值的时候就询问大量信息可能导致用户 怀疑，同时也提高了加入门槛；
- 34. 2.3：初期设置精灵（ Setup Wizard ） 目的 • 手把手引导（多数是3步）用户完成注册，好处是不用一次将大量信 息展示，而且有机会单独介绍每一步对用户的价值。此外，有时特 定注册步骤需要较大空间（例如上传图片）； 设计考虑 • 用进度尺或检查表提示用户已经完成了哪些步骤，还需要完成什么； • 明确注明可选步骤，让用户可以直接跳过； • 各个步骤从视觉上要统一，例如使用一致的标头； 可能存在问题 • 如果每一步用户要填写的信息很简单而且无需思考的话，可能用户 更希望一次填完；
- 36. 2.3：Examples
- 39. 2.4：填写项解释和错误处理 目的 • 向用户解释为什么需要填写每一栏，并提供填写帮助以避免用户浪费时 间；同时又不至于添加太多视觉骚扰； 设计考虑 • 当用户操作焦点移动到特定栏的时候才在保留区域显示提示，当焦点离 开的时候则进行校验并反馈（例如填写正确或具体错误）； • 使用明确的图标来区分不同提示信息（正确，错误，解释等）； • 当用户点击最终确认按钮后如果还有错误，在注册表格的上方（或者预 留区域）提示错误在哪儿； 可能存在问题 • 有些栏目的填写错误要到最后提交的时候提示才更有意义（例如留空的 填写项或不完全生日项）； • 不能替代整页查错功能，而是应该作为补充；
- 42. 3.1：高亮区域 目的 • 通过视觉上的高亮来提示用户如何进行下一步； 设计考虑 • 在一方面用高亮提示用户下也要注意不要导致同页其 他元素被完全忽视； • 提供一个去掉高亮提示的方法（例如完成特定任务）； 可能存在问题 • 高亮可能会对用户造成视觉骚扰，尤其是无法简单关 掉的话；
- 44. 3.2：空白模块诱导用户操作 目的 • 通过空白模块来诱导用户点击内含有文字提示的操作链接 （例如上传照片）； 设计考虑 • 利用空白模块的“空白”来解释这个模块是什么以及如何操 作； • 各个模块中引导用户操作的格式保持一致，可以考虑使用有 图标的链接来引导； 可能存在问题 • 用户可能不想立刻执行特定操作（或者永远不想），最好是 提供一个能撤除空白模块的功能；
- 47. 3.3：欢迎页面诱导用户操作 目的 • 建立一个在用户完成注册操作后立刻显示的欢迎页面， 建议他们下一步可以做什么； 设计考虑 • 提供3-5项可以点击的操作可能； • 对各项操作链接进行一定解释； 可能存在问题 • 用户一旦选择了特定操作离开这页后可能无法回来尝 试其他的建议操作；
- 49. 3.4：可操作的欢迎模块 目的 • 在用户的个人主页（dashboard – 一般是登录后显示的第一个页 面）添加一个欢迎模块，通常用清单的格式来提示一些具体操作； 设计考虑 • 给用户直接（关闭按钮）或间接（完成提示操作）撤掉这个欢迎 模块的方法； • 当清单上特定操作被完成时，及时给与反馈以鼓励用户继续； • 欢迎模块必须很容易被用户注意（设计，位置等） 可能存在问题 • 如果初始的用户个人主页就已经包含了大量信息，可能导致欢迎 模块不受重视；
- 51. 3.5：实时提醒 (Callouts) 目的 • 在相关环境下实时提醒特定功能，这样帮助用户 快速发现一些以往需要较长时间才能找到的功能 ； 设计考虑 • 弹出的实时提醒需要和用户当前操作有关，但是 不能影响当前操作； 可能存在问题 • 实时提醒可能会被用户认为是骚扰；
- 53. 3.6：开路先锋（Trailblazing） 目的 • 有逻辑性地用高亮方式向用户逐步推荐特定模块，但是也 给与他们操作其他模块的灵活性； 设计考虑 • 在对推荐模块进行了高亮就行，不要改变其外形； • 当用户完成推荐操作或者几次登录后任忽略推荐操作的话 就取消高亮； • 确定用户能清楚知道如何对于高亮推荐模块进行操作； 可能存在问题 • 用户可能不想完成推荐的全部/特定步骤；
- 55. 加快初始好友建立过程 对于新加入社区的用户来说，如何 开始建立自己的社交圈子是最大的 障碍。如果没有好友，很多基于社 区的服务会失去很大价值。因此， 帮助用户迅速找到和添加好友是留 住用户的关键。
- 56. 4.1：寻找已经在本社区的其他好友 目的 • 通过用户手动输入或系统自动寻找来帮新用户 和那些已经在本社区注册的其他好友立刻联系 上； 设计考虑 • 如果需要用户提供信息，只问最必要一项/几项； • 有可能的话尽量尝试使用用户在注册过程中已 经提供的信息来自动生成这个其他他可能认识 的人列表；
- 59. 4.2：任意邮件邀请 目的 • 直接让用户输入其他好友的电邮进行邀请； 设计考虑 • 在提供一个默认邀请信的同时也给与用户手工修改的自由； • 在邀请信内容中考虑如果收信方已经是注册用户的情况； 可能存在问题 • 用户输入的其他好友电邮中可能包括了一些已经注册过的人； • 门槛较高 – 需要用户能够记住其他好友电邮，或者愿意手动 copy/paste；
- 61. 4.3：导入联系人名单 目的 • 让用户批量导入其他服务中的联系人名单来寻找其他已经注册的用 户，以及选择性地给那些还没有加入的好友发邀请； 设计考虑 • 给那些不想进行批量导入方式的用户提供其他快速添加好友的方式； • 从视觉上将打算添加的好友和打算邀请的好友区分开； • 提供明确的隐私说明来减轻用户的担心； • 提供一个如果用户中途反悔的取消入口； 可能存在问题 • 由于需要用户提供在其他服务中密码，需要用户有充分的信任，而 且认同导入联系人名单能带给他的价值；
- 63. Thanks! More postings at http://webkeji.net/
Notas do Editor
- http://webkeji.net/ Credit: http://www.flickr.com/photos/laserenotta/1777126662/
- 与其用满屏的文字来装饰主页，Tumblr将自己的价值用一句话用人性化的语言（“anything you find, love, hate, or create”）简单描述出来，而且很自然地带出下面注册图标上的文字”start your own in 30 seconds”
- Radar为了更好让用户明白实时图片共享的概念，用图片配文字的方法做了一个3步介绍。
- 因为Flickr的功能众多，只用一个场景来介绍不现实，所以他们用了一系列的图片来说明网站能带给用户的独特而有趣的好处。
- Blogger将创建一个blog的3步骤用大大的图标和简单介绍（3个词）来表示，而且在后面的页面上也再次重复强调
- GetSatisfaction要求用户必须登录或者注册才能进行回复，虽然这样有让用户不爽的风险，但是他们尽力将这个登录或者注册模块和原来的页面形成一个整体，而且保留了用户的留言
- Yahoo Answers在首页用轮播的方式来展示优秀的答案
- Linkedin在首页让用户发现有多少自己的同事和校友已经加入了
- Flickr’s的站点导游使用了大图和精炼的文字来让用户轻松地浏览阅读，而且在每页的下方都有大大的注册按钮
- Xanga’s的注册界面简洁得可以用一个小小浮出层来搞定，而且在第一次登录时就强推动用户来寻找和导入好友
- Linkedin的注册页虽然问了不少信息，但是采用了整洁有序的表单，备选项目也明确地标出来了
- ShareThis将填写个人资料放到最后一步来确保用户在核心流程中不分心
- Digg在表单的每一栏都给出了提示和纠错
- 类似网游的新手任务
- Linkedin使用了一个欢迎模块来提醒用户去做一些重点事项
- Ning pages默认放置了一些空白模块来吸引用户注意，绿色的加号图标也明确指出了下一步行动
- 在注册完成后，Flickr给新用户建议了3件下一步事项
- Twitter的欢迎页用了一个3步的checklist来提醒用户，完成的就被划掉
- Facebook用实时提醒来提示一些常用功能或者用户还没有发现的功能
- 用户在Radar可以手动输入或者直接导入邀请邮件地址