限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

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

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

    阅读完需:约 3 分钟

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

[国外设计第 172 期]


2008 年的时候,我在 Boots.com 工作。他们想做一个单页的结账页面,运用那个年代最新潮的技术,包括手风琴组件、AJAX 和客户端验证。


每个步骤(寄送地址、寄送选项、信用卡详细信息)都收在一个手风琴面板中。而每个面板都通过 AJAX 提交。提交成功后,这个面板就会收起,并且通过滑动动画展开下一个面板。


看起来就像这样:



Boots 的单页结账页面,使用了手风琴面板展现每一个步骤。


用户千辛万苦才完成了下单过程。错误难以更正,因为上下滚动并不方便。手风琴面板让人非常痛苦和分心。不可避免地,客户要求我们作出改变。


我们进行了改版,让每个面板单独成为一个页面,也就不需要手风琴和 AJAX 了。不过,我们还是保留了客户端验证,防止不必要的服务器请求。


看起来就像这样:



Boots 的结账页面:每一步都是单独的一个页面。


这个版本的转化率好多了。虽然我不记得具体数字了,我知道客户比较满意。


6 年后(2014 年),我在 Just Eat 工作,发生了同样的事情。我们设计了一个单页结账流程,其中每个部分都有独立页面。这一次,我记下了相关数据。


结果是每年能增加 2 百万订单。要清楚,这是订单量,不是利润。这个数据是基于新版本至少一周后,结账转化率提升的比例得出的。这部分转化成了订单,数量激增 52 倍。


这是我们的移动端优先的设计:



Just Eat 的结账分为多个页面。我们还在设计中进一步简化了支付页面:用户先选择“现金支付”或“银行卡支付”,然后才会转到相关的页面。可惜我们并没有对这项优化进行测试。


两年后(2016 年),GDS 的 Robin Whittleton 告诉我,把每一步分为单独页面,是一种独立的设计模式,叫做“一页只做一件事”。除了它产生的数据效果,这种模式的背后还有充分的合理性,这部分我们很快就会讲到。


不过在这之前,我们来仔细看看这种模式到底是什么。


“一页只做一件事”到底是什么意思?


一页只做一件事,并不是一定要在一个页面上只展示单一的元素或组件(虽然也可以这么做)。比如说,很可能仍然会保留页头和页尾。


类似的,也不是说每个页面上只能有一个输入框(当然,这么做也是可以的)。


这种模式是指把复杂的流程分解成多个小碎片,把每个小碎片独立一页展示。


比如说,与其把地址输入表单放在寄送选项和支付表单页面,倒不如把地址输入放在一个专用页面。


地址输入表单有许多输入框,但它对于用户来说,实际上是个单一的、独立的问题。在专用页面里回答这个问题是有道理的。


我们看看这种模式到底好在哪里。


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


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


2019-12-30 18:03641

评论

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

Netty学习之旅------图说Netty线程模型,java项目面试难点

Java 程序员 后端

Netty案例介绍-群聊案例实现,java架构师教程百度云

Java 程序员 后端

Oracle最新的Sql笔试题及答案,Java面试真题解析火爆全网

Java 程序员 后端

MyCat:第四章:Mycat中的概念,linux内核编译教程

Java 程序员 后端

MySQL 数据库开发入门(四),java高薪训练营百度网盘

Java 程序员 后端

MySQL最全整理(面试题+笔记,华为算法工程师面试经历汇总

Java 程序员 后端

Navicat for MySQL 执行sql文件过程分析(导入数据),中软国际Java笔试题

Java 程序员 后端

MySQL 千万数据量深分页优化,mybatis从入门到精通pdf

Java 程序员 后端

OpenFaaS实战之二:函数入门,mysql集群数据同步原理

Java 程序员 后端

MySQL入门篇,java三层架构登录功能实现

Java 程序员 后端

MySQL数据库--几种数据迁移的方法详解都在这了!看完必懂

Java 程序员 后端

MySql数据引擎简介与选择方法,和字节跳动大佬的技术面谈

Java 程序员 后端

Netty相关面试题汇总,java从入门到精通第五版电子书下载微盘

Java 程序员 后端

MySQL 事务隔离级别,java面试常问的设计模式

Java 程序员 后端

Netty中序列化框架MessagePack的简单实现,java技术面试完了复试

Java 程序员 后端

Netty入门教程——认识Netty,今年最新整理的《高频Java面试题集合》

Java 程序员 后端

Nginx服务不行了怎么办,网商银行java面试

Java 程序员 后端

OpenYurt v0,linuxshell学习

Java 程序员 后端

Peter-Java 8中的Lambda表达式,java领域的相关技术领域

Java 程序员 后端

MyBatis详解:spring和mybatis整合,linux视频格式转换

Java 程序员 后端

MyCat教程【分库分表】,java教程pdf百度网盘

Java 程序员 后端

MySQL:第一次看到有人把MYSQL主从复制讲解的这么清楚,mysql教程菜鸟

Java 程序员 后端

Netty进阶:手把手教你如何编写一个NIO服务端(1),Java笔试常见编程题

Java 程序员 后端

new-Object()到底占用几个字节,看完这篇彻底明白了!,springboot微服务架构书籍

Java 程序员 后端

Nginx配置反向代理和负载均衡,疯狂java讲义pdf百度云

Java 程序员 后端

RabbitMQ不讲武德,发个消息也这么多花招,nginx实现负载均衡原理

Java 程序员 后端

MySQL 5,java架构师成长直通车

Java 程序员 后端

Nginx + Tomcat 搭建负载均衡,大牛带你直击优秀开源框架灵魂

Java 程序员 后端

P8级大佬整理在Github上45K+star手册,吃透消化,java算法面试题及答案pdf

Java 程序员 后端

Netty权威指南:I-O-多路复用技术,java技术点总结

Java 程序员 后端

Netty进阶:手把手教你如何编写一个NIO服务端,java集合容器面试

Java 程序员 后端

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