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:

上面这些内容只是包含了登录、注册和找回密码这几块核心的功能,但其实在设计登录管理系统时,还有诸如第三方登录、引导用户绑定手机等其他需求。

时间: 2024-08-07 00:18:38

App登录注册功能,怎样做到用户体验最佳?的相关文章

php实现登录注册功能

PHP连接MySQL数据库实现用户的登录与注册功能 1.建立数据库 运用PHP连接MySQL数据库实现登录注册功能并将用户登录日志写入数据库,首先需要在数据库中建立需要的数据库 php 以及用户表 User和日志表 Logs. User表结构 Logs表结构 数据库表建成 2.代码实现 注册页面register.php <!DOCTYPE html> <html> <head> <title>注册</title> <meta name=&q

Android 登录注册功能

每个App都会登录注册功能,第一次做这个功能整整花了我一个星期的时间,中间最痛苦的地方莫过于实现cookie的自动管理,cookie中保留了用户登陆注册的个人信息.当时上网查了很多资料,也走了很多弯路,现在给大家分享出来.下面分两部分,一部分是注册功能的实现,一部分是登陆功能. 注册的功能一般流程为输入手机号,然后手机号会收到一个验证码,输入验证码之后会进入输入密码界面.两次密码输入正确之后注册流程就完成了. http = new HttpUtils(); httpClient = http.g

JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)

一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp负责数据显示,javabean负责封装数据. Servlet+JSP+JavaBean模式程序各个模块之间层次清晰,web开发推荐采用此种模式. 这里以一个最常用的用户登录注册程序来讲解Servlet+JSP+JavaBean开发模式,通过这个用户登录注册程序综合案例,把之前的学过的XML.Xpat

android-servlet-mysql实现登录注册功能

安卓项目图: 安卓端Get请求服务端登录代码: import java.io.BufferedReader;import java.io.InputStream;import java.io.Serializable;import java.net.HttpURLConnection;import java.net.URL;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.u

登录注册功能PRD的正确书写方式

登录注册功能需求文档[PRD]: 一.功能优化/开发原因 APP登录页面更改:由于APP登录界面,登录按钮不突出,并且我们的标准用户为年龄较大的互联网低频人群,学习.记忆能力较差,因此对登录界面UI进行更改并加入短信快捷登录. 二.更改模块涉及到的资源 登录页面问题:IOS.安卓.PHP 三.参考竞品: 登录页面:喜马拉雅.腾讯课堂.得到.混沌大学.淘宝.京东.百度外面.美团等. 四.用户端产品需求说明 登录页面更改: 1. 用户使用流程图 2. 页面说明 2.1 登录首页 设计更改说明:原登录

集合练习:登录注册功能

需求: 1.登录账号唯一,在注册时验证输入的账号是否可用,若已存在,则不可用,若不存在则可用 2.登录时使用账号密码进行验证 1 /** 2 * @author Administrator 3 * 登录信息 4 */ 5 public class UserLogin { 6 private String UserName; 7 private String PassWord; 8 9 10 public UserLogin() { 11 super(); 12 } 13 public UserL

vue koa2 mongodb 从零开始做个人博客(二) 登录注册功能后端部分

0.效果演示 插入视频插不进来,就很烦.可以出门右拐去优酷看下(点我!). 1.后端搭建 1.1项目结构 首先看一下后端的server目录 挨个解释一下 首先dbs文件夹顾名思义,操作数据库的,modules就是操作数据库的mongoose模型. config.js是为了方便修改数据库数据. interface就是接口文件夹,utils就是工具的意思呗,接口需要用到的axios和账号集权的passport都在这里修改(passport是啥待会儿再细说). 和utils同级的就是users.js

为应用增加登录注册功能 ruby on rails

(1)新增gem gem 'devise' (2)添加devise配置文件 /workspace/shop:$ rails generate devise:install User create config/initializers/devise.rb create config/locales/devise.en.yml =============================================================================== Some s

【tcp-ip学习总结】基于udp的多人聊天室,带有登录注册功能

环境;vs2010,vs2013 服务器端 #include<stdio.h> #include<Winsock2.h> #include<stdlib.h> #pragma comment(lib,"Ws2_32.lib") typedef struct { char username[30];//用户名 char password[50];//用户密码 struct sockaddr_in addr;//用户的地址 int isOnlie;//是