我正在创建一个表单,向访客询问他们的firstnamemiddle initiallastname。我希望这些文本字段全部内联,但是应该在哪里放置标签?在字段的左侧,顶部或下方。

从可用性的角度来看,我正在寻找最佳方法。

评论

这是否不适合uxexchange.com? (uxexchange.com)

哇,我不知道uxechange.com的存在,谢谢。从对该问题的赞成票数来看,这绝对是Pro Webmasters的主意。

是的-这有点“问题”。我相信uxexchange是使用“旧版SO”模型建立的。使用新模式的网站,例如网站管理员,似乎越来越受到关注。因此,与uxexchange更相关的事情最终在网站站长上变得更加成功。我不确定解决方案是什么-迁移uxexchange吗?

#1 楼

看看UXmatters的这项研究。它相当深入,包括关于眼动的数据,并得出结论认为顶部的标签是整体上最好的解决方案。

Luke Wroblewski也有类似的文章,也相当详细。这两篇文章都值得一读!

评论


+1我打算发布这些完全相同的资源。确实,对这个问题的任何答案都应该包括研究。

–Virtuosi Media
2010年8月2日在18:21

这就是我一直在寻找的东西,左比较顶部。我敢肯定,其中很多都是主观的,但尽管如此,在所有条件相同的情况下,有些布局还是会略胜一筹。谢谢。

– Shane Stillwell
2010年8月2日,19:16

UXmatters文章的另一个有趣之处在于,他们发现粗体标签分散了访问者的注意力,并且……“粗体标签对于用户而言更难以阅读和感知-可能是因为粗体文本和较粗的相邻边框之间存在更多的视觉混淆输入字段。”很高兴知道。

– Shane Stillwell
2010年8月3日,12:08

别成为负面的奈莉,但是uxmatters.com没有“热门文章”部分,甚至没有使用Google网站管理员工具,因此我可以找到他们阅读最多的文章,这不是非常用户体验!

–尼尔·麦圭根(Neil McGuigan)
2011年1月19日19:16

#2 楼

最重要的是要与网站的其余部分保持一致。通常,大多数网站都在文本字段的左侧添加标签。因此,请进行较长的描述,因此请确保您有足够的空间并且流动良好。

如果左侧看起来不正确或没有空间可以容纳,那么我会做以上。这很清楚。

我唯一要避免的方法是将标签放在文本字段下。当标签在字段下时,会更加混乱。

评论


无论如何,请不要忘记for属性。

– Pierre-Alain Vigeant
2010年8月2日,19:10

#3 楼

通常,对于您的情况,最好在顶部或左侧。只需确保标签位于输入字段的前面即可访问。

仍然有许多种方法可以布局页面并可以访问。

表单标签确实可以显示从那以后只要您想要它们的任何地方。此资源值得一看,http://patterntap.com/tap/collection/forms

#4 楼

最好考虑以下两个选项:



字段左侧的标签,向右刷新,使其靠近输入。
字段本身上方的标签
/>
关于可用性的另一项重要注意事项,以确保您使用的是标签的for属性,以便单击标签可将焦点放在它所标签的字段上。

#5 楼

答:以上都不是。在字段本身内使用占位符文本。占位符属性是HTML-5的内置部分。

否则,我想把它放在字段上方,左对齐。

#6 楼

这有点切线-但是请不要使用名字/姓氏/缩写。并非每个人的名字都属于这种整洁的分组。
在StackOverflow上引用自己的名字:

许多亚洲文化都把姓氏放在首位,因为人们认为家族比个人重要。 >注意到有很多人使用的名称不是父母所赋予的名称,因此我成功地使用了以下方案:
全名(通常用于写邮件) ;姓;俗称(对话中常用的名称)。
例如:
全名:William Gates III;姓氏:盖茨;别名:Bill
全名:Soong Li;姓宋已知为:Lisa

有关更多信息,请参见https://stackoverflow.com/questions/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694。

评论


我看到了您建议中的价值,但关键问题将是“谁是目标受众?”如果我的听众中有99%是美国人,那么我将使用名字/ MI /姓氏。我认为许多美国人不会立即了解一个姓氏。就像@RandomBen所说的那样,您需要保持一致,并且大多数美国网站都使用Firstname / MI / Lastname。

– Shane Stillwell
2010年8月3日,12:18