Internet网页界面设计 二 (常见可用性错误)

（网页设计中）常见可用性错误1、布局、外观错误1.1页面宽度问题设计页面宽度时不考虑使用低分辨率(如800*600)的用户分析在2006年7月9日发布的全球Web调查显示，使用800*600分辨率的用户仍占11%，所以在设计页面宽度时，要照顾这部分用户。例如：游戏站的用户大多是游戏玩家，他们中间绝大多数人的浏览器分辨率是1024*768或更高的分辨率，所以游戏专题为了获得更好的效果，可以在1024*768分辨率下设计页面宽度。但不排除其中也有一部分800*600分辨率的用户，为了保证这些用户能在第一屏获得更好的效果，要把主要内容放在页面左侧。案例神州学习网，面向的用户中有很多是大学生用户，目前大学里800*600的显示器还是占不小的比例的。而这个网站采用1024下的页面宽度，显然会失去一部分用户。毕竟类似的学习网站还有很多，用户完全可以选择其它的网站来学习。1.2字体1.2.1字体样式过多问题页面中的字体样式过多分析显示太多的属性会让用户难以找到感兴趣的对象，增加了用户的记忆负担。案例早期的一些网站，文字样式有十几种。让用户抓不住重点。比如早期的“中华人民共和国中央人民政府”的官方网站。同为门户，网易首页的文字样式就规划得很清晰，重点突出。1.2.2相同样式的文字功能不同问题外观相同的文字，功能不同，违背一致性原则，让用户在交互过程中有挫败感。分析外观相同的文字在用户看来会具有类似的功能，如：是不是链接，是不是在新窗口打开链接。如果相同样式的文字在页面中，既有链接文字，也有非链接文字，很可能用户试图点击文字的时候却发现文字不是链接，心中默认即将在原窗口打开的链接却在新窗口打开了，这样就会给用户带来挫败感。案例右图为最新“中华人民共和国中央人民政府”网站。“应急管理”和“主题服务”文字样式相同，却前者是链接而后者不是。某学校网站的导航栏。前面的链接都是打开一个页面，最后一个“联系我们”却是发送邮件的链接。用户以为点击它会和前面一样打开一个页面，里面有联系方式等。但点击后却启动了Outlook。1.2.3字号太小问题页面文字字号太小，而且使用了固定大小的字号样式，使视力不好的用户无法阅读。（*有些款式的手机也会有此相同的问题，字体大小改变不了，给一些用户，特别是老年用户带来使用方面的不便。）分析老年、视弱的用户也许很难看清网页上的12像素文字。他们往往会使用类似IE中的“查看-字体大小-最大”菜单来放大文字阅读。但如果使用像素作单位来定义文字大小的样式，对IE来说，这个菜单就失效了。大部分网页应尽量采用百分比为单为来定义文字大小的样式，主要面对视力不好用户的网站更应该这样。案例中国老年网，网站主要用户是中老年人。大部分文字都是12像素，在IE下无法放大观看，让老头老太太们拿着放大镜去瞅吧。1.3导航栏1.3.1动态导航栏问题导航栏的内容和功能会因用户状态或用户在网站中的位置不同而改变。分析多变的导航会把用户弄糊涂：用户很可能没有意识到导航发生变化了。他们也不知道导航在什么情况下会变化。这就造成用户要去不断试探才能了解其中规律，让网站的可学习性降低。案例用户登录前和登录后，“论坛”的二级导航有明显的不同。（改正方法：可以将登陆情况和导航分开。）如下：易趣，将用户信息与导航分开处理。无论用户状态怎样，导航栏内容不变。1.3.2重复的导航项目和无用的导航提示信息问题导航中有重复的项目和无用的导航提示信息分析用户看到重复的项目，会想知道他们是否不同。往往用户会假定这些项目指向的链接是不同的，导航对用户作了错误的引导。案例北航电子信息工程学院的网站导航：有两个“人才培养”的链接。*****************************************上为某学校网站的导航栏，当鼠标指向某个导航项时，都有一个和导航标题内容相同提示信息，造成重复。没必要。1.3.3导航不能给用户导航问题导航不能指示用户当前位置，或用户无法通过点击导航中的链接去他想去的地方。案例：某网站新闻页的导航。“网站首页新闻频道官方动态新闻正文”是没有加链接的文字。用户只能通过这行文字了解他所处的位置，但无法通过点击导航返回上一级。*如QQ提示新闻中，点击某导航链接却打开另外的网页。1.4排版1.4.1排版没有体现常用或自然的次序问题排版没有体现用户期望的顺序。分析排版没有经过分析，不能体现内容的顺序性和使用频率，不能按照用户的习惯操作流程和逻辑布局。案例Google的Joga.com，加入某个球队社区功能。“返回”和“加入”按钮相隔甚远，而且把“返回”按钮放到了“加入”按钮的前面。由于Joga.com是Google拿原有的英文程序修改而成，所以注册页的排版没有照顾中文用户的习惯：让用户先填名字后填姓，先选月、日后选年份，先写城市后选国家再填家乡。让用户感觉思想被操纵着在一堆信息中跳来跳去，整个注册流程完成后十分疲惫。（*本地化和翻译的区别）1.4.2排版没有依据内容的重要程度问题排版主次不分明分析这样的布局看起来好像只是策划人员决定需要那些内容后多少有些随意的安放在页面中。即使这样的排版看起来似乎还不错，但有可能是非常失败的设计。案例TOM体育：作为一个体育频道，用户需求是大量的体育新闻。TOM体育的头版却安排了大量的花边新闻、美女图片，这些次要内容占据了很多本该用来显示体育新闻的位置。新浪体育处理得就比较好，头版充斥大量的最新最引人关注的体育消息。1.4.3将不同类型的内容并列处理问题将不同类型的内容当作同一类型来并列排版分析有些内容，功能不同，但往往由于各种因素在排版时被并列处理。用户看到并列处理的元素，会下意识把他们当作功能并列的元素，这样在使用时往往会产生错误或发生挫折。案例1北航BBS的登录表单。“登录”按钮是表单的一部分，起到提交表单的作用。而“注册”只是一个打开注册页的链接。设计者为了追求美观而将其并列排版，统一处理成按钮形式，会让部分用户误以为“注册”也是这个表单的一部分，填写用户名、密码后点击“注册”就提交了注册表单。而实际上点注册时，填写的用户名、密码并没被提交，到注册页面以后还要重新输入你要注册的用户名、密码。案例2搜狐首页的搜狗搜索。新闻、网页、音乐、图片、说吧这五项都是模拟的选项卡效果，点击以后，改变点击项的样式，不打开任何页面。但点击“地图”会弹出新的页面，让用户在操作过程中很可能感到十分意外。在这里，前五项都具有选项卡的功能，可以并列排版，而“地图”的功能明显不同，所以不应该和其他五项并列排版。1.4.4间距处理不当问题内容间的距离不合适，使用户无法辨别内容是如何组织的。分析排版时，应注意页面的易阅读性。每块内容或每个元素之间的距离如果处理不得当，会迷惑用户。比如：两个相关元素距离太远，会让用户感觉他们是彼此独立的。案例Joga.com的注册页面。“生日”和“出生年份”后面有两个设置权限的下拉框（两个黄色的钥匙图标那里）。他们与“生日”和“出生年份”相隔太远，让用户无法在第一时间看出其中的从属关系，无法判断他们的功能。某网站的登录表单。用户名输入框离“用户名”三个字很远，和“密码”连在了一起。影响用户判断它们之间的关系。2文案错误2.1文案不一致问题在页面中，对于相同的概念使用不同的术语，或对于不同的概念使用相同的术语。分析如果对同一概念使用不同的术语，可能导致用户不能识别出它们原来是同一个概念。如果对不同的概念使用相同的术语，可能会混淆一个新用户，阻碍他们学习。案例对于百度贴吧的“帖子”，可以在网站中找到三种术语来描述：“帖子”、“留言”、“发言”。2.2晦涩难懂问题网页中使用的语言含义模糊，用词晦涩，或过于专业，使用户难以理解。分析在网页中使用行话、术语，让用户无法理解，不知道网页在传递什么信息。案例MolyXBox论坛的“论坛显示设定”，其中有一项“用户启用AJAX功能开关”的选项。这个论坛产品面向的绝大部分用户都不是程序员，他们不可能知道什么是AJAX，对他们来说这个选项因为“AJAX”这个专业术语而失去了作用。*注：AJAX全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。2.3无用信息问题网页中的文字带来的信息对用户没有任何用处。分析用户看到无用的文字会花费大量时间去思考，这段文字带来的信息是什么，得出“这段文字没有带来任何有价值的信息”的结论后，用户会产生挫败感。案例某网站的出错信息：“出现错误，请重试后进入”。并没有告诉用户哪里出了错，而且没有提供类似“返回上一页”的链接。（即无用的反馈信息）上为在某网站申请邮箱过程中出现的提示信息。（出错的原因是出生年份填成1111，但提示信息并没有显示出来这一错误原因。）3表单组件错误3.1互斥的复选框问题一组复选框不能同时全部选中。分析一个复选框组的属性之一就是所有选项能全部同时被选中。用户看到一个复选框组，默认它是具有这样的属性的。如果用户选中某个选项的同时，其它选项自动取消选择，会让用户感到迷惑。案例某网站编辑文字样式时的选项。如果选择最后一项“无”，上面的四项会自动取消选择。3.2无初始值的单选按钮组问题单选按钮组的初始状态没有被选中的项。分析用户可能不去选择这个单选按钮组，没有默认值的话就增加了用户操作错误的几率。案例网易通行证注册表单。如果用户习惯性的不去修改性别，系统就会报错。（如在申请邮箱或者在BBS注册用户时）3.3只有一项的单选按钮组问题单选按钮组中只有一项，即只有一个单选按钮。分析这里的单选按钮不具备选择的功能，引诱用户去做无用的点击操作。案例某网站购物流程中的一个表单。也许为了美观，制作页面时给第一项“购买产品”也使用了单选按钮。3.4使用按钮作为开关分析使用按钮来开启、关闭网页中某些功能，这样做会使用户无法判断当前的状态，不知道该功能是开启着还是关闭着。而且按钮给用户的感觉往往是用来提交或重设数据用的。案例某论坛发帖时查看高级选项的按钮。用户点击该按钮后，高级选项被显示，但按钮并没有表现出现在高级选项的状态：是已经显示还是没显示。高级选项显示以后，点击这个“查看高级选项”按钮后，其实是隐藏高级选项。如果使用复选框，就会明确地标示出当前状态。3.5给只读数据使用文本框问题使用文本框呈现只读数据。分析表单中一些项目，用户无法修改，就不要使用文本框来呈现这些数据，哪怕是具有“disabled”属性的不可编辑文本框。一般在这样的条件下使用不可编辑的文本框：用户通过操作开启/关闭某个选项（如点选或取消了某个复选框），引起某文本框的状态变化：可用或者不可用。即，不可编辑的文本框出现在页面中，其“不可用”的状态是可以通过用户操作变为可用的状态的。随身医生网站的“虚拟医生”功能中的一步。性别和出生日期都无法修改，就不应该使用文本框或单选按钮这样的组件。3.6输入时容易出错的文本框问题对于格式有严格要求的表单项，使用文本框来接受用户输入。分析过分开放权限的文本框容易造成用户输入错误。用户输入的数据是什么格式应该由开发人员设计好，而不是要求用户按格式输入。案例随身医生网站的用户资料填写表单。其中生日一项很容易造成用户输入错误。这里如果使用三个分别代表“年”、“月”、“日”的三个下拉菜单，会比较好。4交互错误4.1被意外重排的布局问题相同内容在交互的过程中布局发生变化分析交互时，用户会根据上一步的布局判断接下来这一步的布局，并提前把鼠标移到他期望的位置。如果布局发生变化就会给用户带来不便。案例某网站注册流程。用户在第一幅图所示页面中点击“下一步”，会发现下一页面中的“上一步”和“下一步”按钮都移动了位置。4.2不允许用户犯错误问题没有充分考虑交互过程中用户犯错误后怎么减小用户损失分析要允许用户犯错误，而且在设计产品功能时要尽可能的减少用户犯错误后的损失。案例LBSBlog的评论功能。如果用户输入的用户名、密码、验证码中的一项存在错误，提交评论后，系统会报错，并让用户返回。如果在返回的过程中遇到网络堵塞，之前填写的所有评论内容都会被清空，用户要重新再输入一