网站设计的10大错误
早在1996年,我们就汇总了网站的10种错误设计。今年,我们访问了215位英美用户,就当代网站存在的错误设计进行了新一轮大规模可用性研究。从小型的地方性商业网站、娱乐网站,到非盈利性网站,再到国际组织机构的官方网站,通过对43个网站的分析,总结了当代网站10大最常见和最具破坏力的错误设计。这些错误设计,不但伤害了用户,也对网站的业务指标造成了负面影响。
它们都是新出现的吗?不,这10大错误设计都是大家“司空见惯”的。网站设计这些年可谓发展迅速,但这些错误设计仍长期存在。尽管当代设计模式和美学在不断变化,不过用户的本质需求变化不大。用户仍需在网站中找到想要的信息,读懂网站结构,知道要点击什么以及点击后将会去哪儿。
那么你的网站在设计中犯了哪些错误?
1. 内容位置不合预期不能被用户发现的信息没有使用价值。很多网站,导航的类目字段表达不详、亦或点击后所呈现内容与该类目关联不大。还有一些网站,忽视了用户的想法,直接按公司自己的思路去构架信息。如果网站的内容结构与用户的心理模型南辕北辙,用户就找不到想要的信息。
让用户参与到网站设计中来。做一些简单的可用性研究帮助你的网站被用户读懂,比如卡片分类、树形测试、可用性测试。
(图1)网站ATT.COM:用户原本期望点击“SMARTPHONES”后看到买卖旧手机的信息,但是该网站却把它放到了“EXISTING CUSTOMER”下。
2. 链接之间/导航各选项之间边界模糊用户一旦分不清两个相似的链接或导航选项,将难以找到获取信息的最佳路径。各链接/各导航选项之间、各链接/各导航选项与网站其他链接/导航选项之间要定义准确、边界清晰。倘若有多个模块或页面都在介绍同一则信息,为了验证它们的异同,用户就得一个一个确认,或费力猜测哪个才是用起来最方便的。再不然,用户会直接使用搜索功能,或者干脆放弃你的网站。
(图2)网站BAM CONSTRUCTION:想了解建筑项目细节的用户无法判断该点击“WHO WE ARE”、“WHAT WE DO”、还是“HOW WE DO IT”。很多用户选择了“WHAT WE DO”,然而页面打开却发现是公司服务类型的简介。建筑项目的细节信息被放到了“HOW WE DO IT”里。
卡片分类和可用性测试可以帮助设计师避免这一问题。各链接语义边界模糊,罪魁祸首是内容策略的失败。原因可能有二:
链接命名不当。不同的链接应引导用户查看不同的内容,但出于某些原因,有些链接使用了语义相似的字眼。这种情况下,我们只需对有问题的链接进行重命名、以作彻底区分。内容区分失败。如果多个链接打开的不同页面在内容上有强关联、且信息重叠,我们需要对这些内容进行重组,以突出各个页面的内容重点。3. 信息孤岛有些网站只零散着几条信息,且信息之间没什么关联。
有的用户看到这种“孤独”且无法点击的信息,会觉得网站其他页面的内容也一样浅薄。找不到额外有用的信息,他们最终会流失到竞争对手那儿、或直接自行Google查询。
也有用户试着重新访问,结果却发现信息出现在预期之外的地方,而且与第一次看到的内容样式完全不同。还有用户的确找到了这些“孤独”的信息,却得费劲心思把它们拼凑在一起。不管怎样,这都给用户留下了极差的印象。
从公司角度看,这种设计方式不但造成了糟糕的用户体验,也暴露了其失败的内容管理策略——某一模块信息重复,不同模块本该相同的信息却彼此不同或矛盾。
一种解决方案是为内容相关的不同页面提供相关链接。还有一种更好的方案,就是反思自己的网站信息为何都如此“孤独”,然后重新整合构架、并在最合适的地方提供链接。与其不断重复相同的信息,不如在网站其他页面加上链接,链到信息首次出现的位置。
4. 点击次数过多即使用户可以明确目标信息的位置,体验也仍会被意外出现或冗长的操作中断。
网站设计团队经常会念叨用户在获取目标内容前应该点击几次。其实没有“魔法数字”——点击的质量远比数量重要。原则上,用户每点击一次,就应该离目标内容近一点。如果反复让用户点击,只会激怒他们、浪费他们的精力。
设计师有时忘记规划用户查找内容的路径,导致网站页面之间缺乏关联。所以,在正式设计前请先分析透彻用户的操作路径,想想有没有更简短的方案。
(图3)(图4)网站NYC.GOV:用户点击“FIND A FIREHOUSE”后,发现又要点击一次仅在拼写上有大小写差异的“FIND A FIRE HOUSE”,顿时万分无奈。
5. 价格隐藏在决定为某事物买单之前,用户需要了解相关价格、订阅费、便利费、附加费等。43个研究对象中有两三家网站价格信息获取路径太过复杂。比如,要在AARP的网站查到会费价目,须得完成好几步不必要的会员购买流程。请记住,在执行复杂操作流程前,先让用户了解到基本信息。
6. 用户被困子级页面要为特殊内容设计单独页面或子级页面的网站需小心,别把你的用户困在其中。215位被访用户中有很多人表示都曾有这样的糟糕体验:莫名进入新页面,且找不到返回主站的链接。他们中的有些会通过点击浏览器自带的返回键、或重新输入网址,以返回主站。但也有相当一部分人表示根本就没有注意到自己是怎么来到新页面的(因为主页和子级页面长得太像),并一直纳闷刚才的导航怎么不见了。
因此,设计子级页面时请仔细斟酌。如有此业务需求,请为用户提供明显的返回链接。
(图5)(图6)英国红十字会网站:其主页首屏(WWW.REDCROSS.ORG.UK)和子级页尾屏(WWW.REDCROSSFIRSTAIDTRAINING.CO.UK)十分相似:一样的LOGO,一样的导航选项(WHAT WE DO)。想查找FIRST AID COURSE的用户被带到子级页后瞬间迷茫,不知如何返回。
7. 搜索结果不理想万不得已时,用户会使用搜索功能。当目标非常明确时,用户也会先行搜索。无论是哪种场景,我们的网站都应该确保为用户提供强大的搜索结果。
可惜,对许多网站来说搜索功能是它们的致命缺陷。有的网站,搜索结果与搜索词不匹配;有的网站,搜的结果隐晦不详。有的搜索结果不但不符合语法句法规范,提供的描述也毫无利用价值,不禁让用户困惑怎么搜出这么不相干的信息。有的搜索结果还带有外部广告,直接把用户导流到其他网站去了。
请密切用户的搜索记录,进一步了解用户行为,挖掘搜索功能的不足。通过对搜索结果打标,如“最佳匹配搜索结果”,提高搜索精准度。
8. 过滤与分面导航错误过滤(filters)和分面导航(faceted navigation)通常有助于提高用户体验。它们帮助用户排除干扰元素,找到准确的搜素结果。然而,随便给网站加上这两种工具的话,并不能优化用户体验。这两种工具需帮助真正用户满足其真正需求。
「圆梓解说:过滤是指在一定筛选条件下,把不相关的内容排除,滤出用户想要的结果;过滤是单维度的。分面导航和过滤的本质思想一致,可以看作是多维度的过滤,灵活性更强、搜索结果更精准;分面导航在电商网站中尤为常见。」
过滤和分面导航为用户限定了筛选结果范围,不同的筛选条件可满足用户不同的搜索需求。比如企业员工可以通过删选文件类型、日期或者主题来搜索上一周的PPT;电商网站的用户可以通过鞋跟高度挑到喜欢的鞋子,也可以根据保暖级别选出最中意的外套。
有的网站把过滤和分类导航看成是全能的,幻想自己可以“包治百病”。结果其筛选条件并未关联全部内容类型,导致结果不准。同时,我们也要注意切不可把用户推入“非此即彼”的僵局。家具用户可能想选蓝色椅子,也可能要挑蓝色以外的其他颜色的椅子。两种场景都要考虑到。
电商网站的商品必须被准确打标,以保证筛选结果的高度相关。比如,在AARP网站搜索“鸡肉烹饪食谱”,排行前10的结果里竟然有6个都和鸡肉无关。
(图7)网站MAPLIN.COM:用户想在该网站搜索50英镑以下的蓝牙音箱,却发现左下方的筛选条件不能帮自己查询到匹配结果,只好每个价格范围都点击一下,然后自己在心里计算哪些商品适合自己。
9. 用户被迫阅读大量信息网站信息组织不当,容易造成用户迷失。大量的文本信息既枯燥又增加了阅读难度。同时也挑战着用户耐性。
请记住,网站用户习惯于浏览、而不是精读。使用简短的句子、段落、项目列表、标题及粗体关键词,确保用户轻松抓取关键信息。
(图8)网站THE HEADPHONE.COM:SHURE SRH440 STUDIO头戴式耳机详情描述太过冗长,大篇幅的展示让用户很难抓取到关键信息,无法迅速判断该耳机与其他耳机的区别。
10. 链接隐藏我们的可用性研究常年发现,用户经常忽略与广告长得相似、或被放在广告位的链接内容。列在广告周围的链接更是被用户“打入冷宫”。
设计师有时会通过增加一些设计元素,比如边框、背景色或图像等,使之更突出。可惜事如愿违,用户依旧不买账。链接内容设计得越花哨,越容易被用户当成广告。
(图9)网站PITFIELD LONDON:该页展示了PITFIELD CAFE的营业时间,并在右侧设计了菜单链接,链接下面是一杯热腾腾的咖啡;咖啡的下面是一列广告位。这种设计很难让用户找到菜单链接。
再接再厉可以确定的是,没有哪位设计师愿意产出糟糕的网站。既然这些错误设计已存在多年,为何它们的设计师不愿意“自我迭代”呢?这背后的原因大概能聊上三天三夜。这10条错误设计里,有几条反映的是构架失败的问题。比如:
网站信息结构出错,可能与公司组织结构和内部政策有关。网站内容出错,可能由公司部门之间缺乏沟通、未遵循总体内容策略造成。糟糕的搜索结果,可能源于内容管理系统混乱,内容打标有误、漏打,搜索工具不完善。深究这些错误设计的原因,远不如修正错误重要。只要在网站设计过程中多做些用户研究和可用性测试,多研究结果,以上多数错误都可以轻松避免。
没有完美的网站。每一个网站都会有这样那样的问题:该表单字段有问题,该段文本编辑不当,该导航还缺一个选项等等。只要能发现问题、及时修改即可。
另外,做用户研究时不要忽视了之前的研究报告。随着日后设计偏好的变化,这些历史报告可以反复提醒你避免再次犯错。
译文地址:ddc
译者:圆梓
教你避雷!网页设计中常见的17个UI设计错误集锦
保证独特创新的设计。你可以从其他网站的设计中获取灵感,但不允许直接将其他网站的设计照搬。一是因为会有损你网站的声誉,二则是Google会根据用户评论,自动降低你的网站在搜索引擎中的排名。12. 避免使用不恰当的对比色 如果在设计中使用恰当的对比色,内容会更具有可读性并且易于用户注意。如果字体,图...
常见的UI设计错误有哪些?以及如何避免它们?
.凌乱的布局 设计师可能会喜欢他们的混乱创意,但客户却不喜欢。杂乱的网站让用户感到沮丧,当一个页面上的元素太多时,它们都在争夺用户的注意力,并为买家的旅程增添了力量。不知道在哪里看,用户可能会错过您的CTA或重要折扣,直接通过您的销售人员的手指滑动。这是一个较少的转换。应仔细浏览客户的...
网站设计中有可能会遇到的错误是什么
也就是说,网站的富丽堂皇只能带给客户第一印象(很多中小公司为了这个第一印象而牺牲SEO优化,这是相当不明智的),决定他是否有下一步行动的,却往往取决于成交量这样的销售指标。没有成交量做支撑的中小企业,网站做的再美,都是空中花园,可供观赏但不能产生太多实际价值,除非你把自己的网站当成旅游...
网站建设中的哪些不当设计会对用户体验不利
另外在网站策划时容易犯的错误是:太过于追求跟竞品的参考和学习,或者完全不考虑竞品!在网站整体定位方面不能明确,分不清到底属于企业展示站还是产品售卖站,也没有清晰的目的:如网站建成后是要做竞价还是优化,或者面向的用户群体更倾向于男人还是女人?老人或者小孩?或者其它...然后再根据整体用户属性和...
重庆火车站设计被推上风口浪尖,这口黑锅到底该谁背?
现在只要一提起最奇葩设计和最臭的火车站,几乎很多人都会指向重庆,而本以为继骂声一片的重庆北站之后,重庆火车西站的设计应该会吸取教训,弥补曾经犯过的错误,将重庆火车西站建设成一个完美的火车站。然而,当重庆西站在相关配套设施尚未完全建成时就投入运营后发现,很多的缺陷又一次再次出现,而只要在...
建设网站中那些出现纰漏的地方
要有足够的检查建站思路的时间,指引大家寻觅更优网站建设思路,在设计评审中举足轻重,可以说是精髓所在,有很多人错误的觉得,一个建站方案如果感觉不错就开始开发,如果感觉不行就打回去修改。作为一个建站人员,应该了解思路可以给自己带来的帮助,在评审过程中要指引大家去寻觅更优设计思路,这儿需要注意...
【平面设计】设计中最常见的错误有哪些_平面设计的问题及答案_百度知 ...
1.不计划就开工 这似乎是个太明显的错误,觉得把它列在这里都有点不好意思,然而遗憾的是,这个错误我们几乎每个人都犯过。虽然不做任何计划就开始设计在技术上完全没问题,但情况常常是当开始设计之后不久,就不得不回到原点,重新拟定合理的设计方案。事实上,在个人项目中,一份设计方案不仅能为后续...
手机站设计的注意事项有哪些
8、智能搜索功能在手机站设计中,智能搜索功能是非常重要的,因为它可以帮助用户快速找到需要的信息。通过添加搜索框和智能搜索功能,用户可以更轻松地找到所需信息。0、友好的错误提示和帮助信息当用户遇到问题或输入错误时,友好的提示和帮助信息能够减少用户的困惑和烦恼,同时提高用户的满意度。10、兼容性...
关于网页设计的bug,高手给点详细的总结!谢了
楼主指的网页设计bug不要是来自不用浏览器的bug!!主要有以下几点:1.上下 margin 叠加 bug 现在有二个元素: div1 和 div2,div1 的下面有 10px 的外边距,div2 的上面有 10px 的外边距,样式如下:div1 { width: 100px; height: 100px; background: #eee; margin-bottom:10px; } div2...
平面设计师常犯的5种错误
平面设计是很多人都喜欢的一种职业,下面我为大家带来了平面设计师常犯的5种错误,欢迎大家阅读!1. 字距大小调试 △ 字距不宜过紧或过大 当你在软件中输入一个文本时,电脑会默认设置该文本的间距,包括字距和行距。电脑并不会像设计师一样必须根据文本进行调整。如果你的文本显得太过紧凑,字与字...
祗易迈纬: 网站设计注意事项编辑网站设计常犯错误1、导航菜单使用图片、flash导航菜单使用图片、flash当然比纯文本来得好看一些,但是搜索引擎并不认识你的图片和flash
通河县15381373924: 网页设计的重点和常见错误有哪些 - ?
祗易迈纬: 其实很多网页设计,都是设计师、美工转行,一开始都是仅限于只懂得起码的工具使用方式,之后,需要和很多环节做沟通,包括但不仅限于:产品经理、美工、文案、项目经理、前端、全栈、市场等,需要充分理解他们的需求,才能很好的结合自己手上的专业技能去还原和实现网站的页面设计.最忌讳的就是,根本不考虑用户的感受,以及,太把用户当傻子.都是网页设计的大忌,网页设计最重要的就是讲究用户的互动和交互.所以一般网页设计又叫ui设计,和产品经理和前端的沟通,是非常多的.
通河县15381373924: 请问网页设计中的新十大错误是什?请问网页设计中的新十大错误是什么 ?
祗易迈纬: 用户通常注意不到新窗口已经被打开,尤其当他们的显示器很小,而窗口又正好是最大化时 如果觉的我答案有用,请点赞.
通河县15381373924: 如何避免网页设计中常见的8大错误 - ?
祗易迈纬: 在设计网页的过程中,射鸡师们难免会犯点错.尤其是初出茅庐的新人们更加容易在实现新点子的过程中出错.别说是新手了,就算是经验丰富的行家也得注意提高警惕,避免犯这些错误.很多开发者越来越依赖网页模板来减少设计出错的机会.让我们来留心看看这些常见的错误吧. 网页结构上的瑕疵 很多设计师把握不好承载信息的空间与留白之间的平衡.文本、图片和菜单应放在能与之形成足够反差的背景上,通过调整各元素之间的间距来营造干净整洁的外观,拥挤的页面是不能抓住访客注意力的.创建网站的过程中记得检查页边距和padding样式.
通河县15381373924: 导致网站建设网页设计失败的因素有哪些? ?
祗易迈纬: 1、颜色太多、没有主色 一些网站设计公司希望设计一个有吸引力的网页,所以他们使用了很多颜色并添加了许多不相关的图片,但我们需要知道的是不清楚的文字和颜色不利于网民的注意. 2、内容错乱混乱 清洁简洁的网页给访问者留下深刻的第一印象并提高成为我们网站忠实粉丝的机会.一个好的网站应该像超市一样整体布局井然有序.用户可以轻松找到他们需要的内容.相反那些布局混乱的页面永远不会受到用户的青睐.
通河县15381373924: 有关网站建设学习的网站?及网站设计常犯的错误! - ?
祗易迈纬: 目前市场上各种各样的CMS系统,对于建设网站来说,是非常方便的,那么网站建设过程应该注意些什么呢?根据多年网站建设的经验,总结一下几点供大家参考:第一、网站特效 很多人建网站的时候喜欢用很多的特效,觉得好看,其实网...
通河县15381373924: 网页制作的错误 - ?
祗易迈纬: 1、你前面的步骤是对的,先设计出来然后把图片切出来,要注意的是照片导出JPG格式,一般的图片差不多都用GIF,而且图片都放在指定的Images文件夹里,每张图片都需要命名,不能笼统地1,2,3这样标记,对以后的修改网站难度会增加....
通河县15381373924: 网页设计中遇到的问题 - ?
祗易迈纬: 你好,如果是与陌生客户沟通的时候遇到问题,如何取得客户的信任是最重要的一步,所以上海营销型网站建设上一定要有明确的、显眼的、有始有终的一套荣誉资质展示系统,如原产地证书,3C、ISO认证等.还有就是在线客服系统,形成与浏览者良好的互动,留下浏览者的联系方式,这是流量转化为订单的关键等,希望对你有帮助,谢谢!望采纳!!
通河县15381373924: 什么样的网站布局会影响用户体验度??
祗易迈纬: 大部分游客都可能是第一个屏幕的内容吸引到其他页.
通河县15381373924: 设计网页时DIV+CSS常见错误 - ?
祗易迈纬: 用DIV+CSS来设计网页时的常见错误有:1. 检查HTML元素是否有拼写错误、是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检查一下有无错误.2. 检查CSS是否正确 检查一下有无拼写错误、是...