B3 bohemia's - 坚持创新，给设计多一点乐趣 » 可用性 http://blog.b3inside.com User Experience.Art and Design.Photography.Bohemia and You Thu, 02 Sep 2010 14:24:20 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 10条可用性方面的启发 http://blog.b3inside.com/userexperience/ten-usability-heuristics/ http://blog.b3inside.com/userexperience/ten-usability-heuristics/#comments Sun, 04 Apr 2010 15:20:40 +0000 波希米亚 http://blog.b3inside.com/?p=991
  • “Back to Top”有害页面健康？
  • 一个关于“Back to Top”的小故事
  • 可用性工程的生命周期
    • ]]>

    译序：这篇文章是可用性大师 Jakob Nielsen 在10年前总结的，到今天仍然受用。通过这个时间跨度，可以得出，可用性话题不是某个时代的产物，一些研究经验时至今日也依然值得借鉴。看似短小的10条启示中，融入了大量项目经验，这些内容也将继续指导设计者，在新的互联网技术推动下，创造出更加高质量的产品。

    不要把它当作教程来看，它只是思想精髓的提炼。在各式各样的项目中，会遇到千奇百怪的情况，会跟各种角色的人一同协作完成目标。只有当大家达成共识，才能更好地提高效率，这10条启发正是纽带。

    其实，这是10条关于界面设计的基本准则。之所以称之为“启发”，是因为它们来源于实际经验，而非枯燥的理论知识。

    系统状态的可见性
    应始终让用户了解当前发生的事情，并在恰当的时机给予反馈。

    系统与现实世界的匹配
    讲用户听得懂的语言，无论单词、短语还是阐述一些概念，把术语留给机器去读。遵循现实世界的准则，让信息表现的自然、符合逻辑。

    用户控制和行动自由
    用户在功能选择上犯错是常有的事儿，这就需要为其提供一个“紧急出口”，不必再通过额外的对话就能离开那里。提供撤销和重做功能。

    一致性和标准
    别让用户为不同的文字、状况和行为是否代表同一件事情而产生疑虑。要遵循平台的思想。

    错误的预防
    一个能在第一时间防止犯错的设计，总好过一堆漂亮的错误提示信息。应当在用户行动以前，就消除能诱使犯错的条件，必要时提醒用户确认操作。防患于未然。

    系统去识别而不是让用户记忆
    尽量降低用户对目标、行为和可见选项的记忆成本。不要让他们去记忆信息该从哪段到哪段。同时系统的使用说明应当可见，并在必要时，提供适当的提示信息。

    灵活性和使用效率
    快捷键——对初级用户不必特殊说明——但可以提高专家级用户的使用效率，这种交互兼顾了有经验和没经验的用户。同时允许用户定制频繁动作（译注：允许用户将使用频率较高的操作集中，或将功能按个人习惯排列）

    简约设计美学
    对话不应该包含不相关或不需要的信息。因为每一个额外的信息单元，都会一定程度上削弱原本相关信息单元的相对可见性。

    帮助用户识别、诊断，并从错误中恢复
    错误信息应当使用简单的语言（别用代码、编号，这种东西只有工程师能看懂），有针对性地阐明问题，并带有建设性地解决方案。

    帮助文档
    即使一个系统很棒，不用依赖帮助也能使用，但它可能仍然需要帮助文档。诸如用户重点任务方面的任何信息都应该能被方便地找到，并提供有简明的具体行动步骤。

    via useit.com
    image：www.gettyimages.cn

    相关文章

    1. “Back to Top”有害页面健康？
    2. 一个关于“Back to Top”的小故事
    3. 可用性工程的生命周期

    ]]>     http://blog.b3inside.com/userexperience/ten-usability-heuristics/feed/ 7     可用性工程的生命周期 http://blog.b3inside.com/userexperience/the-usability-engineering-lifecycle/ http://blog.b3inside.com/userexperience/the-usability-engineering-lifecycle/#comments Wed, 10 Dec 2008 05:20:04 +0000 波希米亚 http://blog.b3inside.com/?p=227
  • 一个关于“Back to Top”的小故事
  • “Back to Top”有害页面健康？
  • 10条可用性方面的启发
    • ]]>     下载PDF: the_usability_engineering_lifecycle_1_0.pdf (190k)

    最近看了一些有关可用性工程方面的文章,包括一些方法和思想.
    总结下来有几点,我们还是缺乏归纳.为什么这么说,举个例子,我现在问”可用性工程的生命周期”是什么?估计很多人一下就蒙了.说实话,我刚看到这个问题的时候也蒙了,确实没有仔细的想过.

    其实我们这些从事可用性相关方面研究的工作者们,在日常工作中都是遵循这样的规律进行的.如果我换个方法来问”平时做可用性方面工作时,流程怎样,分哪几部分来进行?” 这会问题就好答了”大概分三块,先是进行需求分析;然后是设计,测试,开发;最后是安装部署,发布上线.” 大同小异,总之会按这种流程走下来.

    我们每天都在按照这个路子做事,只是缺乏归纳,这样对经验的积累和专业性的提高来说是不太好的.
    这个图我从<<The Usability Engineering Lifecycle>>找到(找不到?看看如何在Google上看书),画了两个晚上,顺便翻译成中文.希望对可用性工作人员的日常工作能起到一些辅助作用.做用户体验一部分靠事实,另一部分真得凭经验.经验来自平时的归纳总结.

    查看图片格式:

    可用性工程的生命周期

    相关文章

    1. 一个关于“Back to Top”的小故事
    2. “Back to Top”有害页面健康？
    3. 10条可用性方面的启发

    ]]>     http://blog.b3inside.com/userexperience/the-usability-engineering-lifecycle/feed/ 3     一个关于“Back to Top”的小故事 http://blog.b3inside.com/userexperience/short-story-about-top-links/ http://blog.b3inside.com/userexperience/short-story-about-top-links/#comments Tue, 09 Dec 2008 09:46:24 +0000 波希米亚 http://blog.b3inside.com/?p=180
  • 10条可用性方面的启发
  • “Back to Top”有害页面健康？
  • 用户体验案例研究：设计微博应用
    • ]]>     A Short Story About “Back To Top” Links
    Smashing Magazine版权所有
    作者：Smashing Magazine
    译者：UCD翻译小组，波希米亚
    原文地址： http://www.smashingmagazine.com/2008/11/27/short-story-about-top-links/

    译者序：这篇文章可以说以一种轻松、有趣的方式，对“Back to Top”有害页面健康？做了一个很好的回答。作者花了很长时间收集一些实实在在的使用案例，更直观的展示了“Back to Top”在网站中的使用，同时也明确表达了自己的观点。用“细节决定成败”开篇，也突出了本文编写的精细。

    通常关注小细节可以让设计更杰出。在一个网站的开发过程中，设计者趋于忘记小细节，把精力都集中在主要的设计元素上，比如导航，排版和布局。如果真的完成了，那结果通常是很稳定的、让人印象深刻的，而且高专业的传达了信息。然而，这并不值得骄傲。原因是因为这种设计通常都没有一个值得记忆的点：他们可能看上去很吸引人，但没法提供给用户一个栩栩如生的形象，让用户离开网站后还能想起它。

    这样看来，小细节是重要的，因为他们可以帮助设计脱颖而出。你是否曾思考过你的购物车的设计？那标签、时间戳、“向前”和“向后”的链接呢？虽然这些小细节对于网站的导航来说是无关紧要的，但他们却意味着是用户界面更友好、使用更方便甚至有时是更成熟的设计。这也是为什么我们在如下事情上为读者们考虑更多的原因，如：图片说明, 引用区块, 时间戳, 购物车, 翻页, <hr> 线, 标签云 和 favicons.

    在这篇文章里，我们来展示“Back to top”链接的设计——这个帮助用户跳回页面顶部的被遗忘，并且不常用的链接。访问者通过按他/她键盘上的“Home”键也能达到同样效果；但不是每个用户都知道这条捷径，绝大多数人都使用浏览器的滚动条来完成这个目的。作为设计者，我们可以通过在页面上加一个“top”链接来帮助用户。

    “Back to Top”链接什么时候有用

    不幸的是，这么友好的服务——可以让用户跳到页面顶部——却不常见。大多数设计者都不用它，这也是我们为什么花了5周时间，为这篇文章去收集了至少一打漂亮的案例。

    事实上，“Back to top” 链接也不是一直都有用。比如说，他们对于一个很短的网站或文章来说就是不必要的。在这种情况里，没必要让用户回到页面顶部，因为这个页面都在视线范围内；如果一个“top”链接出现在这种页面上，点击后会发现没有产生任何效果，这确实挺气人的。另一个为什么很多设计者不用它的原因是：眼下各式各样的显示器分辨率使“top”链接变得无用或没必要。这就是为什么在很短的页面上使用“Back to top”链接不是个好主意的原因了。

    然而，当网页较长时，就给访问者展示了它极好的特性，既省时间，又不用去滑鼠标滚轮儿。

    在何处放置“Top”链接？

    最显而易见和普遍的做法，就是把“Back to top”链接放在页脚。这里是它应该出现的地方。我们没法给出一个关于“Back to top”链接的通用的设计方案。一些设计者把它放在页脚左侧，另一些把它放在中间，也一些把它放在页脚右侧的。把“top”链接放在内容的左手边，或直接放在内容结尾也都是很常见的做法。


    看见这个友好的    “top”链接了吧：通常被放在页脚，它的出现一直很适度并且几乎害羞。

    “Back to top”也经常被使用在FAQs中，用来帮助在章节和站点地图中划分篇章或段落，以提供给用户一个快速回到页面开始处的方式，因为在那里有主导航。

    如何创建“Top”链接？

    让链接指向页面的顶部，多数情况都是放一个空锚点紧跟在<footer>标签后面：

    <div id="footer">
    <!-- footer goes here -->
    <a href="#">top</a>
    </div>

    然而，老一点的浏览器，特别是有“考古价值的”浏览器，在解析这个代码时是有问题的。替代的方法是用一个真正的锚点，明确它的意图，紧跟在<body>标签的后面：

    <body>
    <a name="top"></a>
    <!-- content goes here -->
    <a href="#top">top</a>
    </body>

    更新：另一个方法可以避免冗余的代码，因此首选方法是利用wrapper或header的id属性达到相同目的。比如，如果你用id为”wrapper”的div标签，你可以像下面这样去写代码：

    <body>
    <div id="wrapper">
    <!-- content goes here -->
    <a href="#wrapper">back to top</a>
    </div>
    </body>

    当然，这个链接本身不一定非得是文字；也可以是图片，按钮或其他元素（用图片可能会有一些可用性问题——往下看）。

    措辞

    不用担心你实际使用的措辞：你只需要保证访问者能够理解这个链接的功能，而不懊恼就行了。比如，使用“Return”大概就不是个好主意，因为看到它很难立即搞清楚它是带用户去首页，回浏览历史的上一页，还是到页面顶部。

    用清晰简明的措辞，例如“Go to top,” “Back to top,” “Return to top” 或者 “Jump to top”。有时“Up”也可以无伤大雅的用一下。然而，我们不认为这是一个好主意，或者说根本不是好主意。

    问题和劣势

    一些可用性专家，甚至可用性研究的宗师——Jakob Nielsen，一致排斥“top”链接，认为它有害页面健康。在他们看来，页内链接应当坚决避免，因为浏览器滚动条足以应付，并且额外的方法也没有必要。然而，他们赞同在那些页面极长或无法避免的情况下，使用“Back to top”可能是有帮助的。

    使用“top”链接的一个最主要的问题在于，他们影响浏览器的导航按钮，从而干扰了浏览历史。因为“top”链接就像个锚点，在点击浏览器 “back”按钮时，带用户去的就是眼下正在看的页面底部，而不是上一页。除此之外，可访问性专家主张“Back to top”链接可能会扰乱朗读工具的使用，“top”的概念是模糊的，而且“Back to top”链接也不是网站从始至终都在用的。

    “Back to Top”链接对阵“Home”链接

    在我们有趣的研究“Back to top”的案例中，我们偶然发现一些解决方法，设计者们用图片形式让用户可以跳回到页面顶部。不过，值得提一下的是，图片可以让用户很清晰的明白这个链接不是带他回首页，而是到页面顶部的。“Home”链接不等于“Back to Top”链接，“Back to Top”链接也不是“Home”链接的意思。如果你决定在你的设计中使用这种链接的话，请确保访问者能够看一眼就明白他们之间的不同。


    误解：是“Home”而不是“top”


    首页，可爱的首页…


    用西班牙语说：回首页


    另一个在页脚的“Home”实例


    右手边的那个图标是不可点击的：它本应该是回首页，而不是到页面顶部


    这个同理：这个插图也是不可点击的


    那，这里也是

    “Back to Top”链接展示

    这里是更多“Back to top”链接的例子。收集他们真花了一些时间。希望这些可以成为带给我们读者灵感的好资源。


    一个生动的    “Back to top”链接


    这个链接成为导航的一部分了。看起来不错，不过可能第一眼感觉挺别扭的。


    这个“top”图标会跟随滚动条滚动。


    我们不知道为什么一个方向键盘会出现在那：它不可点击，但本应该是能的。

    参考资源

    相关文章

    1. 10条可用性方面的启发
    2. “Back to Top”有害页面健康？
    3. 用户体验案例研究：设计微博应用

    ]]>     http://blog.b3inside.com/userexperience/short-story-about-top-links/feed/ 10     “Back to Top”有害页面健康？ http://blog.b3inside.com/userexperience/backtotop-considered-harmful/ http://blog.b3inside.com/userexperience/backtotop-considered-harmful/#comments Fri, 05 Dec 2008 04:00:05 +0000 波希米亚 http://blog.b3inside.com/?p=159
  • 10条可用性方面的启发
  • 一个关于“Back to Top”的小故事
  • 用户体验案例研究：设计微博应用
    • ]]>     “Back to Top” links considered harmful
    Jukka “Yucca” Korpela版权所有
    作者：Jukka “Yucca” Korpela
    译者：UCD翻译小组，波希米亚
    原文地址： http://www.cs.tut.fi/~jkorpela/www/totop.html

    译者序：这是一篇关于可用性方面的文章，作者在本文中列举了很多例子，对这个话题研究的很细致，从多方面考虑了这个链接的可用性问题，同时也抛出了一个问题：到底是用浏览器固有支持的功能，还是用像“Back to Top”这种功能的替代品？本文都有详细阐述。

    网页上经常都有一个链接用来回到页面开始的位置，有代表性的命名就是“Back to Top”，同时可能还兼带一个箭头朝上的图标。这篇文章用以讲解为什么这种用法不好，特别是以可访问性为理由。同时也讨论了创建这样的链接一定程度上低估了带来的损害。

    • “Back to Top”（或者叫“Top of page” ，或者你所采用的）同样分散了对实际内容的注意力。对某些人而言，甚至极小的注意力分散都是令他们不安的。网页通常有很多组成部分，范围从实际内容的不同部分到纯粹装饰。又新增加了不同的元素，比如用户界面窗口组件，这样的页面对认知能力有残障的人来说就更困难了。
    • 当需要用纸打印时，“Back to Top”看起来是那么的蠢。（你可以用CSS去防止这件事，但很多作者并没有这样做。）
    • 当使用“Tab”键跳跃到下一链接时，“Back to Top”一直傻站在那（译者注：必须先从它身上踩过去，才能到达下一个链接）。按“Tab”键好比代替鼠标点击，对很多人来说是必要的，例如肌肉有残疾的人。此外，很多人更喜欢用键盘导航，因为它更快。
    • “Back to Top” 链接也妨碍朗读工具的使用。你愿意在使用语音合成器朗读页面时，在每个段落结束后都突然蹦出一句“link: back to top”吗？这样的用户工具通常都有一个链接朗读模式，只朗读链接，一个接着一个地。
    • 每个浏览器都有一些内置功能用来移动到当前页面的开始处（比如支持使用“Home”键）。就创建一个链接模仿这样的功能而言，你会把用户弄迷糊，他们会认为他们需要使用这个功能，而不是浏览器内置功能。
    • “Back to Top”的文字是有误导性的，因为用户压根就没想回到顶部。他可能认为会跟着这个链接到文章的顶部这里是意译，直译理解不准确，下一段也做了补充。 或一个位置。（对于这种情况，“To Top”和 “Start of page” 就好多了。）
    • “top” 的概念是模糊的。哪个顶部？如果你生平第一次看见“Back to Top”，你能知道它是页面顶部、站点顶部还是其他什么的顶部吗？（每天，都有数以千计的人头一次使用网站。）就这些理由，“Start of page”是更好的说法——但惯例不是这样。
    • “Back to Top”链接不是始终贯穿站点的，只在功能的表面或细节。
    • 当点击了“Back to Top” 链接时，额外的内容干扰了浏览历史。例如，当你使用“上一页”按钮时，会发现当前页面又出现了一次。

    不可否认，“Home”键（或等同的键）特点就是不改变焦点。这就意味着当你按“Tab”键时，焦点被移动到随之而来的链接（表格区域）上。如果你喜欢用 “Tab”键去导航，这可能会不方便，但在这个例子中， “Back to Top” 链接会更加讨厌。另一方面，失焦行为可能有用：你可能希望跳到页面开始的地方去查看一些东西，于是从你所在的链接（或区块）出发。

    以下都是浏览器基础功能的替代品，“Back to Top” 链接、““Print this page””和“Bookmark this page”链接，还有改变字号的链接或菜单。然而，这些都是不同的窗口组件，伴有不同程度上的阻碍（和一些潜在或自称的好处）。基本问题还在于网页是否应该为这个目的去创建用户界面，而不是接受用户看到的（或相反是由于用户经验丰富）浏览器的固有功能。

    尽管一些用户喜欢并使用“Back to Top”链接和其他浏览器功能的替代品，但他们走错路了。很多用户显然是不知道浏览器的内建功能，那些可以帮助他们在所有网页都使用一致操作的方式。

    替代品本身可能不是坏东西。事实上，浏览器功能可以经常使用不同方法调用。例如，在IE中到当前文章开始处，我可以用“Home”键，或者可以用滚动条滚动到顶部，或者可以使用“Page Up”键，就像很多时候需要的那样。当一个页面包含其他方法跳到开始处时，用户如何知道它做了什么？例如，它没法保证和“Home”键的效果一摸一样。事实上，它们是有差别的；比如，“Back to Top”可能没法跳到绝对顶部而只是接近的某个地方，顺便提一句，这样焦点行为就不同了。这就没法保证看上去相同的链接在不同页面上所达到的效果完全一致了。

    Jakob Nielsen，可用性专家，他曾在alertbox中主张，目的地在同一页面内的链接应该尽量避免：避免页内链接 。Nielsen说这样的链接会破坏后面链接的心智模型。不过“Back to Top” 链接是个不同的例子，因为用户大概不希望加载一个新页面使得现有页面消失。然而，普遍观点认为概念清晰和简单实用无济于事：“链接最好用于引导从一个页面到另一个页面的工作，而不是指向页面内。”

    如果你使用“Back to Top” 链接,相对伤害较小的方法：
    <div class="toplink" align="right"><a href="#">Start of page <img alt="" src="up.gif" width="13" height="12" border="0"></a></div>

    笔记：

    • 这个链接被放在一个带有class的div元素中，使它很容易被样式控制。例如，你可以略微缩小字号或增加它与下面链接之间的距离。
    • 链接文字简短（用以降低对语音浏览器的影响），尚可适当说明。
    • 箭头图标和链接的其他部分都可以点击。不要把它弄成分开的链接，不然用户使用“Tab”键跳跃时会跳两次而不是一次。
    • 箭头图标的存在可以作为一个视觉引导，当然，尽管它不是功能必须。
    • 箭头图标的alt属性为空，因为当图片不显示时它不用进行文字替换——文字链接的内容就足够提供信息了。
    • 链接的href属性值为“#”，它本身就是回到当前文章开始处。所以不同担心创建位置锚点的正确方法。然而，一个引用“#”的链接是无法改变焦点的。此外，Opera浏览器不支持这种链接，因为某些奇怪的原因；点了这中链接后没有任何效果，或许因为链接引用的是文章本身。如果你觉得其中一个会成为问题，你可以采用锚点+id的方法，放在文章主体的第一个元素里。例如，如果主体以<h1>开头，你可以使用<h1 id=”start”>。然后在链接里自然就要使用href=“#start”。（一些非常老的浏览器，例如Netscape 4，不支持使用id属性进行位置界定。或许在这种环境中混略它们更安全，特别是当这种链接仅仅是浏览器功能的替代品时候。）

    在样式表里，你最好加上下面这样一条，这样在打印页面的时候就会把这些链接忽略掉：
    @media print{.toplink{display:none;}}

    相关文章

    1. 10条可用性方面的启发
    2. 一个关于“Back to Top”的小故事
    3. 用户体验案例研究：设计微博应用

    ]]>     http://blog.b3inside.com/userexperience/backtotop-considered-harmful/feed/ 18