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)两次密 ...
随机推荐
- ES6 函数参数的默认值
基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法. function log(x,y){ y = y||'world'; console.log(x,y); } log('k ...
- Codeforces Round #345 (Div. 1) D. Zip-line 上升子序列 离线 离散化 线段树
D. Zip-line 题目连接: http://www.codeforces.com/contest/650/problem/D Description Vasya has decided to b ...
- 简单理解SNAT回流中的概念:路由器怎么知道外网返回的数据是局域网中哪台主机的
内网到外网用的是NAT技术(地址封装)外网到内网用的是端口映射(PNAT)计算机的端口又65535(0-65534),你说的那些有名气的端口大多都是0-1023之间的你说的这个问题很简单,但首先你要懂 ...
- 诡异的 "密码取回" 邮件问题
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- UITabBarController 详解
// UITabBarController 标签视图控制 // 主要管理没有层级关系的视图控制器 // 1. ViewControllers 所有被管理的视图控制器, 都在这个数组中 // 2. se ...
- Eclipse中执行maven命令
1.如下图,右击需要执行maven命令的工程,选择"Debug As"或"Run As",再选择"Maven build..." 进行如上操 ...
- extern用法
Extern用法 用例子给你示范 // 1.cpp ; // 2.cpp 注意没有包含1.cpp #include <iostream> using namespace std; exte ...
- 一些关于VC++开发的笔记
通常程序卡住了,主要有双方面的可能: (1)死循环了 (2)死锁了 要确定是否是死循环.能够通过调试器(经常使用Windbg)查看线程执行时间,假设隔了一段会儿两次查看的执行时间有非常大区别,那么非常 ...
- 【转载】Java NIO学习 & NIO BIO AIO 比较
可以参考这个页面: http://www.iteye.com/magazines/132-Java-NIO (下面这个页面也有) http://ifeve.com/overview/ 另,在这篇文章里 ...
- Hive不等值连接
select * from ( select t1.instalment_id as r_id , t2.instalment_id as p_id from (select instalment_i ...