App登录注册功能,怎样做到用户体验最佳?
用户登录系统,可以细分为三项功能模块,分别是:登录、注册和密码找回。本文作者将结合自身经历,谈谈他在做这块的时候一些想法,主要是涉及业务流程。
登录和注册功能,不论是PC端还是移动端,大多数产品都会涉及到。而不同的产品逻辑和业务流程,会带来不一样的用户体验。过去做的大多是后台产品,面向的是内部用户,因此在做登录和注册功能时,前台界面相对简单,主要是后台的权限管理较为复杂。而最近正在做一款App和一款PC端前台产品,面向外部的普通用户,因此在登录与注册的产品设计上,需要考虑更多的细节因素。下面把我做产品原型时的一些思考放在下面,供大家讨论。
用户登录系统,可以细分为三项功能模块,分别是:登录、注册和密码找回。下面分别谈谈我在做这块的时候一些想法,主要是涉及业务流程。
一、登录功能
1、登录方式:手机号/邮箱/用户名+密码
现在App常见的登录账号是手机号和邮箱,因为这两类登录方式便于记忆,且方便找回密码。但有很多App产品,其实是从其PC端产品衍生而来,它们共用同一套后台系统,因此需要考虑到一部分过去在PC端注册的老用户。所以,虽然由字母和数字组成的用户名,已经是PC时代的登录方式,但是在移动端上,也应当提供这样的选择。
如下图1:

2、等待提示:提供“正在验证”的提示,缓解用户焦虑
一般来说,如果产品的后台能做到快速响应,及时反馈用户操作的结果,自然是最理想的状态。但我之前在做其他产品时,碰到过很多次后台无法及时响应前台请求的情况,这个时候,用户可能会面临一种无所适从的吃瓜状态。
比如:用户点击登录按钮后,后台响应不及时或是网络中断,这个时候,用户行为可能有两种:重复提交或者直接退出。永远不要挑战用户的耐心,我就是这样,每次使用其他产品时,如果提交之后页面无反应,等待2秒之后我就没有耐心了,对这个产品的印象也打了折扣。为了预防这种情况,建议增加等待提示如,“正在验证,请耐心等待……”,或更加明确的指令“正在验证,请不要重复提交”。如下图2

3、错误提示:用户名或密码错误+可试错次数
之前看过一篇文章,专门讨论怎样优化登录功能的用户体验。文章里提到,最佳的提示方式是清楚地告诉用户到底是用户名错了,还是密码错了,从而引导用户去修改。这种提示方式固然是将用户体验做的很好,但这其中却隐藏了安全隐患:如果盗用账号密码,岂不是成功率更高了?
所以,我个人还是倾向于提供一个模糊的提示:“用户名或密码错误”。同时,可以加上一个试错机会提示,比如“你还可以尝试xx次”,帮助用户做到心里有数。当然,如果设置了登录试错机制,就需要补充相应的业务流程:当用户试错次数用完后,引导用户“找回密码”。如下图3:

登录环节通常涉及到的细节主要是以上这些内容,所以整个登录的业务流程可以归纳为:①用户输入账号+密码,点击提交→②界面提示“正在验证,请等待”→③界面提示信息错误→④用户再度尝试,或成功,或重复先前提示。
二、注册功能
1、注册方式:手机号 +密码+验证码
App产品在做新用户注册的时候,通用方式是用“手机号+验证码”,好处显而易见,快捷便利。我个人也是比较推崇这种注册方式。但是, 还有很多用户对用手机号注册这种方式有所顾虑,担心自己的信息外泄。考虑到这部分用户群体的担忧,我们可以在注册界面多提供一种用邮箱注册的方式,但这种方式不作为主要功能突显,可以放在手机注册的下方。如下图4:

2、成功提示:激励用户
当用户提交信息后,一般最省事儿的做法就是直接跳转到用户的“个人中心”。这种方式固然没有什么错,但是总觉得缺点什么激励性的东西。我之前在网上预订了一本限购+预售的新书,真的要抢购才能买到,然后等了好多天终于收到书的时候,里面有一个黑色的信封,信纸上写着“你是本书的第XXX名读者”,这样用户体验做的还不错,至少给我一种安慰和鼓励的感觉。
在做App注册的时候也可以这样,当用户注册成功之后,可以先不着急跳转到个人中心,而是给用户呈现一个激励信息,比如“终于等到你!你是我们第 888 名用户”这样的反馈信息,还可以加上简单的引导按钮,让用户去完善信息,但一定不要给用户施加压力,要让用户有自由选择的机会。如下图5:

三、密码找回
1、通过手机号重置密码
在App上找回密码,最快捷方便的方式是通过手机号来找回。这个功能分为两个步骤:第一步是填写手机号,获取验证码;第二步是在手机上重置密码。当然,在重置密码的时候,可以让用户通过可见模式来设置,或者增加“确认新密码”的字段来确保用户修改正确。如下图6、7:


2、通过邮箱找回密码
除了用手机号找回密码之外,针对部分没有绑定手机号的用户,还可以提供用邮箱找回密码的方式。这种方式需要后台向用户邮箱发送邮件,将新密码告知用户。如图8:

上面这些内容只是包含了登录、注册和找回密码这几块核心的功能,但其实在设计登录管理系统时,还有诸如第三方登录、引导用户绑定手机等其他需求。
App登录注册功能,怎样做到用户体验最佳?的更多相关文章
- flask 开发用户登录注册功能
flask 开发用户登录注册功能 flask开发过程议案需要四个模块:html页面模板.form表单.db数据库操作.app视图函数 1.主程序 # app.py # Auther: hhh5460 ...
- Java Spring+Mysql+Mybatis 实现用户登录注册功能
前言: 最近在学习Java的编程,前辈让我写一个包含数据库和前端的用户登录功能,通过看博客等我先是写了一个最基础的servlet+jsp,再到后来开始用maven进行编程,最终的完成版是一个 Spri ...
- Node.js实现登录注册功能
使用Node.js + Navicat for mysql实现的登录注册功能 数据库中存在有”user_id,user_name,password,user_img,user_number“字段,其中 ...
- 【Salvation】——登录注册存储数据&验证用户
写在前面:登录注册功能是在纯Unity3D环境内实现的,用到UGUI绘制界面技术,数据库的部分是后面拓展加进来的,这里数据存储是指存在XML用户文件中. 注册用户名和密码 zc() 用户名和密码登录 ...
- SSM 实现登录注册功能
1.上一篇SSM框架搭建好了之后就要开始写功能了,现在来写一个简单的登录注册功能 这几个包是自己手动创建的,然后往里面写代码 2.代码详情 package com.maike.controller; ...
- JAVAEE_Servlet_20_登录注册功能
实现登录注册功能 注册功能 import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import j ...
- vue koa2 mongodb 从零开始做个人博客(一) 登录注册功能前端部分
0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.准备工作 1.1前端框架 前端使用了基于vue.js的nuxt.js.为什么使用nuxt.js? 首先我做的是博客的项目 ...
- JAVAEE——宜立方商城11:sso登录注册功能实现、通过token获得用户信息、Ajax跨域请求(jsonp)
1. 学习计划 第十一天: 1.sso注册功能实现 2.sso登录功能实现 3.通过token获得用户信息 4.Ajax跨域请求(jsonp) 2. Sso系统工程搭建 需要创建一个sso服务工程,可 ...
- PHP实现用户登录注册功能
初学php做了一些比较常见且有用的页面,放在上面记录一下咯 我是用了bootstrap框架里面的模态框做注册登陆页面,这样页面比较美观 页面效果: 注册成功条件/功能: 1)用户名不能冲突 2)两次密 ...
随机推荐
- [转]Spring Security学习总结二
原文链接: http://www.blogjava.net/redhatlinux/archive/2008/08/20/223148.html http://www.blogjava.net/red ...
- 从connect到express02-中间件morgan
控制台输出请求日志 输出格式 默认格式: dev, combined, tiny等 自定义格式: morgan(':method :url :status :res[content-length] - ...
- Ubuntu下,清屏等终端常用命令
转自:http://blog.csdn.net/gaojinshan/article/details/9314435 # ctrl + l - 清屏 . cLear# ctrl + c - 终止命令. ...
- C语言void关键字的深刻含义
C语言void关键字的深刻含义 .概述 本文将对void关键字的深刻含义进行解说,并详述void及void指针类型的使用方法与技巧. .void的含义 void的字面意思是“无类型”,void *则为 ...
- net登录积分(每天登录积分仅仅能加一次) 时间的比較
public void jifenchange()//积分方法 { //积分模块//推断如今的日期和任务完毕日志数据库取出来 的日期大小,注意:Compare()方法仅仅会 ...
- 深度增强学习--DDPG
DDPG DDPG介绍2 ddpg输出的不是行为的概率, 而是具体的行为, 用于连续动作 (continuous action) 的预测 公式推导 推导 代码实现的gym的pendulum游戏,这个游 ...
- 新型数据库Kudu应用经验分享
小米使用kudu的案例 http://www.aiweibang.com/yuedu/60603532.html 调研kudu的情况
- [转载]抓包工具Charles乱码解决办法
FROM: http://blog.csdn.net/huanghanqian/article/details/52973651 安装 SSL 证书 Mac 端 首先去 http://www.char ...
- (转) java中try/catch性能和原理
stackoverflow上有一个讨论,参与的人还挺多: https://stackoverflow.com/questions/141560/should-try-catch-Go-inside-o ...
- [Android Pro] 注册 Google Play 开发者帐户
官网地址: https://support.google.com/googleplay/android-developer/answer/6112435?hl=zh-Hans 博客地址: http:/ ...