转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

原文出处:https://blog.bitsrc.io/8-tips-for-an-awesome-signup-form-30300816282c

大多数人并不喜欢填表,我想这应该是不争的事实,但为什么呢?

因为填表单时你就像考试一样感到紧张和焦虑,对填写的内容谨小慎微,慎之又慎。如果你在花时间填完了表单提交后后得到了令人沮丧的反馈,你们可能会产生强烈的受挫感更有甚者会对这个表单产生厌恶感。

然而,在你的系统上收集用户的数据对于业务来说是至关重要的。而对于新用户来说,注册过程是收集用户信息整个流程中必不可少的步骤。作为你系统入门的第一步,我们需要确保这个过程尽可能的简单且易用。因为如果用户在这个过程中的任何一步中遇到问题,都有可能会造成潜在用户的流失。所以为用户提供一个友好的注册表单是非常重要的。

那么,如何优化你注册表单的用户体验从而提高用户的注册率呢?关于这块,有8个方面是可以去提升的。

1. 告诉用户注册后有什么好处

向用户提供具有吸引力的激励机制是提升用户注册比例最有效的途径之一。因为让用户了解到注册后能得到什么服务,或者得到什么有价值的信息,对用户而言是非常有说服力的,例如这些信息:给予优惠、折扣、预购权、新品信息等。

2. 让表单尽量清爽

用户很忙,不想在注册上花费太多时间。因此,通过减少用户填写项目的数量来保持表单清爽、精简,降低用户的注册门槛,是提高用户的注册率的另一种方式。

一般来说,我们只需要把所有非必填字段全部删除只显示必填字段就可以保持表单的清爽了。但很显然大部分情况下我们都不能这么做,所以如果仍然需要展示你的可选字段,请限制可选字段的数量,并确保你的必填字段清楚的向用户标记出来。

另一种让注册表单清爽的方法是将注册表单拆分成为多个步骤。每个栏目都像一个问题,因为可以显示当前的填写进度,这样他们可以知道自己已经完成了多少问题,这种方式增强了用户的信心,缓解了用户填写表单时的焦虑感,让用户可以毫无压力的直到完成注册。

3. 从易到难

不要给用户压力,表单前面尽可能的展示些最简单的问题吧。这就好比考试的第一个问题应该是全卷中最容易的一样,让用户在开始时毫不费力地填几个字段,然后才能激励他们有信心完成剩下的字段。

4.清楚地标记字段

字段前的标签告诉用户他们需要填(选)些什么,所以标签必须简明扼要。它们可以是一个句子、一个单词或一个图标,但无论它们是什么,请一定要确保它们的风格是一致的,以保护用户的阅读习惯及保持表单一致的可读性。

5.通过placeholder提供提示

placeholder是文本框的一个属性,合理使用它可以帮助用户输入符合格式的正确内容同时也可以用作字段标签。以下是两种用法:

6. 用微说明进一步解释字段

对表单中的同一问题每个人可能都会有自己不同的理解。

例如:

“名称”字段。是指用户名还是昵称?

“公司名”字段。是指我工作的公司还是我拥有的公司?

所以加上缩说明进一步进行解释,可以避免用户误解,统一大家的理解使其更加人性化提升填写的准确度。

有时,当用户被要求提供个人信息时,他们会感到不安全。如果通过微说明告诉用户询问问题的原因,可以减少用户的担忧,建立起他们对你的信任。例如:

如果用户在输入数据时不知道你的要求是什么,在他们提交的答案不正确的情况下用户就会收到系统的错误信息,一般这种出错信息往往对用户是负面的,因为这样的受挫感,就很有可能流失掉用户。但这种情况本应是可以被避免的。

当对字段有特定要求时,通过微说明来提示用户该字段的填写要求是避免用户出错的好办法。例如:

7. 实时的字段数据验证

另一种防止错误的方法是实时数据验证。这是一种实时反馈机制,适用于要求相对复杂的使用场景。

因为用户一般并不想一次又一次地提交数据去尝试用户名是不是被占用、密码是不是不符合标准等情况。用户希望填写后最好立即知道结果,如果不符合标准,他们可以再次尝试。而通过频繁地提交数据去试错,是一个不好的用户体验,这不仅挑战了他们的耐心也无形中流失了用户。

实时数据验证可以实现两个目标:

  • 当用户输入合格的数据时,它会告诉用户填写的没问题。正向的反馈,增强了用户的信心。
  • 当用户输入不合格的数据时,它会告诉用户错误的原因以及如何更正。

如下图:

8. 错误验证

错误验证是整个注册过程的最后一步。这就像审阅试卷,通过错误消息通知用户错误在哪里以及如何更正。一次显示所有错误消息,以便用户可以一次修复它们。如下图:

结论:

我们可能无法改变人们不喜欢填写表单的事实,但我们可以尽最大努力改善注册表单的用户体验。对用户友好使用体验提供了充分的互动和反馈,减少了用户的焦虑感,并和用户建立了信任。我想,以上列出的8个方面虽然不是全部,但应该是可以提升一部分的用户体验,并为你有效提升用户注册率。

怎样使我们的用户不再抵触填写Form表单?的更多相关文章

  1. Django--分页器(paginator)、Django的用户认证、Django的FORM表单

    分页器(paginator) >>> from django.core.paginator import Paginator >>> objects = ['joh ...

  2. WTF Forms – 使用 CSS 实现用户体验更好的表单

    WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...

  3. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  4. 简易用户管理系统-前端实现(表单&提交请求&button$基础)

    laravel框架编写简易用户管理系统,前端Layui框架. 1.动态生成列表项 实现效果 PHP后台传入用户对象($users). 前端页面接收数据传入table. 逻辑就是在生成表格时,遍历传来的 ...

  5. 用户登录记住用户名导致表单自动填充bug解决方法

    最近做项目出现了一个极其讨厌的bug:在用户登录网站时,浏览器会自动提示是否记住密码,当选择记住密码时,正常浏览网页,会发现有那么几个input输入框会自动填充用户名,非常讨厌, 于是就觉得挺简单的一 ...

  6. php 填写pdf 表单

    最近接到新的任务,要求把pdf的文档,编辑后发邮件 首先pdf表单提交,需要用到这个东西pdftk,GitHub地址:https://github.com/mikehaertl/php-pdftk 首 ...

  7. sharepoint 2013基于AD的Form表单登录(三)——选择用户时,屏蔽掉AD。

    //来源:http://www.cnblogs.com/lrforever/p/3695820.html 隐藏AD人员选择,$ad.IsVisible设置为true,则显示出AD里用户 $cpm = ...

  8. form表单,登录用户,密码,按钮,提交、重置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于解决form表单记录上次保存填写记录清空

    传进来的是一个HTML的Table的ID. function doReset(tableId){ var tbl_content = document.getElementById(tableId); ...

随机推荐

  1. oracle 用IN来替换OR

    下面的查询可以被更有效率的语句替换: 低效: SELECT…. FROM LOCATION WHERE LOC_ID = 10 OR     LOC_ID = 20 OR     LOC_ID = 3 ...

  2. clear简单的例子

    非常实用,非常简单的例子,结果都在图片里 <html> <head> <style> .keepbj { width:800px; height: 300px; b ...

  3. jar包运行

    配置mainClass:            <plugin>                <groupId>org.apache.maven.plugins</gr ...

  4. Python--day69--ORM多对多查询

    ManyToManyField class RelatedManager "关联管理器"是在一对多或者多对多的关联上下文中使用的管理器. 它存在于下面两种情况: 外键关系的反向查询 ...

  5. Codeforces Round #340 (Div. 2) B. Chocolate

    题意:一段01串 分割成段 每段只能有一个1 问一段串有多少种分割方式 思路:两个1之间有一个0就有两种分割方式,然后根据分步乘法原理来做. (不过这里有一组0 1 0这种数据的话就不好直接处理,所以 ...

  6. [转]Java Web工程目录结构

    说明 介绍java web 工程的基本结构目录.记录java web 工程结构的学习. Java web 结构 java web严格来说分为两类工程结构:一个是工程编译目录结构,一个是工程发布目录结构 ...

  7. P1104 最大公约数和最小公倍数问题

    题目描述 输入2个正整数 \(x0, y0 (2 \le x0 \lt 100000, 2 \le y0 \le 1000000)\) ,求出满足下列条件的 P,Q 的个数. 条件: P,Q是正整数 ...

  8. vue-lazyload: 想弃坑,但没有找到合适的替代品

    vue-lazyload,相信在vue项目中大家都有用到过它,同时也遇到过大大小小的坑.笔者也遇到过这样一个bug,在一个图片列表页面中,总有一定的概率图片的状态为load,导致图片一直加载中...这 ...

  9. easyui—element-ui框架套用(表格宽度自适应)

    外层使用easyui框架中window组件,便于使用最大化功能:内部表格使用element-ui在的el-table,el-table列宽须设置为最小宽度才能在最大化窗口时列表中列宽自适应window ...

  10. 【js】React-Native 初始化时报错

    一.按照官网的步骤一步一步的操作,到最后  react-native init AwesomeProject  时就是报错 报错信息如下图 然后我下载了这个模块  npm install prompt ...