登录界面设计思考

发布时间:2014/8/9 标签: 设计技巧, 前端技巧 分类:设计

对于我们许多人来说,登录到网站是日常生活中必不可少的内容。

事实上,登录网站对我们来说是一件如此自然的事,以至于我们常常把一切看得都顺理成章......直到出现了某些问题,例如忘记了登录密码,用户名,注册邮箱,登录方式,甚至连是否已经登录都无法确认。

这些经验并不仅仅是令人沮丧而已,还会严重影响生意。

究竟有多严重?

根据一份用户体验分析报告,一家主要在线零售商发现,有45%的客户在其网站有多次注册的经历,平均每天有160000人要求找回密码,这些用户在找回密码后,有75%的人最终不会选择在该网站购物。 

尤为糟糕的是,访客如果不登录网站,就不会看到网站为他们定制和推荐的内容,这无疑降低了他们成为正式用户的几率和网站的用户参与度。因此,登录界面的设计可是大事,大到一些网站已经开始探索新的设计方案,以解决登录过程中一直存在的一些老问题。

你的身份正确吗?

Gowalla网站的登录界面(下图)可谓相当标准:它要求你输入自己的用户名或电子邮件地址和密码,然后登录。当然,对忘记密码的用户或未注册的访客,它也会提供相应的帮助。换句话说,它具备了最常见的登录用户界面所要求的所有要素。

Gowwlla网站的登录错误提示界面。

用户头像能将这样的确认信息以视觉的形式即时传达给用户:“是的,这是我的帐户,但我可能会忘记了密码”或“不,这不是我的帐户,我可能输入了错误的用户名或电子邮件地址。"随后,Gowalla会提供针对这两种情况的解决方法,即出现这样的提示:“这不是我”。或“我忘记了密码”。

热门的在线问答网站Quora也采取了类似的策略,但它在用户尝试再次登录之前就会及时作出反应。 如果在登录时用户的账户与注册时使用的邮箱不匹配,Quora的登录界面会立即出现提示,并邀请你马上注册一个新账户:

当登录错误时,Quora立即让你知道有没有与你输入的电子邮件地址相匹配的账户。如果您输入的电子邮件地址与Quora账号匹配正确,则该帐户的用户头像和用户名会出现在登录界面中。 这种提示方式与Gowalla类似,区别是它会立刻出现,而不是等到你提交登录信息之后才会出现。

 Quora网站的登录界面

即时登录

Quora的登录界面还包括一个“在当前浏览器中记住密码”的选项。在选择“允许”的情况下,这项功能确实可以实现:当用户重新登录到Quora时,可以不必再次输入登录密码。你需要做的只是点击一下用户界面中出现的用户头像。

Quora的一键登录页面。

如果想返回到“标准”登录界面,用户只需单击界面中的“X”或选择“以另一账户登录”,然后就可以输入电子邮件地址和密码,以常规方式登录。虽然一键登录的方式令登入Quora变的异常便捷,却并不能让其它网站的用户以这种方式快速登录。针对这情况,很多网站都在寻求第三方登录解决方案。

采用“一键通行”登录方案的网站如Facebook、Twitter、OpenID等都在尝试减少登录时要求用户提供的信息数量,以消除不同网站之间的壁垒。 提供这类服务的网站允许用户以一个帐户登录多个不同的网站。

这种登录方式也让登录过程变得更快速。当拥有Facebook或Twitter帐户的用户登录一个网站时,只需单击“以Facebook或Twitter账户登录”的按钮就可以登录。 当然,他们Facebook或Twitter帐户必须已经登录才能在别的网站使用“关联账户一键登入”的功能。考虑到Facebook的七千五百万用户中有一半在任何时候都处于已登录状态,所以他们使用“一键通行”登录方式的可能性还是颇高的。 

你可以看到这一类型的登录解决方案在是如何体现在Gowalla网站中的(下方屏幕截图)。Gowalla网站的用户只需点击“以Facebook账号登录”便可以登录网站,当然,前提是他们在Facebook上已经是登录状态。如果他们并没有登录到Facebook,他们就得先去登录一下(这时通常会出现一个对话框或浏览器选项协助他们登录)。随后用户会立即重新定向到Gowalla并登录网站。

  Gowalla提供了一个选项,可以使用您登录Facebook帐户。

新的登录问题

但是,新的便捷也带来了新的问题——这些问题通常表现为,用户忽然有了太多的选择。

当一个网站有几种不同的登录方式可供选择时,用户通常会出出现下列情况之一:

他们记得自己所选择的第三方账号(或他们输入的信息与账号匹配),可以顺利地登录网站。

这是最好的情况。

另一种情况是,不管有没有试图登录的网站的账号,用户都觉得自己反正可以用任何第三方网站的账户登入这个网站。这些用户逻辑是这样的:既然这家网站说“可以使用Facebook账号登录”,而我又有Facebook账号,那我就应该能登录这家网站。他们可能忘了究竟哪个第三方账号才能一键登入这个网站,甚至记不清自己究竟有没有这么一个账号,因此常需要很费力地去找回,甚至导致无法登录。

更糟糕的是,如果有用户输入的不是与网站匹配的信息,而是某个错误的第三方账号时,他们很可能最终会不知不觉地以错误的第三方账号登录,,从而创建一个新的账户。 而一个网站尽管会最大限度地识别不同的第三方账号与自己网站用户的账号的匹配程度,却不会精确到辨识出某一个Twitter和Facebook帐户是否属于同一个人。所以,虽然第三方账户一键登录的方式解决了一些老问题,但也带来了一些新的问题。在试图解决这些新的登录问题时,我们一直以Bagcheck网站为实验对象,探索新的登录界面设计。

我们最新设计的登录界面(下图)旨在降低我上面所述的各种登录错误发生的几率——尽管它的代价是牺牲了一键登录的便捷性。 在这个界面中,网站用户需要输入他们的用户名或电子邮件地址。 我们会使用即时搜索来检验用户输入的信息与网站已存在的账户是否匹配,因此,用户只需输入用户名或邮箱的头几个字母,系统即可迅速找到他们的帐户。

比较需要输入完整邮箱地址的登录方式,这种方法更为高效。但由于同一个用户名可能被不同的注册用户使用,我们也提供了以电子邮件地址登录的选项。当用户输入其用户名或电子邮件地址之后,就会出现不同的登录选项。在输入用户信息之前这些登陆选项不会出现。用户选择自己的用户名或输入自己的电子邮件地址之前,Bagcheck登录界面不会显示任何登录选项。

在这种界面之下用户不可以再一键登录,因为登录按钮不会提前显示。

这个小小的牺牲是值得的,原因如下:

以这种方式,除非用户自行选择退出,否则会一直保持在登录状态。也就是说用户几乎不需要经过登录过程。请记住:用户的登录操作进行的越少,他们遇到的问题也就越少!

登录这个网站十分轻松:只需键入用户名的头几个字母并选择一个搜索结果,或者输入一个完整电子邮件地址,然后点击“登录”按钮即可。这样的登录方式不如一键登录便捷,但也绝不繁琐。

使用与Bagcheck没有关联的第三方账户登录将不可能,因为只有选中自己的用户名之后登录按钮才会显示。这降低了用户多次注册账号的几率,也避免了因用户不记得自己的第三方关联账号引发的混乱(特别是在用户使用不同的浏览器或用

户的电脑未启用cookie时)。

但是在移动设备上,这种牺牲可能就不那么值得了。在移动设备上以输入信息的方式登录网站相对而言比较繁琐,不像使用电脑那样输入信息之后,只需点一下登录按钮即可。因此,在移动版的Bagcheck页面用户体验方面,我们不仅保留了第三方登录的按钮,还将它放在了页面中央的位置,用户以第三方账户登录时,轻点一下即可完成。

Bagcheck移动版的页面保留了一键登录的按钮。

自从我们在Bagcheck使用新的登录界面以来,我们收到了大量富有启发性的反馈信息和意见。 很多人建议启用浏览器的cookies来为重返页面的老用户提供便利。

对于使用同一个浏览器的老用户,这个建议或许有用,但我们我看到,更多的人会使用不同的浏览器和电脑登录网站。在这些情况下,开启浏览器cookie意义不大。

另一个常见的问题是,允许任何人以用户名或电子邮件地址在Bagcheck网站搜索用户的信息是否会降低网站的安全性。这样的界面设计的确使网站的安全性有所降低(与我们之前使用的登录界面相比),但许多网站,例如Twitter,都使用公开可见的用户名登录,Bagcheck的安全性并不比这些网站更低。

由于Bagcheck所有的用户资料页面都是公开的,用户的资料在谷歌或Bagcheck中都可以轻易被搜索到。我们注意到在登陆界面显示用户信息的确令一些用户感到不安。

因此,如果你有意在自己的网站使用这种类型的登录界面,请确保网站的用户资料页面都是公开的,另外,还要注意某些用户对这一点依然比较敏感。

人人都爱用电邮

使用自己的真实名字登录网站对有些人来说可能还不太适应,但使用电邮登录则是再平常不过的事了。谷歌的 Identity Toolkit和Account Chooser综合了这篇文章中所提到的所有登陆页面设计理念,它们允许用户使用任意一个电子邮件地址登录: 

谷歌的Identity Toolkit允许用户使用不同的电子邮件登录。

当同一浏览器中存有不同的登录账户信息时,每个帐户都被列为一个登录选项,用户选择时更为容易。

 谷歌概念性的界面设计,允许用户在多个登录账户中做出选择。

小事不小

Bagcheck和Google的例子让我们得以从宏观方面思考登录界面设计的可能。但并非所有的创新都需要如此复杂。有时即使是微小的改变也可以产生很大的影响。

例如,我在前面提到过,在移动设备上输入信息要比在全键盘的电脑上操作更为困难。再加上输入密码时往往需要采用不可见的方式,在移动设备上登录网站简直称得上是一个挑战。

Facebook的移动版就使用了一个小而巧妙的改变来应对这个问题。 如果您输入的登录口令不正确,网站会将密码字段更改为纯文本显示,以便用户可以看到自己输入的内容。

Facebook还提供了一个替代的登录方法,即使用您的电子邮件地址或电话号码(见下面的截图)。这只是一个微小的调整,却为使用移动设备的用户提供了很大的方便。

Facebook为方面移动设备用户不遗余力。

变革远未结束

正如这些例子所证明的,即使是最常见的网上互动(如登录)也会受益于新的创意和设计上的改进。当然,并非我在这片文章中列举的所有理念和方法都会被运用到实际的网站登陆界面设计中---它们被忽视倒是更为可能。但如果不去尝试,我们永远无法知道会发生什么。因此,如果你在登陆界面设计或网站设计方面有什么好的创意,尽管去尝试吧,整个世界都会为你而惊叹!

现代浏览器推荐

做为一名前端人员,您有责任且有义务让用户升级浏览器拥有完美的浏览体验,与国际接轨,同时让更多的前端人员不再苦逼! 本站将不再支持IE9以下的版本!

QQ交流群

学习使人进步,交流让人提高!

Bootstrap/HTML5/CSS3交流群:233808496

Orchard/Nopcommerce/Umbraco交流群:187502451

Bootstrap/HTML5/CSS3交流二群:385480040