网页常见可用性错误——布局外观错误

<script type="text/javascript"><!-- google_ad_client = "pub-1193525265238616"; /* 728x90, 创建于 08-5-28 */ google_ad_slot = "7903380005"; google_ad_width = 728; google_ad_height = 90; //--> </script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script>

　　1 布局、外观错误

　　1.1 页面宽度

　　1.1.1 页面内容宽度选择不当

　　问题

　　设计页面宽度时不考虑使用800*600分辨率的用户

　　分析

　　根据W3Counter在2006年7月9日发布的全球Web调查显示，使用800*600分辨率的用户仍占11%，所以在设计页面宽度时，要照顾这部分用户。

　　游戏站的用户大多是游戏玩家，他们中间绝大多数人的浏览器分辨率是1024*768或更高的分辨率，所以游戏专题为了获得更好的效果，可以在1024*768分辨率下设计页面宽度，一般为900~1000像素宽。但不排除其中也有一部分800*600分辨率的用户，为了保证这些用户能在第一屏获得更好的效果，要把主要内容放在页面左侧。

　　公司首页、毒霸、WPS、词霸等站，应尽量保证800*600分辨率下不出现横向滚动条，即页面宽度为公司常用的760像素宽。

　　除了固定页面的宽度，设置页面宽度的像素值外，还可以将页面宽度设为100%，以保证各个分辨率下的用户都不出现横向滚动条。对于信息量比较大的页面建议使用100%宽度。但100%宽度的页面会增加宽屏用户浏览网页时视线移动的距离，可以用Javascript控制这类页面的宽度，给它限定一个最大绝对值。

　　案例

　　神州学习网，面向的用户中有很多是大学生用户，目前大学里800*600的显示器还是占不小的比例的。而这个网站采用1024下的页面宽度，显然会失去一部分用户。毕竟类似的学习网站还有很多。

　　我们政府的网站，面向的用户是全国人民，不应该采用1024分辨率下的设计宽度。

　　1.1.2 页面内容宽度不一致

　　问题

　　页面中的一部分内容宽度超出主体内容的宽度

　　分析

　　设计师常常有这样的设计稿：页面主体宽760像素，照顾分辨率800*600的用户。同时为了使1024*768分辨率下的用户浏览起来不至于感觉两侧太空，会把页面中的某一部分，如头部，设计成1000的宽度。制作这种页面时，要注意把两侧多出来的部分做成自动延展的，如果有图片，做成背景图。

　　设计师使用这种方法设计页面的时候要注意两侧多出来的部分，不要放置内容，只能放一些纯修饰性的东西。

　　案例

　　页面在800*600分辨率下出现了横向滚动条。

　　这个页面的原设计稿是这样的：

　　两侧的焰火超过了页面的主体，页面应该这样来做：

　　1.2 字体

　　1.2.1 字体样式过多

　　问题

　　页面中的字体样式过多

　　分析

　　显示太多的属性会让用户难以找到感兴趣的对象，增加了用户的记忆负担。

　　案例

　　

　　我们政府的网站，文字样式有十几种。让用户抓不住重点。

　　同为门户，网易首页的文字样式就规划得很清晰，重点突出。

　　1.2.2 相同样式的文字功能不同

　　问题

　　外观相同的文字，功能不同，违背一致性原则，让用户在交互过程中有挫败感。

　　分析

　　外观相同的文字在用户看来会具有类似的功能，如：是不是链接，是不是在新窗口打开链接。如果相同样式的文字在页面中，既有链接文字，也有非链接文字，就会让用户在浏览页面时不断去试探文字的功能。很可能用户试图点击文字的时候却发现文字不是链接，心中默认即将在原窗口打开的链接却在新窗口打开了，这样就会给用户带来挫败感。

　　案例

　　“中华人民共和国中央人民政府”网站。“应急管理”和“主题服务”文字样式相同，却前者是链接而后者不是。

　　CCTV首页，顶部导航：“繁体”链接的目标是原窗口，而后面文字样式相同的英文版、西班牙文版、法文版链接的目标是新窗口。

　　某学校网站的导航栏。前面的链接都是打开一个页面，最后一个“联系我们”却是发送邮件的链接。用户以为点击它会和前面一样打开一个页面，但点击后却启动了Outlook。

　　1.2.3 字号太小

　　问题

　　页面文字字号太小，而且使用了固定大小的字号样式，使视力不好的用户无法阅读。

　　分析

　　老年、视弱的用户也许很难看清网页上的12像素文字。他们往往会使用类似IE中的“查看->字体大小->最大”菜单来放大文字阅读。但如果使用像素作单位来定义文字大小的样式，对IE来说，这个菜单就失效了。大部分网页应尽量采用百分比为单为来定义文字大小的样式，主要面对视力不好用户的网站更应该这样。

<yeskyrecommend></yeskyrecommend>

　　案例

　　中国老年网，网站主要用户是中老年人。大部分文字都是12像素，在IE下无法放大观看，让老头老太太们拿着放大镜去瞅吧。

　　1.3 导航栏

　　1.3.1 动态导航栏

　　问题

　　导航栏的内容和功能会因用户状态或用户在网站中的位置不同而改变。

　　分析

　　多变的导航会把用户弄糊涂：用户很可能没有意识到导航发生变化了。他们也不知道导航在什么情况下会变化。这就造成用户要去不断试探才能了解其中规律，让网站的可学习性降低。

　　案例

　　CCTV首页与二级页的导航看起来内容一样。但首页导航链接的目标窗口是新窗口，而其他二级页导航链接的目标窗口都是原窗口。

　　：用户登录前和登录后，“论坛”的二级导航有明显的不同。

　　易趣，将用户信息与导航分开处理。无论用户状态怎样，导航栏内容不变。

　　1.3.2 重复的导航项目

　　问题

　　导航中有重复的项目

　　分析

　　用户看到重复的项目，会想知道他们是癫煌Ｍ没Щ峒俣ㄕ庑┫钅恐赶虻牧唇邮遣煌模己蕉杂没ё髁舜砦蟮囊肌?/p>

　　案例

　　北航电子信息工程学院的网站导航：有两个“人才培养”的链接。

　　1.3.3 导航不能给用户导航

　　问题

　　导航不能指示用户当前位置，或用户无法通过点击导航中的链接去他想去的地方。

　　分析

　　导航如果不能体现出网站的结构及用户的位置，就失去了应有的作用。如果仅仅显示用户所处的位置，而用户无法通过点击指示位置的文字去他想去的地方也是不好的。

　　案例

　　上面两幅图分别是TOM网的唐山地震30周年专题的首页和“唐山故事”。这两页的导航没有指示出当前是在首页还是在“唐山故事”。

<yeskyrecommend></yeskyrecommend>

　　某网站新闻页的导航。“网站首页 > 新闻频道 > 官方动态 > 新闻正文”是没有加链接的文字。用户只能通过这行文字了解他所处的位置，但无法通过点击导航返回上一级。

　　1.4 排版

　　1.4.1 排版没有体现常用或自然的次序

　　问题

　　排版没有体现用户期望的顺序。

　　分析

　　排版没有经过分析，不能体现内容的顺序性和使用频率，不能按照用户的习惯操作流程和逻辑布局。

　　案例

　　Google的Joga.com，加入某个球队社区功能。“返回”和“加入”按钮相隔甚远，而且把“返回”按钮放到了“加入”按钮的前面。

　　由于Joga.com是Google拿原有的英文程序修改而成，所以注册页的排版没有照顾中文用户的习惯：让用户先填名字后填姓，先选月、日后选年份，先写城市后选国家再填家乡。让用户感觉思想被操纵着在一堆信息中跳来跳去，整个注册流程完成后十分疲惫。

　　1.4.2 排版没有依据内容的重要程度

　　问题

　　排版主次不分明

　　分析

　　这样的布局看起来好像只是策划人员决定需要那些内容后多少有些随意的安放在页面中。即使这样的排版看起来似乎还不错，但有可能是非常失败的设计。

　　案例

　　作为一个体育频道，用户需求是大量的体育新闻。TOM体育的头版却安排了大量的花边新闻、美女图片，这些次要内容占据了很多本该用来显示体育新闻的位置。

　　新浪体育处理得就比较好，头版充斥大量的最新最引人关注的体育消息。

　　1.4.3 将不同类型的内容并列处理

　　问题

　　将不同类型的内容当作同一类型来并列排版

　　分析

　　有些内容，功能不同，但往往由于各种因素在排版时被并列处理。用户看到并列处理的元素，会下意识把他们当作功能并列的元素，这样在使用时往往会产生错误或发生挫折。

　　案例

　　北航“未来花园”BBS的登录表单。“登录”按钮是表单的一部分，起到提交表单的作用。而“注册”只是一个打开注册页的链接。设计者为了追求美观而将其并列排版，统一处理成按钮形式，会让部分用户误以为“注册”也是这个表单的一部分，填写用户名、密码后点击“注册”就提交了注册表单。而实际上点注册时，填写的用户名、密码并没被提交，到注册页面以后还要重新输入你要注册的用户名、密码。

　　搜狐首页的搜狗搜索。新闻、网页、音乐、图片、说吧这五项都是模拟的选项卡效果，点击以后，改变点击项的样式，不打开任何页面。但点击“地图”会弹出新的页面，让用户在操作过程中很可能感到十分意外。在这里，前五项都具有选项卡的功能，可以并列排版，而“地图”的功能明显不同，所以不应该和其他五项并列排版。

　　1.4.4 间距处理不当

　　问题

　　内容间的距离不合适，使用户无法辨别内容是如何组织的。

　　分析

　　排版时，应注意页面的易阅读性。每块内容或每个元素之间的距离如果处理不得当，会迷惑用户。比如：两个相关元素距离太远，会让用户感觉他们是彼此独立的。

　　案例

<yeskyrecommend></yeskyrecommend>

　　Joga.com的注册页面。“生日”和“出生年份”后面有两个设置权限的下拉框（两个黄色的钥匙图标那里）。他们与“生日”和“出生年份”相隔太远，让用户无法在第一时间看出其中的从属关系，无法判断他们的功能。

　　某网站的登录表单。用户名输入框离“用户名”三个字很远，和“密码”连在了一起。影响用户判断它们之间的关系。