一点通 | 巧用设计心理学提升网站用户体验
UI设计
Roger
7人收藏 2733次学习

一点通 | 巧用设计心理学提升网站用户体验

设计网站最重要的当然是达成网站目标,而易用性好坏也大大影响网站目标的达标率!1ke将透过「设计高易用性网站的8个实用小技巧」介绍网站制作的易用性小技巧,协助读者理解高易用性网站的最基本原则。

  1. 吸引人的第一视屏区,留住使用者
  2. 「接近律」与「封闭律」让用户快速理解页面元素
  3. 行动按键上的用字遣词大大影响页面转换率
  4. 可以点的东西就要「看起来可以点」
  5. 重要信息主动展开在页面上,不要随易使用页签隐藏内容
  6. 页面底部与Footer比你想象的重要
  7. 网页文案这样写,沟通更容易
  8. 如何掌控用户在网站上的视线

重点一:吸引人的第一视屏区,留住使用者

第一视屏区是进入网站后的第一印象,许多网站的跳离率过高,与第一视频区的设计有很大的关系!设计第一视频区的基本要求就是「吸引使用者留在网站,继续浏览」,其中四个重点为:

  1. 仅保留精华信息,以节省高度;
  2. 设置页面标题,协助使用者快速理解页面内容;
  3. 让使用者理解页面下方还有内容;
  4. 运用图片增加画面吸引力。

以Amazon网站首页为例,无论以1024 x 768或1280 x 800等分辨率浏览网站,第一视频区中满足了上述四个元素,放置了最重要的信息、图片,并让用户感觉网页下方还有内容,增加往下浏览的意愿。

Amazon首页第一视屏区

重点二:「接近律」与「封闭律」让用户快速理解页面元素

(1) 接近律 (proximity)

简单的说就是运用人类视觉会将邻近的东西分成同一组的特性,所以在网站上如果想要将一群元素让用户视为同一群体,可以增加和其他元素之间的空间,并将同元素之间的距离拉近。

(2) 封闭律 (closure)

简单的说就是运用线、图或标题分割区域,让看的人更能理解区域间的差别。

下图二是beBit网站中的顾客与成果页面。左方的网站图片与右方的成效与说明放置位置接近,两个案例间用灰色的线区隔,更明显的做出案例间的区隔。

beBit网站区隔元素的设计

重点三:行动按键上的用字遣词大大影响页面转换率

网页之间基本上是藉由连结移动,但是一般连结的点击率10%已经算是高的,因此用字要让使用者易于联想,增加点击意愿。图三是一个旅游网站的例子,在首页时,使用者想找饭店,而行动按键上若是用「订房」两字,使用者会误以为是下直接订单,因而不愿意点击,若改为「搜寻住宿」后,点击率大大提升。

在首页想引导使用者搜寻住宿,就不要使用「订房」两字在行动按键上

重点四:可以点的东西就是要「看起来可以点」

前面我们提到了,要让使用者点击内容本身就是一件不容易的事情,如果使用者在网页上无法辨认出连结的话,即使准备了吸引人的内容也徒劳无功。虽然扁平化的设计随着iOS7推出引起风潮,但从达成「让使用者点下去」的目的来看,能点的东西「看起来可以点」更重要!

(1) 蓝色或有底线的文字

在蓝色文字下方加上底线是沿用到今天的基本手法。由于近年重视文字的易读性及整体设计,不使用蓝色底线的网页也在增加,但从beBit至今观察到的使用者行为,「蓝色」或「底线」还是让使用者辨认出连结的重要因素,因此请尽量保留其中元素之一。另外,在并非链接的文字使用「蓝字」或「底线」的话,会让人误认为可以点击,要尽量避免。

(2) 行动按键要有按压感

关于行动按键的装饰,具有「可以按下」的感觉十分重要。通常在前端加入符号,赋予按钮网页链接感(一般为箭头或三角形),或在按键旁加入层次或阴影,或使用带有圆角的矩形,便可以为按键加上按压感。

具有「按压感」的行动按键

重点五:重要信息主动展开在页面上,不要随易使用页签隐藏内容

许多网站喜欢用页签(Tab)的方式设计,但页签的致命处在使用者没有强烈动机寻找信息时,很容易忽略页签以致没看到藏在页签中的重要内容。设计网站时要考虑使用者上网的心境,有些网站偏向功能型网站(如:网络银行),有些网站是娱乐型网站(如:网购平台)。用户造访功能型网站时,寻找信息的动机强烈,即便我们只放一个关键词,用户也有意愿找到那个关键词并点击;但娱乐型网站不一样,一般网购平台的首页浏览情境都是打发时间,若使用页签等隐藏信息的设计,这些被隐藏起来的内容很有可能就直接被忽略了!网页设计师在思考页面内容应该如何配置时,一定要一并考虑使用者造访网站的积极性,才不会误将重要内容的曝光度打折扣。

重点六:页面底部与Footer远比你想象的重要

当使用者的页面拉到底下时,代表他已经看完一项内容,此时是他们心有余力看其他内容的时机。为了延续浏览行为,页面的底部是个可以利用的重要区域。因此,推荐商品或关联性商品应该要放的地方是页面底部而非顶部。另外,mega footer的运用也是延续浏览情境的好工具,蛮适合运用在网购平台这种浏览页数越高越好的网站。许多网站设计师花了很多心思设计了每页的内容,但却忽略了在页面底部建立与其他页面的连结,导致使用者看完一页内容后就打住,这真的很可惜!未来在设计你的网站时,也不要轻易忽视页尾的区域!

JAL网站的Mega footer,可延续浏览情境

重点七:网页文案这样写,沟通更容易

撰写文案的重点在于「即便在5秒内扫过,也知道文章的内容」。由于网站文章的易读性比起纸本低,许多使用者仅是大致扫过,若没有吸引眼球或易懂的内容,很容易跳出。让使用者5秒内读懂文章的技巧,有以下几点:

(1)结论直接放在标题

网站文章的易读性比起纸本低,许多网站使用者只阅读标题而不细读内容,为了让用户看到有用的信息,重要的结论应该放在标题中。以下为几个撰写标题的要点:

  • 关键词放在前面
  • 一个标题只放一个重点
  • 强调对于用户的益处而不是功能
  • 不使用专业术语、公司内部用词和外文
  • 删除所有赘字
  • 加入数字强化说服力

(2)「结论→推论过程」的撰写顺序

在段落的开头先提示结论,从重要的信息开始传达是防止用户离开的要素。许多网络撰文者惯于以「归纳结论」的方式撰写文章,在写结论之前描述许多推理过程,看了三四行后还是看不到重点,导致使用者容易失去耐性,放弃阅读。因此撰写网络文章时务必要遵守「结论→推论过程」的原则,降低读者放弃机率。

(3)控制文章长度

网络用户的耐性有限,因此须尽量简短文章的长度,一行字数控制在35~40文字,一个文章段落控制在3~4行。如果有太多重点造成文章过长,则可以运用以下技巧:

  • 附上摘要
  • 根据内文多寡使用大、中、小标题
  • 利用条列式叙述

重点八:如何掌控用户在网站上的视线

只要把握以下3个元素,网站设计师就能掌控用户视线流动的方式:

  1. 视线起点的定位;
  2. 运用强化元素引导视线;
  3. 运用阻碍元素阻挡视线。

1、视线起点的定位

当您看到下图一的网站,您会先从哪里看起呢?是不是先看到了「彻底理解网络用户…」的公司理念,以及下面的「顾问实例/顾问成果」区域?

beBit公司官网

造访beBit网站的多数使用者对公司业务内容不是很熟悉,常常抱持着模糊的印象造访,所以在设计上刻意引导视线到业务说明的区域。另外,在导览列使用灰色的背景色弱化色彩对比,可以更自然的强调主要内文区域。

2、运用强化元素引导视线

引导视线的最好方法就是用吸引人的元素吸睛(如图片、行动按键、对比色…等),用阻碍的元素隔绝(灰色、缩小的文字…等)。网页上的吸睛元素有以下数种:

  • 图片或照片的吸引力强过文字
  • 对比的颜色容易被看见
  • 使用粗体字、红字、放大来产生强调的效果
  • 行动按键或文字链接(蓝色底线文字)
  • 使用阿拉伯数字

上述「颜色的使用」及「文字强调效果」是台湾很多网站设计师会犯错的地方,设计师为了增加版面的丰富度,常会运用很多色彩在背景色或文字上,但色彩越多越没有重点,反而弄巧成拙。吸睛的原则就是:「重要的东西就不要客气的强调他,不重要的东西就尽量删掉他!不要滥用过多的设计元素」

A的吸睛力远大于B和C

3、运用阻碍元素阻挡视线

「灰色系的背景色」与「广告横幅」是常见阻碍视线的元素,灰色系的背景色会弱化内文的重要性;而广告横幅则容易被使用者忽略,常有将重要专题的入口设在广告版面的情况发生,但几乎没有人点选浏览,效果不佳。

此外,区隔线条显示上下内文没有关连性,常用来阻碍或改变使用者的动线:适当的使用横线可以引导用户视线到特定的目标,但是在想要让用户看到的区域上划一条横线反而会阻碍了他们的视线。

加入1KE学习俱乐部

1KE学习俱乐部是只针对1KE学员开放的私人俱乐部