`
hududanyzd
  • 浏览: 800092 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多
<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 重复的导航项目

  问题

  导航中有重复的项目

  分析

  用户看到重复的项目,会想知道他们是癫煌M没Щ峒俣ㄕ庑┫钅恐赶虻牧唇邮遣煌模己蕉杂没ё髁舜砦蟮囊肌?/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的注册页面。“生日”和“出生年份”后面有两个设置权限的下拉框(两个黄色的钥匙图标那里)。他们与“生日”和“出生年份”相隔太远,让用户无法在第一时间看出其中的从属关系,无法判断他们的功能。

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

分享到:
评论

相关推荐

    C#全能速查宝典

    1.1.5 Console类——控制台中的输入流、输出流和错误流 6 1.1.6 Convert类——类型转换 8 1.1.7 常量——值不改变的量 9 1.1.8 Dispose方法——释放资源 10 1.1.9 迭代器——相同类型的值的有序序列的一段代码 10 ...

    TX4139开关电源12V原理图加PCB带库参考布局亲测可用

    预览文件(__Previews)则帮助我们在设计完成后检查PCB的外观和布线,确保没有明显的错误或疏漏。 总结来说,TX4139开关电源12V的设计涉及了开关电源的基本原理、TX4139芯片的工作特性、Altium Designer的使用技巧...

    html会员登录页面模板

    最后,考虑到网页的可用性和无障碍性,设计师需要遵循一定的标准和最佳实践,如WCAG(Web Content Accessibility Guidelines),确保视力障碍或其他障碍的用户也能方便地使用登录页面。这可能涉及到使用适当的标签、...

    图书馆系统,大一java课程设计,swing界面,基本数据库操作.zip

    例如,当用户借阅书籍时,应先检查书籍是否可用,然后更新图书状态并记录借阅信息,这两步操作需在同一个事务中完成,确保即使中间出现异常也能回滚到初始状态,避免数据错误。 此外,良好的错误处理和日志记录也是...

    花园实验幼儿园整站源码,已测试

    5. **整站构建**:整站源码包括了前端用户界面和后端逻辑,涉及网页布局设计、数据库管理、用户交互逻辑等多个方面,对于想要自定义网站功能和外观的用户非常有用。 6. **幼儿园网站特点**:这类网站可能包含学生...

    Mastering Dojo-JavaScript and Ajax Tools for Great Web Experiences

    布局是决定表单可用性的关键因素之一。这部分深入讨论了如何使用Dojo的布局工具来创建清晰且易于填写的表单结构。 2.5 **改进的表单控件** 为了进一步提升用户体验,Dojo提供了一系列高级表单控件。这些控件不仅...

    VisionVS_c#界面_

    5. **响应式设计**:虽然Windows Forms没有像Web开发中的响应式设计那样灵活,但通过设置控件的AutoSizeMode和AutoScaleMode属性,可以在不同分辨率的显示器上保持界面的可读性和可用性。 6. **资源管理**:在...

    JavaScript Programmer's Reference - Alexei White

    CSS用于控制网页外观布局。尽管本书主要关注JavaScript,但了解CSS基础知识仍然很重要,因为两者经常协同工作来呈现动态效果。 #### 第十六章:动态HTML 本章探讨了如何结合HTML、CSS和JavaScript实现动态网页效果...

    ActionScript3.0开发人员指南

    - **错误类型**:列举常见的错误类型,如语法错误、运行时错误和逻辑错误,以及它们的差异。 - **ActionScript3.0中的错误处理**:深入了解AS3中错误处理的语法,包括使用`try-catch-finally`语句。 - **使用Flash...

    程序画面设计 你不知道的那些事情

    - **界面中颜色的活用**:合理搭配色彩,不仅可以美化界面,还可以提高信息的可读性和可用性。 ##### 2.5 动态效果 动态效果能够为静态的界面增添生命力,但需谨慎使用,避免干扰用户的正常操作。 - **动态表示...

    Excel 2007数据透视表完全剖析 1/7

    3.4 利用样式和主题自定义数据透视表的外观 50 3.4.1 自定义样式 52 3.4.2 修改未来数据透视表的默认样式 53 3.4.3 用文档主题修改样式 54 3.5 修改汇总计算 55 3.5.1 了解空单元格会导致计数的原因 55 ...

    Excel 2007数据透视表完全剖析 5/7

    3.4 利用样式和主题自定义数据透视表的外观 50 3.4.1 自定义样式 52 3.4.2 修改未来数据透视表的默认样式 53 3.4.3 用文档主题修改样式 54 3.5 修改汇总计算 55 3.5.1 了解空单元格会导致计数的原因 55 ...

    Excel 2007数据透视表完全剖析 3/7

    3.4 利用样式和主题自定义数据透视表的外观 50 3.4.1 自定义样式 52 3.4.2 修改未来数据透视表的默认样式 53 3.4.3 用文档主题修改样式 54 3.5 修改汇总计算 55 3.5.1 了解空单元格会导致计数的原因 55 ...

    Excel 2007数据透视表完全剖析 4/7

    3.4 利用样式和主题自定义数据透视表的外观 50 3.4.1 自定义样式 52 3.4.2 修改未来数据透视表的默认样式 53 3.4.3 用文档主题修改样式 54 3.5 修改汇总计算 55 3.5.1 了解空单元格会导致计数的原因 55 ...

    DevExpress安装程序for3.0

    标题中的"DevExpress安装程序for3.0"指的是DevExpress工具集的一个特定版本——v3.0的安装包。这个版本可能包含了该系列在2000年代初期的一些功能,因为软件版本号通常随着时间推移而递增。 描述中提到"注意阅读...

    Eclipse权威开发指南2.pdf

    2.1.3 Eclipse的外观:编辑器、视图和透视图..... 16 2.1.4 用户界面概述..... 18 2.1.5 首选项介绍..... 19 2.2 基本的Eclipse使用...... 20 2.2.1 在Eclipse中工作..... 21 2.2.2 了解Eclipse用户界面..... 22 ...

    Eclipse权威开发指南3.pdf

    2.1.3 Eclipse的外观:编辑器、视图和透视图..... 16 2.1.4 用户界面概述..... 18 2.1.5 首选项介绍..... 19 2.2 基本的Eclipse使用...... 20 2.2.1 在Eclipse中工作..... 21 2.2.2 了解Eclipse用户界面...

    Eclipse权威开发指南1.pdf

    2.1.3 Eclipse的外观:编辑器、视图和透视图..... 16 2.1.4 用户界面概述..... 18 2.1.5 首选项介绍..... 19 2.2 基本的Eclipse使用...... 20 2.2.1 在Eclipse中工作..... 21 2.2.2 了解Eclipse用户界面...

    beginning_windows_8_application_development_-_xaml_edition

    - **用户体验设计**:强调如何通过有效的UI设计提高应用程序的可用性和吸引力。 ##### 3. 设计Windows 8应用程序 (Chapter 3: Designing Windows 8 Applications) - **用户界面设计**:讲解如何创建既美观又实用的...

Global site tag (gtag.js) - Google Analytics