19 2021年不良网站设计的示例[+他们出了什么问题]

The internet has come a long way in terms of web design since the 90s. Remember苹果在1998年? Or亚马逊在1999年? Even looking back atYelp in 2005feels like stepping into a time machine.

尽管在过去的几十年中，网页设计已经大大改善，但今天仍在网上有好和坏网站。通过“好”和“坏”，我并不是说像漂亮和丑陋的主观。一个好的网站以用户为中心。换句话说，这使人们可以轻松导航，找到他们要寻找的答案或完成动作（例如进行购买）。一个糟糕的网站不是以用户为中心。这可能意味着它很混乱，难以浏览，存在可访问性问题或任何数量的事情。

在这篇文章中,我们将定义是什么让一个网站“bad” and look at some examples so you can avoid these mistakes in your own designs.

In other words, a bad website design makes it difficult for users to accomplish what they’re trying to accomplish, which might be learning about your product, signing up for a newsletter, making a purchase, or any number of other actions.

Website engagement metrics，就像平均页面上的平均时间和跳出率一样，可以通过告诉您访问者倾向于在您的网站上往返的何处，持续多长时间，多久和如何到达网站上，从而为您的网站的用户提供洞察力。

用户测试还可以帮助您根据所学知识来收集可行的见解并实施更改。幸运的是，有很多user testing tools可以提供帮助。例如，HubSpot的网站分级器将根据包括移动，设计，性能，SEO和安全性在内的几个因素评估您的网站，然后提供量身定制的改进建议。

通过查看示例，可以更好地了解使网站设计“不好”的另一种方法。让我们看看下面的一些网站设计并解释他们出了什么问题。

不良电子商务网站设计

一个主要目标ecommerce website是为了产生销售。难以导航或过于复杂的网站将导致人们在完成购买之前弹跳或放弃购物车。这些将被视为“坏”网站设计。让我们看一些示例。

1.扎拉

怎么了: Unconventional navigation

访问Zara的网站有点像翻阅一本精美的社论杂志，这很酷，但很难真正购物。例如，查看上面的美国网站的主页。文本非常小，导航菜单隐藏在hamburger button，因此，用户不清楚下一步该怎么做。

Zara的移动网站也很困难。单击移动设备上的汉堡菜单时，会揭示非常规的导航菜单。请注意，例如，没有“衣服”选项。即使是“鞋子和袋子”之类的更清晰的选择，也很难一目了然地理解，因为空间已被删除。对于提前锻造的用户，他们不会发现面包屑或排序选项来帮助他们浏览。由于这一不良的导航，用户可能会反弹到更传统的电子商务网站，而不是猜测在哪里单击下一步。

2.Wayfair

怎么了：缺乏视觉层次结构

Landing on Wayfair’s homepage might also leave users feeling paralyzed with indecision. While it felt like Zara’s homepage didn’t offer enough choices, Wayfair’s offers too many. The main problem: lack of visual hierarchy.视觉层次结构是安排和组织网站元素的一种方式，使访客自然而然地倾向于最重要的元素。目的是领导游客完成所需的行动。

Wayfair主页上的问题是，几乎每个元素的大小和颜色都相同，并且具有相似的副本和图标。因此，用户被告知购买家庭装修，炊具，货架和橱柜，工作区，炉灶和烤箱范围，和吊灯同时。与其决定先点击哪里，不如说一些用户可能会离开网站。

3.eBay

怎么了: Complex product pages

从eBay这样的在线市场购买时，您想做出明智的决定。为了在其产品页面上提供尽可能多的信息，eBay有危险造成信息超载。In the screenshot above you see the item’s name, price, condition, quantity available, and number already sold as well as shipping, payment, and return information — and that’s just above the fold. There’s another toggled section with more description and information on shipping and payments when you scroll.

You’re also presented with several options at once. There’s CTAs encouraging you to buy the item now, add it to your cart, or save it to your watchlist. But then there’s smaller hyperlinked CTAs inviting you to sell an item if you have one, see feedback from buyers, check out the warranty, learn how to get a discount on the item, save this seller to your watchlist, visit the store, view similar items, and on and on. Presenting so much information and options to a user at once might cause them to get frustrated and bounce — or pick an option you don’t want like adding an item to their watchlist instead of buying it.

4。Lipton

怎么了：低分辨率图像

Incorporating images can make a website more informative, engaging, and memorable — but they have to behigh-resolution。Lipton网站上的某些图像是模糊的，需要很长时间才能加载，显示了损坏的图像链接多秒钟，然后被实际图像替换。视觉效果还主要是库存每种茶包装的图像或图片 - 如果这些视觉效果代表使立顿茶及其饮酒者独特的原因，它们将更加强大。

5。马德韦尔

怎么了：不清楚的移动导航

Mobile sites pose a design challenge: you want to provide all the navigation options and information a visitor needs without cluttering the interface. Madewell's mobile site doesn't quite strike this balance. It's clean and sleek, but it's missing some key features that affect the user journey.

For example, say you log in and want to change your password. You'd click the yellow user icon and see this fly-out menu. You might understand that you can click "My Orders," "My Favorites," or "Sign Out," but these won't provide an option to change your password. To get to account details to then change your password, you have to click the "HI, [NAME]." This unclear navigation label will likely prevent some customers from completing this user flow and being able to change their password, which is a big pain point and security risk.

6。纸张来源

怎么了: Outdated design

纸张来源was founded in 1983 and, like many brands that have been around for decades, its website suffers from an outdated design. Its layout is cluttered with images, text boxes, and CTAs. A mismatch of colors, fonts, and backgrounds adds to the visual clutter. As a result of this outdated design, customers might think the products — and overall brand — are outdated as well, and opt for a newer, trendier brand.

坏电影网站设计

The purpose of a movie website is to inform visitors and possibly persuade them to purchase tickets or film rights. Websites that seem unprofessional, outdated, or hard to navigate might cause visitors to leave before getting the information they were looking for or making a purchase. These would be considered “bad” designs. Let’s take a look at some examples.

7。房间 - 官方电影网站

怎么了：缺乏信誉

可以房间’s website be ironically bad? Maybe? Whatever the intent, it has several UX issues, many of which boil down to a lack of credibility.

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.

8。IMDB

怎么了: Cluttered layout

IMDB重新设计了许多网页，例如主页，以使其更加时尚用户体验。But some of its pages still have the outdated design shown above, which has some UX pain points. With little whitespace and color, relatively small font, and lots of ads and other content, the layout is cluttered and doesn’t make it easy for visitors to accomplish their goal: finding out more about Scoot McNairy in this case.

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

9。Fandango

怎么了: No clear CTAs

像Zara，Wayfair以及上面讨论的其他网站一样，Fandango缺乏对用户的清晰途径。问题：没有明确的CTA。实际上，乍一看，主页看起来没有CTA。那是因为折叠上方存在的少数人并不脱颖而出。两个“获取票” CTA按钮放置在看起来是广告中，ignored by users。Another CTA —to enter your location or a movie title — is hidden in the search bar of the navigation menu. The “See all Movies” CTA below the search bar has even less visibility because of its size and lack of color contrast.

Finally, the slider contains some implied CTAs to view the 2021 Summer Movie Preview, or a breakdown of a scene inCandyman， 等等。但是，由于它们没有用作操作或放置在常规按钮设计中，因此用户也很容易忽略它们。

坏消息网bob官网官方网站站设计

新闻网站的主要目标是让人们尽可能多地消费您的bob官网官方网站内容。诀窍是促进各种内容，而不会压倒或混淆用户。让我们看一些错过分数的例子。

10。雅虎！

怎么了: Whitespace

雅虎！有成千上万的文章可供提供。但是，为了展示这些各种内容，其主页可能是压倒性的，尤其是对于初次访问者而言。

一个问题是空格。虽然褶皱上方几乎有太多的负空间（至少在桌面上），但随着您开始滚动时，折叠空间太少了。结合小字体尺寸，会影响主页的可读性。结果，用户可能会决定退出并转到其他新闻网站，而不是浏览网站上的不同内容。bob官网官方网站

11.CNN

怎么了：缓慢的负载时间

像Yahoo！一样，CNN旨在展示各种内容，包括图像，视频和文本。结果，该页面沉重且加载缓慢。如此慢，以至于被列为Internet上最慢的网站之一Speedmonitor.io。根据最新的《每日灯塔审核》，CNN需要4.8秒才能显示页面的可见部分，并将其两倍（9.6秒）互动。

Considering that load time is essential to the user experience and search engine rankings, CNN is likely losing visitors and positions onsearch engine results pages (SERPs)由于其速度。

12.每日邮报

怎么了:太多的广告

广告被称为必要的邪恶。他们确保网站可以为访问者提供免费内容，同时仍能从会员和产品销售中产生收入。因此，目标是以尽可能少的方式显示广告。

每日邮报does not meet this objective. The ads clutter the main body of the web page and both sidebars, pushing the content down and making it more difficult to read. They also significantly slow down the website's load time.

不良教育网站设计

一个教育网站（例如它代表的大学或学校）旨在教育游客并为他们提供所需的资源。bob体育苹果系统下载安装因此，以非常规的方式使用动画，颜色或其他设计元素的网站有可能分散注意内容的注意力。这最终阻止了它实现通知访客的目标。让我们看一些未达到这个目标的例子。

13.Yale School of Art

怎么了：不一致

作为一所艺术学校，耶鲁大学艺术学院希望其网站给人留下大胆的印象是有道理的。这意味着它可能会破坏一些网页设计惯例 - 但这是以用户体验为代价的。虽然动画背景可以比坚实的背景增加更多的个性和深度，但耶鲁大学的速度和故障效果会分散其其余内容的注意力。不一致的颜色，淡入效果，边界和字体样式（有大写，小写，斜体，大胆，下划线和正常字体）也令人分心和混乱。

14.纽约大学

怎么了: Color

纽约大学的主页由三个主要组件组成：一个纳维栏，具有独特的网格布局和页脚的车身部分 - 它们都是紫色的。尽管它们的紫色阴影略有不同，但对比度或空格并不多，因此很难将一个部分与另一部分分开。这令人困惑，使导航更加困难。

Also, since the grid layout has some images but is mostly made up of blocks with a solid background color and some text, it looks like the web page isn’t fully loaded. Some more images would help prevent this misconception and provide valuable context to readers.

15。路易斯安那大学

怎么了：复杂的下拉导航

路易斯安那大学提供很多在线资源，因此拥有一个有意义的bob体育苹果系统下载安装drop-down navigation menu。但是该设计无法提供干净且可读的物品列表。字体很小，项目之间的间距不大，菜单颜色与标题背景非常相似。当用户徘徊在一个选项上时，整列更改为稍微暗的红色而不是单个选项。结果，用户可能会因提出的选项而不是指导而感到不知所措。

不良社区网站设计

社区网站是人们转向获得新闻，查找流行内容和产品以及视频聊天的地方。bob官网官方网站理想情况下，这种类型的网站应该使读者可以轻松地随意浏览并确切地在任何设备上找到所需的东西。让我们看一下一些无法满足这些要求的社区网站。

16。craigslist

怎么了：无反应设计

craigslistis notorious for its bad website design (although there are also捍卫设计的支持者). While it’s not pretty, it does allow users to browse, sell, search for something specific, and connect with each other. The major problem is that the site isn’t响应迅速。因此，如果您在台式机或笔记本电脑上打开Craiglist并尝试调整窗口大小，它将隐藏一堆内容。它的移动网站运行良好，但是如今用户希望能够在几乎任何设备和屏幕尺寸上访问网站。

17。黑客新闻bob官网官方网站

怎么了：可读性问题

黑客新闻bob官网官方网站is the go-to source for tech coverage and breaking news related to cybersecurity. Although it’s a widely-read publication, it has some readability issues.

例如，列表中的每个项目都提供了一项动作，以升级，按网站进行排序，查看提交者的个人资料，按照发布时间进行排序，评论或转到故事。但是，字体的小而柔和的颜色以及缺乏空格，图标和悬停效果，因此很难说出这些可用和单独的动作。排版，颜色，放置和空格的一些变化将大大提高该站点的可读性和扫描性。

Bad Arts Website Design

理想情况下，艺术组织有网站，顾客和支持者可以在其中找到有关最新活动，购买门票和捐款的信息。最好的艺术网站为访问者提供了有关表演，员工，志愿服务等所需的所有信息，同时保持布局时尚和简单，因此对所有用户都是直观的。让我们看一下一些可以改善其设计的网站。

18。新世纪室内乐团

怎么了：不一致的品牌

新世纪的室内乐团有一个由三种颜色组成的很棒的徽标：粉红色，蓝色和黄色。这些颜色在整个网站中都使用 - 但色调不同。例如，主页上的标题，电子邮件选择表格和页脚都是蓝色的不同阴影（徽标中的蓝色都不匹配蓝色）。整个站点上都有CTA按钮是霓虹灯粉红色，黄色和蓝色。这些选择中的一些似乎是不一致且无意识的，这可能会损害用户体验并稀释品牌的身份。

19。ODC/Dance

怎么了: Accessibility issues

ODC/Dance has some accessibility issues which might limit its ability to reach as wide an audience as possible. For example, a video autoplays on the homepage. While this is interactive and engaging, it should have controls that allow the user to pause or stop playback, according toWCAG指南。

The site also has somecolor accessibility issues。In the screenshot above, for example, some of the heading and CTA text isn’t visible against the image background. Since the navigation bar and banner at the bottom of the screen are somewhat transparent, the white text is also difficult to read. This might prevent some users from clicking on the CTAs or navigation links, or even staying on the site.

The Showcase of “Bad” Websites

The websites above are used as examples of “bad” website design because they fail to be user-centric in some way. Some have accessibility issues due to a lack of color contrast. Some overwhelm users with choices because of a cluttered layout or lack of visual hierarchy. Others user colors, whitespace, and images in an inconsistent or unintentional way. You can learn from these mistakes and avoid them in your own website designs in order to provide the best experience to your visitors.

编者注：该帖子最初于2018年12月发表，并已更新以进行全面性。