Web可用性——网页设计第六讲

1、1 Web Usability (Web可用性) Dont make me think （不要让我想） 2 Contents（目录） nRule #1 Dont make me think（规则1：不要 让我想） nHow do we really use the Web? （我们如何使 用网站？） nDesigning pages for scanning, not reading （网页是用来扫描的，不是阅读的） nRule #2 Mindless, unambiguous choice （规 则2：不假思索的、明确的选择） 3 Contents（目录） nRule #3 Get rid

2、of half the words on each page （删除页面上的一半文字） nDesigning navigation （设计导航系统） nDesigning home page （设计主页） nUsability testing （可用性测试） 4 Krugs first law of usability: Dont make me think nAs far as is humanly possible, a Web page should be self-evident, obvious, self-explanatory. I should be able to “get

3、it” what it is and how to use it without expending any effort thinking about it. （只要可能，网页应该设计得 清楚易懂。浏览者应该能够“理解”该 网页这个网页是关于什么的，如何使 用它？而不需要费力去思考。） 5 Krugs first law of usability: Dont make me think nUsing a site that doesnt make us think about unimportant things feels effortless, whereas puzzling over

4、 things that dont matter to us tends to sap our energy and enthusiasmand time. （如 果网站不需要浏览者就无关紧要的东西 思考，那么该网站就可以说是不费力的。 反之，该网站就会浪费浏览者的精力、 热情和时间。） 6 Things that make us think （让我们思考的东西） nNames of things, like “job”, “employment opportunities” or “job-o- rama”. （事物的名称，比如“工作”、 “就业机会”、“job-o-rama”） nLink

5、s and buttons that arent obviously clickable. （不显示为可以点击的超链接 和按钮。） 7 Things that make us think （让我们思考的东西） nOther things that visitors to a site shouldnt spend their time thinking about, like：（其他 访问者不应花费精力思考的东西，比如说：） nWhere am I? （我在哪里？） nWhere should I begin?（我应该从哪里开始？） nWhere did they put ? （他们把*放 在

6、哪里了？） nWhat are the most important things on this page? （网页中最重要的东西是什么？） nWhy did they call it that? （为什么他们要叫它那玩 意儿？） 8 How do we really use the Web? （我们如何使用网站？） nFact of life #1: We dont read pages. We scan them. （事实1：我们不阅读网页，我们扫描 网页。） nFact of life #2: We dont make optimal choices. We satisfice. （事

7、实2：我们不会进 行理想化的选择，而是选一个相对好的选项。） nFact of life #3: We dont figure out how things work. We muddle through. （事实3： 我们不会费力去考虑事物工作的原理，而是会 “摸着石头过河”。） 9 Designing pages for scanning, not reading （设计适合扫描，而不是阅读的网页 nCreate a clear visual hierarchy on each page （在每页中建立清晰的视觉框架和 层次。） nTake advantage of conventions

8、 （利用 设计惯例。比如说，可以参考书报杂志 的设计惯例来设计网页。） 10 Designing pages for scanning, not reading （设计适合扫描，而不是阅读的网页 nBreak page up into clearly defined areas （把页面清楚的划分为不同的区域。） nMake it obvious whats clickable （让可 点击的东西清楚地显示出来，例如，让 按钮“长”的像按钮。） nMinimize noise（尽量减少“污染”。例 如，尽量不用背景音乐和背景图案；内 容尽量不要凌乱地堆砌。） 11 Krugs second l

9、aw of usability n It doesnt matter how many times I have to click, as long as each click is a mindless, unambiguous choice. （点击 次数并不重要，只要每次点击都不需要 思考（也就是说，点击的路径是很自然 的、符合逻辑的）。 12 Krugs third law of usability nGet rid of half the words on each page, then get rid of half of whats left. （删除每页中一 半的文字，然后把剩

10、下的一半再删除一半。） nIt reduces the noise level of the page. （这样可以 减少网页中的“污染”源。） nIt makes the useful content more prominent.（这 样可以让有用的东西更清楚地显示出来。） nIt makes the pages shorter, allowing users to see more of each page at a glance without scrolling. （这样页面就更短，浏览者可以不需要滚动就看到 尽量多的内容。） 13 Designing navigation （设计导

11、航系统） nThe purposes of navigation（导航系统 的作用） nIt helps us to find whatever it is were looking for.（帮助浏览者找到需要的内容。） nIt tells us where we are. （告诉浏览者其在 网站中的位置。） nIt gives us something to hold on to.（让浏 览者能够有所依赖。） 14 Designing navigation （设计导航系统） nThe purposes of navigation （导航系统 的作用） nIt tells us whats

12、here. （告诉浏览者可以在 这个网站中找到什么。） nIt tells us how to use the site.（告诉浏览者 如何使用这个网站。） nIt gives us confidence in the people who built it. （让浏览者信任网站制作者。） 15 Designing navigation （设计导航系统） nWeb navigation conventions（Web导航惯例） nSiteID （站点徽标） nSections （主要栏目） nUtilities (at least a way to go home and a way to s

13、earch)（功能性工具，至少要让浏览者能够回到首页， 并且提供搜索功能。） nSubsections（次要栏目） n“You are here” indicator and breadcrumbs（”您在 这里”标记） nPage name （网页的名称，有时也叫做网页标题） nLocal navigation（本地导航，也就是超链接） nFootnote navigation（页脚导航或“脚注”） 16 Designing navigation nTry the trunk test (导航测试) nImagine that youve been blindfolded and locke

14、d in the trunk of a car, then driven around for a while and dumped on a page somewhere deep in the bowels of a Web site. If the page is well designed, when your vision clears you should be able to answer these questions without hesitation: （假定把您眼睛蒙住，塞到汽车后备箱里， 然后开车开一段时间，再把您扔到网站中的 某个页面（有可能在网站的很深处）。如果

15、页面的设计合理，当去掉您的遮眼布时，您 应该能很容易地回答以下问题：） 17 Designing navigation nTry the trunk test (导航测试) nWhat site is this? (Site ID)（这是个什么网站？） nWhat page am I on? (Page name) （我在哪个 页面？） nWhat are the major sections of this site? (Sections)（这个网站都有哪些主要栏目？） nWhat are my options at this level? (Local navigation)（在这个层次上

16、都有哪些选项？） nWhere am I in the scheme of things? (“You are here” indicators)（我在整个网站中处于哪里？） nHow can I search? （我怎么进行搜索？） 18 Designing home page （设计首页） nThings the Home page has to accommodate（首 页上一般应包括的东西）： nSite identity and mission（网站徽标和网站使命） nSite hierarchy （网站的层次结构） nSearch （搜索功能） nTeases（吸引注意力的东西，

17、attention grabber） nTimely content （实时的内容，类似“新闻”、 “最近更新”等） nDeals （商业信息，例如广告） nShortcuts （快捷方式，提供访问某些页面或功能 的快速链接） nRegistration（注册登录功能） 19 Designing home page （设计首页） nabstract objectives（一些抽象的目标） nShow me what Im looking for. （告诉我我 要找的东西在哪里？） nand what Im not looking for.（以及虽然 我并没有找，但可能会吸引我的东西。） nSh

18、ow me where to start. （告诉我从哪里开 始，也就是如何去完成特定任务。） nEstablish credibility and trust.（建立信任。） 20 Designing home page nConvey the big picture（传达蓝图信息） nAs quickly and clearly as possible, the Home page needs to answer the four questions I have in my head when I enter a new site for the first time: （首页应该尽量快

19、且清楚地回答以下四个任何浏览 者都会问的问题：） nWhat is this?（这是个什么网站？） nWhat do they have here?（这个网站中有什么？） nWhat can I do here?（我能在这个网站做什么？） nWhy should I be hereand not somewhere else?（为什 么我要在这里，而不是别的什么地方？） 21 Designing home page nConvey the big picture（传达蓝图信息） nOnce I know what Im looking at, theres still one more imp

20、ortant question that the Home page has to answer for me: （用户 清楚地了解了主页的内容和特点后，主页还 需要回答一个重要的问题：） nWhere do I start? （我应该从哪里开始？） 22 Designing home page nFour popular ways to spoil the Home page（四种搞砸首页的流行方法） nPutting a banner ad on the Home page if you dont have to.（在没必要时，在首页上 放个横幅广告条。） nPromoting every

21、thing.（推销所有的东西。） nLetting deals drive Home page design.（让 广告驱动了首页的设计。） nGetting greedy for user data. （过于贪心得 到用户信息。） 23 Usability testing(可用性测试) nSeveral sure things about testing（有关测 试的正确说法） nIf you want a great site, youve got to test. （如果想要一个好的站点，必须进行测试。） nTesting one user is 100 percent better t

22、han testing none.（测试一个用户比一个都不测 试要好100%。 nTesting one user early in the project is better than testing 50 near the end.（项目 早期测试一个用户比结束时测试50个还有 用。） 24 Usability testing (可用性测试) nThe importance of recruiting representative users is overrated. （不需要非要雇佣“具 有代表性的用户”。） nThe point of testing is not to prove