在设计注册/登录界面时要注意的常见问题

当用户完成注册之后,可以选择性地提供额外的信息,而这些信息可能会给给用户带来更加定制化的用户体验 。为了安全起见,绝大多数的网站还是提供了邮箱验证甚至电话验证的环节,甚至提供备用安全邮箱的验证机制。

如何为网站设计用户登录流程是一个老生常谈的话题。随着时代的发展,新用户注册、登录到真正加入一个网站的过程一直在变化,从简单的信息填写发展到全面的注册方式,再从系统的注册回归简约直观的登录体验,新用户的登录流程经历了一个迂回的变迁过程。现如今,绝大多数的网站已经放弃了复杂、繁复的注册流程,将用户可能会遭遇障碍、引起用户反感和烦躁的部分去除,尽可能简单的让用户完成注册和登录流程。

当用户完成注册之后,可以选择性地提供额外的信息,而这些信息可能会给给用户带来更加定制化的用户体验。为了安全起见,绝大多数的网站还是提供了邮箱验证甚至电话验证的环节,甚至提供备用安全邮箱的验证机制。

在设计注册/登录界面时要注意的常见问题总而言之,在今天我们来审视网站的新用户注册登录流程,这是一套系统、完善且具备完整约定俗成规则的设计环节。

登录与注册

随着注册流程的优化和简化,登录界面和注册界面现在很容易被混淆。造成这种混淆的原因不止是简化。首先许多网站会选择将登录和注册界面设计地非常相似,甚至将其直接容纳到同一个界面当中去。许多用户不经意间在一个网站注册过好几个帐号的事情,并不鲜见。

在设计注册/登录界面时要注意的常见问题问题不仅仅存在于流程上。在中文中,“登录”和“注册”两个词在视觉上有很明显的差异,但是英文中,“Sign Up”和“Sign In”也是很容易引起混淆的。

所以,为了让用户不再有不必要的混淆,最好是设计不同的界面,并进行差异化的视觉和内容的设计,确保用户不会误判。在这里说说反例,AxureShare 的登录/注册界面就非常典型地勾勒出简化后的重复布局是具有何等的迷惑性。

邮箱地址和用户名

在注册环节,还有一个特别值得注意的问题就是用户名和注册邮箱的问题。当用户注册时候,最好不要让用户去创建独特的用户名,并且以此用作登录服务的 唯一凭证。绝大多数的用户会有至少2个邮箱——一个用作工作,一个用作私人用(在中国许多人可能只有一个邮箱,QQ邮箱……)。所以,最好的方式是让用户 使用邮箱登录,注册用户可以在登录之后修改信息,增加辅助邮箱,可以添加用户名。

在设计注册/登录界面时要注意的常见问题另外,在移动端发展迅猛的今天,让用户使用手机号登录也是非常不错的方案。首先手机号具有独特性,作为登录帐号拥有便捷性和易于记忆的特征,作为常用的帐号存在,更易于用户使用。

值得一提的是,手机号还符合目前流行的两步验证安全机制,系统可以更加便捷地为用户发送验证码。

展现流程

进度条是用户界面中最重要的存在之一,它为用户呈现进度,设定目标,并将信息反馈给用户。进度条让用户可以清晰地了解他已经完成多少,还有多少有待完成。也正是有了进度条,复杂的加入环节才得以分割、简化,并且显得更加清晰。

在设计注册/登录界面时要注意的常见问题LinkedIn 在这方面做的相当突出,它将用户信息的完成度完全量化,激励用户不断添加内容完善个人信息。

在设计注册/登录界面时要注意的常见问题

动效

动效是目前最常用也最实用的元素之一。使用动效来告诉用户如何填写表单,将动效和行为召唤按钮等设计结合到一起,可以让用户明白下一步的操作流程。

在设计注册/登录界面时要注意的常见问题 在设计注册/登录界面时要注意的常见问题在 Readme.io 这个网站中,猫头鹰会随着操作而变化,当用户输入密码的时候,会非常可爱地盖住自己的眼睛。动效和动画的加入让页面无形中加入了更多的互动,显得更加引人 入胜了。同样的,Shopify 在注册界面中,会用弹出的标签动效来帮助用户了解下一个操作步骤。

第三方登录

虽然并不是每个用户都会使用第三方的帐号(微博、微信、Facebook、Twitter、LinkedIn等)来注册/登录网站服务,但是预留第三方帐号登录的选项是很有必要——这样的登录方式更加便捷。

显示密码

越来越多的网站和APP的注册流程中,密码不再是输入两次,这样的情景下,注册时密码输入错误几乎是致命的,所以为用户提供密码显示可以有效的避免这个问题。要知道,目前许多注册都是在移动端上完成的,拇指在屏幕上输入密码比在键盘上输入的失误率更高。

在设计注册/登录界面时要注意的常见问题超过82%的人有忘记网站登录密码的经历,随着网站、APP和各类服务的增长,这个数字只会增加不会减少。

提醒大写锁定

当用户输入密码的时候,提醒他们键盘是否有大写锁定,也是值得注意的点。为用户提供文本提醒或者视觉提醒都有助于避免多次输入错误,降低用户浏览受 挫机率。大多数的浏览器已经集成了大写锁定提醒,所以这个问题只要稍加注意就可以看到。不过,用户在属于密码的时候注意力大都集中在输入的内容上,所以大 写锁定提醒必须优雅又醒目。

避免反模式设计

设计模式的存在,顺应用户的习惯和交互的规律,让用户可以更好地与界面进行操作。反模式的存在,同样可以引导用户行为,但是引导的结果往往不可控或者无法达成目标。常见的反模式设计并不少:

  • 用户输入信息失误的时候报错,然后删除所有输入的而内容
  • 当用户已经拥有帐号的时候,依然允许用户使用该用户进行注册
  • 为用户添加了看似可点击但是实则无法点击的标签
  • 限制用户输入字段长度但是完全不给予提醒

去除验证码

移除验证码可以有效的提高转化率。虽然验证码可以很好的避免注册机,但是验证码对于用户而言的挫折更多,12306 堪称反人类的验证码就是个很好的反例。据统计,有38%的用户会在第一次输入验证码的时候输错,15%的用户会一直输错,而这类用户通常在第五次输错之后 彻底放弃注册。

REDDIT 就彻底移除了注册环节的验证码,去除之后网站的新用户注册率同比增长8%。当然,反注册机和机器人还是很有必要的,如果情况比较严重可以选择比较人性化的验证机制来规避。

结语

想要提升新用户注册的转化率,绝大多数要应对的用户体验的问题,了解用户的痛点,除了要考虑传统的桌面端用户的问题,还要应对移动端用户的新需求。在好体验和安全性之间把握好平衡点,这也是新用户注册环节最难两全的问题。
译文来自优设

译者:@陈子木

原文地址:adobe

当用户完成注册之后,可以选择性地提供额外的信息,而这些信息可能会给给用户带来更加定制化的用户体验。为了安全起见,绝大多数的网站还是提供了邮箱验证甚至电话验证的环节,甚至提供备用安全邮箱的验证机制。

在设计注册/登录界面时要注意的常见问题总而言之,在今天我们来审视网站的新用户注册登录流程,这是一套系统、完善且具备完整约定俗成规则的设计环节。

登录与注册

随着注册流程的优化和简化,登录界面和注册界面现在很容易被混淆。造成这种混淆的原因不止是简化。首先许多网站会选择将登录和注册界面设计地非常相似,甚至将其直接容纳到同一个界面当中去。许多用户不经意间在一个网站注册过好几个帐号的事情,并不鲜见。

在设计注册/登录界面时要注意的常见问题问题不仅仅存在于流程上。在中文中,“登录”和“注册”两个词在视觉上有很明显的差异,但是英文中,“Sign Up”和“Sign In”也是很容易引起混淆的。

所以,为了让用户不再有不必要的混淆,最好是设计不同的界面,并进行差异化的视觉和内容的设计,确保用户不会误判。在这里说说反例,AxureShare 的登录/注册界面就非常典型地勾勒出简化后的重复布局是具有何等的迷惑性。

邮箱地址和用户名

在注册环节,还有一个特别值得注意的问题就是用户名和注册邮箱的问题。当用户注册时候,最好不要让用户去创建独特的用户名,并且以此用作登录服务的 唯一凭证。绝大多数的用户会有至少2个邮箱——一个用作工作,一个用作私人用(在中国许多人可能只有一个邮箱,QQ邮箱……)。所以,最好的方式是让用户 使用邮箱登录,注册用户可以在登录之后修改信息,增加辅助邮箱,可以添加用户名。

在设计注册/登录界面时要注意的常见问题另外,在移动端发展迅猛的今天,让用户使用手机号登录也是非常不错的方案。首先手机号具有独特性,作为登录帐号拥有便捷性和易于记忆的特征,作为常用的帐号存在,更易于用户使用。

值得一提的是,手机号还符合目前流行的两步验证安全机制,系统可以更加便捷地为用户发送验证码。

展现流程

进度条是用户界面中最重要的存在之一,它为用户呈现进度,设定目标,并将信息反馈给用户。进度条让用户可以清晰地了解他已经完成多少,还有多少有待完成。也正是有了进度条,复杂的加入环节才得以分割、简化,并且显得更加清晰。

在设计注册/登录界面时要注意的常见问题LinkedIn 在这方面做的相当突出,它将用户信息的完成度完全量化,激励用户不断添加内容完善个人信息。

在设计注册/登录界面时要注意的常见问题

动效

动效是目前最常用也最实用的元素之一。使用动效来告诉用户如何填写表单,将动效和行为召唤按钮等设计结合到一起,可以让用户明白下一步的操作流程。

在设计注册/登录界面时要注意的常见问题 在设计注册/登录界面时要注意的常见问题在 Readme.io 这个网站中,猫头鹰会随着操作而变化,当用户输入密码的时候,会非常可爱地盖住自己的眼睛。动效和动画的加入让页面无形中加入了更多的互动,显得更加引人 入胜了。同样的,Shopify 在注册界面中,会用弹出的标签动效来帮助用户了解下一个操作步骤。

第三方登录

虽然并不是每个用户都会使用第三方的帐号(微博、微信、Facebook、Twitter、LinkedIn等)来注册/登录网站服务,但是预留第三方帐号登录的选项是很有必要——这样的登录方式更加便捷。

显示密码

越来越多的网站和APP的注册流程中,密码不再是输入两次,这样的情景下,注册时密码输入错误几乎是致命的,所以为用户提供密码显示可以有效的避免这个问题。要知道,目前许多注册都是在移动端上完成的,拇指在屏幕上输入密码比在键盘上输入的失误率更高。

在设计注册/登录界面时要注意的常见问题超过82%的人有忘记网站登录密码的经历,随着网站、APP和各类服务的增长,这个数字只会增加不会减少。

提醒大写锁定

当用户输入密码的时候,提醒他们键盘是否有大写锁定,也是值得注意的点。为用户提供文本提醒或者视觉提醒都有助于避免多次输入错误,降低用户浏览受 挫机率。大多数的浏览器已经集成了大写锁定提醒,所以这个问题只要稍加注意就可以看到。不过,用户在属于密码的时候注意力大都集中在输入的内容上,所以大 写锁定提醒必须优雅又醒目。

避免反模式设计

设计模式的存在,顺应用户的习惯和交互的规律,让用户可以更好地与界面进行操作。反模式的存在,同样可以引导用户行为,但是引导的结果往往不可控或者无法达成目标。常见的反模式设计并不少:

  • 用户输入信息失误的时候报错,然后删除所有输入的而内容
  • 当用户已经拥有帐号的时候,依然允许用户使用该用户进行注册
  • 为用户添加了看似可点击但是实则无法点击的标签
  • 限制用户输入字段长度但是完全不给予提醒

去除验证码

移除验证码可以有效的提高转化率。虽然验证码可以很好的避免注册机,但是验证码对于用户而言的挫折更多,12306 堪称反人类的验证码就是个很好的反例。据统计,有38%的用户会在第一次输入验证码的时候输错,15%的用户会一直输错,而这类用户通常在第五次输错之后 彻底放弃注册。

REDDIT 就彻底移除了注册环节的验证码,去除之后网站的新用户注册率同比增长8%。当然,反注册机和机器人还是很有必要的,如果情况比较严重可以选择比较人性化的验证机制来规避。

结语

想要提升新用户注册的转化率,绝大多数要应对的用户体验的问题,了解用户的痛点,除了要考虑传统的桌面端用户的问题,还要应对移动端用户的新需求。在好体验和安全性之间把握好平衡点,这也是新用户注册环节最难两全的问题。
译文来自优设

译者:@陈子木

原文地址:adobe

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

(0)
CatherineCatherine
上一篇 2017-05-29 01:49
下一篇 2017-05-29 04:36

相关推荐

  • 语言的图形化表达,让百度“中文搜索”的设计更美

    本次百度ACL会议主视觉设计主要进行了五个核心技术领域的海报设计以及物料设计。通过把甲骨文的象形文字表意特征结合现代设计语言,创造出最能代表百度“中文搜索”特质的作品,提升了公司在国际上的影响力和美誉度。

    2017-05-12
  • 摧残人类的交互

    特仑苏:积分系统 购买每箱牛奶都会有一张积分卡片,上面有一行验证码。如果你认为在官网输入验证码就能获取积分,那就想的太简单了。你要拿起手机,编辑短信“CZ+长长的16位数字的验证码”,发送到长长的16位数字的…

    2014-12-24
  • 交互设计师的专业度表现 ?

    一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。 大约五年前选择了这个职业,一路走来,质疑过、探讨过…

    2015-10-14
  • 欧洲刮起性爱机器人风,用户体验称比真人舒服;马化腾减持腾讯200万股,套现超6.4亿港元 | 早报

    语音版早报9.109月10日邦妹读新闻来自创业邦00:0004:09不可不知1、马化腾减持腾讯200万股 套现超6.4亿港元香港交易所资料显示,马化腾于9月5、6及7日,连续三天合计减持腾讯200万股,每股平均价介于321.64港元至323.521港元之间,持股量由8.71%降至8.69%,合共套现逾6.4亿港元。此时正值腾讯股价高点。马化腾今年4月连续4天减持,套现42.27亿元,其今年已合共套现近46亿元。2、传WePhone开发者...

    2018-01-31
  • 现阶段用户体验最完美的混合动力 试驾新款比亚迪唐100

    以上汽车你体验过开一天车只花4元么?你体验过地板油加速无声无息么?你体验过用车供电吃电火锅开Party么?你体验过下大雨没带伞直接把车遥控过来么?你体验过车外雾霾爆表你却淡定自若么?你体验过下坡行驶续航里程却越来越多么?你体验过开个三月车却用不到100元油费么?今天这个车让我们知道到了答案!话说以前以上君并没有太关注过新能源车型,总感觉没有乐趣,但是真正开上贴近生活以后才发现插电混动是真的实用。YishangAuto第一眼看到唐100就...

    2018-04-07
  • 对话式交互设计

    关注一下,更多精彩等着你1. 轮流表达在对话中我们基于互相来回传递的微妙信号进行轮流表达。如果会话中缺少这种有效的轮流互换,我们就有可能难以保持信息的同步或无法跟上对方的节奏。2. 对话串联在自然语言中,对话的所有元素通常会被连贯地串联起来,包括上下文以及随时间演进的对话方式。这种串联帮助我们跟进会话过程。能够理解欣赏笑话幽默的人都知道,在交流中的每个回合都要注意上下文的关联性,并加强整体的交流。3. 潜在效率人们经常会用简略的口语交流...

    2018-03-21
  • 定义方向策略 – 有理有据做设计

    独立项目中,交互设计师的工作可以分成四个核心环节:定义方向策略、确定解决方案、有理有据的进行设计输出、上线效果跟踪。本期要和大家分享的是:方向策略。 方向策略阶段需要明确了解本次设计原因及产品目标,进…

    2016-12-08
  • 设计理论:人物模型设计和目标设计

    在自然科学和社会科学中,模型通过有效的抽象来代表复杂的现象。好的模型强调所代表结构的显著特色关系,弱化不太重要的细枝末节。由于我们是为用户而设计的,因此重要的一点就是,要了解这些方面并将其视觉化:用户之间的关系、用户的期望、用户与社会及物理环境之间的关系,已经用户与我们所设计的产品之间的关系。

    2017-05-25
  • Axure8.0展开收起

    设置菜单展开收起效果,且联动箭头朝上朝下动效。收起状态:箭头朝下,内容收起。展开状态:箭头朝上,内容展开。【步骤】1)设置展开内容与箭头为两个动态面板,命名2)点击事件设在点击菜单栏,同一个事件下控制两个面板状态。内容面板:箭头面板:设置旋转效果。点击菜单栏:点击运行即可。

    2018-03-15
  • 今天的扁平化设计中,值得注意的4个要点

    扁平化设计本身在不断进化过程中,会在逐步根据需求和实际状况而进化,事实上它也正是不停地向着更实用、更有用的方向前进着。极简主义是形式和功能的完美结合。内容为王,而色彩服务于内容。文本已经成为一种重要的可视化设计元素。你总不希望用户被你的字体诱导分心了吧?

    2017-05-08