
糟糕的网站设计: 要避免的8个错误
您是否知道您的网站 75% 的可信度取决于其设计?如果存在许多网站设计错误,访问者可能会认为您的公司不太值得信赖。无论您是从头开始构建网站还是刷新当前网站,避免这些错误都将使您的企业在网上脱颖而出。
1. 不优先考虑可访问性。
将可访问性视为事后诸葛亮是您可能犯的第一个网站设计错误。四个主要错误:
- 色彩对比度不足
- 图像或图形的替代文本缺失或不合适
- 视觉焦点指示器不足或缺失
- 忽略可访问的名称或标签
让我们更深入地研究其中的每一个。
色彩对比度不足
颜色对比是一个经常被忽视的可访问性错误。通常,这种错误的发生是因为公司制作的网站以他们的品牌调色板为特色,而创建网站时通常没有考虑到易于访问的设计。
“当网站上使用的颜色组合在背景色和前景色之间缺乏足够的颜色对比度时,文本和图标可能很难被感知,特别是对于那些有色盲等视觉障碍的人来说,”凯利分享道。“根据2022 年 WebAIM Million 年度报告,超过 80% 的主页发现色彩对比度问题!”
替代文本缺失或不合适
使用屏幕阅读器的网站访问者依靠图像替代文本来描述图像或图形所传达的内容。如果它丢失或没有充分描述图像,您就会孤立需要它来仔细阅读您网站的读者。
“图像是网站内容的一部分,因此以传统网站文案的方式来思考它们很重要:通过在页面上包含图像来传达什么信息?确保您使用的替代文本传达相同的含义,”凯利说。
视觉焦点指示器不足或缺失
如果没有视觉焦点指示器,访问者将无法充分体验您的网站的潜力。“焦点指示器通常显示为链接和按钮等交互组件周围的轮廓,重要的是,要有一个清晰的视觉指示来表明页面上的哪些元素具有当前焦点,这样使用键盘导航并可以看到屏幕的用户就可以准确地知道他们在页面上的位置以及与页面交互时会发生什么。活性元素。

忽略可访问的名称或标签
如果您的网站以视觉方式传达信息,请注意那些使用辅助技术的网站。“在设计以视觉方式传达信息的页面和组件时,应使用辅助技术的可访问标签来传达相同的信息。
“例如,网页设计的一个常见趋势是卡片组件在每张卡片的底部都有一个‘阅读更多’按钮或链接。有关每个按钮与哪个项目关联的信息通过设计以视觉方式传达,但是对于屏幕阅读器来说,如果这些按钮缺少包含相关详细信息的可访问标签,通常很难区分它们。
2.忘记了网站的响应式设计的重要性。
2022 年第二季度,移动设备占全球网站流量的 58% 以上,其中甚至不包括平板电脑。如果您的网站在移动设备上不像在桌面设备上那样易于导航,则您可能会面临让访问者感到沮丧并增加跳出率的风险。
现在,用户比以往任何时候都更多地通过多种设备访问网站;手机、平板电脑、笔记本电脑,甚至电视。如果我们的内容在其中任何一个上看起来很糟糕,访问者就会失去信任并点击/点击离开该网站.
网站通常是使用桌面网络浏览器中的工具构建的。一个常见的错误是假设您的客户将以桌面格式查看您的网站,而忽略了移动用户。

3、为了美观而牺牲用户体验。
过去几年中出现的网站设计错误之一是美学优先于功能。随着互联网的不断渗透,多年来,随着新媒体和设计的大规模爆炸,卓越几乎是成功的必要条件。不幸的是,这最终导致了过度使用设计和图形元素,这些元素提升了用户的感官,但却缺乏或感觉与网站的真正目的脱节。
这以多种形式表现出来,从淡化品牌价值主张的设计趋势,到过度使用动画、内容和沉重的图形,虽然增强了美感,但却变得毫无用处。这并不意味着应该采用极简主义或中性主义风格;而是应该采用极简主义或中性主义风格。这是关于平衡以及形式如何支持功能。
4. 不投资定制网站 – 采用模板网站
漫步市中心,您会路过一家服装店,橱窗展示富有创意且极具视觉吸引力。它以各种特价服装为特色,并通过背景和引人入胜的文案讲述了一个故事。然后,你走过一家商店,橱窗里的人体模型上只有几件衣服——没有任何东西能引起你的注意。
将您的网站视为您企业的互联网店面。它应该反映您的品牌并且对您的公司来说是独一无二的。最重要的网站设计错误之一是选择千篇一律的模板而不是对其进行自定义。
例如,默认使用标准英雄横幅可能会产生反效果。我们都见过它们 – 导航下方的全角图像,通常带有白色或黑色文本,顶部有一个按钮。
图像要么非常亮,要么非常暗,或者以巧妙的方式进行裁剪以使文本清晰易读。我认为这是一个错误,有几个原因。首先,它太常见了,以至于变得公式化和无聊。曾经引人注目的设计决策现在变得单调乏味。
5. 使用不转换的功能。
另一个常见错误是使用低效的功能。无论某个元素在视觉上多么吸引人,请记住,最重要的是网站的有效性。另一个常见的错误是依靠旋转轮播来展示同一级别的多个内容。
无数研究表明,用户并不经常与轮播交互,尤其是在交互成本很高的移动设备上。
6.缺乏等级制度。
您是否曾经访问过某个网站却发现自己不确定该将注意力集中在哪里?如果是这样,您可能会访问一个缺乏层次结构的网站。就像报纸如何使用标题和副标题来表示重要性一样,您网站的排版也应该如此。
网站上的秩序不仅具有审美吸引力,而且还具有功能性。“网站元素的组织为您的网站提供一个有凝聚力的结构,推动用户完成明确的操作,实现主要目标,并随后创造无缝体验。
解决这个问题并不简单,尤其是当您的公司拥有有着不同目标的广泛受众时。然而,最好是您这样做,因为这个问题会极大地影响用户对您网站的体验。“缺乏层次结构会误导用户并阻止他们实现目标。
7、导航不清晰。
清晰的导航可以减少访问者登陆您的网站时遇到的摩擦,这就是为什么不清晰的导航会造成这样的困境。“随着越来越多的企业进入数字世界,网站上的内容变得更加拥挤和复杂,在多个接触点和用户旅程之间拥有清晰的导航和一致性将确保从第一位访问者到倡导者的平稳过渡。
8. 未能有效传达您的商业目的。
当访问者登陆您的网站时,他们应该能够清楚地了解您公司的业务。如果那张照片有点模糊呢?您猜对了——访问者可能会放弃您的网站。
网站访问者加载您的网站时所做的第一件事就是确定他们是否到达了正确的目的地。您的网站是否在首屏上明确说明了其提供的产品或服务?
您的网站应该提高您企业的可信度。如果它不能传达您的业务目的并确保访问者处于正确的位置,则可能需要重新设计网站。
如何修复常见的网站设计错误
现在我们已经了解了最常见的网站设计错误,让我们讨论如何解决这些错误。别担心:意识是成功的一半。现在您知道要避免什么,您可以开始创建一个以网站设计最佳实践为特色的网站。
1. 将无障碍作为首要任务。
网络可访问性意味着让每个人都可以访问网站及其信息,因此在设计网站时正确设计至关重要。当我们在网站设计中犯下这些常见的可访问性错误时,我们就为数百万患有某种残疾的人制造了可用性障碍。即使您的网站看起来很棒,如果部分访问者无法访问某些内容或操作,那么它就无法充分发挥其潜力来满足您的目标和业务需求。
以下是解决设计可访问性问题的一些可行方法。
创建用户角色以满足各种用户需求
确保您的角色具有包容性,并将可访问性纳入网站设计的结构中。“尽早并经常考虑可访问性。设计网站时,第一步通常是创建用户角色,以帮助确保网站满足各种用户需求。确保你的角色包含各种能力是保证你在项目的所有阶段都考虑到可访问性的一种方法。
自我教育无障碍最佳实践
了解有关辅助功能最佳实践的更多信息,以便在处理项目时将它们放在首位。关于如何设计、构建和测试网站的可访问性,有大量的资源、清单和指南。您可以先查看我们的创建可访问网站的清单。
2. 确保您的网站采用响应式设计。
借助响应式网页设计,您可以放心,无论访问者如何访问您的网站,他们都会获得无缝的体验。幸运的是,制作响应式网站并不像看起来那么困难 – 如果您使用的是CMS等内容管理系统,您甚至可以使用已经适合移动设备的模板。
考虑一下您希望访问者从页面中获取的最重要的信息是什么,然后考虑它在尽可能最大和最小的屏幕上的外观。您的目标是确保无论使用什么设备,访问者都能对您的内容有相同的理解。
创建网站的移动版本后,您的工作还没有完成。“一定要在手机上测试您的网站,”兰德里提醒道。测试网站可能会发现您以前没有注意到的故障。
3. 平衡审美情趣与无缝用户体验。
我们知道当网站将美观放在第一位、功能放在第二位时会发生什么。在一个成功的网站上,可以平衡视觉吸引力与无缝的用户体验,使访问者能够浏览页面并找到他们正在寻找的内容。
实现这一目标主要取决于有效的团队沟通和协调。设计团队应该忠于策略,确保设计支持用户的主要目标,并与开发、内容和SEO团队保持良好的一致性。
4. 网站设计要有意识,不要害怕发挥创意。
仅仅因为您看到很多具有特定设计或布局的网站并不意味着您的网站也需要如此。认真考虑应该在这个非常有价值的位置放置什么。
问自己对这个空间的意图是了解什么最适合它的另一种有效方法。这些图像是有意义的还是只是装饰性的?布局的设计是否鼓励用户阅读或采取行动?有什么有趣的事情可以吸引他们的注意力几秒钟吗?
与广告的横幅失明效应类似,用户开始跳过这些大的英雄部分,转而尝试深入了解下面实际有意义的内容。对于网页设计师和营销人员来说,这是一个错失的机会,他们经常将最有价值的 CTA 放在英雄横幅中。
或者,您可能决定完全切换网站的布局,因此导航下方不会显示图像。超过 70% 的企业投资于设计,以帮助其公司从竞争对手中脱颖而出,因此不要害怕做行业中其他人没有做的事情。
5. 不要隐藏无法转换的功能信息。
如果您知道某个功能无法转化或访问者对它犹豫不决,请确保不要在其中隐藏重要信息。(或者更好的是,完全废弃它。)如果您公司的网站具有轮播功能,请务必考虑最佳实践。
关于轮播体验,可以改进的一些事情是使用高度可见的控件、限制幻灯片的数量以及将最重要的信息放在第一位。除了第一张幻灯片之外,不应隐藏任何重要内容,因此,如果用户不与组件交互,他们也一定能获得完整的体验。
6. 确保您的站点具有层次结构。
如果没有层次结构,您的网站就会显得势不可挡、令人困惑且难以消化。然而,通过层次结构,访问者可以清楚地知道在哪里看、读什么。幸运的是,您可以进行一些快速修复来在网站上实现层次结构。要获得一些想法,您应该研究一些专门研究现代网页设计中的层次结构的网站设计服务。
一定要使用 HTML 标题标签和每个标签的大小来向用户传达每行文本的相对重要性。
马丁内斯补充道:“为了避免这些错误,关注这三个主要属性至关重要:比例(利用尺寸差异)、平衡(分配视觉元素)和构图(组织元素)。应用格式塔原则,尤其是接近性,来生成一个有凝聚力的结构。”
7. 确保您网站的导航直观。
如果您的网站导航出现问题,您可能会在网站的跳出率中看到这一点。将高效导航视为无缝用户体验的必备条件。
直观的导航可确保流畅的用户体验,并支持用户的旅程,提供轻松的信息发现或返回特定点的方式。为了保证这一点,团队应该定义导航级别(最好不超过三个)以及不同级别的页面如何链接回其父级别。此外,验证正确的标签,使任何用户都可以轻松理解并确认导航在不同的屏幕尺寸上是否有效,因为它们的行为可能有所不同。
8. 确保通过设计和文案传达您的商业目的。
您将使用引人注目的副本和视觉元素来实现这一目标。在开始之前,问问自己网站的目的是什么。您是否正在创建一个电子商务网站,访问者可以从您的公司购买商品?或者您网站的主要目标是告知您的团队提供哪些服务?明确您网站的使命是什么。您添加到网站的每个功能和副本都应有助于实现该目的。您可能需要为您的企业采用 IT 服务来最大限度地提高受众参与度。
避免常见的网站设计错误以提高网站可信度
通过避免常见的网站设计错误,您将提高网站的可信度,并为访问者提供他们想要再次访问的体验。
网页设计是一项团队运动,需要一种循环方法,以确保团队、利益相关者和用户知识之间的良好协调。没有比测试和迭代更好的方法了,包括用户研究和可用性测试,以确保您的网站朝着正确的方向发展。