网页设计中的眼动模式

当今web设计中最容易被忽视的设计原则之一是眼动模式。通常情况下,网页设计师过于专注于通过添加分散注意力的图形和动画、使用过于复杂的背景图像、阴影和发光的表单字段来让他们的网站看起来“漂亮”,以至于他们忘记了他们为什么要把网站放在首位。

怎么会这样呢?似乎很多设计师都有这样的误解"网页设计"翻译成"让网站看起来漂亮”。事实上,这与事实相去甚远。

网页设计中的眼动模式

一个好的网页设计首先要有效地满足网站的目的,其次才是美观。建造一个设计糟糕的网站就像用大理石、花岗岩和进口的西班牙瓷砖建造一所房子,然后忘记添加门窗。一个好的建筑师会对房子的用途给予高度的关注——创造一个可到达的生活区——然后用漂亮的材料填充细节。

眼动模式是网页可用性的基础。这篇文章的目的是在网页设计中定义眼动理论,探索热点,深入研究f模式,帮助你走上有效的网页设计之路。让我们开始吧!

眼动模式

什么是眼球运动模式?眼动模式指的是人的眼睛在浏览网页时所经过的完整路径——从访问者进入网页的那一刻到他们离开网页的那一刻。为什么这很重要?要回答这个问题,我们首先需要理解web页面的用途。

你的网页是做什么的?用户如何从A点到达B点?假设您正在创建一个登录页面。登陆页的目的是什么?你猜对了——让访问者使用你的服务或购买你的产品。你如何让人们这样做?通常,登录页面的目的是帮助访问者识别导致他们寻求解决方案的特定问题。接下来,您需要提出问题的解决方案,由谁来解决它(即你的公司名称、标志或品牌)以及如何开始。我们该怎么做呢?简单地说,我们可以通过了解热点来控制用户如何查看我们的页面。

热点

什么是热点?热点是访问者最关注的网页区域。让我们来看看一个案例研究,它分析了登录页面上的眼球运动模式,以发现访问者的眼睛最关注的地方。下面,你可以看到Credo Mobil在进行眼动跟踪研究之前的原始登陆页面。

之前的信条

之前的信条

乍一看,我认为这是一个非常漂亮的设计。对吧?但是,它有用吗?让我们看看下面的眼球追踪结果。

之前信条的热图

之前信条的热图

红色和黄色的区域被称为“热点”,并在屏幕上指出用户最关注的位置。正如你所看到的,结果相当惨淡。尽管登陆页面的外观很漂亮,但用户的注意力却被吸引到屏幕上的三个空白区域——哎呀!你还会注意到,访问者最后会到处寻找,好像他们在试图找出什么是重要的,他们下一步应该做什么。这个页面确实需要帮助。

那么解决方案是什么呢?Credo Mobil的登陆页面是这样设计的:

  1. 展示一个访客可能感兴趣的很酷的手机
  2. 看一眼公司的名字
  3. 引导访客点击“呼叫-行动”按钮购买手机

在看到眼动跟踪结果后,Credo Mobile决定重新设计他们的登陆页面- go figure。您可以在下面看到结果页面。

信条后

信条后

以下是最新的眼部运动结果:

信条后的热图

信条后的热图

F-Patterns

但是如果您正在创建一个非着陆页面呢?这就是f型的用武之地。f模式出现在大多数非登陆网页。请看以下三个不同网页上的眼球追踪结果。

的热图

正如你所看到的,它们都有一个共同点——访问者会自然地关注页面左上角的一个点,向右撇去,向下看,再向右撇去,等等,直到一个“F”形区域被映射。之所以会出现f型模式,是因为用户通常会随着眼睛向下移动,水平扫描的次数越来越少。这些眼睛的映射被称为f型。

看一下左边的热图。值得注意的是,实际上没有访问者注意到页面的右栏。如果重要信息或链接在这个区域,这个网页肯定有问题。另一个例子,看一下中心的热图。这些结果显示了页面设计中的一个重要缺陷——左栏左上角的内容实际上是看不见的。

为什么?当用户第一次进入页面时,他们的眼睛会立刻跳到主要的昆虫图片上,然后继续向下看实际的内容。只有这样,他们的眼睛才会扫向左边,找出左边栏的标题,完全忽略了最上面的主要部分。正如你可以看到的最右边的热图-谷歌的结果页-你可以看到,这是非常有效的。用户关注第一个和最相关的搜索查询,同时也会浏览右边的付费广告。

眼动网页设计指南

那么我们能从这些研究中得到什么呢?首先,在设计web页面时,我们需要确定该页面是被归类为着陆页面还是非着陆页面。请记住,登录页面通常会显示一个问题,提供一个解决方案,并提供一个“call to action”按钮来解决问题。这些类型的页面在某种程度上比其他页面更自由。换句话说,访问者的眼球运动模式是不规则的,根据你的布局来浏览页面。另一方面,访问者在浏览非登陆页面时通常遵循f模式,比如博客文章或关于页面。

创建一个成功的非登陆页面设计是相当直接的-只要记住f模式。确保您的徽标出现在页面的左上角。确保你的主要导航链接位于屏幕顶部附近,最好沿着“F”的顶部水平延伸。如果您有大量重要的菜单链接,请将它们放在页面的左侧。如果你在你的页面中包含了大的图片或者其他主要的视觉效果,记住用户通常会从那里开始他们的眼球运动,然后开始寻找下一个重要的部分。因此,将这些类型的图像或视觉效果放在页面顶部通常是一个好主意,这样访问者就可以从顶部开始,自然地向下浏览内容。

另一方面,创建一个成功的着陆页面是网页设计中最难克服的挑战之一。这是为什么呢?简单地说,创建一个与经典f型模式相反的设计要比遵循它困难得多。幸运的是,用户已经习惯于看到非传统的着陆页面设计。成功的登录页面通常会经历多次迭代,反复微调页面的某些元素,以控制用户的眼球运动模式,创建一种自然的用户体验,避免用户的困惑和沮丧——这是失去转化率的关键因素。

参考文献

2020-04-15 17:42
相关热门