【产品设计】移动端表单设计

news2024/12/26 0:05:34

在这里插入图片描述

本文主要是根据项目的表单填写体验差被客户撤下线重新整改,而对此将表单进行了新的用户体验设计的一些构思。

一、现状

传统的PC端空间范围大,能够将表单的所有信息连同温馨提示语等平铺展示出来,但是一下子用户看到这么多内容会给用户带来压力,进而放弃表单的填写, 这也是在PC端表单设计的用户体验很不好的地方。

如今的移动互联网时代,表单的设计思路不同以往PC端,移动端表单设计存在以下难点:

  1. 移动端屏幕空间有限,不可能像PC端一样在表单的设计上将所有的信息都平铺展示出来;
  2. 表单的字段信息比较多,会使得整张表单过长,以致得至少2屏以上的内容来呈现,过多的内容会促使用户放弃填单;
  3. 表单的提示语不够友好,没有给用户创造一个洽意的表单填写环境,用户在表单填写过程中更多的是不知所措;
  4. 移动端的输入困难,由于移动设备空间限制,用户很难看清并及时纠正输入过程中的错误;
  5. 移动选的选择器单行所能承载的字段数量有限,面对超多字段的选择项往往是不足以承载。

二、设计目标

  1. 尽可能让更多用户完成表单的填写,减少跳出率;
  2. 表单的设计要让用户少思考,少操作。

三、设计策略

1. 删除“信息”

由于表单的信息过于,移动端的位置又有限,所以需要删除掉多余的信息,删除信息分两种情况:

(1)删除标题多余字段

客户提交过来的业务表单里面,大部分的标题字段过长,并且啰嗦,例如:投诉表单中的“违法行为的起止时间”标题, 做“删除”调整之后标题可变成“违法时间”,对应的在时间选择框的温馨提示语告知用户:请选择开始/结束时间,即可解决问题。

(2)删除表单里的标题

通过调研之后发现,:客户提交过来的表单中有些标题字段,即使没有也不影响他们帮助用户解决问题,也就意味着这些标题字段 是可以删除的,必要的信息呈现给用户让他们完善即可,不要把非必要的字段硬塞给用户,多一个标题字段就会多一位用户放弃填单。
在这里插入图片描述
在这里插入图片描述

2. 调整排版

旧版本的页面布局是采用从上到下,即标题字段在上输入框在下,这在一定程度上会使得表单的页面内容过长,同时字段标题的长短不一破坏了版面结构。
在这里插入图片描述
新设计的排版是采用从左到右,采用标题在左输入框在右这种布局是基于以下两点考虑:

  1. 由于对标题进行删除操作后,标题基本可控制在4个字段内,若特殊情况操作4个字段,即可自行拓展成两行;
  2. 从左到右的排版在一定程度缩短了表单的长度,并且减少了用户向下滑动的操作次数。

3. 组织“信息”

表单信息平铺出来没有进行组织,会让用户感觉杂乱无章,没有一个清晰的认知,为快速帮用户建立认知体系,需对标题信息进行分块组织,把合适的东西分到相同的组里去。
在这里插入图片描述

4. 隐藏“信息”

提示语的设置是为了让用户顺畅的填写表单,但是提示语过长会分散用 户的注意力,并且不是每一个用户都需要这一层提示语,所以就要将相 应的提示语进行隐藏,用户有需要就自己点击获取,不需要就可以直接忽略,隐藏的展示形式有两种:

  • 图标:将相关的文字释义内容隐藏在图标,点击即可弹窗获取,同 时弹窗的设计采用跟输入框同宽,紧挨着输入框,并且箭头指向图标,使
    得输入框与提示框建立起联系;
  • 文字收缩:点击“详情”二字即可将全部的示例内容展示出来。
    在这里插入图片描述

5. “同理心”提示语

提示语的设置有两种作用:

  • 快速的帮助用户建立认知,并且要通俗易懂;
  • 降低用户的防御心里,让用户感知到填这张表单是安全的,能够放心的去填写。
    在这里插入图片描述

6. 让用户少操作

由于移动端的输入困难,同时为了让用户尽可能地减少操作,通过调研之后发现,可将对应的输入项内容转化成选择项内容,这样的好处不单在于用户层面,对于客户层面来说也能使他们更加精准的定位到问题。

而不是放着一个输入框给用户自由发挥去填写,而 后业务部门还要对用户的输入内容进行分析,中间消耗过多的时间精力。
在这里插入图片描述

7. 让用户有控制感

表单的填写是由流程的,所以就需要让用户做到心中有数,明白自己从哪里来到哪里去,同时通过进度条能清晰的人认知到需要多少步才能完成表单,用户都喜欢控制感而不是被控制,进度条可以降低用户的离开率,在页面的呈现上也会更加直观。
在这里插入图片描述

总结

用户本身就是懒的,何况表单的填写就很繁琐,需要用户多去动手,所以在表单上的设计上应该站在用户的角度去考虑, 学会换位思考,拥有同理心,将繁琐的内容进行简化,使得用户在表单的填写过程中感觉到愉悦。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/875061.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux】创建普通用户以及Linux问题解决

创建普通用户 ❓可以看到我们现在是一个root用户,并不是一个普通用户,我们要如何创建普通用户呢? adduser 你的用户名passwd 你的用户名🔥注意这里passwd设置密码的时候,你输入密码电脑不会显示 删除普通用户 userd…

JpaUtils 工具类

JpaUtils 工具类 JpaUtils 封装了对 jpql , sql ,存储过程等常用的操作方法,并结合前端列表的数据格式, 可以实现少量代码即完成一次查询,并且在业务发生修改时,相比 IDEV7 改动会更少。 JpaUtils …

Python实现竞争性自适应重加权采样法(CARS)进行特征变量选择并构建LightGBM回归模型(LGBMRegressor算法)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 竞争性自适应重加权采样法(competitive adapative reweighted sampling, CARS&…

【Java笔记】对象存储服务MinIO

1 MinIO简介 MinIO基于Apache License v2.0开源协议的对象存储服务,可以做为云存储的解决方案用来保存海量的图片,视频,文档。由于采用Golang实现,服务端可以工作在Windows,Linux, OS X和FreeBSD上。配置简单,基本是复…

Linux服务器上配置HTTP和HTTPS代理

本文将向你分享如何在Linux服务器上配置HTTP和HTTPS代理的方法,解决可能遇到的问题,让你的爬虫项目顺利运行,畅爬互联网! 配置HTTP代理的步骤 1. 了解HTTP代理的类型:常见的有正向代理和反向代理两种类型。根据实际需求…

UE5 实现残影效果

文章目录 前言实现效果示例1示例2示例3示例4实现扩展前言 本文采用虚幻5.2.1版本,对角色生成残影效果进行讲解,以一种简单的、通俗易懂的、高性能的方式来实现此效果。此效果可以在角色使用某一技能时触发,比如使用攻击招式、闪现等等。 实现效果 示例1 在昏暗的环境示例…

反编译微信小程序,可导出uniapp或taro项目

微信小程序反编译(全网通用) 微信小程序反编译 反编译主要分为四个阶段 操作流程 1. node.js安装 2. node安装模块 3. 开始反编译 4. 导入到微信开发者工具既可运行 微信小程序反编译 当碰到不会写的小程序功能时,正好看到隔壁小程序有类似…

蓝牙资讯|苹果Apple Watch可手势操控Mac和Apple TV等设备

根据美国商标和专利局(USPTO)公示的清单,苹果公司近日获得了一项技术专利,概述了未来的 Apple Watch 手表,使用手势等操控 Mac 和 Apple TV 等设备。 该专利描述未来 Apple Watch 可以交互实现编辑图像、绘图、处理文…

Windows系统中使用bat脚本启动git bash 并运行指定命令 - 懒人一键git更新

目标 双击"autoGitPull.bat",自动打开git bash,并cd到项目,逐个git pull,保留git bash窗口展示进度。 脚本 start "" "D:\Program Files\Git\git-bash.exe" -c "echo autoGitPull &&…

【注解使用】使用@Autowired后提示:Field injection is not recommended(Spring团队不推荐使用Field注入)

问题发生场景: 在使用 IDEA 开发 SpringBoot 项目时,在 Controller 类中使用注解 Autowired 注入一个依赖出现了警告提示,查看其他使用该注解的地方同样出现了警告提示。这是怎么回事?由于先去使用了SpringBoot并没有对Spring进行…

Python爬虫之解决浏览器等待与代理隧道问题

作为专业爬虫程序员,我们往往需要应对一些限制性挑战,比如浏览器等待和使用代理隧道。在Python爬虫开发中,这些问题可能会导致我们的爬虫受阻。本文将为你分享解决这些问题的方案,帮助你顺利应对浏览器等待和代理隧道的挑战&#…

MoCo论文精读

《 Momentum Contrast for Unsupervised Visual Representation Learning》 ---- MoCo 什么是对比学习? 对比学习是一种自我监督学习的范式。将未标记的样本相互对比,通过训练模型,使得属于同一分布的样本在嵌入空间中被推向彼此。 怎样知道那些图片类似,那些不类似呢? …

2023年国赛数学建模思路 - 案例:异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…

通过Python爬虫提升网站搜索排名

目录 怎么使用Python爬虫提升排名 1. 抓取竞争对手数据: 2. 关键词研究: 3. 网页内容优化: 4. 内部链接建设: 5. 外部链接建设: 6. 监测和调整: 需要注意哪些方面 1. 合法性和道德性: …

【ES】笔记-扩展运算符与运算

总结 扩展运算符由三个点 (…) 表示。扩展运算符将可迭代对象(如数组、集合和映射)的元素解包到列表中。 其余参数也用三个点 (…) 表示。但是,它将函数的剩余参数打包到一个数组中。扩展运算符可用于克隆可迭代对象或将可迭代对象合并为一个…

大数据——协同过滤推荐算法:矩阵分解

矩阵分解的方法也分为很多种:SVD、LFM、BiasSVD和SVD。 Traditional SVD 一般SVD矩阵分解指的是SVD奇异值分解,将矩阵分解成三个相乘矩阵,中间矩阵就是奇异值矩阵。SVD分解的前提是矩阵是稠密的,现实场景中数据都是稀疏的&#x…

(7)(7.4) 集结航点

文章目录 7.4.1 概述 7.4.2 设置集结航点 7.4.3 飞行示例 7.4.4 附录 7.4.1 概述 通常情况下,当固定翼或旋翼飞机进入"返回发射"(Return to Launch (RTL))模式(通常由自动驾驶仪失控保护触发)(failsafe)时,默认行为…

探讨uniapp的网络通信问题

uni-app 中有很多原生的 API,其中我们经常会用到的肯定有:uni.request(OBJECT) method 有效值 注意:method有效值必须大写,每个平台支持的method有效值不同,详细见下表。 success 返回参数说明 data 数据说明 最终…

《Java极简设计模式》第03章:工厂方法模式(FactoryMethod)

作者:冰河 星球:http://m6z.cn/6aeFbs 博客:https://binghe.gitcode.host 文章汇总:https://binghe.gitcode.host/md/all/all.html 源码地址:https://github.com/binghe001/java-simple-design-patterns/tree/master/j…

【量化课程】08_1.机器学习量化策略基础实战

文章目录 1. 常用机器学习模型1.1 回归模型1.2 分类模型1.2.1 SVC介绍1.2.2 SVC在量化策略中的应用 2. 机器学习量化策略实现的基本步骤3. 策略实现 1. 常用机器学习模型 1.1 回归模型 线性回归多层感知器回归自适应提升树回归随机森林回归 1.2 分类模型 线性分类支持向量机…