AICon上海|与字节、阿里、腾讯等企业共同探索Agent 时代的落地应用 了解详情
写点什么

表单设计: 一页只做一件事(二)

  • 2019-12-30
  • 本文字数:1624 字

    阅读完需:约 5 分钟

表单设计:一页只做一件事(二)

好在哪里?


虽然这种模式常常能结出硕果(其实就是指订单和转化率了),我们最好还是要了解它背后的原理。


  1. 减少认知负荷


正如 Ryan Holiday 在《The Obstacle Is The Way》中所说:


回想一下你第一次看到复杂代数式时的情景。这整个就是一团混乱的未知符号。但是当你将它分解,独立成各个部分,答案便水落石出。


一步步分解等式,就能轻松解决问题。


用户在填写表单时也是一样的道理,或者其他任何重要的事情都一样。如果屏幕上元素减少,只有唯一的选择,阻碍就降到最低。因此,用户会专注于完成任务。


  1. 处理错误更容易


当用户填写小型表单时,错误可以很容易被发觉,并尽早呈现出来。如果只有一个错误要修正,那就很容易,能降低用户放弃的可能性。



即使有多个错误,Kidly 的地址填写表单也很容易更正。


  1. 页面加载更快


如果页面的设计很简单,加载就会更快。更快的加载速度能降低用户离开的风险,为我们的服务建立起信任。


  1. 易于追踪行为


一页上内容越多,就越难以了解用户因为什么离开。不要误会我的意思:页面数据分析不能左右设计,但这是个很不错的副产品。


  1. 易于追踪过程和返回上一步


如果用户需要频繁提交信息,我们可以把它们以更细的颗粒来保存。举个例子,如果用户中途退出,我们还可以发送邮件,鼓励他们完成订单。


  1. 滚动操作减少,甚至被消灭


不要误会我的意思:滚动不是什么大问题——用户的期望中,网页就是这么用的。但如果页面短小,用户就没必要滚动了。主操作项就更容易出现在屏幕视野内,能强调它的重要性,易于任务完成。


  1. 容易产生分支


有时候,我们需要根据之前的答案,给用户提供一条不同的路径。举个简单的例子,两个联动的下拉菜单,用户在第一个菜单里的选择,会影响第二个菜单中的内容。


一页只做一件事可以轻松处理这种情况:用户作出选择并提交,服务器来决定用户接下来看到什么——天然具有简单和包容的特点。


我们也可以用 JavaScript。不过无论是构建还是确保界面的可用性,都需要更高的成本。如果 JavaScript 出错,用户的体验也就被破坏了。而且,根据所有这些排列组合选项来加载页面,会显著加重页面负担。


或者,我们可以使用 AJAX,但这并没有避免渲染新页面(或者部分)。更关键的是,它并没有减轻服务端的数据往返压力。


还不止这些。我们需要发送更多代码量,并且发起 AJAX 请求,还要处理错误、显示加载指示器。这又让页面加载变慢了。


自定义加载指示器是有问题的,因为它们并不准确,不像浏览器的原生加载进度。用户也不熟悉它们——相对于整个网站来说,它们是特殊的存在。无论如何,相似性是用户体验的惯例,除非真有必要,否则不要打破它。


而且,页面上有两个动态更新的联动输入项,这会需要用户按照一定顺序来操作。我们也可以通过可用/禁用和显示/隐藏来控制这些输入项,但这样也更加复杂。


最后,用户的某些更改,可能会导致随后的元素消失或者变化,这也让人迷惑。


  1. 对使用屏幕阅读器的用户更友好


如果页面上内容减少,屏幕阅读器就不必长途跋涉穿过许多多余的次要信息。用户可以直接前往第一个标题,然后迅速开始操作表单。


  1. 易于更改细节


想象一下某人正要确认订单。关键时刻,他发现支付信息里有一处错误。此时回到专用页面比找到页面当中的某个部分更容易。



用户点击“编辑”,会前往支付信息页面,里面有专用的标题和相关的表单项目。


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/7yIAqH7nFhPHMtfmi_VeaQ


深陷一个长页面中是会令人迷失方向。记住,用户点击链接代表他们要执行特定的操作——页面上的其他东西都是干扰信息。


长页面还可能会加重工作量。比如说,如果想要在一个页面中展开和收起面板,你就需要更多额外的逻辑思考。


一页只做一件事,这些问题都得到了解决。


  1. 用户对数据更有掌控力


用户不会只加载一半的页面。要么全部,要么没有。如果他们需要更多信息,就会点击链接,他们有选择能力。只要每一步都更接近目标,用户并不介意点击。


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/7yIAqH7nFhPHMtfmi_VeaQ


2019-12-30 18:02700

评论

发布
暂无评论
发现更多内容

详解低延时高音质:回声消除与降噪篇

声网

回声消除 音频体验 RTE技术详解

当一名科技女性,决定不再做月亮

脑极体

GrowingIO Design 图标库:从原理到实现

GrowingIO技术专栏

SVG 图标库 Sprites Icon Font GrowingIO Design

浏览器存储之 localStorage 和 cookie

devpoint

Cookie LocalStorage sessionStorage 11月日更

鸿蒙的绿野仙踪

脑极体

Alibaba Druid 源码阅读(三) 数据库连接池初始化探索

数据库

C++ 动态新闻推送 第34期

很水

四大研究成果入选 百度安全在Black Hat Europe 2021再创历史

百度安全

应用安全 百度安全 Black Hat 漏洞利用 恶意软件

【高并发】不得不说的线程池与ThreadPoolExecutor类浅析

冰河

Java 并发编程 多线程 高并发 异步编程

【Promise 源码学习】第五篇 - 实现 Promise 对异步操作的支持

Brave

源码 Promise 11月日更

数据库自增ID用完了会怎样

喵叔

11月日更

Alibaba Druid 源码阅读(一) 数据库连接池初步

数据库

Alibaba Druid 源码阅读(二) 数据库连接池实现初步探索

数据库

C++ 动态新闻推送 第37期

很水

c++

无AI的五子棋Vue项目

空城机

JavaScript typescript 大前端 11月日更

阿里灵杰产品全面拥抱云原生,双11优惠让企业体会上云便利

阿里云大数据AI技术

大数据 AI 云原生 阿里灵杰

sonar 使用常见问题总结

liuzhen007

11月日更

Alibaba Druid 源码阅读(四) 数据库连接池中连接获取探索

数据库

Alibaba Druid 源码阅读(五)数据库连接池 连接关闭探索

数据库

🏆【Alibaba中间件技术系列】「RocketMQ技术专题」帮你梳理RocketMQ或Kafka的选择理由以及二者PK

码界西柚

kafka RocketMQ 消息队列 11月日更

Go语言,面试官问我go逃逸场景有哪些,我???

微客鸟窝

Go 语言 11月日更

Prometheus HTTP API 查询(六)Prometheus Server 状态和 TSDB 状态

耳东@Erdong

Prometheus PromQL HTTP API 11月日更

接口调用的链路

卢卡多多

接口 11月日更

研发提效:通过设计稿自动生成前端代码。

石云升

大前端 自动生成 11月日更 研发提效

C++ 动态新闻推送 第33期

很水

12 K8S之应用容器及Pod资源

穿过生命散发芬芳

k8s 11月日更

C++ 动态新闻推送 第35期

很水

互联网大厂考点(阿里+百度+腾讯+字节跳动+美团+京东)

Java高级开发

Java 程序员 架构 面试 大厂

C++ 动态新闻推送 第36期

很水

c++

模块三-学生管理系统架构设计文档

迪马

区块链之共识算法系列——PoW(二)

Regan Yue

区块链 11月日更 趣讲区块链

表单设计:一页只做一件事(二)_语言 & 开发_Think体验设计_InfoQ精选文章