细节决定成败!提高用户登录体验的5个细节 - 优设网 - UISDC

细节决定成败!提高用户登录体验的5个细节

2014/07/30 18999评论区

细节决定成败!提高用户登录体验的5个细节

提高用户体验最好的方向,就是尽力让用户切实地体会到整个操作流程的简单顺畅。要提高登录流程的用户体验,有很多方面的因素是需要设计师考虑的。这篇文章中,我们将主要讨论一下登录界面流程优化的5个细节。我们会从两种不同的登录类型着手,一直说到标识的重要性。

登录类型

目前,有两种主要的登录类型,一种是通过在网站本身注册登录,第二种是使用第三方社交网络帐号,诸如Google、Facebook、新浪微博等等。目前很多应用程序都采用第二种登录方式,设计师和开发者只需要做好登录按钮和接口就好了。

相对传统的处理方式,通常需要你设置用户名、电子邮箱和密码。而这种登录流程是可以优化的,所以接下来的5条策略就与此有关。虽然两种登录方式各有优劣,但是今天主要探讨的是传统登录方式的优化。

1、使用电子邮件登录

传统的注册流程中,不设置用户名还是很正常的,而Email通常是必填的项目,当然,两者都用是比较常见的情况。我想说的是,允许填写用户名的地方,应该也支持Email输入。

细节决定成败!提高用户登录体验的5个细节

细节决定成败!提高用户登录体验的5个细节

我曾碰到过同时支持用户名和Email登录的输入框,但是标注只写了“用户名”,这是典型的设计败笔。

问题在于,在不同的网站,用户通常使用一个Email注册,但是用户名各不相同。如果仅仅只能使用用户名登录的话,用户体验明显不够方便。

2、明显的错误提醒

当用户登录的时候,系统监测和反馈信息的方式也是非常值得深究的。当用户输入错误的时候,系统反馈的信息太多可能会给黑客盗号的机会,而反映信息太少的话,则会让用户感到迷惑。

细节决定成败!提高用户登录体验的5个细节

login

我们很清楚,用户输入错误的时候,系统返回给用户的信息是“无效输入(Invalid input)”肯定是没多大意义的。你必须用更通俗的语言来告诉用户,他们的输入有错误。

如果你想提供更好的用户体验,不妨使用JavaScript来帮助用户来验证信息。这样做最完美的例子就是手机输入法的纠错功能,当你输入“.con”的时候,输入法会自动纠正成“.com”,或者提供用户纠错的机会。当用户输入错误以及因为输入错误再次输入的时候,不妨提供准确的说明信息,合理引导用户。这不仅让用户更轻松,也能节省时间。

3、加上“忘记密码?”链接

你可能认为加上“忘记密码?”的功能是一件理所当然的功能,但是确实有些网站忽略了它。“忘记密码”链接和登录框一样重要,不要隐藏这个链接,也不要让用户耗尽心神才能找到它。让它时刻为用户准备着。它无需放在显眼的地方,但是它应该紧靠着用户登录表单,以备不时之需。

细节决定成败!提高用户登录体验的5个细节

细节决定成败!提高用户登录体验的5个细节

4、让用户专注于登录

通常,登录框会以弹出框的形式存在,或者以单独的登录页面而存在。无需跳转页面就完成登录确实有其优势,但如果你考虑到页面中其他元素对于用户的干扰之时,你就应该清楚单独登录页面的必要性。你要向用户展现内容、推荐商品,让用户登录之后再进行更流畅不是吗?当用户进行注册、结帐的时候,通常都是单独页面,让用户专注做一件事情,那么这种设定理当延伸到登录界面。相比于复杂的内容页,登录页面的内容更少,加载更快,这也是单独登录页面的优势。

细节决定成败!提高用户登录体验的5个细节

细节决定成败!提高用户登录体验的5个细节

5、标识很重要

不管什么时候,都不要在提交信息的按钮上标注“提交”或者“完成”,而应该用“登录”。这很简单。对于用户而言,这会让用户明白他们的操作和预期是一致的,尽管对于系统而言这种行为就是提交信息。

细节决定成败!提高用户登录体验的5个细节

细节决定成败!提高用户登录体验的5个细节

不仅如此,在登录框中标明“输入用户名或者邮箱”,避免使用占位符或者其他的容易让用户迷惑的标识。这些都是增强用户体验的重要组成部分。

结语

细节影响体验,决定成败。这5项确实是细微末节,但是要做好登录框的设计需要将这些因素都考虑进去。在做好这些设定的基础上,再打磨视觉,会让你的网站体验再上一个层次。

往期干货合集:
《拒绝平庸:优秀WEB登录页面设计》
《99个漂亮的注册和登录页设计(附PSD)》
《情感化设计:登录图的趣味设计》

funny-login

原文地址:designmodo
优设网翻译:@陈子木

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

=================== 晒照赠书!设计师男神女神在哪儿? ===================

炎炎夏日!送书解暑!现在优设微信社区也有送书福利活动啦!

【活动日期】本周一(7月28日)至周日(8月3日),发话题时附上自己的真实照片即可。
【活动规则】根据大家的【点赞量】选取男/女神各一名
【活动奖品】我们会送出图灵出版社《网页设计创意书(卷2)》哦!

P.S.照片不能作假哦,必须是本人的真实照片,带脸照!! 工作照、生活照、都可以,当然一起上更好了(*^__^*)
早发皂片早收赞,微信的小伙伴们赶快行动起来吧~\(≧▽≦)/~
进入优设微信,看到底部 点击“聊天交友”进入【优设聊吧】  在点击一次“发话题”就可以爆照啦~快快行动起来吧~

beauty

========================== 参 与 方 式 ==========================

①首先,你要关注一下优设哥的微信啦~【youshege】或者直接扫描二维码:

sdcweixin

②然后,进入优设哥的微信,看到底部,点击“聊天交友”进入【优设聊吧】

make friend

③在点击一次“发话题”就可以爆照啦~ 快快行动起来吧~

new post

P.S.群内如果有亲想要参与微社区活动,但是手机不支持传图发帖的可以联系@【江苏】花花

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/enhance-website-login-experience

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里