为了更方便地输入Email地址

在cxpartners,我们对检验常规用户体验模式的最佳实践以及挑战传统思维很感兴趣。我最近关注不起眼的Email字段,在想如何通过自动提示域名(如gmail.com)来简化邮件地址的输入。

下面是演示:

See the Pen Email Auto-Suggest by Stuart Tayler (@stuarttayler) on CodePen.

如果你看不到页面,这有个GIF:

边际收益

思考下这些小组件,它们的“微交互”可能不太重要,但是我们相信其中有商业价值。

Giles之前曾讲过“边际收益”理论。这也是英国自行车团队在伦敦奥运会上成功的原因。在比赛之前,他们用酒精擦拭自行车轮胎。这将会除掉一薄层的尘土,这些尘土可能导致轮胎在出发台会有一点点的滑动。很小的改变会节省千分之一秒。如同Tom Harford在他了不起的演讲《至关重要的创新》中指出的:“找出你能进步一点点的所有事情,你就可以把这些提高转化为确实很重要的事情”。

输入邮件地址

回到邮件输入框!它们一定是在线表单中最普通的输入框了,每次当我不得不手动输入“gmail.com”时,我都有点失望。因此,这看上去是个值得关注的模式。

Luke Wroblewski的视频《如何减少邮件输入错误》是个不错的开始。他首先提议用一些 HTML 属性来减少错误(type=email, autocapitalize=off, autocorrect=off)。在手机上,这将会触发一个包含@字符的小键盘,并避免某些不可预料的“更正”,如下所示:

他还提出了一些避免错误的想法。其中一个涉及到了行内验证,来检测常见email域名(如gmail.com)的拼写错误:

这个问题的另一个方案是包含更正能力的错误提示:

第一个观点就明显减少了50%左右的错误,非常重大的小改进!但是,这促使我思考,我们难道不能在用户犯错之前做点事情吗,而不是事后再纠正?

自动完成和“hotmail”问题

我的第一个想法是自动完成email地址。当你打字时它将自动输入常用的email域名。我快速谷歌了一下,确实已经有很多jQuery插件可以完成这些事情。我选取了Chris Yuska的插件,Mailcheck的插件中的流行email列表,然后玩了起来。

看起来相当高效和自然。然后我告诉给我们团队的前大师Joe。他提醒了我“hotmail”问题。hotmail.com结尾与hotmail.co.uk结尾的邮箱地址不是同一个邮箱。这意味着hotmail.com或hotmail.co.uk的自动完成将会导致错误。而且,如果用户继续打字,这个设计也没考虑调整拼写错误。

自动提示

所以下一个迭代版本使用自动提示,而不是自动完成。这会显示“hotmail.com”和“hotmail.co.uk”两者。而且如果输入工作email地址(如cxpartners.co.uk)也不会太烦人。副产品是,当你敲入“@”字符时,会有一个常用email域名列表待选。原始列表太长了,所以我只保留了更常见的项。

我还添加了拼写更正特性(使用了一个疯狂的算法),希望它能帮助消除额外的错误。

进一步的工作

这个原型无疑需要进一步工作和优化。email列表可能需要根据国家来自定义;初始的最常见的email列表可以根据真实统计结果来调整。另外,手机视图可以水平显示,这样看起来更节省空间:

这个自动提示的想法与Chrome的自动填充特性有些共同点。但是,我用Chrome的自动提示时,结果往往是还得删除5年前的邮件地址。而且,如果没登录Google时,自动填充也不工作。

但是我想,观点是否为首创不是重点 – 重点是分享和对最佳实践的挑战。这些小改动可以让我们与 Chris Hoy 更近一步!(译注:Chris Hoy是100年来首位在同届奥运会上赢得三枚金牌的英国人。)

收藏 评论

关于作者:douxingxiang

简介还没来得及写 :) 个人主页 · 我的文章 · 13

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部