Jakob Nielsen博士在2002年5月12日撰文Top Ten Guidelines for Homepage Usability,今摘译每条指导方针。
主页是世上最重要的不动产,首页是大多数网站中最重要的一页,因它是公司的形象在众人面前的展示。
清楚的表达网站的目的:你是谁,你要干什么。
1、利用一句话的标志行,告诉用户公司是干什么的以及相对于竞争者的独特要素。
2、页面标题对搜索引擎和收藏夹来说有可读性,以公司名字开头,并简述该站。
3、把所有的公司基本信息集在一起,放在一个明显的区域,一个"about<公司名>"链接就是一个将用户引入深层信息的最好方式。
帮助用户找到他们需要的东西
4、突出强调网站的最高优先级的任务(突出强调网站的最主要功能,译者注)
5、增加一个检索输入框
揭示网站内容
6、用例子显示网站的内容,具体胜过抽象,显示一些最好或最新的内容。
7、用最重要的关键词命名链接,让用户能快速找到解决当前任务的入口。
8、提供手段让用户便捷地找到最近的主页内容。
用可视设计来增强(不是定义)交互设计
9、不要过分地装饰非常重要的内容,如导航区。用户常把图片当作广告忽略掉。
10、使用有意义的图片。
更多的内容请参见Jakob著述《Homepage Usability: 50 Websites Deconstructed》,其中含有113条方针。另外,在搜索该书的简体译本《专业主页设计技术》时,找到了csdn的<专业主页设计原则>专栏,很有参考价值,只不知这两者之间有什么联系。:)
主页可用性的113条原则
Jakob博士分26类,列出了113条原则。下面,类的倒序一一摘录(每类中顺序不变)。
在录入的过程中,我渐渐发现只要找到每条原则所要达到的目的或要解决的问题,这样就可以据具体情况灵活的加以解决。
26、股票指数和显示数字
(110)给出变化的百分比,而不仅仅是股票指数增减的点数。
(111)除非缩写非常有名,如“IBM”,否则要写缩写的股票名称。
(112)如果数字有五位甚至更多位数,要使用千分位分隔符适当分隔数字。
(113)当显示一列数字时,要对齐小数点。
25、日期和时间
(105)仅对时间敏感的信息显示日期和时间,如新闻条目、实时交谈、股票指数等。不必显示星期几。
(106)显示最后更新内容时的时间,而不是计算机生成的当前时间,并用“更新于<日,时>”语句说明。
(107)当引用时间时,要包括时区。如果有国际用户,要显示主页当地时间及相对于格林威治(GMT)时间。
(108)使用标准缩略语,比如“p.m.”或“P.M.”。
(109)给出月份的全拼或简写,而不要用数字。
24、繁荣社会
(103)如果网站支持用户社区功能,例如提供聊天室或其它讨论工具,不要将它们当作一般的链接,要在主页上列出实际的讨论主题并提供任何有关日程表。
(104)在商业站点不要提供“访客簿”标记,这会使站点看起来有点业余。
23、收集用户资料
(101)在主页上不要直接提供注册链接,而是要解释用户注册的好处(至少要链接到这样页面)。
(102)在索要用户的电子邮件地址前,要解注册的好处,说明公告发给用户的频率。还有,在索要用户email地址的地方的后面,链接一个样本邮件,并解释公司或网站的隐私政策。
22、个性化
(99)如果主页上有为已知资料的用户提供定制信息的区域,对首次使用的用户不要提供一般内容--要在特定区域中提供精心准备的、不同的内容。
(100)不要让用户定制主页基本外观的各种特性,比如颜色模式。要集中精力推出未来方便最大多数用户阅读的更好的设计界面,如字体要相对大小。
21、页面重载和刷新
(97)不要自动刷新主页,将更新内容推给用户。对有实时更新要求的网站,考虑提供一个工具,使用户能得到实时的数据反馈。
(98)当刷新页面时,只更新改变的部分,比如更新新闻部分。
20、赞誉
(95)不要浪费宝贵的空间夸赞网站的搜索引擎、设计公司、喜爱浏览的公司或者在界面背后的技术。对于面向技术的站点,不要将这些专业内容放在主页上,可以在“关于我们”的页面中包括此类的条目。
(96)要控制显示站点获得赞誉的内容。独立的权威机构发表的赞誉、认证和优秀站点的评价,尤其是关于产品质量或服务的奖项,可以用来提供网站的信任度。主页上可以放面向用户类的奖项,不要放去年如何何的奖项,其它的可以放入“关于我们”之中。
19、通信技术问题和突发事件的处理
(93)如果站点瘫痪了,或者站点的某个重要部分不能用了,要在主页上明确说明,要说明大概恢复的时间及此期间用户可以做的事。
(94)有一个在紧急情况下处理网站上关键内容的计划。如准备主页的一个不同的设计版本,及一个简单地导般框架,以及提供返回正常站点的途径。突发事件的典型特征是短期内有超乎寻常的大量点击,主要是因为用户反复点击以取得最新进展,这要求备用主页要小巧。
18、欢迎词
(92)不要只在字面上欢迎用户的到来,不要将主页上最重要的区域用于向用户打招呼,可以考虑将欢迎词作为一条标签行。对用户最后的欢迎是,让用户明确知道他们能在站点具体做什么,及从哪里开始。一个例外是主册用户登录后要欢迎。
17、广告
(88)将公司外的广告放在页面的边缘。绝对不要把广告放在最重要的条目旁边,及将重要的条目放在广告之上,以免被用户忽视重要条目。
(89)外部广告(为其它公司做的广告)要慎重采用,要做得尽量小,并应尽量和主页的核心内容相关。
(90)如果将广告放置在页面上方标准的广告条区域之外,要给它们加标签,说明它们是广告,这样用户就不会把它们和网站的内容搞混了。
(91)避免用广告的惯用方式显示站点的常见特性。
16、弹出窗口和分阶段的页面显示
(85)当用户键入主页网址时,或在别的页面上点击到站点的链接时,要将他们带到“真正的”主页上,必须取消纷纷弹出的窗口。一个例外是,如果站点内容对少数人不合适时,最好弹出一个窗口发出警告。
(86)要避免弹出式窗口,即使其含有有用信息,也会被用户当作广告忽略,且这类窗口会使用户远离站点内容。而且,用户一旦关掉,就找不到这些内容了。
(87)不要让用户使用站点导航图去选择自己的地理位置,除非你的站点具有多种语言版本,而不是只有一种主要语言的版本。
15、新闻和新闻发布
(81)标题应该简洁,应该用传述语言,用尽量少的文字表达尽量多的信息。标题和它下面的内容提要的相关程序应该高于和整篇内文章的相关程度。
(82)精心写作和编辑在主页上重点突出的新闻内容提要。要尽量用具体内容吸引用户点击并阅读全文。
(83)将整篇新闻内容与标题而不是内容提要建立链接,或在提要后面提供一个“全部内容”的链接。
(84)只要在主页上的新闻是一个星期内发生的,就没有必要在每条新闻的内容提要中列出日期和时间,除非它确实是一条爆炸性新闻并且经常更新。在主页顶端的时间和日期中以说明新闻内容是现在的了。在一篇文章开头的显著位置显示日期是很重要的,为以后搜索和缓存考虑。基于同样的原因,正文中不该引述相对时间,如“今天”“下周”等。
14、网址URL
(77)商业站点的主页应该有“http://www.公司名.com"的网址(或类似的国家级域名或其它类型的顶级域名),不要在域名后加复杂的代码甚至"index.html"等。要确保"www.公司名.com"和"公司名.com"都能访问站点。
(78)对任何和除美国之外特定国家密切相关的网站,要使用该国的顶级域名。如果站点还有国外的客户,再注册一个带".com"域名也是不错的主意。
(79)如果条件允许,要为站点名称注册不同的拼写、缩写或常见的拼写错误域名。
(80)如果域名有不同的拼写方法,选择一个作为正式版本,将用其它拼写访问站点的用户重定向到此域名上。
13、窗口标题
(72)用最能传递信息的词语作为窗口标题的开头--通常是公司的名称。
(73)不要在窗口标题中包括顶级域名,如".com",除非它是公司名的一部分。
(74)不要在标题中包括“主页”、"homepage"等词汇,这是费话。每个页要用不同的标题。
(75)在窗口标题中包括站点的简短描述。可以考虑采用标签行的内容。
(76)要将窗口标题的字数限制在78个英文单词以内,不要超过64个字母。
这些都是便于收藏和检索引擎。
12、用户界面上的小控件
(69)如果不想让用户点击,绝不要将控件作为屏幕的一部分。
(70)在主页上避免使用多行文字框,尤其在页面的上方,在那儿用户于查找查找属性。用户有时会将登录框与查找框混淆。
(71)尽量少用下拉菜单,尤其当其中的项目本身不能说明自身意思的情况下。
11、图形设计
(63)在页面上要限制使用字体的样式和其它文本格式,例如文字大小颜色等,因为繁多的文字样式会分散用户对文字本身的注意力。
(64)使用高对比度的文字颜色和背景颜色,使文字尽量清晰。
(65)在800*600的分辨率下避免水平滚屏。
(66)在最流行的窗口大小下(该书写作是800*600),最重要的页面元素应该不用滚屏就可以看到。
(67)使用动态的页面设置,使主页大小可根据屏幕分辨率来调整。
(68)慎重使用标志图案。除了站点本身的标志图案外,仅在用户了解标志图案的意思时,才能使用它们以吸引用户的注意。
10、图形和动画
(56)用图形表现真正的内容,而不仅仅做主页的装饰。人们一般会被图片所吸引,所以和内容无关的图片会分散人们的注意力。
(57)如果图形和图片的意义在其伴随的情况的上下文中不太明确,要简短地解释它们。为人物的图片加说明通常是个好主意。
(58)以适当的尺寸编辑图像和图形。数量过多的照片和图形并不会传递更多信息,反而会使屏幕看起来很混乱。仅仅将大图片压小很多情况下并无帮助,不如删掉。
(59)避免使用带水印的图片(上面有文本的背景图片),它们会使界面更混乱,经常会减弱视觉效果。
(60)在主页上,不要仅为吸引注意力而使用动画,它在主页上几乎没有位置,因为它会减弱用户对其它元素的注意程度。动画适用于专门演示。
(61)绝不要用动画表示页面上的关键元素,如公司标志、提示行或主标题。因为用户易忽视看起来象广告的动画区域,且它们也难以阅读。
(62)在进入站点时,让用户选择他们是否想看动画而不要将动画作为默认设置。
9、工具和任务快捷方式
(53)对主页上高优先权任务,要设置直接访问这些功能的方式。这些主页工具应用户直接访问主页上的任何数据或资料。如果可能的话,考虑给予用户不需要用鼠标点击就能得到所需要的结果的方法,换句话说,在主页上自动显示最常用的信息。这种功能一般来说只有能辩论用户和个性化页面的站点才能实现。
(54)不要包括与站点无关的工具。有用但未必适合,如非新闻站点的天气状况。
(55)不要提供与浏览器功能重复的工具,如果设默认页或收藏。
8、查找
建议是看得见、使用简单、查找范围广范
(47)在主页上设置一个输入框,以做一日和尚撞一天钟输入查找内容,而不是仅给用户一个指向查找页面的链接。
(48)输入框应该足够宽,以便用户在站点能看到和编辑标准的查询。至少要25-30个字符宽。
(49)不要给查找区域加标签,而要在输入框右边使用“查找”等按钮。并将查找功能 放在页面主体的上方、页面顶部广告条或菜单栏的下方。
(50)除非高级查找功能是站点的标准功能,否则在主页上只提供简单查找功能,再加一个到高级查找或查找指南的链接即可。
(51)在主页上的查找功能应该默认查找整个站点。
(52)在站点的查找功能中,不要提供“查找web”功能。因为用户查找web有自己喜欢的搜索引擎。
7、导航
导航区域应该显示站点最重要的内容,以便用户查看项级类别时就对查找的内容有很好的感觉。
(40)在显著位置放置主导航区域,最好在紧邻页面主体的正下方。避免在图形条顶端放置任何水平的导航条,因用户常把屏幕顶端的条区当成广告而忽略,是为“条盲”。
(41)在导航区域将条目分组,将相似的条目放在一起。
(42)对同一类型的链接,不要有多个导航区域。
(43)在主页上不要包括指向该主页的动态链接。如“主页”或“home”等,在所有页面都可有,主页上的要不可点击。
(44)在导航区域中不要使用自造词。类别名应能彼此明显区分开,如果用户不能理解你的自造词,就不可能区分各个类别。
(45)如果在站点上有购物车(很多商务站点上都有),庆在主页上包含一个指向它的链接。
(46)只有在图标能帮助用户立刻识别一类条目时,才使用它们。
6、链接
(34)尽量区分链接并使它们更具可读性。要言简意赅,用带有更多的信息的文字做链接的开头,用户经常只据链接的一二个词决定是否阅读。
(35)不要用普通的指令作为链接指令,如“点这儿”。
(36)不要在一个列表后使用普通链接,如“更多。。。”或“More。。。”等。要告诉用户他们将得到更多的什么东西,如“更多新闻”。
(37)用不同的颜色表示已经访问的和未访问的链接。未访问的默认是蓝色,要用易区分的不太饱和的颜色表示已经访问过的链接。不要用灰色,它被用来表示按钮不可用且难以阅读,不要用黑色,它用来显示正文。
(38)在页面上不要用文字“链接”或“Links”来表示链接,而要用带下划线的蓝色文字表示。
(39)如果一个链接的作用不是打开另一个另一个web页面,而诸如链接一个pdf文件、打开一段声音或视频播放、发电子邮件、打开另一个应用程序等,注意要明确说明点击后要发生什么。
5、文档和已往内容的访问
(33)要保证很容易地访问最近在主页上已经重点的任何内容。
4、通过例子提示内容
例子能立即说明站点是什么的、揭示站点提供产品或服务的丰富程度、具体事例比一般性原则更有趣、并能成功地导航。
(29)用例子揭示站点的内容,而不仅仅是抽象的描述。
(30)在例子后面直接加一个到例子所属类别的详细内容的链接,而不是链接到一个能用父类的页面上。
(31)在特定例子后面提供一个到更广泛的类别的链接。
(32)要明确显示哪个链接指向例子的相关信息,哪个链接指向例子所属类别的一般信息。相关信息的链接放在例子之后,类别链接放得稍远一点。
3、内容的书写
写出令人印象深刻的内容,用尽量少的词汇表达尽量多的消息。
(17)使用用户关注的语言,类别和科目要按照用户的取向划分,而不是按照所服务的公司的要求划分。
(18)避免冗余内容。为突出一个显著的内容,应将它放在一个清晰的位置则不是重复它 。
(19)不要使用成语、行话,否则用户很难明白你在说什么。
(20)使用一致的大小写和其它风格标准,否则用户可能会误解。
(21)如果页面上某区域中的内容已经有效地说明自身作用,不要给这个定义明确的区域贴上标签命名。
(22)避免单个词的类别和单个词的列表项。
(23)在短语中单词间使用不间断空格,使短语连接在一起,便于快速阅读和理解。
(24)仅在做法定或约定俗成的工作时,或做适当强调时,才使用诸如“输入城市或邮政编码”等命令式语言。要告诉用户这么有什么好处。
(25)在缩写、首写字母缩略词、简写第一次出现时,要紧跟着给出它们的全称。
(26)避免使用感叹号,感叹号并不属于专家写作范畴,尤其不应在主页上出现。记住,不要对用户喊叫。
(27)在格式化的风格中少用全大写字母的方式,甚至一点也不用。不易阅读。
(28)为表示强调效果,要避免不适当的使用空格或停顿。影响查找、减慢阅读速度及缺少亲和力。
2、关于公司的通信信息
(8)在一个独立的区域组织好公司信息,例如“关于我们”、“投资关系”、“新闻发布”、“就业”和“关于公司”的其它消息。
(9)在主页上建立一个“关于我们”的链接,给用户一个公司的大致印象。建议叫“关于<公司名>”。
(10)如果想发布公司新闻,可在主页上放置一个“新闻发布室”或“新闻室”的链接。
(11)提供统一的表达方式,让顾客在站点中觉得是和公司而不是和页面本身打交道。提到公司网站时,用公司名而不是“公司名.com”。
(12)在主页上放置一个“联系我们”的链接,指向一个包含公司所有联系信息的页面。
(13)如果提供“反馈”机制,应说明链接的意图,以及是否将被用户服务机构或网站管理员阅读等。
(14)不要在公共的站点上包含公司的内部信息(这种信息针对的是雇员,应该在公司的内部网上发布)。
(15)如果站点要搜集用户信息,应在主页上放置一个“隐私政策”的链接。
(16)如果站点的赢利模式并不明显,应解释站点是怎么样赢利的。
1、传送站点的目的
为更好地与用户沟通,主页必须适当强调商标、品牌和最重要的任务,还必须具有独特的、令人印象深刻的外观,以便用户能认出它是站点的起始页面。
(1)在显著的位置、以适当的大小显示公司名称和或公司标志。页面的左上角通常是最好的位置。
(2)包括一个能简明地概括站点或公司做什么的标签行。标签行要短小、一语中的,非常出名的公司或部门可不用标签行,有子站点时要对各子站进行描述。
(3)从用户的观点出发,强调站点的价值,以及公司和主要竞争对手的区别。
(4)强调最重要的任务或工作,以便用户对主页有清晰的第一印象。要把这些任务放在显要位置,如页面的中上方,并且不要排列太多信息。要限制核心工作的数量(1-4个)。这条原则的最具挑战性而且最关键的地方,是从客户角度决定什么才是最重要的任务或工作。
(5)为每个站点明确设计一个正式主页。 在站点内要限制“home”或“主页”等术语的使用范围。
(6)在主公司的站点上,“站点(website)”一词仅代表公司在因特网上全体站点,而不要有什么别的意思,尤其是不要指子站点。
(7)设计主页时,要使主页和站点上的所有其它页面有明显的区别。或者使用稍不同的外表设计,或导航部分有显著的位置指示器。