设计评论表单[译]
作者:Dmitry 来源:随想飞翔 发布时间:2009-03-25 20:41:00
作者:Dmitry @ Usability Post 版权所有 Copyright.
原文:http://www.usabilitypost.com/2009/01/06/comment-form-design/
设计评论表单
Usability Post的读者Vadim提出一个关于评论表单设计的有趣问题。他发现网页中两个文本框被标为必填项——姓名和邮件地址。而评论表单通常还有另外两个输入项:网站地址和评论内容。就像这样:
Vadim提到,他在一个有数百个评论的热门帖子中发现一个有趣的现象。那个帖子页面有如上所示的评论表单。他发现一些人回复帖子时将网站地址一项填为“none”或“n/a”。
网站地址不是必填项,不过这明显是被曲解了。上边的两项:姓名和邮件地址为标为必填,而其它项目并没有。一点让人困惑的是,评论内容也是必填的,而表单的设计则暗示你应该足够聪明能理解这一点。
优秀的评论表单设计
理想的表单设计是什么样的?
UX Matters发表过一篇名为《表单中的标签位置》的优秀文章。其发表的发现基于眼球追踪研究,所以文中建议非常真实权威。
总结一下的话……结论是文字标签应该放在文本框上方,可以使文字与文本框之间的视线距离最短。如果将文字放在文本框左侧,至少也要右对齐,同样,为了减少视线移动距离。而粗体字表现不佳,尽管此现象的原因尚存疑惑。(译注:《表》文中提到粗体字会让用户识别文字标签的时间延长60%。)
所以理想的评论表单是文字标签与文本框的距离很近,最好是在其上方。那表单项的顺序呢?大多数是由昵称开始,然后是邮件地址、网站地址,最后是评论内容。很多Blog和网站都是这样设计的。我想质疑这是否是最好的顺序。
我的一个朋友如下布局他的评论表单:
这一挑战惯例的表单以评论内容开始,随后才是评论者信息。这样你可以先说出你的评论,最后对你的评论签名。人们写信时是这个顺序。你首先写出信件内容,然后签上你的名字。我觉得评论表单这样设计更有意义。
当然,这个表单并不完美,因为访客需要观察右侧填入名字和邮箱地址,再返回左侧寻找提交按钮。下面是我觉而更好的设计。应用在了Particletree Blog:
非常棒。我们以评论内容开头,接着下边是评论者信息。文字标签和文本框很近,并且在其上方,就像UX Matters推荐的那样。提交按钮在整个流程的最下方,并在所有文本框的下方中央。必填项由红色星号标出。
我也会在Usability Post上试试。
你怎么认为?普遍使用的评论表单就工作的不错?还是更喜欢我的改变表单顺序设计?我想知道你们的想法。


猜你喜欢
- 虽然熟练掌握SQL的人对于Null不会有什么疑问,但总结得很全的文章还是很难找,看到一篇英文版的, 感觉还不错。Tony Hoare 在19
- 加载1个或多个要素<template> <div id="map" style="
- Vue3新属性:CSS 中的 v-bind()写在前面:本文主要介绍Vue3中的新增的v-bind()的常用使用方式,主要包括在css,le
- 切片操作首先支持下标索引,通过[ N:M :P ]操作索引正向从0开始,逆向从-1开始N:切片开始位置M:切片结束位置(不包含)P:指定切片
- 第一种方法import pandas as pdfrom collections import Counterdata = '参赛信
- 打包静态资源到指定目录在最近开发工作中,我打包的 dist 文件夹下,vue-cli4 打包(npm run build)的静态资源全部都平
- 在电子产品的设计中,大家经常提到简洁是设计的重要元素。可是很多产品,不见得简洁就是第一要素。简洁的设计,必须是在对用户需求透彻理解,引导用户
- BinLogBinLog是记录所有数据库表结构变更(例如create、alter table)以及表数据修改(insert、update、d
- 介绍本文将介绍基于OpenCV实现视频的循环播放。有以下三个步骤:首先设置一个frame的设置参数frame_counter,值为0在读帧时
- Django处理Ajax发送的Get请求实例,Ajax优点在一是异步请求,无需等待响应就可以再次发起请求,而是局部刷新,避免整个页面刷新的网
- 一、基本介绍logging 模块是python自带的一个包,因此在使用的时候,不必安装,只需要import即可。logging有 5 个不同
- 本文实例为大家分享了Vue实现通知或详情类弹窗的具体代码,供大家参考,具体内容如下效果如图所示:(整体样式模仿ant-design-vue
- 内置函数Built-in Functionsabs()dict()help()min()setattr()all()dir()hex()ne
- 代码如下:url="http://www.cidianwang.com/" wstr=getHTTPPage(
- 之前在《首都机场的点烟器》中分析了一个软件系统所处的状态并且列举了不同的状态所需要的展示给用户的各类信息,我们先简单回顾一下:要设计一个软件
- 假如文件夹有大量视频文件,需求目标是想从每个视频中提取一帧作为视频的一个封面图片,本文利用opencv-python模块实现需求。结合自己的
- class和id的命名,如果合理,可以使得文档具有清晰的结构我们现在解决办法就是使用现有的元素,通过给他们id或class而得到额外的信息。
- 1、环境搭建需安装:python3.6Pycharm专业版django 2.2.6mysqlclientpip install django
- Node.js中的事件触发器所引发的思考今天在看 Node.js 文档的时候讲到事件触发器,其中的 emit 方法让我想到了 Vue 中的自
- 创建之前项目之前 记得改一下 maven 提高下载Pom速度 记得 setting 中