英文网刊Fland.cn

在数月反复研究大量各式各样的站点之后，我发现了一些或多或少能提高网站可用性的大体模式。在这篇文章中，我想强调一些设计师出现的很常见的问题，并将这些设计师应该应用到其网站上的能提高网站可用性的技巧列出了一个清单。

你的网站是否应用了这个清单的所有提高可用性的技巧呢

并不是所有这些技巧都会应用到每个站点。仅仅是对你的网站设计中应用它们的建议而已。在这个过程中，我将分享一些网站以便更有效的说明这些技巧。

1.网站标识

让它充分向用户表明他们在浏览哪个站点。

一个网站的标识通常位于页面的左上角、导航的右侧或其他什么位置。给网站标识添加一个指向网站首页的链接是很重要的，或者至少在分页导航的固定位置添加一个“首页”的链接。

2.页面标题

WordPress.com 经常使用超大号字体的页面标题，让你很难错过它

就像网站标识一样，任何被浏览的页面的把标题都应该清楚的展示给用户。通常，页面的标题应该看上去像一个关于页面内容的独特脉络，将其放在显著的位置并着重突出其样式以显示它是页面的标题。页面标题通常是整个页面最大的文字用以清楚的强调其重要性。

页面的实际名称（URL地址）也很重要：它是否与用户点击到那页的连接名称相匹配？如果页面标题和页面的实际名称很匹配，用户将毫无困难的识别他们在哪个页面上浏览。

3.导航条式导航

YouTube 的主导航小巧且清晰

用户浏览一个网站主要有两种导航方式，确保你的每个页面都同时拥有两种导航是十分重要的。两种导航方式的第一种：导航条式导航。这种导航方式通常被分为主导航，次级导航（和更深层次的导航，如果有必要的话），公用模块。

主导航 当然就是用来导向网站的各个主要部分。他是最顶级的导航，用来向用户说明网站里包含哪些分类，并帮助用户到达这些分类。通常主导航是一个站点全局导航的一部分，或者在各个页面总保持一致。

次级导航 将主导航划分出子类。第三级导航又将这些子类换分成更细的类别，如此类推。确定你规划好了你的网站导航结构，以保证网站的用户知道如何浏览你的网站。

公用模块 是你网站的一部分，不过它们并不是链向你站点的主要部分。公用模块包含内容的例子：关于我们，联系我们，隐私政策，使用条款等。确保其包括重要的网站相关内容并将其放置在用户容易找到的位置。但是，不要让因为过多的公用模块链接内容使你的网站导航过于拥挤。

4.搜索式导航

做为搜索引擎的ask，他的搜索部分让人一目了然

第二种方式的导航是几乎所有网站都应该有的——搜索式导航。一些用户更喜欢用搜索的方式浏览网站。所以通常包含两种方式才是明智的。用户已经习惯了搜索的惯用表现形式。所以尽量不要改变它以致让用户感到困惑。就像Steve Krug 说的：
 

“一条简单的公式：一个搜索框，一个按钮，一个‘搜索’，别把它们弄得复杂——牢记这条公式”
                                                        ——《别让我思考》第六章

5.当前所处的位置

我们浏览苹果的网站时，主导航将高亮显示我们所浏览是网站的哪个部分

一个好的页面标题并不能充分告知浏览者他们在网站的哪个部分。当然，它告诉了用户那个页面的名字并且可能有些许信息关于他们能预计在特定的页面上找到什么。但是它告诉用户他们所在的页面跟其他页面的关系了么？

想像一下你置身于一座你之前从未去过的机场：虽然你有几分知道你要去哪，但你却不知道应该怎样到达那里。你可能都不知道这个地方有多大，就算你知道这里有多大，但你连你自己身在何处都不清楚，何谈去哪。这就是为什么所有的大机场都有清楚的位置标识告诉你你所处的位置和其他重要的地方。

在很多地方一个网站就像是一座大型机场。访问者并不知道这个站点有多大，没有一点基础的话，访问者会很艰难才能标注自己在站点地图上的位置。一些站点高亮显示访问者访问的页面位置，向他们解释他们身处网站何处，也有的站点使用面包屑导航或其他的方法来指引访问者。也许某一种方法在特定的情况下更有用，但重点是一个站点应该始终以某种方法来向访问者他们所处位置与其他页面的相对关系。

6.标语/站点描述

SourceForge.net 有着很多的开源软件，它的标语将其诠释的淋漓尽致

标语是一种快速高效向用户解释一个站点目的的方式。它是一段在网站标志右侧显示的稍小字号，精心编排的信息，通常只有几个字。标题不是描述动机和意图的格言警句，但它却包含了传达某些事物要点的描述。

7.（视觉）清晰的页面层次

页面内容决不能轻视。我经常回顾报纸的排版，将它作为网上内容层次编排的经典例子。良好结构的页面使用清晰的标题来组织文章，而子标题使内容更容易解析。页面的视觉表现并不像页面内容本身重要，但如果没有层次的话，用户可能会在某个页面里迷失。

 After reviewing websites for a few months, I’ve begun to see general patterns emerge that make a site more or less usable. In this post, I’d like to highlight some of the more common problems designers should address on their own sites in a Usability checklist of sorts.

Not all of these items will apply to every website, these are just suggested things to look for in your own site design. Along the way I’ll share some sites that illustrate different items effectively.

1. Site ID
Make it abundantly clear to the user what site they are on.

A Sites ID is usually found at the top left of a page right next to navigation of some kind. It’s also very important that the the ID links back to the home page of the site, or at least add a “Home” link into the navigation on sub pages of a set.

2. Page Name

 Pages on WordPress.com often have generously sized Page Titles that are hard to miss.
 Just as with the Site ID, the Name of any page being browsed needs to be made very clear to the user. Visually, the name of a page should appear to be framing the content unique to that page, prominently placed and styled to show that it is indeed the page heading. The Page Name is often the largest text on the page which clearly emphasizes its importance.

Also important is the actual name of the page: Does it match the name a user clicked on to get to that page? If the name of a page matches the text linking to the page, a user will have no trouble identifying what page they are on.

3. Navigation by Browsing

YouTube has a clear, small primary navigation.
 There are two primary ways a user can navigate a site, and it’s important to have both forms of navigation on almost every page. The first of those two ways is navigation by browsing. This type of navigation can usually be split into primary navigation, secondary navigation (and deeper levels if required),and utilities.

Primary Navigation is of course navigation to get to the main parts of the site. It is top level navigation, explains to the user what the main sections of the site are, and helps them get to those sections. Usually the Primary Navigation is a part of a sites global navigation, or navigation that remains the same on every page on the site.

Secondary Navigation divides primary navigation into subsections. Tertiary Navigation divides those subsections into even more sections, and so on. Make sure you plan out the structure of your sites navigation so that viewers will have some idea of how to get around your site.

Utilities are parts of your site that aren’t really connected to the primary sections of your site. Examples of utilities inclue: About us, Contact Us, Privacy Policy, Terms of Use, etc. Be sure to include the more important ones for your site in a place where you’re viewers will easily find them, but don’t make your navigation too crowded by including lots of utility navigation links.

4. Navigation by Search

Ask is a search engine, and they’ve got the search part figured out.
 The second form of navigation pretty much every site should have is navigation by searching. Some users prefer browsing, some prefer searching, so it’s usually wise to include both.

Users have become used to a search convention that really shouldn’t be strayed from if possible. As Steve Krug puts it:

It’s a simple formula: a box, a button, and the word “Search.” Don’t make it hard for them—stick to the formula.

Chapter 6, Don’t Make Me Think

5. Current Location

When browsing different sections of Apple.com, the primary navigation for that section gets highlighted.
 A nice page title isn’t quite enough to tell a viewer where they are on a website. Sure, it’s tells them the name of that page and perhaps a bit about what they can expect to find on that particular page, but what does it tell them about where they are in relation to everything else?

Imagine you’re at an airport you’ve never been to before: Even though you might sort of know what you’re looking for, you have no idea how to get there. You probably don’t really know how big the place is, and even if you do, you’re not going to get to where you need to be without knowing where you are. This is why there are signs all over large airports that clearly mark your location as well as locations of all the other important places.

In many ways a website is like a large airport. The viewer doesn’t really know how big the site is, and without some sort of grounding a user will have a tough time placing themself on the map. Some sites highlight the section of a site a user is on to explain to them where they are, while other sites may use breadcrumb navigations or other means to show the viewer where they are on the site. Perhaps one is more useful than the other in certain situations, but the point is a site should somehow always show the user where they are in relation to everything else.

6. Tagline / Site Description

SourceForge.net has Open Source Software. The Tagline explains this well.
 Taglines are a great way to explain the purpose of a site to a user quickly. It’s just a small, well crafted blurb that’s shown right next to the Site ID, usually no more than a few words. Taglines are not mottos which describe motivation or intention, but instead descriptions that convey the point of something.

7. Clear Visual Page Hierarchy
Content on a page isn’t something to be taken lightly. I often fall back to Newspapers as a classic example of how a content hierarchy should appear online. Well constructed pages use clear headings to organize content, and subheadings to make that content easier to parse. The visual appearance of content may not be as important as the content itself, but without some sort of hierarchy a user can get lost inside of a page.

作者：David Leggett

翻译：xiaoJack

原文地址：http://www.uxbooth.com/blog/quick-usability-checklist/

天天在忙设计网站。，久没翻译东西了，碰巧前http://www.fland.cn/blog/admin/admin_default.asp两天在网上看到一篇关于网站可用性的翻译，不过看着看着觉得有些莫名其妙，于是翻出英文原文看了下，估计是那个译者没有接触过网站设计方面的知识，所以有些地方翻译错了。所以决定重新翻译一遍。当然我这也是仓促之作，也没仔细考究，但应该没有本质性的错误。如发现有翻译的不妥当的地方欢迎指教。

另附网友Chirs Kyle的翻译  http://www.yeeyan.com/articles/view/toydime/32415?orgin=index 

不过这个译的有些许问题，做过网站设计的朋友应该能看的出来。