1、人机交互界面设计,Lecture 16 网页设计禁忌,网站设计十大错误,1. 搜索引擎不友好过分依赖文字的搜索引擎降低了搜索可用性，他们不能应付那些打字稿（扫描稿），错别字、以及复数的、加了连字符号的词，还有变异的单词等等各种各样的问题。这样的搜索引擎对那些年纪大的用户来说显然是很难用的，但是如果搜索引擎刻意去迎合这种错误使用的话，会伤害到所有的搜索使用者。 一个相关的问题是，搜索引擎在给搜索结果排序的时候是完全按照其中所包含的检索条件的数量，而不是依靠文档的重要性。如果你的搜索引擎能够把“最佳推荐”放在结果的最前面就更好了特别是对于某些重要的查询来说，比如你的产品名称。当导航不能使用的时候
2、，搜索是用户的救生索。即使有高级搜索功能，建议还是使用简单搜索，搜索形式应该是一个简单的录入框，就象用户心里所期望的一样 。,网站设计十大错误,2、使用PDF文件作为在线阅读用户讨厌在浏览的时候跳出PDF文件，因为那会打断用户的浏览过程，因为普通的浏览器按钮无法工作，即使如打印或保存文档这样简单的事情也会变得复杂。由于其版面设计是基于纸张优化的，因此文字的字体很少会和用户的浏览器窗口相适应。没有了平滑的滚动浏览，有的只是超小号的字体。更糟糕的是，PDF文件内容是分块的，很难浏览。PDF是对于印刷及发行手册和其他需要打印的大文件来讲是很合适的，使用它的目的只是为了保留它的信息使其网页上浏览成为现
3、实。,网站设计十大错误,3、未改变已访问链接的颜色一个好的浏览历史能够帮助你了解目前的位置，因为那是你浏览的起点。知道过去和现在的位置反过来使得决定下一步去哪里变得容易了。链接是这些浏览过程中的一个关键因素。用户可以不去访问那些没有用处的地址，相反，他们会访问那些他们过去发现对他们有帮助的链接地址。最重要的是，他们知道哪些网页已经访问过了，这样就不必一次又一次访问同一个历史页面。但是这些好处只是基于一个重要的假设：由于网站提供不同的颜色显示，用户可以分辨出哪些链接访问过，哪些链接没有访问过。如果访问一个链接后颜色没有发生变化，那么用户很可能会感到迷惑并无意中反复访问同一历史页面。,网站设计十大
4、错误,4、文字未排版将所有文字堆积在一起是一种可怕的体验，浏览这样的文字将是痛苦的经历。在线写作，并不是为了打印，需要让用户能很好地阅读，下面是几个改进的要点：使用子标题使用列表突出关键字使用小段落反金字塔结构简单的写作风格,网站设计十大错误,5、固定字体大小CSS样式不幸让网站有权禁止浏览器的“改变字体大小”的功能，并使得网站有一个固定的字体大小。对于大多数人的年龄超过40岁的人来说，这个固定地文字大小实在太小了。尊重用户的喜好，让他们按照自己的需要修改文字的大小，同时，明确字体大小是相对的，而非绝对显示像素的数量多少。,网站设计十大错误,6. 网页标题搜索引擎不友好搜索是用户发现网站的最重
5、要途径，搜索用户找到一个独立网站的最重要的方法。网页的标题是你吸引新用户或老用户从搜索列表中定位到你网站的主要工具。网页的标题文字是在标记之间的文字，并通常作为搜索引擎结果列表中的链接文字。搜索引擎一般只显示标题开头66个字，是真正的缩略内容。网页标题也用户将一个网址加为书签时的默认文字，对于你的主页，应该以公司名称开头，接着是网站的简介，不要用“The”或“Welcome to”做为开头文字。 对于其他网页来说，标题应该是将具体内容的概要文字说明，由于网页标题是浏览器窗口的标题，也是用户任务条上的标签，多个窗口下将会显示每一页的标题，因此，如果你所有的网页标题字都相同的话，对于开了多个窗口的
6、用户来说，你网站的可用性将严重降低。 相关话题，主页所包含的标签（tag）：tag也需要简短，并且迅速传达网站的关键信息。,网站设计十大错误,7、所有的东西看起来都像广告有选择地吸引注意力是相当有力的途径。用户已经学会了对挡在眼前的那些目的性很强的广告采取不予理睬的态度。（专门的广告搜索除外） 不幸的是，这也使得用户忽视了那些看起来很像广告的设计样式。毕竟，当你不理会某些东西时，就不会仔细地研究它并搞清楚它是什么。因此，最好避免任何类似广告的设计。这一指导方针所传达的含义随着新的广告形式出现而变化。目前遵循以下规则：无视横幅：着用户将不会把注意力放在任何看似横幅广告的东西，这取决于它的形状及位
7、置。避免使用动画：用户会忽视那些闪烁的文字或其它侵略性很强的动画。净化弹出窗口：用户在弹出窗口完全打开前就会将其关闭，有时是带着极端厌恶的情绪。,网站设计十大错误,8、违反设计惯例一致性是最重要的可用性原则之一：当事物遵循相同的原则运作时，用户不用担心发生意外，因为他们根据先前的经验已经很清楚将会发生什么事情。就像你每次在牛顿的头顶上放下一个苹果，它一定会砸中他的脑袋一样。用户的期望实现得越多，他们就越感觉是自己在控制整个系统，并且更加喜欢它。相反地，用户则会感到可靠程度不够。想想，当我释放苹果时，它变成了西红柿并朝着天空蹦出一英里，那多荒诞！ Jakob的网页用户体验法则中说道“用户的大部分
8、时间会在其他网站度过” 这意味着他们对你的网站的期望，是基于其他网站通常是如何做的。如果你偏离了，你的网站就会非常难用，用户也会离开。,网站设计十大错误,9、打开新的浏览器窗口打开新的浏览窗口就像一个吸尘器推销员在上门推销时，直接将烟灰缸里的杂物倾倒在消费者家中的地毯上。拜托！不要用任何窗口污染我的屏幕（尤其在当前操作系统低劣的窗口管理技术下）。设计者打开新窗口的本意是要让用户留在他的站点上。但是却忽略了控制用户的机器所带来的负面效应，这种策略恰恰弄巧成拙，因为当用户想通过“后退”按钮返回先前的站点时，已经做不到了。用户通常注意不到新窗口已经被打开，尤其当他们的显示器很小，而窗口又正好是最大化
9、时。因此，当用户想要返回原来的站点时，面对的却只是一个不可用的灰色“后退”按钮。点击链接的标准结果是目标页面在当前的浏览窗口中加载，取代现有页面。出现其它的任何情况都违背了用户的期望，令他们感到对网络的控制不稳定。用户痛恨那些突然弹出来的窗口，当用户想要在新窗口打开一页的时候，会自己使用“在新窗口打开”功能，因此不要用一些代码来干扰了用户浏览器的操作。,网站设计十大错误,10、不回答用户的提问互联网用户是高度目标驱动的。他们访问某个网站是因为那里有他们想要的东西或许是购买你的产品。一个网站最终的失败就是因为没有提供给用户他们需要的东西。 事实上问题远没有这么简单，如果你不告诉用户产品细节 ，用
10、户就会以为你的产品或服务不能满足他们的需求，因此用户就不会购买你的产品，另外有些时候，这些关于产品的细节特性被深深隐藏在各种文档之间，用户没有时间阅读所有这些隐藏的信息，因此也就认为它们不存在。不回答用户提问的最坏的例子是拒绝提供产品和服务的价格清单，没有任何B2C的商务网站会犯这种错误，但是这在B2B中却普遍存在，他们通常的“企业解决方案”是面谈 ，这样你无法说出他们是适合100人还是10万人 。价格是信息最具体的部分，消费者以此了解产品的基础属性，没有价格会让人觉得迷惑并且减少他们对产品的了解。我们见过很多用户一边揪着头发一边问“价格在哪里？” 即使是B2C网站有时页会忘记在所有地方提供相
11、关产品价格清单，例如在目录页或者搜索结果页，要知道，在这两种情况下，价格是关键，它让用户能够区分不同的产品并找到最合适的目标。,2005年的十大网站设计问题,一易读性的问题让使用者决定浏览时字体大小。二没有标准的超连结表示三Flash的使用四网页无法呈现网站内容五搜寻的重要六浏览器的差异七讨厌的框架八没有链接相关资讯或是公司资讯九固定的页面宽度十不适当的图片放大连结,2003年的十大网站设计问题,一主题不明确二更改以存档的链接地址三内容没有注明日期四缩略图看不清细节五图片的ALT文字过于冗长六不给用户自定义选择七过长的商品列表选择八商品仅按照商标排序九过于限制用户录入的信息十页面包含指向自身页
12、面的链接,1999年的十大网站设计问题,一. 破坏或减慢“后退”按钮 “后退”按钮是网络用户的生命线，同时也是继超文本连接后最常使用的导航特征。用户可以随意尝试网页所指向的任何地方，而只需点击一两次“后退”按钮就可以回到系统已经保存的的先前页面。 当然，如果站点犯了以下某一错误的话，那么“后退”按钮就无法工作： 打开 新的浏览窗口 (参见错误二)。 使用 立即重定向 (immediate redirect)：每当用户点击“后退”按钮时，页面就会跳转至我们不希望访问的位置。 禁止缓存：这样做使得“后退”操作不得不重新向服务器发送请求；所有的超文本都应当是次秒级（sub-second）的，这样做会
13、使得返回的时间加倍。,1999年的十大网站设计问题,二打开新的浏览窗口 三GUI (图形用户界面) 部件的不规范使用:目前，在网上违背一致性最严重的是 GUI 部件，如单选按钮(radio button)或多选框(checkbox)的应用。这些设计要素的正常行为方式在 Windows 界面(UI)标准，Macintosh 界面标准 以及 Java 界面标准 中均有规定。遵照哪种标准取决于你的主体用户所使用的平台（多数情况为 Windows），但由于这些标准都非常接近，所以基本没什么影响。 例如，单选按钮的标准表明，它应该被用于从一系列对象中挑选一个，但这一选择直到用户点击确定按钮确认后才生效。
14、不幸地，我见过许多网站将单选按钮当作了动作按钮，一点击就立即得到结果，这样做严重偏离于标准接口的设计，并使网络用起来更加困难。,1999年的十大网站设计问题,四缺少自我介绍 据我1994年的第一次网络研究显示，用户希望了解网络信息背后的那些人。尤其是作者的传记和照片，因为这有利于让网络不再冷冰冰，而变得更可靠，更温情。个性及观点通常都强于匿名的文字。 至今仍然有许多站点不采用专栏和署名的方式来发表文章。即使有署名的，也常忘记在作者的署名上添加链接以帮助读者找到该作者的更多文章。 用 mailto: 链接来代替作者传记尤其糟糕，有以下两方面原因： 对读者而言，更多的人希望了解作者(包括搜索作者的
15、其它文章)而不是与他取得联系。当然，联系方式常常是传记的一个部分，但它不应是关于作者的首要或唯一资料。 当用户点击蓝色下划线，跳出的是电子邮件信息而不是一个新的页面时，就违反了网络中约定俗成的规矩。这样的不一致使得网络更不可预料，并降低了可用性。,1999年的十大网站设计问题,五缺少存档 旧的信息通常都很有用。 即便新信息比旧信息更有价值，旧信息总还存在一些价值，况且将它们保持在线并不需要昂贵的花费。我估算过，存档大概增加10%的站点费用，但却能增加约50%的可用性。 存档作为消除 linkrot(错误链接页面) 的唯一方式是有存在必要的，并且它能鼓励其它网点与你建立链接。,1999年的十大网
16、站设计问题,六移动页面至新的URL（主要入口增加链接转向） 页面一移动，就破坏了从其他站点来的链接。为什么要使那些为你介绍免费顾客的人受损呢？ 七标题和内容不匹配 网页的标题以及其他 缩略内容（microcontent）的写法必须区别于传统传媒：作为界面元素的可诉项（actionable item），应该协助用户导航。 对于整页的作为表格内容的文字（如首页或目录页），标题通常都被移除，搜索引擎的结果同样如此。不管在哪种情况下，标题必须非常简明并满足两个要求： 、让用户不需任何臆断就能明白链接的另一端是什么。 、如果用户对目标页面不感兴趣，他们就不会点击链接(因此，请不要愚弄用户，也许开始的一两
17、次能够得逞，提高访问量，但在长此下去用户最终会放弃该站点，并且这样做降低了它的可信度)。,1999年的十大网站设计问题,八对最新的网络热门(buzzword)紧追不舍 网络在受着多方面的冲击，它们来自于金钱以及那些号称已找到拯救亏本站点办法的人。 推销，社区，聊天，免费电子邮件，3D 站点地图，拍卖你很了解这些把戏。 但是世上没有魔力子弹。大部分网络热门是有一些道理，但也仅能为为少数能够恰当运用它们的网站带来薄利。一般情况下，大量网站因采用这些办法而受害。既然将精力投在时尚，流行上的机会成本如此之高，还不如多花些时间、金钱和管理来改善基本客户的服务质量和可用性。 下个月可能又会有新的热门出现。
18、你可以期待它。但切忌不要只因为分析家(Jupiter)写了篇关于它的报告而使自己突然转向。,1999年的十大网站设计问题,九服务响应过慢 缓慢的响应时间是网络可用性最大杀手：在我的 原始“十大”错误调查 中，对大多数站点而言，竟有高达84%的投票指向其严重违背了相应时间这一规则。 臃肿的图片设计是响应时间的根本杀手。一些站点仍然使用过多或过大的图片；又或者它们采用了applet，而这些applet用普通或动态HTML完全可以替代。所以我依然在 最小化下载时间 的战役上奋斗着。 基于网络应用，电子商务及个性化的发展也同时意味着每一页都必须在运行时进行计算。结果，造成登陆页面的延时已不仅取决于下载
19、延时(虽然这已经很糟糕了)，还决定于服务器的性能。有时创建一个页面还涉及到与后台主机的连接或数据库服务，这些都进一步降低了处理速度。 用户们不关心响应速度慢的原因。他们所知道的只是站点没有提供优质的服务：响应迟缓常直接导致 信任度降低，大量用户转至其它站点而引起大幅度的流量损失。所以要在高速服务器上投资，并聘请性能专家检查你的系统内部构造及代码质量以优化响应时间。 十所有的东西看起来都像广告,错误：字体过小,网站中很多页面的字体过小，多数用户不能轻松阅读，而且很多文本都不允许用户调整它的字体大小。由于计算机屏幕上的文字都比印刷的文字小而且不清楚，很多用户（尤其是那些45岁以上的用户）想要看清1
20、2磅以下的文字，将会有很大的困难 图表标记的字体过小，多数用户无法阅读,错误：字体过小,窗口左边的导航按钮由于它的方位和字体导致用户很难阅读。因为它们是位图，不能根据浏览器的设置来调整字体大小。因此，阅读它们对一些年龄稍大的用户来说会很困难 结果图中标记符号的文本字体过小，多数用户无法阅读,设计准则,字体最小使10磅，而12磅或许更好：永远不要使用小于10磅的字体显示，10磅应该是默认的最小字体。事实上，在高分辨率下，10磅会显得很小，通常12磅的字绝大多数用户可以看得清 设计时要考虑高分辨率 不要控制Web上的字体大小：网页设计人员应当不要设置字体大小，这样用户就可以依据浏览器自己调整大小,
21、错误：窗口标题与调用的命令不符,网页的标题或名字与调用它的菜单项或按钮中的命令标记没有确定的对应关系如：,错误：窗口标题与调用的命令不符,当用户调用了应用程序中的不同功能并随后使用它的时候，他们需要持续、清楚的反馈以便得知他们已进行的操作以及他们现在所在的位置。他们需要确认他们所作的和所得到的正是他们想要的。不仅如此，计算机用户会咬文嚼字地（经常很过分）理解标记和其他有助于导航的屏幕信息。如果他们看到的两个断语哪怕只有很小的不同之处，他们都会认为这肯定意味着一些差异。,错误：窗口标题与调用的命令不符,几种常见形式： 使用句子的不同词语：如命令名用“新X”，结果窗口标着“编辑X”或“创建X” 使
22、用同义词：如：“查找”和“搜索”，开发人员认为相同，用户看起来可能并不是同义的 特指的程度不同：有时命令是特指的，如“添加员工”或“删除单元格”等；而窗口标题却是通用的，比如“添加记录”或者“编辑表格布局” 分别使用了任务域和实现域中的术语。命令标记使用任务域的术语，而窗口标题则使用了实现域中的术语。如：命令标记为“员工”，窗口标题为“数据记录”,设计准则,网页标题与打开他们的命令名之间应该有清晰的对应关系。对于“清晰的对应关系”的定义应该来自用户，而不是开发人员，关键在于使用户清楚，他们看到的确实是他们想要的。最方便的做法是让网页的标题与调用他们的命令的名字相同 如果对于用户理解有利的话，两
23、者不完全一样也是可以的。如“显示订单状态”和“订单状态：订单名”之间的差异就很小,设计准则,参数化窗口标题：如使用“打开”命令时，如果选中的数据对象时表示员工信息的，可能会打开“员工”窗口，如果选中的数据对象是表示组织信息的，可能会打开“组织”窗口 特殊情况：由系统事件显示的窗口：如果窗口不是由用户有意或者直接揭发的事件或情境产生的，可以由系统产生,错误：隐藏链接,变体A： 1.图片链接不清楚：当把图片设置为链接时，浏览器会自动为其显示边框，但如果把图片设置为border0，边框即被隐去，这样用户可能会错过真正的链接，而徒劳地去点击非链接的图片（特别是网站上有多幅图片，其中只有部分链接的情况）
24、 2.图像映射：浏览器并不标识图像映射的链接，即图片的每个链接部分都没有特定颜色的边框，特别是当图片被划分开来，只有其中一部分有链接的时候，用户根本就无法知道哪里有而哪里没有链接,错误：隐藏链接,变体B：链接着色不一致。HTML允许每个网页采用不同的颜色标识链接，但是并不鼓励这种用法，因为这可能和用户浏览器指定的链接颜色有所冲突。然而，总还是有一些开发人员使用这个功能 变体C：点击这个（Click this），将链接隐藏于文本中.这种链接样式对于商业和组织行的网站而言显得太不正规了，会给访问者造成非专业设计的印象。另外，隐藏在文本中的链接不容易被人注意到，特别是包含隐藏链接的词组在同一个页面中
25、多次重复出现的时候,设计准则,1.保留整幅图片的默认边框，没有链接的图片有无边框都可以，如有边框，一定要避免和浏览器标识链接的颜色雷同。 2.如果没有边框，要确保图片能显示何处有链接 3.不要使链接的颜色杂乱：不要设置链接的颜色。让用户在他们自己的浏览器中设置就行了 4.不要在文段中隐埋链接:公司网站不能像个人网站那样有很多冗余和赘述，应该尽量清晰并且易用,HTML 错误,表格不正确嵌套 不正确的嵌套表格，可能会令到你以为正常的网页用ADSL开2、3分钟都开不了。 1.就是在一个大表格里不断地嵌套表格，这样会令到打开网页的速度变慢（虽然说现在的IE改善了这一问题，但还是不建议这样做），另一方面
26、维护、修改也极不方便，一般来说简单的套用是没有问题的，甚至3、4层，但是不要把所有内容都放到一个表格里去。 2.就是在一个大表格里放入所有内容，而其中包括一个免费的计数器代码，解决方法就是把计数器单独放在一个表格里，别和其他内容一起放在同一表格。,用户挫折感,每个人在使用计算机时多少都会产生挫折感，感觉的范围从轻微的不满到极度的愤怒。有许多原因可以造成这类情感反应： 应用软件不能正常工作 系统不能按照用户的要求工作 用户不能达到自己的期望 系统不能提供充分的信息以指导用户 错误提示信息含糊、牛头不对马嘴或措辞尖锐 界面过于杂乱、艳丽、花招百出或过于高傲 系统在引导用户执行了许多步骤之后，才指出
27、前面某个步骤出错，导致用户需要从头开始。,用户挫折感,1.花招百出 原因：用户的期望无法实现，系统却给出了一些巧妙的借口挫折感等级：中。 例：用户点击某个链接，打开网页后却看到“正在构建”，更糟糕的情形是网页显示工人正在施工的图标。使用户产生挫折感 如何避免或减轻挫折感：最好不要使用借口去掩饰。,用户挫折感,2.错误提示 原因：系统或系统软件在故障时只提示“错误原因不明”。 挫折感等级：高 例：在错误提示中使用密码和设计人员的术语是引发用户挫折感的一个主要原因。 如何避免或减轻挫折感：在理想情况下，错误提示应告诉用户如何解决问题，而不是陈述发生了什么事情，它们应该说明引起错误的原因和解决问题的
28、方法。Shneiderman（1998）设计了一组详细的指导原则，用于指导开发易读、易懂的错误提示。,如何设计错误提示的主要指导原则,错误提示应有礼貌地说明用户应做些什么，而不是责备用户。 避免使用某些词汇，如致命的，错误，无效的，不好的，非法的 避免使用过长的数字代码或大写字母。 用户应能够控制声音提示，因为声音可能让用户觉得难堪 提示应明确、不含糊 提示应提供帮助图标或命令，以便于用户获得与上下文相关的帮助 应提供多层次的错误提示，把长的解释作为短信息的补充。,用户挫折感,3.用户负担过重 原因：软件升级造成用户需要进行过多的内务处理 挫折感等级：中到高 例：在访问各种网站时，经常要求用户
29、安装新插件，用户需要花费大量时间安装认为正确的插件，不料它竟不能使用或与操作系统不兼容。增加了用户的挫折感 如何避免或减轻挫折感：不应要求用户花大量时间在内务处理上，软件升级应是毫不费力的自动过程。设计人员需要仔细考虑升级所带来的问题，特别是重新学习的工作量。那些需要用户自己查找、安装和设置参数的插件应逐渐被淘汰，取而代之的应该是功能更强大的浏览器，它可以安全地自动下载插件，并安装在系统的正确位置，最好是能够识别不同的文件类型。,用户挫折感,4.外观 原因：界面的外观令人生厌 挫折感等级：中 例：网页上的文字和图形过多，难以找到所需的信息。闪烁的动画，特别是标题广告容易分散注意力。 如何避免或减轻挫折感：界面设计应做到简单、优雅，让人一目了然，并且符合可用性设计原则、图形设计原则以及人类工程学原则。,
