如何打造一流的用户登录界面

在注册和登录表单页面中,密码屏蔽早已司空见惯,它可以防止用户密码的外泄。虽然这项出于安全性考虑的设计实践已经无从质疑,但是从另一角度去考虑的话,这种方式的交互设计却是不友好的,毕竟用户在登录网页时,希望毫无障碍的填写内容并提交数据,但密码屏蔽却反其道而行之。

  利于登录,不利于注册

  登录页面的使用率比注册页面要高很多。毕竟如果想创建一个帐户,用户只需要注册一次,但注册完后,就会经常和登录打交道了。这样一来,用户会经常在公共场合输入密码,比如想给朋友们展示下社交网站上的信息,或者想分享一些网站上的东东。因此,在公共场合用密码屏蔽的方式实现隐藏密码输入的功能很有必要。

  但在注册页面,密码屏蔽的坏处就比较多了。隐藏的密码通常会导致用户多次输入失误,因为他们不知道输入的密码是否正确。但这在登录或注册时,不同的页面会带来不同的效果,登录输入错误没有注册输入错误那么麻烦——如果在登录时输入错误,大不了重新再试一下;但在注册时错了,通常会被锁定并需要重置密码。用户并不能全怪设计者,毕竟他们有他们的考虑。

  注册页面省掉“确认密码”的设计如何?

  对于用户来说,在注册页面內再次确认密码多了一道重复工序,在重复输入中,用户需要重新输入密码,并检查是否错误。这个设计虽然不错,但他们也有一个缺点。因为这两个都是看不到密码的输入框,用户很容易出错,所以通常如果错一个,就得两个框都得清除输入然后重新来过,这种确认的密码方式带来的体验很糟糕,而且还会迫使用户进行多次重复的劳动来进行修改确认,很难称得上流畅宜用。

  取消密码屏蔽,减少打字错误

  密码屏蔽带来的坏处比好处其实更多。它屏蔽的不仅只是密码,还有用户每次的输入错误,从而导致他们很难发现并修正自己的失误。密码屏蔽在用户注册时也未必能带来多大帮助,因为绝大多数情况下,注册是个一锤子买卖,它一般是在私密的状况下完成的,不会有旁窥者。我个人认为,以纯文本的方式向用户显示一次他们的密码并不会有多大的安全风险,即使是在公共场合,要想一次就能记住别人的密码输入也没你想的那么容易。

  解决这种问题的最好办法就是明码输入,这样用户就可以快速准确地填写,从而减少拼写时的错误从而快速修正笔误,并且用户也不必担心安全问题。明码输入是即时快速的,因此我们也可以在用户输入时屏蔽几个最先填写的字符,只显示刚填的字符,那么要想在这种壮况下窥见所有密码,是非常难的,除非就趴在用户肩头盯着。

  “选中可见”的设计

  同样,你还可以让文本框在获得焦点时显示密码,失去焦点时密码自动屏蔽,这样也可以做到填写方便和安全两宜。这样一来,用户可以在密码区被获得焦点时才能看到输入的内容,从而减少被其他人窥视的风险。

  另外,还有个小技巧可以提高安全性,就是用小号、浅灰色的斜体显示密码。这样一来,要看清楚每个字符需要离屏幕很近才行。因此,窥视密码几乎成了不可能完成的任务。还有一个方法就是只显示密码的最后一个字符而隐藏之前输入的字符,每输入一个确认一个。

  还有一种方法是和电脑上输入wifi密码时类似,就是提供一个复选框“显示密码”。这样,当用户输入他们的密码时,密码不可见,当勾选时便可查看。这样虽然麻烦,但也比没有这个功能的好,因为它可以让用户更容易地看到并修复他们拼写错误。

  平衡安全性和用户体验

  约定俗成的设计在日常应用中通常不会有什么问题,但当一个用户体验不友好、极其复杂化并容易导致用户出错的设计则需要我们重新斟酌。安全性应该和用户体验实现平衡。安全性考虑的过多,会降低网站的体验。当你掌握了这种平衡,即便它不合乎某种“惯例”,却能让用户更加顺畅舒服地使用网站服务,孰对孰错,分晓自明。

时间: 2024-08-28 03:25:06

如何打造一流的用户登录界面的相关文章

jQuery和CSS3炫酷GOOGLE样式的用户登录界面

这是一款使用jQuery和CSS3打造的GOOGLE样式的用户登录界面特效.该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作,用户名和密码输入框采用浮动标签特效,可点击的按钮上使用了很酷的点击波特效. 整个登录界面简洁大方,互动性很强. 在线演示:http://www.htmleaf.com/Demo/201503131515.html 下载地址:http://www.htmleaf.com/jQuery/Form/201503131514.html

很漂亮的用户登录界面HTML模板

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title>很漂亮的用户登录界面HTML模板-柯乐义</title><base target="_blank" /><style>*{padding:0px;margin:0p

Android 用户登录界面

黑色10分钟,winxp和QQ账号全军覆灭 最近一朋友忘记QQ密码,听说可以自己找回,就上网去找,看到有QQ密码破解工具,就下载,浏览器提示软件不安全,但是为了找回密码,我按了运行,然后下载了QQ账号密码破解工具,运行,提示说账号没找到.我又下载一个破解工具,还是没有用. 于是我用另一个QQ账号登陆,提示密码错误.我觉得奇怪,这个QQ账号密码没有忘记的.跑到另一台机器登陆也是提示不能登陆,查找原因是密码被改动了.我想,难道运行破解工具盗取了QQ账号然后就修改密码?于是用另外一个QQ账号登陆,谢天

C#: 用户登录界面设计

1. 在主界面loading的时候创建一个dictionary,从用户文件中加载用户信息 1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Data; 5 using System.Drawing; 6 using System.Linq; 7 using System.Text; 8 using System.Windows.Forms; 9 usi

场景分析:用户登录界面场景分析

功能点:用户登录软件 名字:小二子 年龄:19岁 收入:暂无 代表的用户在市场上的比例和重要性:比例较大,重要(我们的组队app的受众更可能是一些敢于尝试而又尚且没有为生活劳碌奔波的年轻人). 典型场景:人们打开我们的组队app软件,首先会遇到注册或者登录(已经注册过)的问题.那么就会涉及到用户名.密码的录入规则的限制,一个不友好的登录或者注册界面很可能会让用户失去耐心从而放弃使用我们的软件. 使用本软件的环境:因为大学放寒暑假了待在家里闷得发霉,因此想通过一些便捷的途径快速找到可以一起出行游走

Qt 用户登录界面

 使用QT创建自己的登录窗口: 主要步骤:    1.窗口界面的绘制     2.沟通数据库进行密码验证 void MainWindow::on_pushButton_clicked() { // 连接数据库 QSqlDatabase db = QSqlDatabase::addDatabase("QSQLITE"); db.setDatabaseName("D:/TEST/passwd"); if(!db.open()){ QMessageBox::informa

编写简单的用户登录界面

//1.如果用户名和密码不填写 //弹出消息对话框提示进行输入用户名和密码 //2.如果填写了用户名和密码 //(1).如果用户名和密码的填写都是admin弹出消息对话框,提示登陆成功 //(2).如果用户名和密码的填写的两个都不是admin弹出对话框提示登录名或密码错误 import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax

用户登录界面(1.8版本--网站框架改进)

1 CREATE DATABASE db_user CHARACTER SET utf8; 2 3 CREATE TABLE users ( 4 userid TINYINT UNSIGNED AUTO_INCREMENT PRIMARY KEY, 5 username varchar(20), 6 passwd varchar(20), 7 email varchar(30), 8 priority int 9 ); 10 11 DROP TABLE users; 12 13 SELECT *

day01-homeowrk_用户登录界面编写

#! /usr/bin/env/python3 # -*- coding: utf-8 -*- #编写登录接口,输入正确显示欢迎信息,连续三次输入错误则锁定 class login(object): def __init__(self): self._database_name='log_usrdata.db' self._lockfile_name='log_usrlock.db' self.usrdata=[] self.lockusr=[] self._ncount=3 self.init