跳至主要内容

开心网最彻底的"F"的页面设计

006年4月,美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森(Jakob Nielsen)发表了一项《眼球轨迹的研究》报告(原文:F-Shaped Pattern For Reading Web Content)。 见下图:


报告中提出,大多数情况下浏览者都不由自主的以"F"形状的模式阅读网页,这种基本恒定的阅读习惯决定了网页呈现F形的关注热度。分为最热(红色)、较热(黄色)、不热(蓝色)和基本不关注(灰色)4种。

再看开心网的页面,用3条导航在每个页面都构建了一个大"F"。


顶部导航是与"交流"相关的频道,包括好友列表、群组和消息中心,这些都是要与其他用户发生关系的产品。 左侧导航是用户个人操作的产品,包括日记、照片,及其他新增的组件。在频道的页面内,大部分又都有一个相同样式的页卡标签,通常为"我的XX"和"好友的XX"。

这三条导航构成一个巨大的"F"型框架,网站不同页面保持结构一致,使得用户在网站使用过程中的学习成本最低,一次经验,全站通用。同时让用户更愿意尝试开心网上其他产品,因为用户预期中其他产品的使用方法相同,不需要一个重新的学习过程,尝试的成本较低。

而不同产品页面结构各异的网站,用户使用任何一个产品和频道都是一次全新的学习和摸索过程,甚至连找到一个返回链接,都是一次大伤脑筋的走迷宫,这会让用户产生巨大的挫折感,更不愿意去尝试该网站的其他产品,因为用户不知道下一个产品又将是怎样一次令人头痛的探索历程。

从上图中我们可以看到,页面中大部分区域用户都不会去关注,所以在单个页面上,开心网的每个页面内可以操作和点击的链接都非常少,且集中大"F"型热点区域。这向用户传达的信息是:在这里,你只需了解极少的操作就可以使用这个网站。

而那些内容丰富,堆满链接和按钮的网站页面中,也许整个页面只有一个链接对用户是有价值的。但是用户来到这里,既要有足够的智慧和眼力排除所有干扰信息去找到那个唯一有价值的链接,同时还要面对如果我不点击其他的链接是否会错过某些重要信息的困扰和焦虑。

页面中哪些是无效信息,网站工作人员最清楚,但是他们却把排除干扰信息这种复杂的工作交给用户,将用户逼入一种烦躁和焦虑的困境中。这种痛苦的使用体验只会将用户全部赶走。

------------------

评论

此博客中的热门博文

6岁小朋友在PSP上看到不该看的东西

美国佛州的一位母亲Thamtha Tovar为自己六岁的儿子在Manatee的沃尔玛购买了一个礼物,一台全新的PSP, 然而当这位六岁的小朋友打开此PSP的时候,映入眼帘的却是一位"一丝不挂"的美女,惊恐之下,小朋友向自己的母亲哭诉了自己的遭遇。 伟 大的母亲听说此事勃然大怒,愤然找到沃尔玛的负责人要求对此事件作出合理解释,为何刚购买的PSP里的记忆卡会有"美女"在里面。沃尔玛的工作人员如此说 道:"呃,你把机器带来过,我们把卡帮你取出来,然后我们会给您儿子免费提供一个新的游戏。"这位母亲说:"我很乐意,但是恐怕你们没有明白我说的话。" 沃尔玛的一位发言人称他们正在调查为何发生此事,寻求解决此问题,而Tovar女士则要求更换一台全新的PSP并要求沃尔玛为此事道歉。 ------------------ 洛阳生活信息点评网:http://luoyanglife.com/ 洛阳生活信息,我爱打折论坛:http://bbs.luoyanglife.com/ 河南招生考试网:http://www.edu-ha.com/  

照着做,你的人生一定很顺利!

  01.犯了错误就该诚实地认错——狡辩、诿过只会害了自己。   02. 朋友 之间要保持距离——这样的 友谊 才能长久。     03.钱追人,人追健康——有了健康,还怕挣不到钱么?     04.别轻易转行——转行的风险很高,最好不要轻率为之。     05.适度地抬高身价——在就业市场中,人也是一种商品。     06.把敬业变成 习惯 ——从长期看是为了自己。     07.运用累积法壮大资产——不求快,不求多,不中断。     08.忍一时,争千秋形势比人强时,必须忍。     09.与其你死我活,不如你活我也活——这就是双赢,是良性竞争。     10.以"播种"的 心态 经营人际关系——种子播得越早越坚韧。     11.做事切勿率性而为——率性而为只会害了自己。     12.遇到魔鬼型的主管时——接受他的磨练可让你的 性格 越来越坚韧。     13.不要当众和主管吵架——那会让你无路可走,只有走人。     14.向不同行业的人学习新知识——记住,要用请教的 态度 。     15.所有的困难都是好事——这是老天爷在磨练你,目的是把重任交给你。     16.用吃亏就是占便宜的心态 做人 做事——那样你就可以迅速长大。     17.不要在失意者面前谈论你的得意——那样 伤害 你的人际关系。     18.不要小看守时这件事——守时是对别人的尊重。     19.用 时间 来看人——时间是检验大师。     20.用打听来看人——把获得的信息汇总,就可以了解那个人。     21.建立一个朋友档案——以免人到用时方恨少。     22.扩大交友圈——主动出击,不要等别人上门找你。     23.保持交友的弹性——敌人也可以变成朋友。     24.要交 喜欢 "修理"你的朋友——这种朋友是你的 人生 导师。   25.毛遂自荐,好处多多——让别人看到你,知道你的存在,知道你的能力。     26.小心突然升温的 友情 ——对待这种友情的正确态度是:不推不迎,礼尚往来。     27.做老二,不做老大——老大没当好,容易变成老三老四。     28.做人要中规中矩——目的是赢得他人的尊重和信赖。   ...

设计良好网页的4项原则

我最喜欢的设计书籍之一就是《Robin Williams Design Workshop》.它深入实际的设计理论,并且包含许多极棒的设计实例。其中一个值得关注的地方就是4项主要的设计原则,它们已经在设计中为我所用。这 4项原则就是:反差, 重复, 排列, 和分类。 本文将讨论这4项与web设计相关的原则。只要在脑海中牢牢记住了这4项原则,你就一定可以设计出更加整洁漂亮的网页。 1.反差效果 好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点,注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。 图片反差 当需要在很多小元素后面展示一个大尺寸的插图时,这种方法很有效。嗯,我的意思就是,比如: The Invoice Machine 这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单色又让很少的蓝色应用有了更好的效果。 Instabox 当你眼睛看到这个页面的时候,首先你会注意到什么?最有可能的就是盒子上面的那个星星了。跟 The Invoice Machine 一样,它们都是通过用一张大图片和很少的颜色来制造一个视觉焦点。 颜色反差 恰到好处地使用少量颜色,是网页中另一种制造视觉反差的有效方法。可以在网页的头部和文本拷贝中使用不同的颜色,也可以在一张图片或插图的颜色里面应用。 Fatburgr 这个网站是极出色的一个所有设计原则的应用实例。关于颜色反差我们来看看它大大的黄色头部和小小的淡灰文字。排列、图片反差、重复和分类这几个原则做得都很彻底。 I Love Typography 一个用来展示排版的网站如果在它自己的页首就为我们展示了一个极好的排版效果,那让人觉得多惊奇啊!我喜欢他们所用的字体,也喜欢他们良好的青色和深灰色搭配。 字体反差 如果你想通过字体来产生反差效果,就应该避免使用2个很相像的字体外观和大小。很相像的字体会造成混淆,并让设计变得模糊。不过把字体大小弄得很 不一样就会非常...