常见可用性错误

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来说，这个菜单就失效了。大部分网页应尽量采用百分比为单为来定义文字大小的样式，主要面对视力不好用户的网站更应该这样。

　　案例

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

1.3 导航栏

　　1.3.1 动态导航栏

　　问题

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

　　分析

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

　　案例

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

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

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

　　1.3.2 重复的导航项目

　　问题

　　导航中有重复的项目

　　分析

　　用户看到重复的项目，会想知道他们是否不同。往往用户会假定这些项目指向的链接是不同的，导航对用户作了错误的引导。

　　案例

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

　　1.3.3 导航不能给用户导航

　　问题

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

　　分析

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

　　案例

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

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

1.4 排版

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

　　问题

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

　　分析

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

　　案例

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

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

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

　　问题

　　排版主次不分明

　　分析

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

　　案例

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

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

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

　　问题

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

　　分析

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

　　案例

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

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

　　1.4.4 间距处理不当

　　问题

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

　　分析

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

　　案例

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

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

2 文案错误

　　2.1 文案不一致

　　问题

　　在页面中，对于相同的概念使用不同的术语，或对于不同的概念使用相同的术语。

　　分析

　　如果对同一概念使用不同的术语，可能导致用户不能识别出它们原来是同一个概念。如果对不同的概念使用相同的术语，可能会混淆一个新用户，阻碍他们学习。

　　案例

　　对于百度贴吧的“帖子”，可以在网站中找到三种术语来描述：“帖子”、“留言”、“发言”。

2.2 晦涩难懂

问题

　　网页中使用的语言含义模糊，用词晦涩，或过于专业，使用户难以理解。

　　分析

　　在网页中使用行话、术语，让用户无法理解，不知道网页在传递什么信息。

　　案例

　　MolyX Box论坛的“论坛显示设定”，其中有一项“用户启用AJAX功能开关”的选项。这个论坛产品面向的绝大部分用户都不是程序员，他们不可能知道什么是AJAX，对他们来说这个选项因为“AJAX”这个专业术语而失去了作用。

.3 无用

　　问题

　　网页中的文字带来的信息对用户没有任何用处。

　　分析

　　用户看到无用的文字会花费大量时间去思考，这段文字带来的信息是什么，得出“这段文字没有带来任何有价值的信息”的结论后，用户会产生挫败感。

　　案例

　　某网站的出错信息：“出现错误，请重试后进入”。并没有告诉用户哪里出了错，而且没有提供类似“返回上一页”的链接。

　2.4 链接与提示文字重复

　　问题

　　链接文字和链接的"title"属性重复。

　　分析

　　有"title"属性的链接，会吸引用户去将鼠标停留在链接上，查看链接的提示文字。如果用户看到提示文字和链接文字是相同的，会感觉提示是无用的。

　　案例

　　如上图，“Web2.0网站集合”中就存在这样的问题。

　3 表单组件错误

　　这一部分参考《Gui设计禁忌》的很多内容。

　　3.1 互斥的复选框

　　问题

　　一组复选框不能同时全部选中。

　　分析

　　一个复选框组的属性之一就是所有选项能全部同时被选中。用户看到一个复选框组，默认它是具有这样的属性的。如果用户选中某个选项的同时，其它选项自动取消选择，会让用户感到迷惑。

　　案例

　　某网站编辑文字样式时的选项。如果选择最后一项“无”，上面的四项会自动取消选择。

3.2 无初始值的单选按钮组

　　问题

　　单选按钮组的初始状态没有被选中的项。

　　分析

　　用户可能不去选择这个单选按钮组，没有默认值的话就增加了用户操作错误的几率。

　　案例

　　网易通行证注册表单。如果用户习惯性的不去修改性别，系统就会报错。

　3.3 只有一项的单选按钮组

　　问题

　　单选按钮组中只有一项，即只有一个单选按钮。

　　分析

　　这里的单选按钮不具备选择的功能，引诱用户去做无用的点击操作。

　　案例

　　某网站购物流程中的一个表单。也许为了美观，制作页面时给第一项“购买产品”也使用了单选按钮。

　3.4 在非开/关设之中使用复选框

　　问题

　　在二选一的功能中使用复选框。

　　分析

　　一个复选框的本质是一个开关。设计和开发人员常常为了节省空间或者让表单看起来美观一些，把一些本应是使用单选按钮组的二选一选项合并成一个选项，用复选框来实现。这样会使用户迷惑，不知道这个选项是什么意思。

　　案例

　　某网站购物流程中的一个表单。在“色彩选择”这一项，本应是两个选项：黑色和白色，这里却合并成一个选项“黑色”

　3.4 在非开/关设之中使用复选框

　　问题

　　在二选一的功能中使用复选框。

　　分析

　　一个复选框的本质是一个开关。设计和开发人员常常为了节省空间或者让表单看起来美观一些，把一些本应是使用单选按钮组的二选一选项合并成一个选项，用复选框来实现。这样会使用户迷惑，不知道这个选项是什么意思。

　　案例

　　某网站购物流程中的一个表单。在“色彩选择”这一项，本应是两个选项：黑色和白色，这里却合并成一个选项“黑色”

3.6 给只读数据使用文本框

　　问题

　　使用文本框呈现只读数据。

　　分析

　　表单中一些项目，用户无法修改，就不要使用文本框来呈现这些数据，哪怕是具有“disabled”属性的不可编辑文本框。

　　一般在这样的条件下使用不可编辑的文本框：用户通过操作开启/关闭某个选项（如点选或取消了某个复选框），引起某文本框的状态变化：可用或者不可用。即，不可编辑的文本框出现在页面中，其“不可用”的状态是可以通过用户操作变为可用的状态的。

　　随身医生网站的“虚拟医生”功能中的一步。性别和出生日期都无法修改，就不应该使用文本框或单选按钮这样的组件。

3.6 给只读数据使用文本框

　　问题

　　使用文本框呈现只读数据。

　　分析

　　表单中一些项目，用户无法修改，就不要使用文本框来呈现这些数据，哪怕是具有“disabled”属性的不可编辑文本框。

　　一般在这样的条件下使用不可编辑的文本框：用户通过操作开启/关闭某个选项（如点选或取消了某个复选框），引起某文本框的状态变化：可用或者不可用。即，不可编辑的文本框出现在页面中，其“不可用”的状态是可以通过用户操作变为可用的状态的。

　　随身医生网站的“虚拟医生”功能中的一步。性别和出生日期都无法修改，就不应该使用文本框或单选按钮这样的组件。

4 交互错误

　　4.1 滥用对话框

　　问题

　　在交互过程中不恰当的使用对话框

　　分析

　　Web中的对话框一般有两种：Alert和Confirm。Alert的作用主要是警告、报错。Confirm的作用主要是请求用户确认。所以，如果用户在交互过程中操作成功，不应该使用对话框来提示成功信息。

alert对话框

Confirm对话框

　　如果要给用户显示提示信息，可以使用“黄褪”方法。即用一个明显的显示提示信息，在一定时间后再让隐藏，不打断交互过程。

　　案例

　　X-Space的回复过程。回复成功后弹出“您的回复已经成功发布！”的警告。

　　Gmail使用“黄褪”技术而不是弹出对话框。

4.2 被意外重排的布局

　　问题

　　相同内容在交互的过程中布局发生变化

　　分析

　　交互时，用户会根据上一步的布局判断接下来这一步的布局，并提前把鼠标移到他期望的位置。如果布局发生变化就会给用户带来不便。

　　案例

　　某网站注册流程。用户在第一幅图所示页面中点击“下一步”，会发现下一页面中的“上一步”和“下一步”按钮都移动了位置。

4.3 不允许用户犯错误

　　问题

　　没有充分考虑交互过程中用户犯错误后怎么减小用户损失

　　分析

　　要允许用户犯错误，而且在设计产品功能时要尽可能的减少用户犯错误后的损失。

　　案例

　　LBS Blog的评论功能。如果用户输入的用户名、密码、验证码中的一项存在错误，提交评论后，系统会报错，并让用户返回。如果在返回的过程中遇到网络堵塞，之前填写的所有评论内容都会被清空，用户要重新再输入一遍。

4.4 要求用户做多余的点击

　　问题

　　在交互过程中设置过多的步骤，使用户点击次数增多。

　　分析

　　用户在页面中操作时，希望能快速达到自己的目的。如果设置过多的步骤，会增加用户的点击次数。

　　案例

1.

2.

3.

4.

5.

 

　　从网易首页注册网易通行证，要经历5个步骤。

　　在renren.com首页点击“注册”，会直接漂浮出注册表单，一步就可以注册成功。

4.5 隐藏的功能

　　问题

　　一些功能不容易被用户找到

　　分析

　　网站中有些功能设计得让用户不容易看到，甚至需要用户经过几次点击后才可以找到。这样可能造成大批找不到这个功能的用户无法使用该功能。

　　案例

　　网易首页的“通行证”一栏，没有提供“注册”链接，用户需要点击“通行证”，进入“网易通行证”才能注册。

4.6 信息被遮挡

　　问题

　　用户需要阅读、点击的内容被遮挡

　　分析

　　尽管在设计、制作过程中很少会犯把用户需要的信息遮挡起来的错误，但网页中有些东西是我们在设计、制作过程中有可能想不到的。

　　案例

　　Tom的漂浮广告把页面内容遮挡。

　　百度注册时，验证码输入框的自动完成列表会把验证码图片挡住。用户无法依照图片输入。

　　百度不少页面都有这样的问题。验证码填多了，输入某个数字，自动完成就会出现，把验证码图片挡住。

　　把图片放到文本框右侧就不会有这样的问题了。

                                                                                                                                           出处：蓝色理想 
                                                                                                                                           责任编辑：moby