网站用户体验:怎么样的登录框才是优秀的?

  登录框存在已久,对于用户来说是必定每天接触,对于设计师来说也是一个墨守陈规的控件,两个框加个按键,如果猛然抓个设计师问「你觉得登录框还有哪些可以改进的点」,得到的回答应该是长时间的沉默,当然也包括我。「宁可一思进,莫在一思停」,这是一代宗师里的拳理,同样也是做人做事的道理,思进方可有所为,一思一念间高下已分,体现在互联网应用及服务应该就更为深刻了。

  扯回主题,解决以下任何一个问题的登录框都是我所认为的优秀登录框(个人认为的优秀登录样式,参考长文最后部分):

  1. 输入效率问题,现阶段大多数用户登录均要求用户使用传统的键盘进行输入,这里就涉及一个问题–击键效率或称为输入效率。有许多解决输入效率的方法,如,

  使用统一账户,许多互联网服务允许使用OpenID,新浪、腾讯、Facebook、twitter…等等,像知乎允许使用新浪微博的账号登录,这样就减少了用户进行注册或登录时的输入成本。

  记住用户名及密码,这样可避免用户下次再进行输入,但用户清空cookie或安全级别要求高的互联网服务就悲剧了。

  在输入过程中给予用户帮助,例子:新浪微博使用邮箱做为登录名(如图1),用户在输入@ 后,将会出现输入建议,输入建议里有常用邮箱的后缀以辅助输入。


  图1

  另外,还有一些细节,如,在用户输入完用户名或密码后,焦点重新切换回用户名或密码的输入框,应该是全选已输入内容呢还是输入焦点位于已输入文字的后面?用户名及密码正确,仅验证码出错的情况下应该如何处理?

  解决方案:使用OpenID,或使你的账户成为OpenID(对于国内巨头这是句废话),允许用户记住账户及密码(默认项给勾上),给予用户输入辅助,记住用户输入过的历史记录(可别记密码)并在适当的触发条件下显示出来。ps.以上仅为部分,还需要区域Web端及移动端。

  2. 输入模式问题,在输入用户名时,用户是否能够明确自己处于中文模式或英文模式?输入密码时,能否明确Caps Lock处于哪种状态?输入模式到目前为至一直是个令人讨厌的问题,或者你感觉不到,认为在输入错误后仅仅需要按几次退格就可以修正这个错误,假设用户在期望输入英文时恰好正处在中文输入模式里,那用户需要执行的操作就多了,先删除已输入的错误字符,再执行Crl+空格,或者用鼠标切换至英文模式。另,非可见密码状态下Caps Lock的开关影响到整个登录操作的成败(如图2)


  图2

  解决方案:中英文输入模式最终需要输入法来进行解决,可惜现阶段没有哪款PC端输入法考虑到输入模式对用户的影响并加以解决。登录框内可采用类似图2 在密码区域增加Caps Lock状态提示,一般无需特别对用户名输入区域增加Caps Lock提示,因大部分用户名对大小写不敏感。另,可考虑优雅的明文显示密码,如在「移动应用中注册新用户及用户登录的时候,密码应不应该显示为明文?」一文中所描述。

  3. 图灵验证问题,现常规的验证码也是让我无限蛋痛的问题之一,为了判断是否属于正常登录而非恶意的侵犯或骚扰,这对于真正的用户来说,验证码没有必要出现,所以仅在登录时触发某些条件再显示验证码吧(像登录错误次数等)。难以识别的的验证码对于用户来说是沉重的压力,像I和l的识别难度,还有支付宝原来的字母O和数字0的问题,无奈设置的验证码一次次将用户阻挡在服务之外。

  如实在无法绕过验证码这个环节,是否可以考虑为验证码增加一些实际意义,像reCAPTCHA: Stop Spam, Read Books 项目(已被google收购),利用验证码技术来帮助典籍数字化的进行,这个计划将由书本扫描下来无法准确的被光学文字辨识技术(OCR)识别的文字显示在验证码问题中,让用户在回答验证码时用人脑加以识别(如图3),一举两得。


  图3(不过这验证码曾让我想砸电脑 -_-’)

  PS. 其实中文的识别比英文要难得多,为什么不闹个汉字的OCR改进计划呢?利用用户输入验证码的精度校正汉字的OCR。

  解决方案:主要是解决验证码的识别问题,像End the CAPTCHA Agony利用游戏的方式进行验证。或像SolveMedia(Engagement Advertising Technology),在验证码内嵌入容易识别的广告。国内已经有类似的公司做这样的事情,相对于提供免费服务的网站来说,这样做也无可厚非,如豆瓣可以尝试在验证码环节加入自己的FM pro广告,嘿嘿。

  4. 反馈,这包括在用户登录过程中所需要的各种反馈,如:

  输入框选中的反馈,明确用户当前所在位置。

  输入过程中的反馈,上面输入效率及输入模式中提到的点。

  提交验证过程反馈,给个loading效果让用户知道目前处于等待状态,是否允许在提交过程中取消登录?

  验证出错后的反馈,提示用户哪个环节出现了错误,密码是保留还是清空?


  图4

  解决方案:明确登录过程中的各种反馈,并将这些反馈进行细化,使之具有意义,方便用户理解。如,OSx 及 iCloud的登录框在出错后,都会抖动提示验证出错。恰当的动效在这里得到的很好的体现,抖动的效果与人类摇头的效果一致。

  5. 多账户问题,某些应用及服务允许多账户,如桌面端的QQ、Chrome、Win操作系统等。涉及账户的选择、登录的时机等。举个反例,Mac端的QQ,当用户打开Mac版QQ时,第一时间显示的是单个账户,没有明确提示用户选择其它账户或添加其它账户的入口,导致很多用户只能在不断试错后才知道点击头像进行选择(如图5左)。ps.MacQQ打开后,默认焦点停留在QQ号码输入区域并全选,这是想闹哪样?如果用户登录过了,默认焦点应该在密码输入区域啊,反馈过也没见改进… -_-’


  图5

  解决方案:系统支持多账户,给出足够明显的提示,方便用户切换账户(图5右),并尽可能以选择代替输入,成本较低,注意一下选择账户后光标的默认位置(这里可能还涉及记住密码的问题)。

  6. 遗忘密码问题,这也是因为各种应用及服务太多,而且大都需要用户进行注册,用户也难免会遗忘(使用统一的OpenID可解决很大一部分问题)。遗忘密码可在登录区域明显的放置,也可采用一些巧妙的方式进行提示(图6)。


  图6

  解决方案:这里提一下忘记密码流程上需要注意的点吧,尽量少使用安全问答,不安全,现阶段个人信息在网上近乎透明;用户遗忘密码时不要强行给用户设置一个新密码;通过邮件让用户自行重置密码;对于安全级别要求高的服务采用多种方式重置密码,如,手机+邮件+U盾+人工等。

  7. Accessibility,登录区域是否满足了无障碍性的需求?用户名及密码的输入是否有其它的方式?验证码的设计是否合理?大部份的研究指出,大概有 20%的人口有某种程度的残障,当然并不是所有残障人士都有让他们使用互联网困难的残疾,可是在人口比例上还是很重要的。

  中国是全世界盲人最多的国家之一,眼部疾病在中国也是一个主要的公共卫生问题。中国约有盲人600-700万,占世界盲人总数的18%,另有双眼低视力患者1200万。我国盲人数量早已超过诸如丹麦、芬兰、挪威等国家的人口数。

  网银登录验证码被指歧视盲人 493人联名要求纠正

  有兴趣可到这里详细了解:WebAIM: Introduction to Web Accessibility

  解决方案:坚持可用性设计理念,利用现有技术及交互手段:语音输入;语音识别;脸部识别;手势识别;语音验证(File:中文語音Captcha.ogg)等等……

  8. 安全问题,数字证书、密保卡、U盾等,对应不同的安全级别,各有利弊。另,登录区域记住密码功能,cookie需要着重设计。该层面很多涉及底层技术,设计人员在这里就不胡说八道了。个人倾向于利用移动设备解决安全问题。

  上面啰嗦了一大堆,下面说说自己比较喜欢的登录方式:

  1. 利用二维码扫描登录,几乎规避了上面大部分问题,并在安全性上有一定的保证,使用用户的手机进行验证,不需要用户的额外输入,也不存在密码或遗忘密码问题。当然也存在一些其它的问题,如,成本,用户移动设备需要支持扫描功能,需要移动端与Web端或桌面端相结合,登录时需要执行某些特定操作,打开 APP,进入某功能等(这也可带动移动端APP的日活,玩笑)。


  图7

  2. 利用特定的交互方式,像Bump连接Web端(图8),通过手机的重力感应感知到「bump」,然后将地理位置与碰撞时间等信息上传到服务器,服务器根据最接近的时间点和地点判断出手机或者电脑的IP地址,为它们建立通信配对。虽然也可用来进行用户登录,但安全性较差,真要采用这种方式,可就要改进一下相关的流程。


  图8

  以上当然无法完全替代传统登录方式,但可做为补充及增益。

  欢迎补全!谢谢

时间: 2024-10-07 13:33:25

网站用户体验:怎么样的登录框才是优秀的?的相关文章

页面设计:什么样的登录框才是优秀的?

登录框存在已久,对于用户来说是必定每天接触,对于设计师来说也是一个墨守陈规的控件,两个框加个按键,如果猛然抓个设计师问「你觉得登录框还有哪些可以改进的点」,得到的回答应该是长时间的沉默,当然也包括我.「宁可一思进,莫在一思停」,这是一代宗师里的拳理,同样也是做人做事的道理,思进方可有所为,一思一念间高下已分,体现在互联网应用及服务应该就更为深刻了. 扯回主题,解决以下任何一个问题的登录框都是我所认为的优秀登录框(个人认为的优秀登录样式,参考长文最后部分): 1. 输入效率问题,现阶段大多数用户登

网站用户体验:提升网站用户体验的专业建议

文章描述:提升网站用户体验:你不能不知道的6条专业建议. 作为网页设计师,我们知道,我们的任务就是与用户对话.这就是为什么我们能够从容的着手眼前的工作.我们选择颜色.字体,以及要使用的网页布局,甚至编写CSS的方式,所有的东西看起来都那么有目的性. 正如我们精心制作设计时,我们会意识到结果会透露出一些关于我们,设计师的内容.然而这些我们所设计东西并不是总能很好道出我们的初衷. 所以每当你正在进行一个网站的设计,问自己:我们如何给用户更好的关怀感? 浮动窗口广告 = 金钱比UX和内容更重要 因此,

搜索引擎越来越重视用户体验 SEO该怎么弄才好

搜索引擎越来越重视用户体验 SEO该怎么弄才好 百度算法不断更新,特别是进入2013年以来,什么绿萝算法,石榴算法等等,据说这几天又出了一个知心搜索,百度的所有这些改变,归纳起来就是:越来越重视用户体验了,以往的排名规则统统甩在脑后吧,现在我们来研究一下,基于搜索引擎的这些发展趋势,作为中小站长的我们怎样才能做好SEO. 新形势下做好SEO,一壶清酒认为主要还是四个字--用户体验.可是用户体验四个字何其简单!网站没有排名,没有流量,根本就没有用户,何来的用户体验呢?别着急,我们从以下几点慢慢着手

怎么俱备和提高网站用户体验

  1.网站性能: 网站页面打开速度是否快(特别是南北方存在电信和联通线路互通的问题,一般可采用托管服务器在多线机房来解决.如果网站图片过多,可采用CDN加速方案),服务器是否稳定,域名解析是否正常等.亚马逊曾经做过相关测试跟踪,统计显示0.1秒的网页延迟,会直接导致客户活跃度下降1%. 另外,网站性能不仅影响用户的浏览体验,也直接影响SEO效果. 2.视觉设计: 颜色搭配是否符合网站定位,风格设计是否符合目标用户喜好,这是决定用户是否驻足停留的关键.这里分享一张色彩联想图,希望对非设计人员也能

网站用户体验优化的重要性

中介交易 SEO诊断 淘宝客 云主机 技术大厅 对于电子商务类型网站来说,如果没有把网站用户体验这个细节处理好,直接的后果就是该网站的转化率提不上去,销售额就无法达标,毕竟每个用户对网站的使用习惯是不一样,功能要求也不一样.那么对于这样的情况最好是要照顾到最主要目标网民的利益需求,要对自己的网民目标有一个清醒的认识,分析网民的需求行为,实现网站用户体验优化目的. 笔者总结以下几种网站用户体验 一:感官体验 这个体验注重来访者的视觉,网站拥有者可以从以下几个方面下手: 1.网站的logo至少要清晰

浅谈:怎样提高网站用户体验那点事

一个网站建立好之后,要有流量才会有用户体验的产生,网站建好之前一定要考虑到用户体验,一个网站的用户体验决定了跳出率,PV数,如果跳出率过高,那用户体验自然就差,跳出率低用户体验就好,只有这样才会得到搜索引擎的青睐.当然我们的目的是服务客户,而不是只为做流量那么简单,如果为做流量而做SEO的话,不注重网站用户体验的话,最后只会让你的网站陷入无人问津的网站.搜索引擎就是这样用户体验好才给你很好的展现位置,这是做SEOer每个人都知道的.下面南宁SEO团队就给大家来介绍一下在网站建设中如何做好网站用户

石榴算法:百度抓住了提高网站用户体验度本质

百度推出<石榴算法-低质量页面终结者>文章,意在真正的维护用户体验的措施.当今信息时代,作为互联网用户,上网查看和浏览信息已成为大多数网络用户的生活方式.然而,当用户打开电脑上网的时候,经常会遇到网页上的广告满天飞,甚至部分网页会弹出大量低质.混淆页面主体内容的垃圾广告和掩盖网页主体内容的大面积广告.显然,这样的广告严重的影响了用户体验. 现在,石榴算法正是惩罚因影响用户体验度的网站,真正抓住了提高网站用户体验度的本质内容. 不可否认,广告是若干网站运营的收入来源之一.在优质网站上合理放置广告

浅谈网站用户体验优化

首先,什么是网站用户体验优化?英文原文UEO:user experience Optimization,网站用户体验优化就是把你的网站针对于用户的体验来进行优化,面对用户层面的网站内容性优化,本着为访客服务的原则,改善网站功能,操作,视觉等网站要素,从而获得访客的青睐.通过优化来提高流量转换率. 1.稳定的空间和高速连接成就网站第一印象 稳定的空间当然就是网站不能一会儿快一会儿慢,早晨可以打开下午就打不开了.有一用户好不容易在哪个论坛或者百度上忽然间看到你的网站,而浏览了一次就无法进入了,那么用

做好网站用户体验在网站页面设计上的一些要求

如今,对于做网站优化的广大站长朋友而言,用户体验成为了大家最为关注的重点,因为在我们做优化的最终目的是为了让用户能够更加容易的来到我们的网站,访问我们的网站内容,从而帮助他们解决问题,我们所谓的用户体验指的就是一切从用户的角度出发,时时刻刻为用户考虑,而不是单单为了排名流量来做优化,而且用户体验也如何是会对网站的转化率产生很大的影响,所以说对于我们每一个站长来说做好网站用户体验都是义不容辞的责任,下面笔者主要谈谈做好网站用户体验在网站页面设计上的一些要求. 第一.首页设计要合理 当用户来到网站的