20121226早读课:移动应用输入密码时,是否应显示为明文?

  • 9
  • 10,279 人看过
  • A+

推荐理由:一直以来从Web端的设计思路有很多都延伸到移动应用上,隐藏密码就是一例。在输入成本高的移动平台上,APP是否应该显示为明文,一起来看看@MoonMonster 同学的分享。

20121226早读课:移动应用输入密码时,是否应显示为明文?

 

开宗明义,我个人比较倾向于在移动端明文显示密码,尤其在注册新用户时,但并非简单粗暴的明文显示(我所说的都是错的,嘿),欢迎拍砖,具体理由见下。

移动端和PC端从体验设计上有本质的不同,移动设备有自身的特点及限制,需要我们重新思考一下原有PC端形成的一些设计标准(不断的质疑和否定才能成长嘛),比如:密码输入区域的设计

先从PC端说起,密码输入是我们日常上网或操作电脑最常接触到,PC端常规的设计思路是对用户输入的每个密码进行遮掩,用户输入一个字符,密码输入区域就显示一个替换符 “*” 或 “•”(图1) 。

20121226早读课:移动应用输入密码时,是否应显示为明文?

图1

为什么这样进行设计呢?先从PC本身的属性谈起:

1. PC具有公共属性,可能在多种场所甚至被多人使用,但你输入密码是私密性的。

2. PC固定在特定的位置,无法随意移动(早期PC时代,非笔记本横行的现在)。

3. PC显示区域足够大,光用脑袋是不能够完全挡住偷窥者的。

鉴于以上这些属性,PC端在用户输入密码时应给予适当的保护。当然也有过份保护的例子,如下图2,命令行时代的产物,用户输入密码时,没有任何反馈以提示用户(现在每天还要使用到,唉!)。

20121226早读课:移动应用输入密码时,是否应显示为明文?

图2

另外一个重要的原因,由于长时间敲击键盘进行输入练习,键盘的物感形成了肌肉记忆,输入密码(敲击键盘)的过程成为一种条件反射(知觉-行动链),用户在输入时更多的是依靠手指上的感觉,而非有意识的去关注(所以,也就不存在识别了),人体肌肉获得记忆的速度十分缓慢,但一旦获得,其遗忘的速度也十分缓慢,并且肌肉记忆的精确度均很高,用户在PC上输入密码的错误率也很低。

在PC端这样的设计没有太大问题,只是偶尔在知觉-行动链被打断时会想不起来输入到什么位置了,因为不过脑嘛 ^_^,绝大多数用户在遇到这种情况时,会选择将已输入的密码全部删除重新开始输入,纠错成本PC端用户可以接受,所以对这样的设计PC端用户也就接受并习惯了。

再来看看移动端,大部分的移动设备(如,手机)属于个人私密性较高的设备,并且显示区域均较小,用户在进行输入时,可对输入密码进行有效的保护(或者找个僻静的地方进行输入)。或许有同学会认为移动用户的使用场景多样,更需要对密码进行保护,但只要窥视者有心,不管密码是否被保护均可能会被其获知,见图3,大多数移动OS用户的每次输入均出现键位提示!移动端想防窥还是得找僻静小角落啊。

20121226早读课:移动应用输入密码时,是否应显示为明文?

图3

现在移动端大多数均以触屏为主要交互手段,在触屏虚拟键盘进行输入操作缺少以往实体键盘的物感,需要用户在输入过程中对虚拟键位及手指的位置进行认知,手指很难形成肌肉记忆(黑莓Storm的Clickable技术就是模拟实体按键触感的技术),借用一下surface的眼动研究(图4),可以发现用户的视线会在虚拟键盘及输入区域之间进行切换,思考一下,你在PC端进行输入一般字符时会盯着键盘看吗?在移动端进行输入操作时成本比PC端高出了许多,并且错误率随之也放大了,大部分的用户已经能够很明显的感觉到在移动端输入之困难,再让用户进行纠错操作,成本就可想而知了!

20121226早读课:移动应用输入密码时,是否应显示为明文?

图4

移动端的设计者其实早已察觉到了上述的问题,并对移动端的密码输入区域进行了重新设计,以iOS的解决方案为例子,用户当前输入的密码以明文显示,在继续输入下一位时将上一位密码转换为替换符(图5)。

20121226早读课:移动应用输入密码时,是否应显示为明文?

图5

这样的设计一定程度上规避了上述的问题,方便了用户,但也存在一些问题,只有当前的输入为明文,之前的密码依旧是替换符,用户在对密码的认知上无法存在连续性,另外,当用户在虚拟键盘寻找需要输入的字符花费较长时间,原来的明文会自动转换为替换符号,这样易导致用户忘记之前的输入。

另一个解决方案,在输入区域附近放置一个密码显示的开关,当开关打开时,密码以明文的方式进行显示,当开关关闭时,密码以 ”*” 或 “•” 替换符显示(图6),用户可在输入过程中很轻松的切换密码显示模式,当用户确认周边环境安全,并希望提高输入体验时,可选择明文显示,反之选择替换符显示。

20121226早读课:移动应用输入密码时,是否应显示为明文?20121226早读课:移动应用输入密码时,是否应显示为明文?

图6

但这种方案涉及到另一个问题–默认选项,用户一般较少主动去设置某些选项,并依照默认选项使用下去,所以,上面方案默认选项如果采用隐藏密码的设计,那这个设计的效果及优势就没有得到体现。采用明文密码显示会使其更具有意义。

采用明文显示密码能够提高用户体验,有助于用户进行输入,注册及登录流程会更易用,隐藏密码可提高安全性,并与目前用户习惯相符,但降低了输入效率,如何在两者之前进行平衡?是否有其它解决方案?这些是设计者需要花时间思考的问题。

还是以iOS平台为例子,再来一个解决方案,用户在密码输入区域进行输入时,还是依照现有iOS的交互逻辑执行,但是当用户感觉自己输入错误了,按退格键试图删除错误输入时,将隐藏密码以明文显示出来,方便用户查看自己的输入,并确定需要进行修改的位置(图7)。这样的设计保留了原来用户的使用习惯,却又考虑到用户在出错后的行为模式,为退格键附加了一个切换明文模式的功能。

20121226早读课:移动应用输入密码时,是否应显示为明文?

图7

综上所述,就移动端用户注册及登录时,隐藏密码不仅会阻碍用户快速、准确地输入,还会遮掩用户的输入错误,并对安全性没有起到太大的作用,个人还是倾向于优雅的使用明文密码显示,但以什么样的方式显示密码,以及采取何种形式的交互是需要进行认真设计的(在PC端还可以在当前输入区域获取到焦点时明文显示密码,失去焦点时隐藏密码)。

往往我们在进行设计时都遵循某种设计惯例,或找现成产品中被实现过的例子。较少自身深入的进行思考,有些设计不适用在你的产品当中,可能会使用户体验不好或增加任务的复杂性,那我们就需要重新审视一下我们设计了。

Via:作者博客

20121226早读课:移动应用输入密码时,是否应显示为明文?

如果看到这段文字,证明您已经看完这篇文章了,有什么收获有什么感想有什么不赞同,我们期待您的留言评论,并诚挚邀请您加入“互联网er早读课”官方QQ群:136228714,一同交流每天文章的心得并结识同好。注:官方QQ群非水群,喜欢闲聊的童鞋请勿加入。再次感谢您对早读课网站的支持。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:9   其中:访客  4   博主  0   引用   5

    • 紫辰

      很好的文章赞一个先。有几个问题1.从情感化设计的角度,结合用户心智模型来看,密码是一个私密的东西,保护自己私密资料的一把锁。个人觉得密码以 ”*” 或 “•” 替换符显示不仅仅是对别人,也是对自己,对自己的心理环境,当输入显示明文时,纵然减少了错误,同时也会使用户感到自己所私密的东西不被所保护,也就失去了密码的意义了,这照成的用户体验后果会比目前这样错误输入照成的后果更加严重;2.最后一个的解决方案遇到的问题:当我删除了错误的文字想再次输入时,若还是明文,就是失去了刚开始用 “•” 的意义了,若非明文,这样整体变化,用户一个心理适应的过程…等还是存在问题 个人观点

      • dewdrop

        文章很赞,但是站在用户心里的角度,一直觉得密码是个人隐私,已经习惯了用*号代替,如果忽然间显示明文,确实不习惯,感觉不安全

        • 名爵

          这是一个适应的过程,首先所讲的是APP应用而非PC应用。见于手机在输入密码时很容易按错,可有些用户并未记得输入到哪或者哪里输错,我就是一个例子,会将密码全部清除以后重新录入,这样就耗费了时间。但是如果这时有明文、密文的切换。可能会更感性些。另外关于明文、密文是要分场景的。登录时与注册时的场景又有所不同。个人观点、有些片面。更好的解决方法就是去做用户调研

          • Ayu_米

            即使去做用户调研,十个里九个都会选择“•”或“*”。大环境都是如此,用户的习惯也已养成。现有的设计方案,可以说是要去改变用户习惯。改变用户习惯其实不难,只要方案比通用的更完美,用户自然乐意接受。问题是文章的明文输入方案确实解决了避免输入错误的问题。但是用户的安全感却完全没了。如果密码输入的需求有优先级,“密码安全保障”肯定是排在“减少出错”前面。

          • 来自外部的引用: 5

            • 20130123早读课:注册表单中密码遮蔽的再设计 – 互联网er的早读课,专注产品、用研、交互
            • 20130225早读课:如何设计优秀的登录框? – 互联网er的早读课,专注产品、用研、交互
            • 如何设计优秀的登录框? | 果果派
            • 20130226多点·知识库:如何设计优秀的登录框? : 多点·知识库 Doolulu.com
            • 20130226多点:如何设计优秀的登录框? – 多点doolulu.com