左图一输入账号后里面提示不可用,方便用户及时修正;而图二需要输入手机号验证码点击提交后再提示错误信息,从信息反馈上来看,全部输完了提示错误,交互过于繁琐。
- 前端校验:一般校验显示错误和格式错误:必填项、(邮箱、电话号、地址)格式、密码强度等。快速反馈,直接提醒用户错误内容,让用户及时知晓并更改。
- 后端校验:唯一性验证、验证码、敏感词等,触发校验请求后系统会去数据库查询校验信息,再给予用户相应的反馈。
2. 复杂字段设置填写成功指示器
同样的,在线验证也可以用于提示用户填写的内容符合规定。谨记错误预防准则:提供给用户相关的建议,将用户的输入值限制为合规的范围内,并允许输入错误、缩写和不同的输入格式的存在以保证产品的兼容性。
对于复杂的输入(例如输入新密码),即时的在线验证(在输入字符的一瞬间提示)将防止用户多次猜测或检查输入的内容是否符合系统的设置。在下面的示例中,密码强度指示符会随着用户的输入而变化,并帮助用户确定到目前为止的输入是否合规,还是要继续改进。
另外不要过于关注这个「进度指示器」。优秀的进度指示器不应该分散用户填写表单的注意力,仅仅当添加这个「进度指示器」有助于用户填写时,才应该使用。
3. 将错误信息一直保留在输入框旁边
通过在线验证,错误消息会自然的显示在输入框旁边。有一些基础的规则,或者用户大概率会出现的问题,即使用户还未填写任何信息,也应该以备注的方式在输入框下方标注,这是一种非常有性价比的行为,将错误信息一直保留在输入框旁边可最大程度的减少用户思考。
4. 错误提示该放输入框哪个方位?
登录注册这块错误消息的两个最常见的位置是表单顶部置和输入框行间那么到底那个位置对用户来说更直观呢?
根据上下左右四个位置,根据浏览习惯列举出考虑每种情况的设计图一边分析。
1)右边
网页端微博注册如图错误提示放输入框右边,符合人们从左到右从上到下的阅读习惯;用户视觉路径自然流畅,很大程度上减少了用户的视觉工作。