2021年糟糕网站设计的15个例子[+他们做错的地方]

自上世纪90年代以来，互联网在网页设计方面取得了长足的进步。还记得苹果于1998年？或亚马逊于1999年？即使回头看Yelp在2005年感觉就像走进了时光机。

虽然网页设计在过去的几十年里有了巨大的进步，但今天的网上仍然有好的和坏的网站。我所说的“好”和“坏”并不是指像漂亮和丑陋这样主观的东西。一个好的网站是以用户为中心的。换句话说，它让人们更容易导航，找到他们想要的答案，或完成一个行动(如购买)。一个糟糕的网站不是以用户为中心的。这可能意味着它是杂乱的，难以浏览，有可访问性问题，或任何数量的事情。

在这篇文章中，我们将定义什么是网站“坏”并查看一些示例，以便您可以避免自己的设计中这些错误。

换句话说，一个糟糕的网站设计使用户难以完成他们试图完成的东西，这可能正在学习您的产品，注册时事通讯，制作购买或任何其他行动。raybetapp

为了更好地理解是什么让一个网站设计“糟糕”，让我们看一些例子。

糟糕的电子商务网站设计

一个主要目标电子商务网站就是创造销售。那些难以浏览或过于复杂的网站会导致人们在完成购买前就放弃购物车。这些会被认为是“糟糕的”网站设计。让我们来看一些例子。

1.ZARA

它出错了:非常规的导航

访问ZARA的网站有点像翻阅一本华丽的编辑杂志，这很酷，但让人很难真正购物。例如，看看上面的美国网站主页。文本非常小，导航菜单隐藏在一个汉堡按钮，所以它没有立即清除用户下一步该做什么。

Zara的移动网站上的用户旅程很难。单击移动设备上的汉堡菜单时，揭示了一个非常规导航菜单。例如，注意，没有“服装”选项。即使是“鞋子和袋子”这样的更清晰的选择甚至很难一目了然地理解，因为空间已被删除。对于伪造前方的用户来说，他们不会发现没有面包屑或排序选项以帮助他们浏览。由于这种糟糕的导航，用户可能会反弹给更传统的电子商务网站，而不是猜测点击下一步。

2.途中

它出错了：缺乏视觉等级

登陆Wayfair的主页也可能会让用户犹豫不决。虽然感觉Zara的主页没有提供足够的选择，但Wayfair提供了太多的选择。主要问题是:缺乏视觉层次。视觉层次结构是一种安排和组织网站元素的方式，使访问者自然地优先被最重要的元素吸引。目标是引导访问者完成期望的操作。

Wayfair的主页上的问题几乎每个元素都是相同的大小和颜色，并具有类似的副本和图标。因此，用户被告知要店铺家居装修物品，炊具，货架和橱柜，工作区，炉灶和烤箱范围，和枝形吊灯同时。有些用户可能只是离开网站而不是决定在哪里单击。

3.eBay.

它出错了:复杂的产品页面

从像eBay这样的在线市场购买时，您想做出明智的决定。试图在其产品页面上提供尽可能多的信息，eBay处于造成的危险信息超载．在上面的截图中，你可以看到商品的名称、价格、条件、可用数量、已经售出的数量以及发货、付款和退货信息——这些都在页面上方。当你滚动时，还有另一个可切换的部分，里面有更多关于运输和支付的描述和信息。

您还可以同时看到多个选项。有cta鼓励你现在就购买该商品，将其添加到你的购物车，或保存到你的观察列表中。但还有一些小型的超链接cta邀请你出售一件商品(如果你有的话)，看看买家的反馈，查看保修单，学习如何打折，将这家卖家保存到你的观察名单中，参观这家商店，查看类似的商品，等等。一次向用户提供如此多的信息和选项可能会让他们感到沮丧并放弃——或者选择一个你不想要的选项，比如将一个项目添加到他们的观察列表中，而不是购买它。

4.利普顿

它出错了:低分辨率图像

整合图片可以让网站信息更丰富、更吸引人、更令人难忘——但它们必须如此高分辨率．Lipton网站上的一些图像是模糊的，需要很长时间才能加载，在被实际图像替换之前，在多秒钟内显示损坏的图像链接。视觉效果也主要是库存图片或每次茶的包装的包装 - 如果他们代表了ripton茶及其饮酒者，那么视觉效果将更加强大。

糟糕的电影网站设计

电影网站的目的是告知访问者，并可能说服他们购买电影票或电影版权。那些看起来不专业、过时或难以浏览的网站可能会导致访问者在获得他们想要的信息或进行购买之前就离开。这些都被认为是“糟糕的”设计。让我们来看一些例子。

5。房间 - 官方电影网站

它出错了：缺乏可信度

可以房间具有讽刺意味的是，它的网站很糟糕?也许?不管目的是什么，它都存在一些UX问题，其中许多归结为缺乏可信性。

The website is one very long homepage, and there’s no navigation menu to make it easier to browse or jump to a specific section you’re interested in.The items below the featured image look like navigation items, but if you click on any of them, they actually open up a new tab. Some are broken, and open up a blank tab. So your only choice is to exit the site, or scroll down the page. You’ll see a bunch of images, GIFs, and hard-to-read text as you scroll. The media and info is only somewhat related to the film and ultimately distract from the main goal of the site, which is to get consumers to buy rights to use the film. They also hurt the site’s credibility, making it less likely that users will provide their payment information.

6。IMDB.

它出错了:凌乱的布局

IMDB重新设计了许多网页，比如主页，使其更加美观用户体验．但它的一些页面仍然有上述过时的设计，这有一些UX痛点。它的空白和颜色很少，字体相对较小，还有大量的广告和其他内容，布局混乱，很难让访问者实现他们的目标:在这个例子中找到更多关于斯科特·麦克奈里的信息。

浏览页面也没有简单的方法。例如，您想了解McNairy的个人详细信息。你别无选择，只能继续滚动 - 他的照片，精选的工作，学分和相关的视频 - 你到达那个部分。

7。弗ango.

它出错了:没有明确的cta

像Zara，Wayfair和上面讨论的其他网站一样，Fandango为用户缺乏明确的路径。问题：没有明确的CTA。事实上，乍一看，它看起来像主页没有CTA。这是因为折叠上方的少数人不袖手旁观。两个“获取门票”CTA按钮被放置在似乎是广告中，这是被用户忽略．另一个CTA——输入你的位置或电影标题——隐藏在导航菜单的搜索栏中。搜索栏下方的“查看所有电影”CTA的能见度更低，因为它的大小和颜色对比度不足。

最后，滑块包含一些隐含的CTA来查看2021夏季电影预览或场景的细分甜心宝贝，等等。然而，由于它们没有作为动作或放置在传统的按钮设计中，所以很容易被用户忽略。

坏消息网raybetapp站设计

新闻网站的主要目标是让人们尽可能多地消费你的raybetapp内容。诀窍是推广多种内容，而不是让用户不知所措或困惑。让我们来看一些没有切中要害的例子。

8。雅虎

它出错了:空格

雅虎有数十个类别的数十篇文章提供。但在尝试展示各种内容的时候，其主页可能会压倒，特别是首次访问者。

一个问题是空白．虽然折叠上方几乎是太大的负面空间（至少在桌面上），但开始滚动太少。这与小字体大小相结合影响了主页的可读性。因此，用户可能决定退出并转到其他新闻网站的用户而不是浏览网站上的不同内容。raybetapp

糟糕的教育网站设计

教育网站——比如它所代表的大学或学校——旨在教育访问者，并为他们提供所需的资源。reybet雷竞技下载因此，如果一个网站以非常规的方式使用动画、色彩或其他设计元素，可能会分散人们对网站内容的注意力。这最终阻碍了它实现告知访问者的目标。让我们看一些没有达到这个目标的例子。

9。耶鲁大学艺术学院

它出错了:不一致

作为一所艺术学校，耶鲁艺术学院希望其网站令人意义上是有道理的。这意味着它可能会破坏一些网络设计约定 - 但它以牺牲用户体验为代价。虽然动画的背景可以增加更多的个性和深度而不是稳固的背景，但耶鲁的速度和毛刺效应从其其余内容中分散注意力。使用颜色不一致，淡出效果，边框和字体样式（大写，小写，斜体，粗体，下划线和正常字体）也分散注意力和混乱。

10.纽约大学

它出错了： 颜色

NYU的主页由三个主要组件组成 - 一个导航栏，一个具有唯一网格布局的车身部分，以及所有物体 - 所有这些都是紫色的。虽然它们是略微不同的紫色，但没有太大的对比或空格，因此很难将一个部分与另一个部分分开。这令人困惑，并使该网站更加困难。

此外，由于网格布局有一些图像，但主要是由块与坚实的背景色和一些文本，它看起来网页没有完全加载。更多的图片将有助于防止这种误解，并为读者提供有价值的上下文。

11.路易斯安那大学

它出错了:复杂的下拉导航

路易斯安那大学有很多在线资源提供，所以有一个有意义的reybet雷竞技下载下拉导航菜单．但是设计不提供清洁和可读的物品列表。字体很小，物品之间没有多大间距，菜单颜色与标题背景非常相似。当用户悬停在选项上时，整个列会更改为稍微暗的红色而不是各个选项。结果，用户可能会感到不知所措而不是引导的选项。

坏社区网站设计

社区网站是人们获取新闻、寻找流行内容和产品以及闲逛的地方。raybetapp理想情况下，这种类型的网站应该让读者既能轻松浏览，又能在任何设备上找到他们想要的东西。让我们看看一些未能满足这些要求的社区网站。

12.克雷格列表

它出错了：非响应设计

Craigslist因其糟糕的网站设计而臭名昭著(尽管也有捍卫设计的支持者）.虽然它并不漂亮，但它确实允许用户浏览、销售、搜索特定的东西，并相互联系。主要的问题是这个网站不是响应．因此，如果您在桌面或笔记本电脑上打开CraigList并尝试调整窗口的大小，它将隐藏一堆内容。其移动网站运作良好，但现在用户希望能够在几乎任何设备和屏幕尺寸上访问网站。

13.黑客新闻raybetapp

它出错了：可读性问题

黑客新闻是技术raybetapp覆盖范围和与网络安全有关的新闻的进入来源。虽然它是一个广泛读取的出版物，但它具有一些可读性问题。

例如，列表中的每个项目都为Upvote提供了一个操作，按网站排序，查看提交者的配置文件，按照发布，评论或转到故事的时间。但是字体的小而柔和的颜色和缺乏空白，图标和悬停效果使得很难判断这些是可用的和单独的动作。排版，颜色，放置和空格的一些变化将大大提高本网站的可读性和可扫描性。

糟糕的艺术网站设计

理想情况下，艺术组织有网站，赞助人和支持者可以在那里找到有关最新活动的信息，购买门票，并进行捐赠。最好的艺术网站提供访问者可能需要的关于表演、工作人员、志愿者和更多的信息，同时保持布局的圆滑和简单，这样对所有用户都是直观的。让我们来看看一些可以改进设计的网站。

14.新世纪室管弦乐团

它出错了:不一致的品牌

新的世纪室管弦乐队有一个令人敬畏的标志，由三种颜色组成：粉红色，蓝色和黄色。这些颜色在整个网站上使用 - 但在不同的色调中。例如，标题，电子邮件选项表单和页脚主页上的所有蓝色阴影都不同（符合标识中的蓝色）。遍布本网站有霓虹灯粉红色，黄色和蓝色的CTA按钮。其中一些选择似乎不一致和无意，这可能会伤害用户体验并淡化品牌的身份。

15.ODC /跳舞

它出错了：可访问性问题

ODC/Dance存在一些易访问性问题，这可能会限制其接触更多用户的能力。例如，视频会在主页上自动播放。虽然这是互动和吸引人的，它应该有控制，让用户暂停或停止播放WCAG指南．

该网站也有一些颜色可访问性问题．例如，在上面的屏幕截图中，在图像背景下不可见一些标题和CTA文本。由于屏幕底部的NavBar和横幅有点透明，因此白色文本也很难读取。这可能会阻止某些用户单击CTA或导航链接，甚至仍处于站点上。

“坏”网站的展示

上面的网站被用作“坏”网站设计的例子，因为它们在某种程度上没有以用户为中心。有些游戏由于缺乏颜色对比而存在易用性问题。有些网站因为杂乱的布局或缺乏视觉层次而让用户无法选择。其他用户以不一致或无意的方式使用颜色、空白和图像。你可以从这些错误中吸取教训，在你自己的网站设计中避免这些错误，以便为你的访问者提供最好的体验。

编者注：这篇文章最初发表于2018年12月，并已更新全面性。