Web设计和开发常犯的9个用户体验错误和解决方法

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

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

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

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

  • irs.gov
  • boink.com
  • reddit.com

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

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

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

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

解决方法

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

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

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

2. 蹩脚的布局

  • qq.com
  • allterrain.co.nz
  • craigslist.org

典型的中文门户风格

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

好用吗?有点,好看吗?一点也不。

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

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

  • lesailes.hermes.com
  • billyconnolly.com
  • pizzacaper.com.au

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

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

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

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

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

4. 蹩脚的菜单设计

  • godaddy.com
  • microsoft.com
  • vodafone.co.nz

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

微软的

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

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

5. 缺乏进度指示

  • dell.co.nz

Dell - 看上去并不难

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

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

解决方法

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

6. 无法反馈信息

  • facebook.com
  • sitevalley.com
  • alexa.com

压根没有信息反馈功能

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

无法找到信息反馈功能

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

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

这样的数字很让人伤心。

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

8. 太多选项

  • dell.co.nz
  • microsoft.com
  • reddit.com

晕了

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

为什么要有这么多选择

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

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

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

时间: 2024-10-06 00:58:51

Web设计和开发常犯的9个用户体验错误和解决方法的相关文章

Web设计和开发:2012年Web设计和开发的趋势

文章描述:2012年Web设计和开发的15个趋势. Craig Grannell 访问了行业的精英们关于2012年Web设计和开发的趋势. 2012看来注定是有趣的一年.经济的下滑继续广泛地打击行业,看不到结束的尽头.政府极力审查网络,否认公民的基本权利,支撑摇摇欲坠的媒体公司. 对网页设计和开发,2012还是比较混乱的一年.我们处于很多小矛盾当中:移动贪婪地占领市场份额:原生App威胁开放的互联网:收费墙阻碍曾经免费的信息:合作与分裂的冲突:复古(Skeuomorphism)的交互模式挑战创新

2012年Web设计和开发的15个趋势

中介交易 SEO诊断 淘宝客 云主机 技术大厅 Craig Grannell 访问了行业的精英们关于2012年Web设计和开发的趋势. 2012看来注定是有趣的一年.经济的下滑继续广泛地打击行业,看不到结束的尽头.政府极力审查网络,否认公民的基本权利,支撑摇摇欲坠的媒体公司. 对网页设计和开发,2012还是比较混乱的一年.我们处于很多小矛盾当中:移动贪婪地占领市场份额;原生App威胁开放的互联网;收费墙阻碍曾经免费的信息;合作与分裂的冲突;复古(Skeuomorphism)的交互模式挑战创新的设

8个对于Web设计和开发人员非常有用的在线工具

导读:作者Henry Jones写了一篇<8 Useful Online Tools for Web Designers and Developers>,现将译文<8个对于Web设计和开发人员非常有用的在线工具>转载,以下是文章内容: 在工作中借助一些非常好用的工具可以让你专注于更重要的事情,进而提高工作效率.本文收集了一些设计和开发相关的在线工具,分享给大家,希望对你有帮助. ProCSSor ProCSSor是一个很不错的CSS代码美化工具,它可以帮助你很轻松的把代码转换成很美

对Web设计和开发人员有用的15个Chrome插件

导读:原文作者Brian在freelancefolder.com发表了一篇<15 Useful Google Chrome Extensions for Web Designers and Developers>,由伯乐在线敏捷翻译组编译,文章介绍了非常有用的15个Chrome插件.以下是全文: 最近我才把谷歌浏览器设为默认浏览器,而与此同时我开始将它用于我的兼职Web设计和开发项目中.由于我所依赖Firebug的插件,在Chrome浏览器并没有完全的对应插件,所以我还是时不时要用Firefo

《UX设计之道——以用户体验为中心的Web设计(第2版)》一第1章 用户体验设计之道1.1 什么是用户体验设计

第1章 用户体验设计之道UX设计之道--以用户体验为中心的Web设计(第2版)好奇心+激情+同理心 重要的是要永远保持质疑.好奇心自有其存在的理由.当人们思索永恒.生命和现实中不可思议的神秘事件时,难免会心生敬畏.每天能够尽点力去理解这些神秘点滴就已足够. --阿尔伯特·爱因斯坦 好奇心是大自然最早的学校. -Smiley Blanton 激情和目标携手同行.当你确定目标时,你会发现你对事物满怀激情. -Steve Pavlina 上天赐予了人类一份重要礼物,即我们拥有同理心(empathy)的

IOS开发遇到的屏幕上下闪出黑边的解决方法

IOS开发遇到的屏幕上下闪出黑边的解决方法 在IOS开发时,使用的时IOS的模拟器,程序中任何有关坐标的地方也是根据屏幕获取的,而在IOS7的系统上运行,却发现屏幕小了一截,上下各闪出一块黑色区域.后经过查找原因,解决方法如下: 项目的App Icon and Launch Images设置中,本来是这样的: 点击Use Asset Catalog,之后点击Migrate,设置界面如下图模样: 这时在IOS7上就能充满屏幕了.

php版微信开发Token验证失败或请求URL超时问题的解决方法_php实例

本文实例分析了php版微信开发Token验证失败或请求URL超时问题的解决方法.分享给大家供大家参考,具体如下: 微信开发最近要用到的一个功能,其实就是一个非常的简单的用户输入然后自动搜索数据库并进行一个数据回复了,这个与官方没多大的问题,但小编就微信Token验证失败折腾了许多,下面解决了给各位分析一下. 1.Token验证失败 这个就是要检查配置文件了,最基本的就是 define("TOKEN", "weixin");  weixin 是你的微信开发后台的ID

Android开发中Activity之间切换出现短暂黑屏的解决方法_Android

本文实例讲述了Android开发中Activity之间切换出现短暂黑屏的解决方法.分享给大家供大家参考,具体如下: 在默认情况下,Android应用程序启动时,会有一个黑屏的时期,原因是,首个activity会加载一些数据,比如初始化列表数据.向服务器发送请求获取数据等等.同样,使用startActivity(inte -- 在默认情况下,Android应用程序启动时,会有一个黑屏的时期,原因是,首个activity会加载一些数据,比如初 始化列表数据.向服务器发送请求获取数据等等.同样,使用s

Android开发中R.java文件丢失或无法更新的解决方法

本文分析了Android开发中R.java文件丢失或无法更新的解决方法.分享给大家供大家参考,具体如下: 首先确定你的SDK是新的. 其次接下来检查你的.xml文件,文件名不能大写. 如果xml文件太多 ,那么clean一下你的项目,这时候注意看Console的提示. Console会提示你xml文件错误在哪里 修改完xml文件之后 clean你的项目,再build你的项目 R.java会重新出现或更新 Android 在开发中会自动生成一个 R.java 文件 ,这个文件是自动生成的,最好不要