Web表单设计:表单结构

作者:zongbo.yuzb 来源:alibaba 时间:2011-04-22 12:32:00 

你是否曾为表单设计感到过沮丧或不知所措呢?接下来三篇文章,希望能彻底改变你的看法,真正爱上Web表单设计。首先感谢Luke Wroblewski的帮助,让我有机会细心品味设计表单的乐趣。总体来说,Web表单主宰着结算、注册和数据输入。每天eBay、Taobao上的大量物品主要通过出售物品(Sell Your Item)表单售出;MySpace、Facebook等超过几亿的用户都是通过Web表单加入网站社区的;YouTube、Youku通过上传视频(Upload Your Video)表单收集了大量视频。这一切都给我们创造了很多接触Web表单的机会,Web表单常常是漫长旅途的最后一步,也是最重要的一步。

你会设计表单吗?

以上为Yahoo的注册表单,我们可以大体观察出三个主体元素:标题、数据、动作。它们是组成表单的基本元素,过多的修饰表单或过多无用信息会给用户带来更多的思考与厌恶。有时用户会觉得表单很讨厌,想做的是投票、申请工作、在网上买书、加入小组或从近期购物中拿到折扣等,但表单却给用户带来了麻烦,妨碍了他们。

大多数表单是“由内而外”(Inside Out)而不是“由外而内”(Outside In)设计出来的。举个例子:如果谁想成为网站的会员,网站就会跳出表单要求用户提供用户名,密码,电子邮箱等。这就是“由内而外”的设计,多数用户不会认为享受网站服务与填写讨厌的表单有什么必然关系。同时,“由外而内”的设计意味着以组织或者网站外部人的角度来看待事务。这时候项目成员需要以用户的视角来讨论表单的设计,目标是让用户轻松地完成填写。让表单以某种隐形平衡方式存在,但又能保证系统和用户都获得想要的东西。

在电子商务、社交互动、生产力网站里,我们发现表单阻碍着用户需求和商业目标,表现为:

  • 人们从电子商务网站购买需要的商品,而结算表单阻碍着交易双方。

  • 人们加入社交网站与朋友聊天或分享内容,从增加用户基数与活跃度方面说,阻碍双方的是注册表单和联系表单。

  • 人们希望基于互联网的生产力工具,创造高效协同工作,当公司要增加网站内容,增加了用户的时间,表单再次阻碍了两者。

Web表单设计在支付和注册环节,会起到至关重要的中介作用。2004年人机交互(Computer Human Interaction, CHI)大会有篇论文题目为“创造用户体验商业案例的过程”,作者是eBay用户体验和设计团队。他们搜集可用性数据、客户支持纪录、网站日志和网络惯例,提出表单重新设计的建议。当时这个项目对eBay注册表单产品线产生了积极的影响,并成为评估和资助设计项目的范本。

标签:表单,设计,web
0
投稿

猜你喜欢

  • python实现字符串和数字拼接

    2023-05-29 07:05:29
  • MySQL中DATE_FORMAT()函数的具体使用

    2024-01-16 14:03:49
  • 用 python 进行微信好友信息分析

    2022-03-29 15:52:44
  • Golang template 包基本原理分析

    2024-04-25 15:18:32
  • PHP实现批量生成App各种尺寸Logo

    2023-07-23 03:59:59
  • Oracle系统表外键的更名

    2010-07-26 13:07:00
  • pyqt5 QListWidget的用法解析

    2023-09-24 21:30:31
  • Vue路由的模块自动化与统一加载实现

    2024-04-27 16:17:15
  • 详解mysql数据库中文乱码问题

    2024-01-23 05:34:56
  • 如何获知服务器上Application对象及其对应的值?

    2009-11-24 18:09:00
  • django迁移文件migrations的实现

    2022-10-27 02:48:44
  • 将内容自动添加到指定文本域的JS

    2007-10-08 12:50:00
  • Mootools 1.2教程(10)——Fx.Tween的使用

    2008-12-02 18:03:00
  • mysql使用mysqld_multi部署单机多实例的方法教程

    2024-01-15 12:26:01
  • Python的collections模块中namedtuple结构使用示例

    2022-06-01 19:59:42
  • python最小生成树kruskal与prim算法详解

    2021-06-10 01:56:45
  • python basemap 画出经纬度并标定的实例

    2023-08-23 23:26:40
  • mysql到oracle的移植

    2011-01-29 16:23:00
  • Spring Boot整合 NoSQL 数据库 Redis详解

    2024-01-29 18:16:36
  • pymongo中聚合查询的使用方法

    2021-07-07 19:31:23
  • asp之家 网络编程 m.aspxhome.com