关于用户体验，我们常犯的9个错误

忘是亡心i 2022-07-12 13:41 190阅读 0赞

Web 用户体验大师 [Jacob Nielsen][] 说过，“一个烂网站就像一个性情乖戾的推销员”，这样的推销员不仅无法说服顾客，而且让人生厌，就网站而言，再也没有什么比蹩脚的用户体验更让人沮丧的了。本文讲述了 Web 设计与开发中常犯的 9 个用户体验错误以及它们的解决方法。

## 1. 难以找到你感兴趣的内容 ##

下面这些知名站点不仅设计陈旧，而且易用性不佳

*  [irs.gov][]
 *  [boink.com][]
 *  [reddit.com][]

[![Crazy-forms-long-e1275967611480.png][]][Crazy-forms-long-e1275967611480.png 1]

为什么不用更有意义的表单名字?

[![1-Content-is-hard-to-find-boink.com_-e1276055548537.png][]][1-Content-is-hard-to-find-boink.com_-e1276055548537.png 1]

那几个旋转的骨牌原来是导航...

[![1-Content-is-hard-to-find-reddit.com_-e1276055608686.png][]][1-Content-is-hard-to-find-reddit.com_-e1276055608686.png 1]

reddit.com，我喜欢它的概念，但内容太令人受伤。

我们常常在从一个网站查找内容的时候发现困难重重，比如那些政府站点，既然我们都知道内容为王的道理，我们就不应该让用户为了查找一点内容而翻遍成千上万的菜单。

**解决方法**

简而言之，就是将你认为重要的信息放在容易找到的位置。如果你的站点有海量内容：

1.  将各种内容放在它们应该放的栏目。
2.  让你站点的搜索功能工作正常。
3.  提供清晰的标签和目录。
4.  让重要的内容重点显示。
5.  提供本地化命名。

另外，使用 blur 测试，将你的设计草图做比如 10% 的模糊处理，这样你就能发现那些需要突出显示的内容是否真的突出了，还可以使用 [IntuitionHQ.com][] 一类易用性测试服务。

## 2. 蹩脚的布局 ##

*  [qq.com][]
 *  [allterrain.co.nz][]
 *  [craigslist.org][]

[![Poor-layout-e1275967874177.png][]][Poor-layout-e1275967874177.png 1]

典型的中文门户风格

[![2-Poor-Layout-allterrain.co_.nz_-e1276055683820.png][]][2-Poor-Layout-allterrain.co_.nz_-e1276055683820.png 1]

到处都是文字，到处都可以点击

[![2-Poor-Layout-craigslist.org_-e1276055748451.png][]][2-Poor-Layout-craigslist.org_-e1276055748451.png 1]

好用吗？有点，好看吗？一点也不。

内容难以查找的另一个原因是布局，将所有的东西放在首页，到处都是 Flash 广告，满眼都是文字，密密麻麻，挨挨挤挤。解决方法是请一个 Web 设计师将你的布局做一个设计。尽管有不少布局蹩脚的新闻站点仍然非常成功，但让它们成功的不是它们挨挨挤挤的布局。

## 3. 让人摸不着头脑的导航系统 ##

*  [lesailes.hermes.com][]
 *  [billyconnolly.com][]
 *  [pizzacaper.com.au][]

[![Navigation-fail-e1275968352784.png][]][Navigation-fail-e1275968352784.png 1]

原来那些橙色的，带问好的竖条是导航用的。

[![3-Confusing-menus-billyconnolly.com_-e1276055928823.png][]][3-Confusing-menus-billyconnolly.com_-e1276055928823.png 1]

他们说，片图抵千言...

[![3-Confusing-menus-pizzacaper.com_.au_-e1276056067948.png][]][3-Confusing-menus-pizzacaper.com_.au_-e1276056067948.png 1]

看上去挺漂亮，但 Flash 和 HTML 两个版本对用户来说有什么意义？

人们通常对导航菜单有一个约定俗成的期望，然而我们遇到很多奇怪的导航，常常让我们摸不着头脑。解决方法:

*  先画个导航菜单草图
 *  让它有点逻辑
 *  找些人问问，他们希望在什么位置找到特定的信息，按他们的说法安排菜单
 *  考虑一下你的站点的目标用户
 *  做易用性测试
 *  使用面包屑导航，并确认前进和后退按钮起作用。

## 4. 蹩脚的菜单设计 ##

*  [godaddy.com][]
 *  [microsoft.com][]
 *  [vodafone.co.nz][]

[![inefficient-menus-e1275968054322.png][]][inefficient-menus-e1275968054322.png 1]

到处都是导航菜单，但什么都找不到。

[![4-Poor-menu-layout-microsoft.com_-e1276056774469.png][]][4-Poor-menu-layout-microsoft.com_-e1276056774469.png]

微软的

[![4-vodafone-menu-vodafone.co_.nz_-e1276059315949.png][]][4-vodafone-menu-vodafone.co_.nz_-e1276059315949.png 1]

最令人关心的价格信息却无处可查。

很多站点的导航菜单布局十分不合理，重要信息被掩埋在很深的菜单下，重要信息需要挖掘很久才能找到，广告和内容搅和在一起，诸如此类。使用分析工具，分析什么内容最受欢迎，用户在哪些页停留时间最长，哪些内容被频繁阅读，将这些内容放在容易被找到的位置。

## 5. 缺乏进度指示 ##

*  [dell.co.nz][]

[![Dell-Seems-easy-enough.png][]][Dell-Seems-easy-enough.png]

Dell - 看上去并不难

[![Dell-But-wait-theres-more.png][]][Dell-But-wait-theres-more.png]

但这些滚动滚到哪里才是头。

很多站点对于用户的操作进度，缺乏指示，或者指示混乱，假如你在进行一个长时间的操作，却不知道后面还剩下多少步，你会很容易半路放弃。

**解决方法**

人们无非想知道他们目前所在的位置，以及后面还余下多少步，告诉他们就是。

## 6. 无法反馈信息 ##

*  [facebook.com][]
 *  [sitevalley.com][]
 *  [alexa.com][]

[![feedback1.png][]][feedback1.png]

压根没有信息反馈功能

[![6-Feedback-form-sitevalley.com_-e1276060042428.png][]][6-Feedback-form-sitevalley.com_-e1276060042428.png 1]

可以反馈信息，但很难找到

[![6-Alexa-content-feedback1.png][]][6-Alexa-content-feedback1.png]

无法找到信息反馈功能

Facebook 或许有理由不提供反馈，它们的用户量太大了，但小规模站点都应该提供用户反馈功能。可以是 Email，反馈表单，或是论坛。

## 7. 滥用社会媒体网络功能 ##

[![Twitter.png][]][Twitter.png]

这样的数字很让人伤心。

虽然，如今每个人和他的狗都有 Facebook, Twitter, Digg, LinkeIn 账户，但99%的人事实上从来不更新他们的内容，如果你在网站上提供了自己的 Twitter 链接，且实时显示自己的跟随数目，如果数字是1或者0，就太丢人了。

## 8. 太多选项 ##

*  [dell.co.nz][]
 *  [microsoft.com][]
 *  [reddit.com][reddit.com 1]

[![menus-what-e1275970162310.png][]][menus-what-e1275970162310.png 1]

晕了

[![8-Too-many-options-microsoft.com_-e1276061259584.png][]][8-Too-many-options-microsoft.com_-e1276061259584.png 1]

这一大堆选项让人头都要炸了

[![8-too-many-choices-reddit.com_.png][]][8-too-many-choices-reddit.com_.png]

为什么要有这么多选择

选择多未必幸福，如果苹果有什么东西值得我们学习，那就是，人们不必去做过多选择，或许，几个基本的选项已经足够，或许，一个适合我的选项也已经足够。保持简单，让用户少做选择，是良好用户体验的一个重要因素。

## 9. 工作不正常的链接，按钮与表单 ##

[![form-failures.png][]][form-failures.png]

错误的链接，不存在的页面，无法正常工作的表单，诸如此类，对于这类问题，除了测试，还是测试。

本文国际来源：1stwebdesigner.com [9 Usability And UX Pitfalls: Learn How To Avoid Them][9 Usability And UX Pitfalls_ Learn How To Avoid Them] （原文作者：[Jacob Creech][]）

[Jacob Nielsen]: http://www.useit.com/
[irs.gov]: http://irs.gov/
[boink.com]: http://www.boink.com/
[reddit.com]: http://reddit.com/
[Crazy-forms-long-e1275967611480.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/Crazy-forms-long-e1275967611480.png
[Crazy-forms-long-e1275967611480.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/Crazy-forms-long.png
[1-Content-is-hard-to-find-boink.com_-e1276055548537.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/1-Content-is-hard-to-find-boink.com_-e1276055548537.png
[1-Content-is-hard-to-find-boink.com_-e1276055548537.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/1-Content-is-hard-to-find-boink.com_-e1276054786240.png
[1-Content-is-hard-to-find-reddit.com_-e1276055608686.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/1-Content-is-hard-to-find-reddit.com_-e1276055608686.png
[1-Content-is-hard-to-find-reddit.com_-e1276055608686.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/1-Content-is-hard-to-find-reddit.com_-e1276054897985.png
[IntuitionHQ.com]: http://intuitionhq.com/
[qq.com]: http://www.qq.com/
[allterrain.co.nz]: http://www.allterrain.co.nz/
[craigslist.org]: http://www.craigslist.org/
[Poor-layout-e1275967874177.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/Poor-layout-e1275967874177.png
[Poor-layout-e1275967874177.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/Poor-layout.png
[2-Poor-Layout-allterrain.co_.nz_-e1276055683820.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/2-Poor-Layout-allterrain.co_.nz_-e1276055683820.png
[2-Poor-Layout-allterrain.co_.nz_-e1276055683820.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/2-Poor-Layout-allterrain.co_.nz_-e1276055147649.png
[2-Poor-Layout-craigslist.org_-e1276055748451.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/2-Poor-Layout-craigslist.org_-e1276055748451.png
[2-Poor-Layout-craigslist.org_-e1276055748451.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/2-Poor-Layout-craigslist.org_-e1276055196782.png
[lesailes.hermes.com]: http://lesailes.hermes.com/
[billyconnolly.com]: http://www.billyconnolly.com/
[pizzacaper.com.au]: http://www.pizzacaper.com.au/
[Navigation-fail-e1275968352784.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/Navigation-fail-e1275968352784.png
[Navigation-fail-e1275968352784.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/Navigation-fail.png
[3-Confusing-menus-billyconnolly.com_-e1276055928823.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/3-Confusing-menus-billyconnolly.com_-e1276055928823.png
[3-Confusing-menus-billyconnolly.com_-e1276055928823.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/3-Confusing-menus-billyconnolly.com_.png
[3-Confusing-menus-pizzacaper.com_.au_-e1276056067948.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/3-Confusing-menus-pizzacaper.com_.au_-e1276056067948.png
[3-Confusing-menus-pizzacaper.com_.au_-e1276056067948.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/3-Confusing-menus-pizzacaper.com_.au_.png
[godaddy.com]: http://godaddy.com/
[microsoft.com]: http://www.microsoft.com/
[vodafone.co.nz]: http://www.vodafone.co.nz/
[inefficient-menus-e1275968054322.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/inefficient-menus-e1275968054322.png
[inefficient-menus-e1275968054322.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/inefficient-menus.png
[4-Poor-menu-layout-microsoft.com_-e1276056774469.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/4-Poor-menu-layout-microsoft.com_-e1276056774469.png
[4-vodafone-menu-vodafone.co_.nz_-e1276059315949.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/4-vodafone-menu-vodafone.co_.nz_-e1276059315949.png
[4-vodafone-menu-vodafone.co_.nz_-e1276059315949.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/4-vodafone-menu-vodafone.co_.nz_.png
[dell.co.nz]: http://dell.co.nz/
[Dell-Seems-easy-enough.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/Dell-Seems-easy-enough.png
[Dell-But-wait-theres-more.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/Dell-But-wait-theres-more.png
[facebook.com]: http://facebook.com/
[sitevalley.com]: http://www.sitevalley.com/
[alexa.com]: http://www.alexa.com/
[feedback1.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/feedback1.png
[6-Feedback-form-sitevalley.com_-e1276060042428.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/6-Feedback-form-sitevalley.com_-e1276060042428.png
[6-Feedback-form-sitevalley.com_-e1276060042428.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/6-Feedback-form-sitevalley.com_.png
[6-Alexa-content-feedback1.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/6-Alexa-content-feedback1.png
[Twitter.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/Twitter.png
[reddit.com 1]: http://www.reddit.com/
[menus-what-e1275970162310.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/menus-what-e1275970162310.png
[menus-what-e1275970162310.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/menus-what.png
[8-Too-many-options-microsoft.com_-e1276061259584.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/8-Too-many-options-microsoft.com_-e1276061259584.png
[8-Too-many-options-microsoft.com_-e1276061259584.png 1]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/8-Too-many-options-microsoft.com_.png
[8-too-many-choices-reddit.com_.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/8-too-many-choices-reddit.com_.png
[form-failures.png]: http://www.1stwebdesigner.com/wp-content/uploads/2010/06/form-failures.png
[9 Usability And UX Pitfalls_ Learn How To Avoid Them]: http://www.1stwebdesigner.com/development/usability-ux-pitfalls-howto-avoid/
[Jacob Creech]: http://www.1stwebdesigner.com/author/jacob/