Fail Pet 2.0:错误页面的进化

标签: 业界趋势/Trend 观点 | 发表时间:2011-11-05 07:00 | 作者:积木 TT Jobs
出处:http://www.ifanr.com

fail_whale

随着互联网的发展,现代计算机界面越来越强调设计感和人性化。网页设计也是如此,即使是一个简单的”错误页面“,也经历了有趣的进化过程。

早期的文字信息

早期的网页 404 错误只是一个简单的错误信息。

apache404error4

随后,浏览器开始提供更加“用户友好”的信息。

caminofriendly404error5

这类错误信息仍然缺乏品牌标识。从 2001 年开始,网站开始提供定制化的错误页面,以 Yahoo 为例。错误页面包含了网站 Logo,搜索框和“帮助”链接。

404erroryahoo6

Fail Pet 1.0

从那时开始,有些网站的 404 错误页面开始展现很 Geek 的幽默,以提升自己的网站品牌。比如 Blippy 的错误页面是一个手绘的彩虹。

404blippy7

2008 年,随着 Twitter “Fail Whale”的到来,使用吉祥物的”错误页面”开始流行起来。Twitter 最初的503错误(无法提供服务) 页面是一个 LOLcat。

503lolcat8

Twitter 的创始人之一 Biz Stone 认为这个页面太不严肃了。他在 iStockPhoto 发现了设计师 Yiying 的一副插图“Lifting a Dreamer”,这个插图很好的暗示了团队在试图克服困难。于是,Twitter 的错误页面变成了“Fail Whale”。

图中出现的小鸟与 Twitter 的 Logo 有些相似,但这纯粹是巧合。2008 年 5 月,Nick Quranto 将这个图片命名为”Fail Whale“。这条可爱的鲸鱼成为了一种文化现象,开始在 Twitter 用户中流行。

另一个采用吉祥物的网站是 Tumblr,这是漫画网站 The Oatmeal 提出的建议。Oatmeal 为 Tumblr  设计了 503 错误页面:

tumbeasts

使用吉祥物的其它网站还有 Github,它的 404/500 错误页面上有一个  Octocat。

Fail Pet 2.0

这类错误页面的确让人印象深刻,但是负面影响也存在。在重新设计 Firefox 3.1 的崩溃报告页面时,Mozilla 博客对于是否使用 Foxkeh (Firefox 官方吉祥物)有争论。主设计师 Alex Faaborg 认为如果错误页面过于引人注意,反而会使人认为产品不可靠,并将这种印象和吉祥物联系起来。Mozilla 最终决定使用文字界面。

目前,一些大公司的错误界面放弃了吉祥物,采用更加低调的”表情符号“(emoticon)。不妨称为 Fail Pet 2.0。

 

iclouderrormascot18

iCloud

googlechromeerrormascot19

Chrome

或者使用机器人,相比吉祥物,机器人更容易和技术错误联系起来。

404pageGoogle21

Google+

503twitterpage22

Twitter

使用 Fail Pets 的优势和劣势:

优势

Fail Pets 体现了一个服务/一个品牌承认用户对失败的体验是一个感性和需要互动的时刻

Fail Pets 使得错误的发生得以快速辨识,图画比文字更易引起注意

Fail Pets 可能会获得媒体关注

劣势

Fail Pets 越出名,越容易使人将服务和失败联系起来

Fail Pets 的可见性和辨识性可能超过品牌的吉祥物或 Logo

Fail Pets 可能会惹恼用户,因为它们可能看起来轻佻或过于可爱;由于错误更易记忆,人们会产生”服务总是出问题“的印象。

Fail Pets 可能会有特别的文化问题。

科技宠物可能为人喜爱,也可能遭人恼恨,微软的 Office 助手 Clippy 就是个例子。在 informationweek 的一篇文章中,Clippy 在“最让人讨厌的十大科技吉祥物”中名列首位(Fail Wale 也有幸进入排名)。

slide1_full

本文素材来自 UXmag

The bulk of all patents are crap. Spending time reading them is stupid. It’s up to the patent owner to do so, and to enforce them (by Linus Torvalds)

© 积木 for 爱范儿 · Beats of Bits | 原文 · 7 热评 · 新浪微博 · 订阅全文 · Google+ · #ifanrlive · 加入爱范社区!


最强 Twitter 范软 Gravity 50 元(7折)。请点击查看 ,enjoy~

相关 [fail pet 错误] 推荐:

Fail Pet 2.0:错误页面的进化

- TT Jobs - 爱范儿 · Beats of Bits
随着互联网的发展,现代计算机界面越来越强调设计感和人性化. 网页设计也是如此,即使是一个简单的”错误页面“,也经历了有趣的进化过程. 早期的网页 404 错误只是一个简单的错误信息. 随后,浏览器开始提供更加“用户友好”的信息. 这类错误信息仍然缺乏品牌标识. 从 2001 年开始,网站开始提供定制化的错误页面,以 Yahoo 为例.

首页设计的可用性和PET

- BEAsThAnG - 所有文章 - UCD大社区
网站的首页是一个让人头疼的东西. 有时它看起来很简单:首页就是网站内容的整合,一个产品经理随便从网站里拿点东西出来,就能堆出一个看上去靠谱的首页. 也正因此,它往往非常麻烦:很多人都可以发表自己的见解,而这时交互设计师的一些手段(比如流程图、概念图等),在面对首页设计时也难派上用场,以致最终陷入到无尽的争执中.

痴線中國之淘寶Fail

- Metaphox - ::littleoslo::..::Blog::
簡述:高登網友與友儕製訂球衣,因預算有限而於淘寶訂購. 網友先將設計式樣以url方式傳給賣家,而最後是,看圖解釋:. 故事教訓是小心淘寶中伏之餘,也顯出GFW之惡與害!.

Oracle错误代码

- - 数据库 - ITeye博客
ORA-00001: 违反唯一约束条件 (.). ORA-00017: 请求会话以设置跟踪事件. ORA-00018: 超出最大会话数. ORA-00019: 超出最大会话许可数. ORA-00020: 超出最大进程数 (). ORA-00021: 会话附属于其它某些进程;无法转换会话. ORA-00022: 无效的会话 ID;访问被拒绝.

10大经典错误

- beralee - 酷壳 - CoolShell.cn
下面是10、11个经典的错误,升序排名. 10、DOS的Abort,Retry, Fail. 85年以后出生的人可能不知道DOS是什么了,只有那老家伙还知道这是什么. 我还记得当时的我对于Abort和Fail这两个选择还是比较清楚的,不过,今天完全忘记了Abort和Fail的差别是什么. 这个出是DOS下的经常出现,也相当的经典,以至于在Wikepedia上都有专门的业面 Abort, Retry, Fail?.

Google Realtime出现404错误

- lube - Solidot
hidenosense 写道 "我的Google搜索页面左边工具栏里的realtime没了. 直接打开http://www.google.com/realtime返回404.

StackOverflow的404错误页

- yboren - 酷壳 - CoolShell.cn
不知道大家有没有注意到StakeOverflow的404错误页面. 这个是一个很有意思的图片,不知道你看懂了吗. 看上去像Python,又像 Ruby,还像 Perl,当然也有 C的影子,还有Brainfuck. 是的,这是一个杂交程序,杂交了Python,Ruby,Perl,C,还有Brainfuck(注意其中的#号),所有的语句都是输出“404”字符串.

预防错误的设计

- - Juven Xu
上周参加了一个 Michael Feathers 的 workshop,整个 workshop 内容非常多,其中大部分是围绕他那本著名的 《修改代码的艺术》所阐述,不过除此之外 Michael 还以  Beyond Error Handling, Using Design to Prevent Errors 为主题,讲了不少如何优雅地处理错误的做法和思路.

Spring MVC的常见错误

- - Java译站
10年前我开始自己的职业生涯的时候,Struts还是市场上的主流标准. 然而多年过后,我发现Spring MVC已经越来越流行了. 对我而言这并不意外,因为它能和Spring容器无缝集成,同时它还提供了灵活性及扩展性. 从我迄今为止对Spring的经验来看,我发现有不少人在配置Spring的时候经常会犯一些常见的错误.

locale错误导致Java中文乱码错误的总结

- - Java - 编程语言 - ITeye博客
线上执行MapReduce任务计算时,经过排查发现了某些服务器计算的数据出现中文乱码问题,但是服务器的配置是完全一致的. 由于我们使用的key可能包含中文,中文乱码问题体现在每次合并map记录的时候计算数据的随机性,每次执行的结果都不一样(由于Map任务执分配的随机性). (注:此文章大部分都参考了同事查找到的问题解决方法.