数极客首页

用户体验之网页板块设计

用户体验(User Experience,简称UE)是用户在运用
产品过程中树立
起来的一种纯客观
感受。在基于Web的产品设计中,UE是一个相对较新的概念。Donald Norman博士提出了“用户体验”一词,他是一个认知科学的研讨
人员,初次
提出了在互联网范畴
以用户为中心设计的重要性(用户的需求决议
产品怎样
设计)。

用户体验之网页板块设计

Donald Norman

用户体验很重要,最大的理由是:它对你的用户很重要。

◆ 最最少
是要让产品有用,这个有用是指用户的需求。(尊重用户价值+满足用户需求)

◆ 第二
是能用,一切
的流程都走得通,没有致命的BUG。(尊重用户价值+满足用户需求)

◆ 然后是易用,操作起来很便利,这十分

关键。(注重用户体验)

◆ 设计的下一个方向就是友好,关注用户的情感需求。(注重用户体验+关注创新)

以上四者都做好了,就融会贯串

上升到品牌。(质量
:品味+质量→品牌)

用户体验之网页板块设计

用户的需求决议
产品怎样
设计

人的视觉通常不是先看中间,而是依据

母语的读写习气
,经过大脑的指令,依照

:从上到下,从左到右的道路
中止

查看,下图为用户阅读
网站时视野
留意
力“F现象”研讨
:注:绿色、黄色、红色关注度以此升高,这阐明

人喜欢第一眼看左上角的内容,这通知
我们,重点要在左边偏上的部位呈现

用户体验之网页板块设计

从左上角的至右下角优先比重逐级递加

用户体验之网页板块设计

[案例]淘宝网商品搜索列表页

谷歌的搜索结果呈现
“金三角”现象:

用户体验之网页板块设计

谷歌搜索列表页

关于
google搜索结果的“金三角”现象(也有很多前端设计师形象地描画

为搜索结果的“F现象”)。

什么是google搜索结果的“金三角”现象?

这项关于用户关于
搜索结果留意
力的研讨
由搜索引擎营销公司Enquiro、Did-it以及特地
研讨
人们眼睛运动行为的公司Eyetools分别

完成,经过
对用户察看

google搜索结果页面时眼睛的运动来肯定
对搜索结果内容的关注水平

该调查结论是,位于google自然搜索结果“F”顶部的信息,取得

了被调查者100%的留意
(该研讨
总共有50位被调查者),而位于最下面的信息则只取得

了20%的留意
力。以下是自然搜索结果排名前10位的信息遭到
被调查者关注的比例:

·第1位 – 100%

·第2位 – 100%

·第3位 – 100%

·第4位 – 85%

·第5位 – 60%

·第6位 – 50%

·第7位 – 50%

·第8位 – 30%

·第9位 – 30%

·第10位 – 20%

关于
google搜索结果右侧的资助

商链接内容(即关键词广告),其受关注水平

大约只需

自然搜索结果的一半,即便

位于第一位也只取得

了50%的留意
力。下面是被调查者对全部8个关键词广告信息的关注状况

·关键词广告第1位 – 50%

·关键词广告第2位 – 40%

·关键词广告第3位 – 30%

·关键词广告第4位 – 20%

·关键词广告第5位 – 10%

·关键词广告第6位 – 10%

·关键词广告第7位 – 10%

·关键词广告第8位 – 10%

关于google搜索结果金三角调查结论的剖析

--Search Engine Watch文章“A New F-Word for Google Search Results”对上述调查结果的剖析

推论可总结为三点:

(1)自然搜索结果的重要性远高于关键词广告(至少对google是这样,为了使客户的利益最大化,谷歌随后在搜索列表页的最上面及最下面参与

了3条付费广告);

(2)用户对自然搜索结果的关注水平

更高,除非搜索引擎关键词广告排名在最上端,否则很难取得

用户的关注;

(3)搜索引擎优化很重要,营销人员假定

忽视

这一事实,单纯依托
资助

商链接广告的搜索引擎营销方式很难取得

最好的效果。

调查结果发现,用户关于
搜索结果页面的关注的范围呈现英文字母“F”的外形
,也能够

描画

为“金三角”现象。这种现象证明
了一个简单的问题:搜索结果中排名靠前的内容更容易遭到
用户的关注和点击。这个规律关于
google搜索结果右侧的关键词广告同样是适用的,只是对两种内容的点击率有所不同。

这正好和谋思副总裁张少华先生提到的“首屏理论”分歧

网页板块规划——两栏设计研讨

用户体验之网页板块设计

关于
两栏设计,Jakbo Nielsen也曾对232位用户阅读
几千个页面的过程中的眼动状况

中止

追踪,发现用户在不同站点上的阅读
行为有显然
的分歧
性。这种阅读
行为有三个特征:
1.用户第一
会在内容区的上部中止

横向阅读

2.用户视野
下移一段距离

后在小范围内第三
横向阅读

3.最终
用户会在内容区的左侧做快速的纵向阅读

显然,用户的阅读
行为并非精确

的包含这个三个过程,有时分
,在这三个过程之后,还会在底部有横向阅读
的热点,使得整个阅读
热区图看上去更像E而不是F。也有时分
,用户阅读
时只反响
了上述的行为1和行为3,使得阅读
热区图像一个倒写的L。但从一切
数据整体上来看,用户的屏幕阅读
热区图还是较分歧
地反响
出了F图像。

网页板块规划——三栏设计研讨

经过剖析

上面的纯理论性研讨
,我们再来看一个有趣的用户研讨
:中、美、韩用户阅读
网页习气

中韩两国研讨
者中止

了一个关于认知作风
(cognitive style)与网页感知(webpage perception)的跨文化研讨
,找来中美韩三国用户(共27人)中止

了眼动测试,研讨
结果颇有意义
。实验是让用户阅读
(不做任何点击)以下这个仿照雅虎规划
的测试页面(依据

用户的国籍运用
相应言语
版本的页面),眼动仪将做实时记载
,测试过程为30秒。

用户体验之网页板块设计

图1:测试页面

研讨
者将页面分为9个兴味
区域(AOI, AREA OF INTERESTS)。

用户体验之网页板块设计

图2:兴味
区域(AOI)

从下图“前25秒用户访问的AOI总和”能够

看出,韩国用户的眼睛不时

在整个页面四处
跳动。比起其他两个组别,他们更多地在各个区域中跳来跳去。在前15秒,中美两国用户的眼动比较

相似

:在前10秒,中国用户的AOI活动稍微

高于美国用户,但很快就显然
抢先
了。15秒之后,美国用户的AOI的增长率低于中国用户,阐明

美国人的眼睛活动开端
稳定,并开端
将留意
力集中在页面的某一处。

用户体验之网页板块设计

下图是“每AOI留意
点时长总和”。留意
点停留时长反映出该区域对用户的重要性。页头中部的区域2(见图2)是特别
重要的,它吸收
了三国用户最耐久

的留意
。总体来说,美国用户将留意
力放在区域1、2、5的时间显然
高于其他两组。中国用户则在区域2、5、6、8、9集中了更久的留意
力。

用户体验之网页板块设计

再来看看眼动结果(由上至下依次为中、美、韩)。绿色的点代表眼睛活动的开端
,红色代表终了

用户体验之网页板块设计
用户体验之网页板块设计

中国用户眼动图

用户体验之网页板块设计
用户体验之网页板块设计

美国用户眼动图

用户体验之网页板块设计
用户体验之网页板块设计

韩国用户眼动图

依据

眼动结果,研讨
者从两个方面做出了剖析

备注:

◆ Sequential Reading: 眼睛随着区域块依次阅读

◆ Circular Scan: 眼睛扫描途径
接近于顺时针画圆。
◆ Back and Forth Scan: 眼睛在内容之间往复
扫描,某个区域在短时间内被重复

注视


◆ Only Scan: 用户只是扫描页面,并没有将焦点放在某个区域,也就是眼动很频密。
◆ Focus on Title: 用户的留意
力相对更多地放在标题上。
◆ Navigation Reading: 用户的留意
力更多放在导航条上,会花一定时间阅读
导航内容(导航的来源
也在美国) 。

由此可见,中韩用户更倾向以扫描、打圈的方式阅读网页。同时,中韩用户更喜欢往复
于各个内容区域,阐明

他们阅读时比较

随意。相反地,美国用户比较

关注细节,也很少这看一眼那看一眼。

下图是从另一个角度来阐释眼动结果。

用户体验之网页板块设计

◆ “0” Shape: 眼动途径
相似

于画0。
◆ “5” Shape: 眼动途径
相似

于画5 (也就是,眼睛以此访问: 2, 5, 6, 9, 8, 7区域)。
◆ “N” Shape: 眼睛看完一列再看另一列。
◆ “Z” Shape: 眼睛依次扫过各行。
◆ “X” Shape: 眼睛以对角线的方式扫描,随意腾跃
。可见,多数中国人和韩国人都采用0式阅读
,而美国人更多是采用5式阅读
。也就是说,中韩用户会整体去看一个页面,而多数美国人趋向于从中心向外围阅读

最终
,研讨
者提出了一些设计倡议

。关于
采用整体思想
方式(holistic thinkers)的中韩用户来说,他们更倾向于扫描页面整体,而且以一种非线性的阅读
方式,因而

内容布置
能够

较为灵活

。关于
采用剖析

性思想
方式(analytic thinkers)的美国用户来说,页面规划
要十分

明晰
,每个信息区域都要有区别于其他区域的特性
,导航部分

也特别
重要。

视觉焦点之几何圆的运用

由于每个人受教育水平

、学问
面、习气
、及生活方式、对颜色
的喜好

等要素
的影响,不同的人对同样的设计会有不同的了解

和判别
。例如“我不喜欢这个网页的设计”、“花花绿绿不喜欢”、“是不是用黄色比较

好”、“喜庆的节日当然用红色啦”、“还是采用苹果的灰色比较

好”、“左边栏再宽出10像素更好”……这些在工作中轰炸你头脑的“倡议

”每天都会发作

我们不可能满足每一个人关于
颜色
、页面设计的喜好

,但是我们能够

从另一个交互设计的角度来满足绝大多数的需求,这就是——视觉焦点。

那么什么是视觉焦点呢?

视觉焦点就是在有限的视野
范围内快速捕捉你自己

以为
吸收
你的区域。反映在互联网产品设计中,就是指设计的页面上最吸收
人留意
的中央
,视野
上集中交汇的中央
,这个位置就叫焦点。在日常生活中我们运用照相机对准人的脸部,那也是在获取一个焦点。在网页设计中,引导用户集中在你想让他关注的区域,那样会让你的设计有重心和亮点。

用户体验之网页板块设计

视觉焦点的处置
方式

人们用视觉获取环境中的信息,对你留意
的周围

都会是含糊

的,你视野
集中的中心点是最明晰
的。

第一张,视觉上呈现这样的状态是:视野
上没有集中,整体含糊

,是成方形的视觉框架。

第二张和第三张,图中的两朵花在图形中是最漂亮的亮点,漂亮的东西会引人留意
,你会留意
到上一朵或则下一朵,留意
任何一朵花的时分
,眼球集中点会以圆的外形
向外逐步

含糊

,最中心点就是焦点。

圆形作为设计中的元素的时分
,自然愈加
的顺应
视觉上的感知。

用户体验之网页板块设计

视觉强弱

美女其实能够

独立成为一个视觉焦点,但当我们给美女加了圆形边框后,视觉焦点就转移到圆形边框包括到的美女上,最终
将圆形填充,视觉焦点就转移到填充色的圆形的美女上。

用户体验之网页板块设计

点对比

图片

图1 整体画面平平,人物排列没有层次,视觉上给人觉得
很散。

图2经过
添加圆形背景框,会让你想表达的图形第一
进入用户眼球。

图3不只
添加圆形背景框,再辨别

人物大小,主次分明

,焦点突出,画面生动

平面

用户体验之网页板块设计

几何的对比

上图中我们能够

看到,方形过度到圆形的变化,圆形是由极端
细小的边角组成,在变化当中图形变得越来越有乐趣,比较

下来圆形在几何图形中具有平滑流利
的边缘,圆形更让人觉得
轻松,愉悦。设计需求
增加乐趣的时分
,我们能够

多运用流利
线条的图形来让页面生动

起来。

用户体验之网页板块设计

实例效果中止

比较

(圆型设计)

在这个页面上圆形挑起了大梁,支撑整个页面,人物笑脸图片组合的圆形包围着瓶子,映射了这个饮料带给我们的快乐。圆形不只
增强

了焦点,愈加
强了页面的层次感,让页面不会单薄

、无力度。

用户体验之网页板块设计

实例效果中止

比较

(方型设计)

固然
同样用加框的方式
来集中物体焦点,同圆形边框相比整体画面呆板,生硬

,缺失了生动

的觉得

用户体验之网页板块设计

圆形在广告位中的设计

圆形对价钱
的标注,让用户对这诱惑的价钱
愈加
的感兴味
,很好的营造了商品的氛围

圆形元素和其它几何图形比较

圆形具有世故
的特性
,让人觉得
轻松,愉悦,合理的运用会进步
页面的层次,让焦点愈加
突出,增强

视觉感的同时也能够

营造生动

的氛围

。我们都在不时
尝试怎样
让页面变的美观而生动,发明

富有生机

的页面,让网站给人的视觉感受富有好感,把握好设计中的焦点,使页面信息有效传达的前提下,运用有趣的圆形来设计页面是设计中很有效的办法

产品经理和交互设计师在页面设计中的应用

罗里罗嗦谈了这么多,那么我们产品经理及交互设计师在原型图中怎样
来设计更好满足用户体验呢?

在做新产品原型时,需求
思索
设计作风
问题:契合
目的
客户的审美习气
,并具有一定的引导性。

网站在设计之前,必需
明白
目的
客户群体,并针对目的
客户的审美喜好

,中止

剖析

,从而肯定
网站的总体设计作风

在页面规划
方面要重点突出,主次分明

,图文并茂。与你担任
产品线目的
相分别

,将目的
客户最感兴味
的,最重要的信息放置在焦点位置。你在和你的下一工序(有的公司是美工、有的公司是用户体验师、有的是交互设计师)时,需求
将你的执导思想通知
给他们,不然他们不了解

的话,会让你的产品倾向

十分

大,致使

在产品开发之处你对产品的把握就曾经
失去了方向。

1.对比

图像,文字更具吸收

在阅读
一个网站的时分
,能够

直接吸收
用户眼光

的并不是图像。调查发现:大多数经过
偶尔

点击进入网站的用户,他们是来寻觅的是信息而不是图像。因而

,保证网站设计凸现出最重要的信息板块,这才是设计的首要准绳

2.依据

视觉锁定,一栏格式比多栏格式具有
更好的表现力

大多数状况

下,简约
更具力气
。多栏内容容易被用户忽视

,我们需求
消弭
这些干扰,在砍掉板块影响不大的状况

下,尽量去掉这些冗余信息。例如资讯搜索列表页。

3.简短的段落相关于
长段落来说有更好的表现力

网页信息是为大多数强调快速阅读
的互联网用户提供的。除非上下文的衔接央求

,坚持
信息由简短的段落和句式组成。例如网站的产品引见

4.人们大都只阅读
网页的小部分

内容

假定

在用户阅读
的时分
提供信息使他们尽快锁定目的
,就能够

把这一点展开

成为你的优势。突出某些部分

使网页信息容易找到和阅读。

5.用户阅读
网页时,第一
察看

网页的左上部和上层部分

,之后再往下阅读,阅读
右边。

以前研讨
标明
:读者常忽视

大部分

的横幅广告,视野
常常
只停留几分之一秒。因而

需创新广告位,合理配置网站广告方式

读者在阅读文章的时分
并不是逐字逐句,而会习气
腾跃
审视
,因而

,关键信息高亮显现
出来更易于读者把握重要信息。

标题的设置要精炼,且要传达足够的信息量。这是读者决议
能否
阅读这篇文章的关键。另还可增加副标题作为补充,假定

副标题仍不够吸收
,基本

上他们就不会感兴味
去点击了,也就会呈现
了产品经理最不希望看到的信息——跳出率(Bounce Rate)。

5.网站结构

及页面设计微应用

(1)页面导航方面:导航条明晰
明了、突出,层级分明

(2)图片展示

方面:比例调和

、不变形,图片明晰
。图片排列既不过于密集,也不会过于疏远。

(3)图标运用
方面:简约
、明了、易懂、精确

,与页面整体作风
统一。

(4)广告位设计方面:避免

干扰视野
,广告图片契合
整体作风
,避免

喧宾夺主。

(5)按钮设置方面:关于
交互性的按钮必需
明晰
突出,以确保用户能够

分明

地点击。

(6)站内搜索方面:搜索提交后,显现
明晰
列表,并对该搜索结果中的相关字符以不同颜色加以辨别

(7)栏目命名方面:与栏目内容精确

相关,简约
明晰
,不宜过于深奥。

其实对一个网站做一次用户体验剖析

是很细很累的活,但是意义却很大,特别
对年销售额上千万级的电子商务网站而言,用户体验做好了,转化率能增加千分之一那就能促进数百上千万的销售额,必需
惹起
足够注重

写在结尾

事实上,互联网用户阅读
网页的习气
和顾客阅读
商店中物品的习气
没有多大差别

。用户翻开
一个新的页面,审视
一些文字,并点击第一个惹起
他兴味
的链接。在这过程中,页面上有大量的区域用户致使

完好

没有看过。大部分

用户在页面上寻觅
他感兴味
且可点击的内容,一旦发现目的
,点击行为就会发作
,但假定

页面不契合
希冀
,后退或关闭按钮也将马上被点击。

1.大部分

时分
用户并非在阅读屏幕上的内容,而是在审视

用户习气
审视
和快速寻觅
页面上一些能够

引导他了解

内容的关键点。

2.不要考验用户的耐烦

当一个页面不能满足用户的希冀
时,分开
就在所难免。希望经过
添加相关内容来丰厚
页面和留住用户常常
效果不佳致使

适得其反。一屏页面上承载的信息越多,认知的担负
就会越重,就需求
破费

更多的时间去处置
信息,假定

这些信息中还有些不是用户希冀
的,那就还要花额外的肉体

将这些多于信息从留意
力中剥离。Jakbo Nielsen的研讨
结论也标明
:一个页面上的认识担负
越重,导航和阅读
就会越艰难

,用户分开
并寻觅
其他替代品的可能性就越大。

3. 用户并不做最佳选择

用户并不是在搜索
找到最佳选项的最快途径,他们也并非用线性的方式来阅读屏幕上的内容(有次第
地从一个模块到另一个模块)。当用户找到第一个合理的选项,或者一旦找到了可能的目的
内容,“立刻

点击”或“开端
阅读”的可能性会十分

大。其实,用户是在寻觅
能让他们觉得有用或者合适

的内容,而非寻觅
最佳的选择,理由也很直观:我们不是用户的孩子,他不会关怀

我们的一切,他只是希望获取他想要的信息,然后走人。

作者:Reakin QQ:155079191 微博:http://www.weibo.com/reakin

1.《视觉焦点-剖析

网页设计中的几何圆》  作者:网易用户体验中心

2.《中日韩用户阅读
网页习气
》  作者:网络

3.《F-Shaped Paern For Reading Web Content》 作者:Jakbo Nielsen

源地址:http://www.ixuqiu.com/blog/266

给大家举荐

我国新一代大数据用户行为剖析

与数据智能平台:数极客(https://www.shujike.com),是支持无埋点、前端埋点、后端埋点、API导入四种混合数据采集方式,整合剖析

用户行为数据和业务数据,能够

自动监测网站、APP、小程序等多种渠道推行
效果剖析

,是增长黑客们必备的互联网数据剖析

软件。数极客支持实时多维剖析

、漏斗剖析

、留存剖析

、途径
剖析

等十大数据剖析

办法

以及APP数据剖析

网站统计网站剖析

小程序数据统计用户画像等应用场景,业内首创了六种提升转化率的数据剖析

模型,是用户行为剖析

范畴
首款应用定量剖析

与定性剖析

办法

数据剖析

产品

发表评论

评论已关闭。

相关文章