Form标签最好放到字段的上面
UX Matters的一份研究发现表单中的标签(label)的理想位置是在字段(field)的上面。在很多的表单中,标签被放到字段的左边,以形成一个两栏的布局;尽管这样看起来不错,但它不是最容易使用的布局。为什么这样说呢?因为表单通常是垂直导向的;也就是用户从上向下填写表单,用户是向下浏览表单的。这样在标签下面放置字段比在标签右边放置字段要更容易(浏览)一些。
Tumblr 遵循UX Matter的建议,提供了一个简单而简洁的注册表单。
在左侧放置标签还会引发另一个问题:你让标签居左还是居右?居左可让表单可扫描但是会将标签和字段分离,从而使得区分哪个标签归哪个字段就比较困难。居右则相反:它可以实现好的界面但是可扫描性弱些。在各种情况下,标签在上面是最好的。该研究同时发现标签最好不要加粗,尽管此条建议并不能令人完全信服……
用户关注面部
当别人进入到视野的时候,人们本能的会立马注意到他们。在网站页面,我们趋向于关注人的面部和眼睛, 这为市场人员提供了一个引起关注的很好的技术。但是我们被人们的面部和眼睛吸引只是个开始;事实证明,我们确实会将目光转向图片中的人正在看的方向。
一个正在看我们的小孩儿的图片的眼动跟踪热图,来自于UsableWorld的研究。
那么现在这个小孩正在看内容。注意人们在看向标题和文字的方向增长。
这里是一份描述这个的眼动跟踪研究。我们本能的被吸引到脸部,但是如果那张脸在看其他地方而不是我们,我们同样会看那个方向。利用这种现象来吸引你的用户的注意力到你的页面或广告中最重要的部分吧。
设计的质量是可信度的一个指标
各种研究已转向到是什么影响人们对网站的可信度的看法方向:
Stanford-Makovsy网站可信度研究2002: 调查当前什么让一个网站可信(pdf)
什么让一个网站可信?大量定量研究的报告(pdf)
计算机可信度元素(pdf)
影响网站可信度的元素:一份源自自我评定研究的早期结果(Proceedings of ACM CHI 2000 Conference on Human Factors in Computing Systems, v.2, New York: ACM Press)
我们不知道Fever app 是不是真的比较好,但是时尚的用户界面和网站给我们很好的第一印象。
这些研究的一个有趣的结论是用户真的通过封面来判断一本书… 更确切的说,一个网站依赖其设计。比如布局、一致性、排版、色彩和样式之类的元素都会影响到用户对你的网站的理解以及你的项目的形象。你的网站不应该仅仅有一个良好的形象,还应该就是你的用户所需要的。
其它影响可信度的因素有:网站的内容的质量、错误数、更新频率、易用以及可信赖的作者。
大多数用户 不 滚动
Jakob Nielsen关于多少用户滚动的研究(在 Prioritizing Web Usability)显示只有23%的访问者在第一次访问一个网站的时候滚动。这意味着77% 的用户并不滚动;他们只是看折叠线以上(也就是不用向下滚动而在屏幕上可见的页面区域)的内容。而且,回访时滚动的用户的百分比也有所降低,只有16%的用户在他们第二次访问时滚动。这些数据强调在显著的位置放置关键的内容是多么的重要。特别是在登录页面。
这不是说你应该把所有东西塞到页面的上部区域里面,只是说,你应该最好的利用那一块地方。把内容填塞进去只会让内容难懂;当用户看到太多的信息,他们会不知道该从哪里开始看。
Basecamp很好的利用了空间。折叠线以上(768 像素高),它显示一个巨大的截图、标语、有价值的主张、行为召唤、客户列表、视频和使用图片展示的简短特性列表。
这对主页是最重要的,大部分新访问者都会浏览首页。所以请在那里提供这些核心要素:
网站名称;
网站的有价值的主张(比如说,用户将从使用中得到什么好处);
与用户相关的主要部分导航。
但是,现在用户的习惯已经发生明显的改变了。最近研究证明用户对滚动相当接受,而且在某种情况下他们会期望滚动到页面的底部。很多用户喜欢滚动胜过分页,而且对很多用户来说页面的最重要的信息并不是必须放在“折叠线上面”(这是因为各种大量的可见的显示方案是无用的,拒用)。所以将你的布局分割成段以方便浏览是个很不错的主意,使用一些空白分开它们吧。
想了解更多信息可以查看这些文章:将折叠展开 (Clicktale), 分页与滚动 ( 威之卡大学 – SURL), 打破折叠的神话 (盒子与箭头)。(多谢Fred Leuck).
蓝色是链接的最佳颜色
尽管给你的网站一个独特的设计是很棒的,但是当遇到可用性的时候,做其他人正在做的是最好的。遵从惯例,因为当一个人访问一个新的网站的时候,他们寻找东西的第一个位置就是他们在其他大多数网站找到它们的地方;他们利用他们的经验来理解新内容的意思。这被称为使用习惯。人们期望某些东西保持一致,比如链接颜色、网站的logo的位置、tab导航的行为等。
Google在其网站上保持所有的链接都是蓝色只有一个原因:大多数用户对这个颜色熟悉,这使得很容易定位。
你的链接应该是什么颜色?第一要义就是差异(对比):链接要足够暗(或者亮)以和背景色相对照。其次,它要能从其他文本中凸显出来;所以,不要在黑色字体上使用黑色链接。最后,研究表明(Van Schaik 和Ling)如果可用性是你的重点,保持蓝色链接是最好的。浏览器的默认链接颜色是蓝色,所以用户比较期望它。选择一个其它颜色绝对不是问题,但是它将会影响到用户找到它的速度。
理想的搜索框是27个字符宽
搜索框的理想宽度是多少?有这回事儿吗?Jakob Nielsen做了一次关于在网站的搜索框中搜索问题的长度的调查(Prioritizing Web Usability)。结果是现在的大部分搜索框太短了。搜索框太短的问题是即便你可以输入较长的问题,你也只能一次看到文本的一部分,从而使得难于检查或编辑你输入的内容。
该研究发现搜索框的平均宽度是18个字符。数据显示27%的查询太长以至于不能输入。扩展搜索框到27个字符能够满足90%的查询。请注意,你可以使用em设置宽度,而不是像素或者pt。1em正好是一个“m”字符的宽度和高度(而无论你的网站使用多大的字号)。那么,就用这个单位来控制搜索的文本框为27个字符宽吧。
Google的搜索框足够宽来容纳长句子。