• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 如何高效完成表单输入?来看这个实战案例!

如何高效完成表单输入?来看这个实战案例!

作者:58UXD 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含实战案例,改版设计,用户体验,经验分享,表单设计等相关知识,58UXD希望在学习及工作中可以帮助到您

58UXD:表单是收集用户信息的方式。如果你的产品需要收集大量用户信息来完成为其提供的服务,那么在用户进行信息输入的过程中一定要考虑到输入成本和输入效率对用户体验的影响。

针对复杂表单信息多、填写慢、体验差等问题,我们以「58简历发布」与「赶集房产发布」为例,进行表单发布流程的再设计。主要从以下六个方面进行体验的全面升级:

  • 聚焦核心信息,减少认知成本
  • 联动式键盘,提高输入效率
  • 实时反馈,传递规则信息
  • 合理规划层级,减少输入压力
  • 从实际场景出发,抓用户核心诉求点
  • 专注独立任务细分

一、了解在前

表单具有三种状态,默认态即用户输入信息之前的状态,该状态告知用户需要填写什么类型的信息;焦点态即用户正在输入信息时的状态,该状态使用户聚焦输入信息时,能够更好与表单交互并完成信息填写;反馈态即用户填写信息后的校验状态,该状态能够对输入信息进行实时判断。

二、聚焦核心信息

在表单处于默认态时,通常会用标签提示用户填写什么类型的信息,用占位符作为额外提示告知用户如何填写信息等规则,当用户开始对信息进行输入时,标签不变,占位符文本消失。

在复杂表单展示中,占位符的存在会分散用户对核心信息的阅读,消失会影响用户对输入规则的关注。

如何让用户在不同的状态下聚焦最重要的信息,减少认知成本成为设计的关键点。

△ 不同状态下聚焦核心信息 图片来源:58简历发布

信息输入前聚焦标签内容,输入中聚焦规则信息,输入后聚焦结果内容。让用户在不同状态下,聚焦核心信息,减少认知成本,提高输入效率。

三、联动式键盘

在用户进行表单信息输入时,怎样跟输入控件亲密无间的合作,从而降低用户的输入成本,提高用户的输入体验?

△ 控件反复调入跳出 图片来源:赶集旧版房屋发布

旧版表单进行信息输入时,每个字段的输入过程均为「点击选择输入 – 弹出对应输入控件 – 信息输入 – 收起控件」,完成表单输入的整个过程中,对应的输入控件在频繁交叉的弹入弹出,用户也在频繁的选择要输入字段。如何从根本上改变用户对输入控件的使用效率?

△?联动键盘输入更高效 图片来源:赶集房屋发布

为了避免让用户频繁的跳入跳出相同类型的输入项,首先整合表单的信息字段,将同类型的字段进行合并,同时结合输入控件,设计联动式组件,让用户在表单输入时更加高效。

在58简历发布改版项目中,我们使用了同样的设计思路,改变用户的输入方式,提高用户输入效率。

△?联动式键盘输入更高效 图片来源:58创建简历

通过提高用户对工具化产品的使用效率,避免了让用户频繁跳入跳出相同类型的填写项,让输入更高效。

四、实时反馈

无论是规则引导还是错误提示,都要在用户输入时实时进行反馈与提醒,合理有序的向用户传递规则信息,可以有效减少表单页面中无效信息的同时,使信息传递更加具有通用性和规范性。

在联动式键盘中增加提示信息,帮助用户在输入过程中及时了解输入规则。

1. 规则信息提示

在用户输入时不再消失输入规则,而将提示文案与联动式键盘相结合,辅助用户正确完成信息填写。

△?左图来源赶集 – 房屋发布;右图来源58 – 创建简历

2. 实时反馈

在用户输入过程中,错误是不可避免的。如何将错误以高度可见的形式实时告知用户,降低用户错误输入中带来的挫败感是尤其重要的。

△?左图来源赶集 – 房屋发布;右图来源58 – 创建简历

△?信息填写实时反馈,来源赶集 – 房屋发布

3. 对话式引导

Justin Mifsud 曾提出「表单应该像一个对话,而不是审讯」。良好的对话式表单,能够提高用户信任度和转化率。采用亲和、生动、容易理解的语言来引导、告知和激励用户完成对应的任务,文案往往在细节之处起到重要作用。

合理的规则提示、实时的错误反馈,友好的对话引导,会降低用户出错带来的挫败感,提升正确率,提高用户信任度和转化率。

五、合理的规划层级

1. 自动填写/匹配预设值, 减少用户输入

表单的自动填写或自动匹配功能,能够帮助用户降低输入负荷、提升填写效率。

在对表单设计时,以下四种情况,可自动填写或匹配表单信息:

  • 将用户在平台中已输入的相同信息自动带入表单;
  • 将通过移动设备各种传感器获取准确的信息自动带入表单,如用户当前定位可通过移动手机的 GPS 获取;
  • 将内容相关联的信息通过匹配分析自动带入表单,如用户输入身份证号后,可根据第7-14位获取出生日期、第17位数字获取用户性别,为用户自动将匹配信息带入表单。

△?自动匹配 减少用户输入 图片来源:赶集房屋发布

赶集房产发布,将旧版的「选择区域」与「小区名称」调换位置,用户先输入小区名称,后台数据即可通过小区定位,自动匹配小区所在区域。通过此设计用户即可减少一项表单的填写,提升填写效率。

2. 按步骤分解复杂表单,拆分任务

表单是收集用户信息的一种方式,并不是每个表单都是简短的,多数情况下我们需要用户填写大量繁琐的信息。对于这样复杂的表单,在设计上合理分组、引导用户分步完成表单的填写是很重要,不但可以降低用户对冗长表单的填写压力,同时能够缓解对复杂、较长表单的恐惧感。

△?合理分解复杂表单 拆分任务 图片来源:58简历发布

58简历发布,将繁杂的填写信息进行合理划分、重新定义新表单的页面规则。

整个表单填写分为三步:

  • 用户基本信息填写:姓名、性别等;
  • 求职意向填写:期望职位、薪资、求职区域;
  • 完善简历:基础简历创建成功后,引导用户填写选填信息,使简历内容更加丰富,当然此时用户也可直接发布基础简历。

对用户来说,分步填写信息不仅缓解了对复杂表单的恐惧感,而且能够对填写的内容更聚焦。

3. 运用动效提示信息层级关系, 避免用户迷失

合理的运用动效,能够通过覆盖、滑出、推移等动效设计帮助用户构建界面空间与信息层级关系,避免用户在一级页面与二级页面的表单切换中迷失,同时统一的转场效果能够让用户在复杂的操作中,抓住最核心的表单页面。

六、从实际场景出发

无论是项目迭代还是一个新项目的开始,收集到的用户诉求点往往是零散的、逻辑性不强的,所以我们需要在这些离散的诉求点中抓住核心诉求,梳理实际使用场景并分析问题。

△?抓住核心诉求 缩短操作路径 图片来源:58简历发布

58简历发布的头像选择与赶集房屋发布的图片上传功能,旧版是通过让用户先选择类型,再选择内容,该逻辑结构并无问题,但经过用户调研,我们发现多数用户在此操作时会直接添加头像或照片。根据调研结果反推旧版设计的合理性,该设计增加了用户的选择和操作成本。改版后将内容直接用一个页面进行组合,满足大多数用户的核心诉求,同时为少数用户提供入口。

打破逻辑思维的桎梏,从用户最直接的诉求出发,缩短用户使用路径和无缘由的选择成本。

七、专注独立的任务细分

从扁平的任务平铺到更加沉浸独立的任务细分,分支流程,在一个控件内快速完成整个流程,减少整体表单页面信息压力的同时,也让单个任务的完成更加专注和聚焦。

△?聚焦独立任务 图片来源:58简历发布

58App 简历创建页面,需要插入认证手机号的任务,而这一任务是与建立简历本身无关的,会干扰主流程的进行;优化后,把认证相关信息分割独立,用户进入新场景执行新任务,使单个任务更聚焦。

总结

通过明确的信息提示、高效的输入方式、实时的错误反馈、合理的信息层级与任务拆分,让整个表单的输入流程更加易懂与流畅,操作体验更加符合移动端用

您可能想查找下面的文章:

  • 腾讯实战案例!设计师如何从零开始做一款H5?
  • 高手实战!腾讯公益设计改版项目总结
  • 滴滴新推出的青桔单车,背后的设计过程是怎样的?
  • 上亿人使用的起点读书APP,背后的改版设计实录!
  • 如何高效完成表单输入?来看这个实战案例!
  • 设计冲刺法:5天搞定2018俄罗斯世界杯主题设计
  • 实战案例!网易考拉品牌升级全过程实录
  • 看似简单的喜马拉雅FM主播等级体系,是如何做改版设计的?
  • 实例解析!如何成为有交互和视觉思维的UI 设计师?
  • 网易实战案例:教你五步打造APP节日主题设计

相关文章

  • 2018-08-23从交互角度,分析为什么我沉迷抖音,却不想刷微视?
  • 2017-08-06条件注释判断浏览器(ie系列)
  • 2018-08-23高手课堂!「按钮系列」之按钮位置与用户体验的关系
  • 2018-08-23「这个控件叫什么」系列之虚拟键盘/软键盘/Soft Keyboard
  • 2018-08-23那些很熟悉但又叫不出名字的设计法则:希克定律
  • 2018-08-23在谷歌当了半年设计师,我学到这些经验
  • 2018-08-23学会这5个法则,轻松掌握格式塔理论!
  • 2018-08-2336氪产品总监:求职应该怎么问答+面试官是如何打分的
  • 2018-08-23这款给医生的专业APP,设计上有着怎样不同的要求?
  • 2018-08-23一组图标做出9个风格,实战案例让你也能学会!

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 为什么蓝色会成为UI设计中最常用的色彩?
    • 你的网站适合IE8访问吗?
    • 学会这20招PS操作技巧,提高80%的工作效率
    • 这些年,让人眼前一亮的网红文案
    • 构图不完美?iPhone 摄影人物类冠军教你用正确的姿势裁图!
    • 进阶好文!让人舒服的的交互设计稿该有的5个特点
    • 设计师该如何维权?看这篇超详细的流程总结!
    • 从建筑到网页,粗野主义风格确实有着它独特的魅力
    • 超全面的导航设计基础知识总结(一)
    • web前端网页开发一般过程简单认识

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有