自定义 404 错误页面:保存损坏网页的最佳“未找到页面”示例

已发表: 2018-07-07

我们都经历了比我们想要的更多的经历。 当您点击链接以期打开一个新网页时,这种感觉足以吸引您的注意力,结果却被可怕的 404 错误击中。

页。 不是。 成立。

哦亲爱的哦亲爱的。 如果您是用户,您会立即感到沮丧或失望。 如果您是网站所有者,当您发现链接或页面已损坏时,总是会感到尴尬和困惑——“但它昨天奏效了!”

然而,在中断中,当涉及到 404 错误页面时,通常有一些隐藏的宝石。 一些网站没有跟随羊,而是花时间将他们的 404 页面变成使用大量乐趣或附加信息的借口——如果你问我的话,这非常聪明!

想要将更多精选的最佳设计直接发送到您的收件箱?
注册DesignRush 每日剂量!

这些自定义错误页面为其他设计师提供了完美的灵感。 当然,最好的情况是完美无瑕的网站设计,每次都可以完美运行。 然而,事情发生了,主题出错,网络服务器故障和页面中断。 因此,在您的网站上定制品牌信息以减轻打击并让您的访问者在出现混乱后再次光顾是必不可少的。 一些 404 页面非常有趣,以至于人们不断故意攻击它们,甚至与他们的朋友分享!

为什么需要 404 错误网页?

当“断开的链接”或不准确的 URL 将用户带到无法访问的网页时,就会发生 404 页面错误。

有时,当其他人或在线企业通过断开的链接以数字方式提及您的品牌时,会出现 404 错误。 在这些情况下,通常情况下,404 页面源于有人在链接中打错字,例如在 URL 末尾添加一个额外的字母。 实际上,在 45.9% 的情况下,人们偶然发现 404 页面是因为打字错误、电子邮件中的旧链接或旧书签保存了已删除页面的链接。

然而,最常见的 404 页面事件之一是,当网站管理员在整个网站(以及整个 Internet)中仍有其他链接指向现已禁用的页面时,网站管理员会完全删除该页面。 在这些情况下,您应该记住拒绝链接。 这意味着您要打破联系并告诉搜索引擎这些链接已损坏,而不是让他们自己了解并将人们指向您的错误页面。

当您想要移动或删除内容时,您需要重定向页面——这就是 301、307 和 308 重定向的用途。 301/308 重定向是一种永久性重定向——每当有人访问前一个页面时,他们将立即被重定向到新页面。

但是,302/307 重定向是暂时的。 网站管理员使用它们有几个原因。

信不信由你,搜索引擎可以将人们带到 404 页。 例如,当您正确地进行重定向时,人们应该登陆您现在指向他们的页面。 但有时,搜索引擎需要几天(或更长时间)才能抓取页面并实际记录您所做的所有更改。 在这么短的时间内,他们可能仍会将人们带到错误的 404 页面。

在其他时候,网站上可能存在导致链接失效的错误。 在这种情况下,您需要向程序员和开发人员寻求帮助。 毕竟,一项调查发现 17.5% 的网站链接失效。

如何监控 404 页面

您应该始终监控任何潜在的 404 页面,并在它们出现后立即尝试修复它们。 幸运的是,有一些工具可以帮助您找到损坏的链接并进行处理。 其中包括 Screaming Frog、Dead Link Checker 以及可能最受欢迎的 Google 自己的网站管理员工具。

创建有效的 404 错误网页

有一件事几乎可以肯定——即使您在网站上做的一切都正确,您总会不时地拥有 404 个页面。 但好消息是,您可以通过拒绝链接、持续监控页面、运行网站检查器等来最大化用户体验并最小化其外观。

当错误发生时,我们应该从中吸取教训。 使用 Google Analytics 等网站分析程序来提高网站性能。 跟踪人们登陆您的 404 页面时的行为。 然后,利用这些数据为您带来好处。

例如,如果他们在 404 页面返回主页后采取的下一步是,您可以放置​​一个清晰可见的按钮,将他们引导到您的设计中。 或者,如果他们想在 404 错误后访问联系页面,请在那里链接,让他们的生活更轻松。

跟踪消费者行为和信息,了解哪些内容对您的网站有效,以及您的消费者喜欢和不喜欢什么。 什么更好? 此类事情无需猜测——有关您网站访问者的数字和具体数据将不言自明。

您想立即复制的最佳 404 错误页面设计

在浏览互联网以查找错误后(听起来很奇怪),有几个 404 页面脱颖而出。 看一看——也许其中一些会激发您自己的品牌设计!

1. 映射出的 404 错误页面:BluePath

BluePath 与其客户合作“创建和实施自动化分析策略”,帮助用户远离电子表格。 虽然这本身就很棒,但他们也花时间整理了这个古怪的 404 错误页面。

该页面实际上显示了一张地图(由于您“离开地图”导航的愚蠢行为,您没有在地图上)。 页面上的副本还说:

“这张 [地图] 显示了亚特兰大过去几年报告的所有犯罪行为。 为什么? 因为你还没有雇用我们是犯罪!”

打得好,蓝道。 打的好。

2. Snarky 404 页面错误:澳大利亚人

澳大利亚领先的国家新闻品牌《澳大利亚人报》拥有一系列全国和全球新闻和商业报道。 然而,就像我们其他人一样,他们很容易受到偶尔的错误的影响。 在这种情况下,他们的 404 错误页面。

但与其屈服于经典的“找不到页面”,《澳大利亚人报》选择利用该页面作为对几位澳大利亚政客进行狡猾挖掘的机会(奇怪的是,唐纳德·特朗普和一块煤也上榜了)。 每个政治家都有一个与他们相关的名言以及他们对断开链接的想法。

3.游戏化404错误页面:Kualo

好的。 这可能是互联网历史上最好的 404 错误页面。 Kualo 决定将他们的断链之家变成一款太空入侵者游戏供用户玩。 游戏化是将失望的网络浏览者转变为非常满意的内容消费者的好方法。

另外,用户可以故意回到这个页面只是为了玩经典游戏。 由于搜索引擎可以看到所有内容(你好,老大哥……),因此它们还会跟踪用户在页面上的时间。 有道理——如果你在一个页面上花了很多时间,那就意味着你真的很喜欢这个内容。 如果您是回头客,并且不断回来,搜索引擎将绘制您的旅程并以更好的排名奖励网站!

什么更好? 您不仅有机会在 Kualo 的网站上玩这款很棒的游戏,而且您实际上有这样做的动力! 如果您摧毁 1,000 名入侵者,您将获得他们托管的折扣。 总的来说,这确实是一个了不起的设计,纯粹因为这个页面,我花了额外的一个小时来写这篇文章。 向夸洛致敬。

PS可以打败我们的高分?

4. 古怪的 404 错误页面:无用的网络索引

无用的网络索引 - 以其非常合适的名称 - 决定在其 404 错误页面设计中为我们提供备受喜爱的猫鼬。 您在页面上停留的时间越长,到达的猫鼬就越多,以至于大约 10 秒后屏幕上至少有 8 只猫鼬。

您几乎为那些显然正在努力寻找您的网页的猫鼬感到​​难过!

当然,游戏化为您的业务创造了奇迹,但结合远程连接到 404 主题的视频也是一种很好的策略。 人们可能会一直观看它直到最后,这是增加在网页上花费的时间并提高整体指标的另一种好方法,即使出现 404 页面也是如此。

5. 图解 404 错误页面:乐高

如果您是乐高迷,您会喜欢他们的 404 错误页面设计。 正如一些公司已经强调的那样,404 页面实际上是使用错误页面向访问者重申您的品牌或产品的绝佳借口。

乐高实际上以使用各种策略来增加他们的客户群而闻名,并且永远不会错过提醒人们他们相关的机会。 他们有一系列动画电影、视频游戏、附加内容等等。 乐高适合所有年龄段的人,从婴儿乐高得宝积木到让成年人建造最著名地标复制品的建筑师盒子。

我们没想到他们的 404 页面会更少。 在这种情况下,乐高的 404 页面非常具有说明性:将您单击的链接连接到网页的“电缆”坏了,一些可怜的家伙偶然发现了它,吓坏了!

6. Punny 404 错误页面:Blue Daniel

作为其作品集的一部分,Daniel Karcher 选择使用 404 错误页面进一步展示他的技能。 他选择了地铁场景,广告牌广告使用双关语和文字游戏来营造幽默感。

在他的错误消息中,您会注意到对电影“The Missing”和电视节目“Lost”的引用。 后者覆盖涂鸦,询问用户“你迷路了吗?”

由于您显然在此 404 页面上迷失了方向,因此您有机会返回主级别。 聪明的!

7. 冒险的 404 错误页面:阿联酋航空

正如文章开头提到的,一些公司结合幽默和有用信息来创建 404 错误页面,感觉更像是实际网站的一部分,而不是损坏的部分或链接。

阿联酋航空就是一个典型的例子,他们将讽刺笑话与指向他们最常访问的页面的链接结合在一起。 他们说:“抱歉,我们已经走遍全球,但似乎找不到这个页面。” 暗示由于它们无处不在,您正在寻找的页面几乎肯定不存在 - 哦!

考虑到 73.7% 的访问 404 页面的人会立即离开网站,因此通过提供指向最常访问页面的链接来让访问者留在您的网站上是一个很好的策略。

当人们没有找到他们想要的东西时,他们就会失去信任。 反过来,搜索引擎会失去信任。 可以这么说,您不希望任何人对您的业务失去信任。 找到一种方法来扭转链接断开等糟糕情况可以帮助您维护您的业务,甚至给您的网站访问者留下深刻印象。

8. 最小的 404 错误页面:CSS 技巧

对于 Web 开发或编码网站来说,出现 404 错误可能会非常尴尬。 我的意思是,他们的工作是确保这些事情终究不会发生——不是吗?

无论如何,CSS Tricks 的团队设法将一个可能令人尴尬的错误变成了一个设计精美的 404 页面。 页面中心的样式就像一张撕破的纸,后面是应该构成您要访问的页面的代码。

9.自嘲的404错误页面:Cloud Sigma

我们可以了解 Cloud Sigma 对他们的 404 错误页面所做的事情。 我们总是说,当有疑问时,只需使用狗或猫的照片来缓解潜在的不良情况。 在这种情况下,该站点提供了一张尝试使用计算机的猫(对不起,他们的初级开发人员)的图片。 来得正是时候。 你忍不住笑了!

但最重要的是,Cloud Sigma 站点错误还为您提供了一种返回其主页的清晰方法。 如果您不希望人们完全离开网站,请确保返回主页总是很容易,只需点击一下即可。

10. 非常规 404 错误页面:LimpFish

最后,Limpfish 使用了一个古怪的 404 错误页面版本,再次让每个用户的脸上都洋溢着笑容。 当然,当我第一次看到这个时我有点困惑,因为它似乎是约会广告和真正的技术相关请求的组合......我不确定哪个更明显。 但如果你仔细想想,除了断开的链接,还有谁需要好的匹配呢?

然而,考虑到我们是在互联网上运营,报纸效应增加了一点讽刺意味。 最终目标是成功——他们让我们微笑和轻笑,我们没有在登陆 404 页面后立即离开网站。

关于 404 页面的知识

通过在 404 页面添加与您的品牌标识相匹配的有趣、好玩、友好或游戏化的方面,您可以让访问者留在您的网站上,甚至进一步促进您的业务。 一个值得注意的例子是游戏化,确实需要额外花钱,但这是一项降低跳出率的明智投资。

除了我们在上面的行动中看到的有用的 404 页面和策略之外,我们还准备了一份应该做和不应该做的清单,可以帮助您将事故变成机会——尤其是因为人们总是会时不时地打错字,而你无法控制。 但是,如果他们碰巧出现在损坏的页面上,您可能会影响他们的体验。

在创建自己的有用 404 页面时,请记住以下几点:

  • 说实话。 就像我们说的,会有 404 页,有时它们甚至不是你的错。 无论如何,一定要解释发生了什么,并提供修复这种情况的方法,并帮助人们找到他们正在寻找的东西。
  • 不要错过机会。 添加一些幽默和品牌个性,这样人们就不会感到沮丧 – 或者根本不会离开。
  • 吸引用户。 如果您的预算可以支持,让他们玩游戏。 如果没有,有几种方法可以提高参与度。 添加可爱的视频、插图或动画。 尽量减轻这种情况——如果一切都失败了,可爱的动物图片和视频也可以。
  • 阻止他们离开。 每个离开的网站访问者都错失了将潜在客户转化为客户的机会。 您可以将相关链接添加到访问量最大的页面或在 404 页面上嵌入搜索功能,以便他们可以浏览您的网站。
  • 添加激励。 如果您找到他们的 404 页面,一些品牌会提供奖励。 这样,您甚至可以收集更多潜在客户。 例如,您可以提供时事通讯注册、电子书或案例研究等免费内容等。
  • 没有广告。 嗯,不是传统意义上的。 如果网站上有错误,并且人们登陆它,不要试图过度销售或让他们认为您可能是故意离开 404 页面。
  • 快速加载。 如果人们确实登陆了一个损坏的页面,您不希望他们永远等待才能找到答案。 建议您网站上的所有其他页面也具有良好的加载速度。 跳出率随着等待时间每增加一秒而增加。
  • 不要使用复杂的技术术语。 目标是尽量让用户留在您的网站上,而不是用复杂的术语和不必要的术语将他们赶得更远。
  • 不要忘记监控损坏的链接并尽快修复它们。

找不到页面...但结论是

每个站点的 404 错误页面设计都会将事故转化为进一步建立品牌忠诚度的机会。 通过创造力、出色的设计和一些敏锐的智慧,您的网站设计也不必担心错误——它只是公司产品的延伸。

我们的最后一个提示:为您全力以赴 404 页面,因为在登陆 404 页面后离开的人中有 73% 代表了 74% 的潜在客户流失。 这些都是你的潜在客户,而自定义 404 页面可能会让他们留下来并浏览更多。 这与您是否应该拥有自定义 404 页面无关。 问题是,你能负担得起拥有吗?

想要您自己的自定义 404 错误页面以确保更好的用户体验? DesignRush 列出了一些顶级数字代理商,他们可以为您的企业创建品牌网页和成熟的网站。

想要更多鼓舞人心的设计吗? 注册我们的通讯!