7个致命的网页设计罪孽您可能会犯

成长经理,iSpionage
15 +分钟阅读
这个故事最初出现在KISSmetrics

网页设计是一个棘手的问题。

人们有不同意见关于什么是好的网页设计和什么不。

有些人认为你的网站需要与一个上最新,现代化的设计,以获得关注超圆滑。还有人认为,网页设计并不重要,所有的东西,你只需要一个网站,作品和让人们做他们想做的,就像Craigslist的。

这两个答案都是正确的,这取决于行业或企业,你正在谈论。但是,你如何找出最适合你?而且,你怎么能确保你的网页设计师知道他们在说什么,不会犯错误?

这篇文章呈现七大网页设计的罪,你不想让你的网站。好消息是,他们都是简单的原则每一个网站应该遵循。所以,无论你得到一个光滑的设计或没有,你还需要了解这些设计原则以及它们如何应用到你的网站。

此外,您还可以使用这些原则,以确保您的网页设计师知道他们在做什么。一些人仅仅因为一个好的设计师并不意味着他们知道如何为网页设计。而且,只是因为有人设计网站,并不意味着他们知道如何设计一个网站,将转换。密切关注在这个岗位提出的原则,并在必要时使用它们,以确保您的设计公司设计经过优化以获得您所需要的结果的网站。

错误#1:字体太小

第一个错误的人提出的是建立与太小的字体的网站。

这样做的原因是,早在一天,大多数网站有小字体。该标准是某处大约12像素,并且几乎每个人都遵循的标准。

但是,随着时间的推移,人们开始意识到12px字体很难在网上阅读。当屏幕距离人的脸只有24英寸时,小字体会让人难以阅读。

人们也开始意识到,你只有有限的时间来吸引访问者的注意力,并让他们知道他们在正确的地方。一项研究甚至指出在2013年的平均注意力为8秒一秒不到金鱼的平均注意力。同一研究还指出,人的平均网页上的只读28%的话。

7个致命的网页设计罪孽您可能会犯

2013年研究发现,人的平均注意力为8秒,一秒不到一个金鱼。是否可能?Flickr:photographer23,Creative Commons许可

为了让人们的注意力马上,你需要做到以下几点:

  1. 撰写大标题是抓住读者的注意力。
  2. 写有趣的内容,这将让他们读你写的超过28%
  3. 使用标题字体是足够大的需求的关注
  4. 确保字体足够大,这样读者就不会因为厌倦了眯眼而放弃阅读。

对于所有的原因如上所述,字体大小已经增加,在过去的几年到如此地步,许多人认为14 PX作为最起码的字体大小,和很多网站去更大的18像素作为最低,尤其是大量的阅读时参与了。

这里有出色的网页设计以极大的字体大小一些例子:

KISSmetrics

  • 标题:35像素
  • 页脚:15像素

7个致命的网页设计罪孽您可能会犯

维罗

  • 标题:41 px
  • 身体:18像素

7个致命的网页设计罪孽您可能会犯

帮助童子军的博客

  • 介绍文字:26像素

    身体:19像素

7个致命的网页设计罪孽您可能会犯

要记住的一点是,写副本的目的是为了得到它读。当你付出的作家好钱或刻意写网站复制自己,你要确保它被读取并没有得到一个小的字体,使复制难以阅读隐藏。

您还需要记住,不是所有的字体大小相同。A 16 PX Arial字体可以比另一种字体的16像素版本小。这是你需要知道选择字体大小时的东西,所以你不要随意挑19 PX因为其他网站一样,只有找出你19像素的版本是不一样大。

请记住,页脚字体可以在较小的一边,潜台词也可以,但如果你写了一些你想让人们阅读的东西,考虑使用16像素的字体在最低限度。而且,你不想把我的话时,碎杂志鼓吹在这篇文章中同样的事情:16个像素的身体副本。如果不这样做是一种代价高昂的错误

专家提示:为了获得你想使用的字体大小的感觉,根据你喜欢的网站,下载WhatFont扩展谷歌浏览器。这是一个浏览器插件,使得它很容易点击字体,以找出什么字体类型和大小网站使用。

7个致命的网页设计罪孽您可能会犯

错误#2:移动滑块

我还是不明白,为什么这么多的网站使用移动滑块。

这些措施有效?他们是否转换?难道他们展示你的信息传递给客户最好的方法是什么?

在大多数情况下,他们没有。

窥视拉雅写了题为的ConversionXL文章不要使用自动图像旋转木马或滑块,忽略风尚。在文章中,他引用了Chris GowardWiderFunnel和蒂姆·阿什SiteTuners可以这样说:

我们已经测试了旋转提供了许多倍,并发现它是呈现主页内容的一个好办法。

克里斯Goward

和…

旋转横幅是绝对邪恶的,应立即被删除。

-Tim灰

拉雅还提到了两个研究,其中旋转滑块被证明是无效的:

首先是由可用性专家Jakob Nielsen为首。他问了一个游客如果有西门子洗衣机的特殊优惠在其网站上。事实上,他们确实有在98点字体的报价是说,客户可以得到一个新的家电现金返还。不幸的是,用户没有看到优惠信息,因为它是在移动的滑隐形并最终被彻底无缘。

7个致命的网页设计罪孽您可能会犯

这点转换专家之间的理论,滑块导致类似于在侧栏广告横幅广告视而不见。人们习惯于跛脚的广告在侧边栏,所以他们不得不忽视他们的倾向。这一原则似乎适用于旋转滑块为好。

第二项研究来自圣母大学。他们发现,只有1%左右的游客在第一位置上的滑块点击,随着点击的84%的项目。

7个致命的网页设计罪孽您可能会犯

如果只有1%的人点击了占据你最有价值主页的项目,尤其是84%的点击都是在第一个项目上,那么拥有一个网站滑块又有什么意义呢?为什么要用难以跟踪的移动的东西来烦扰人们呢?为什么不给他们一个单一的选择,因为大多数人还是会点击第一个项目?

那么,为什么这么多的人使用滑块,因为它们看起来是如此低效?

我能想到的最好的理论是,它似乎是一个很酷的高科技特性,而且对web开发人员来说很容易实现。基于这两个因素,企业主会说,“嘿,我想要一个那些花哨的移动滑块的东西,”web设计师会遵从,因为它们看起来“很酷”而且做起来并不难。

But website owners need to consider whether they’ll be effective and whether they’re the best way to convey information on their site, something Peep Laja, Chris Goward, Tim Ash, and many other smart internet marketing folks no longer believe is the case.

为了解决这个问题,先问自己开始什么是展示你的信息,而不是选择一个网站,你喜欢和他们的抄袭设计,包括最佳方式炫酷的滑盖他们的网页上使用。

我用这个方法与我的一个朋友几年前的一个网站,他建立了自己的家教公司 -创辅导

他和他的生意伙伴走近我说:“嘿,我们要建立一个网站...我们希望有具有此信息的网页滑块,”然后他给我一张传单,他们伸手在学校宣传他们的服务。传单是美丽的,所提供的信息令人难以置信的好,而且,想不到,没有包括滑块(那些讨厌的滑块似乎只是没有很好地转化为印刷传单的世界)。

所以,我建议,“你为什么不只是复制您的小册子这已经工作在您的主页,然后把一个联系人按钮,您的电话号码和电子邮件下面一起。”我们试过了,这里是它的横空出世......

7个致命的网页设计罪孽您可能会犯

该网站最终看起来棒极了,避免了可怕的默认滑块,并转换好。有什么理由不喜欢?

当涉及到建立自己的网站,请按以下说明得到相同的结果:

  1. 切记不要盲目添加滑块只是因为大家都在做(即使你的设计师建议之一)。
  2. 考虑什么是目前最好的办法你的信息你的首页,而不是盲目模仿你的竞争对手正在做的事情。
  3. 选择一个重要的报价列表中A-空间在您的主页,并与去。总会有你想要推广其他的东西,但你可以做网页上,或在页面顶部的一个按钮,越往下。选择一个报价,使它突出,然后得到的出路,让你的网站去上班。
  4. 而要真正倒锤的最后一点:想想你希望你的网站做排名第一的目标。关注这一点,就可以将其他的呼吁行动。

同样,如果你不想把我的这个词,这里有一些文章,你可以阅读支持了这一点:

误区之三:低对比度字体

另一个巨大的错误的人提出的是使用低对比度的字体。

低对比度装置上的光的背景或在暗色背景上较暗的字体的打火机字体。我不知道这是什么,在外观设计印刷好的,但它从来没有在网络上是个好主意。

你总是要确保你的网站内容是容易阅读成为可能。该碎杂志的文章以上告诉我们,40岁时通过我们眼睛的光量只有20岁时的一半。到了60岁,这一比例会下降到20%。除此之外,近9%的美国人视力受损。

考虑到这些统计数据,你真的想要使它更难访问者阅读你的内容,你付出了那么多和那么努力,让他们到您的网站摆在首位尤其是后?

7个致命的网页设计罪孽您可能会犯

对于字体低对比度始终是一个坏主意。

你可以解决这个问题总是使用高对比的字体。如果背景是黑色,字体要轻,如果背景是光,字体应避光。

其实,我想进一步采取这甚至一步。很少有有次,当你需要使用任何字体颜色除了黑色或白色。有时候,设计师选择在白色背景上或者深蓝色背景光的蓝色字体的浅灰色字体。

为什么?这真的更容易阅读,或者你只是想增加“视觉效果”?使用书籍在白色背景上的一个原因黑色字体 - 它很容易阅读。网站将做好仿效这一做法。

这里有很大的反差字体的一些样品:

帮助童子军的博客

7个致命的网页设计罪孽您可能会犯

Evernote的

7个致命的网页设计罪孽您可能会犯

这是一个形象,这是不容易做到的反差较大的例子。

哈利

7个致命的网页设计罪孽您可能会犯

要记住的教训是,字体应该总是在他们身后的背景的高对比度。如果您发现该文本难以阅读,觉得应该有更多的对比,不要犹豫,打电话给你的设计师,让他们知道。您的网站是不是设计展示。这是为了使销售和转换率提高的地方。

小贴士:不仅是高对比度很重要,而且你也要节约使用反向字体。(反向字体是白色文字在黑色(或彩色)背景上,而不是黑色文字在白色背景上。)

事实上,史上最伟大的广告人之一大卫•奥美(David Ogilvy)就曾说过,广告永远不应该用倒装字体。澳大利亚最大的汽车刊物的编辑科林·惠尔登(Colin Wheildon)着手验证这一理论。他的发现令人震惊。

根据研究下面是不同的颜色和背景的理解度的列表:

  • 在白黑白文本:70%良好,19%的公平,11%的穷人
  • 黑底白字的文本:0%好,12%的公平,88%的穷人
  • 2%好,16%的公平,82%差:紫底白字的文本
  • 在皇家蓝白色文字:0%好,4%一般,96%的穷人

是不是很不可思议?从黑色文本在白色背景上的结果与白色文字,背景颜色相比几乎是完全相反的!

该外卖店:

  • 一定要记住使用高对比度字体,但也...
  • 有节制地使用反向型。

有时,反向型看起来不错,但它可以对可读性和保留产生极大的影响。因此,你应该使用它仅适用于那些不需要太多的阅读,都不是很重要网站的部分。总体而言,你是聪明的前三思使用反向型。

7个致命的网页设计罪孽您可能会犯

在HubSpot的网页这种反向型看起来“酷”,但它未必是最好的可读性和理解,尤其是在整个网站上最重要的空间。

错误4:文本的行高差

文本的行高经常被忽略。许多web设计人员和开发人员选择字体,选择大小,任意选择行高,然后就结束了。

但是线的高度对网站的整体设计和吸引力有着惊人的显著影响。选择错误的行高会让字体看起来拥挤不堪。这会毁了你的整个设计。

好消息是,有才华的网页设计师有一双慧眼,会自动为你选择一个合适的高度。坏消息是,一般的web开发人员对这种设计不感兴趣,经常会选择错误的行高。

克里斯·皮尔逊DIYThemes对此他有强烈的感觉,所以他建立了一个行高计算器配置为一些被称为黄金比例。下面是谷歌的黄金比例的定义:

7个致命的网页设计罪孽您可能会犯

一个更简单的定义是,黄金比例是真实认为是美观的比例。如果不来烦你了更详细,克里斯·皮尔森用这个比例来构建一个计算器,结合字体大小和内容宽度拿出理想的行高。好消息是,计​​算器,使这种超级容易做到。您只需插入您的字体大小和内容的宽度,计算器会告诉你,你的行高应该是什么。

7个致命的网页设计罪孽您可能会犯

你也许还没有意识到,但有一个原因,一些设计和字体的组合比其他人更赏心悦目。伟大的设计师知道如何实现自己的黄金比例,但克里斯·皮尔森的计算器,很容易让其他人做同样的。

错误5:行长太长

您可能犯的另一个错误是创建的文本行太长。

那么,什么是最佳的线路长度?

该Baymard研究所发表一篇文章写着每行50到60个字符是最好的,具有高达75个字符是可接受。

究其原因线长度是非常重要的,因为文字的长行恐吓在线阅读。如果线路长度过长,有些人不会开始阅读,因为它看起来并不像一个很好的阅读体验。

在另一方面,如果线长度过短,读者不得不频繁启动和停止线,成为恼人。

响应式设计的流行加剧了这个问题。如果不设置内容路段的最大宽度,你没有办法得知线路长度将是多长时间你的博客或其他任何一段文字,因为屏幕尺寸的差别如此之大的方式。

在所引用的文章写时,Baymard研究所通过设置一个最大宽度为他们的516个像素文本留下平均每行65个字符,在18像素的字体大小处理了这个问题。这就产生了一个巨大的阅读体验,因为你可以在下面的图片中看到。

7个致命的网页设计罪孽您可能会犯

再次,这是一个设计细节,并非所有的设计师都去关注,但现在你知道文本的长行恐吓阅读,你可以指挥你的设计师和开发人员,以确保您提供为读者提供最佳体验。

误区6:不强调色彩的号召性用语

接下来的网页设计罪不可使用强调色。这里就是我的意思是:

聪明的互联网营销知道你需要一个很好的强调色提请注意对动作键调用。如果你问别人“立即购买”或“开始免费试用,”你要确保你使用的按钮颜色,这将引起人们的注意,这样他们就会点击,并采取你希望他们采取的行动。

这看起来很简单,但我已经看到多个场合设计没有预留口音的颜色为行动的最重要的电话。相反,他们选择了一个已经在网站别的东西上使用的颜色。这不是一个好主意。

下面是一些使用强调色的经验法则:

  1. 它需要足够明亮提请注意,无论你正在试图提醒人们注意。
  2. 它需要在网站上与其他颜色的互补性,使其不发生冲突。
  3. 它需要从它在任何背景下脱颖而出。这意味着,在蓝色背景上的蓝色按钮可能不是一个好主意。
  4. 它需要保留采取行动键拨打电话,因此不会在网站上得到过度使用融为一体。

在下面的例子中,你会发现,CTA按钮是明亮的橙色。这有助于它从白色背景中脱颖而出。此外,橙色是不是在设计(除了它是足够小,它不关注竞争的标志飞溅),用于其他地方。您可以检查出完整的网页这里如果你愿意的话。

7个致命的网页设计罪孽您可能会犯

错误#7:常见的设计原则违反

最后一个致命的错误是没有遵循常见的设计原则,这是一些史蒂夫克鲁格谈到在他的书别让我想了

他做的关键是,网站访问者用于能够找到在某些地方某些功能。例如,他们已经习惯了在右上角找到的标志和在留下了页面顶部标语和菜单。他们还用能够找到的关于网页和联系人页面,如果他们想更多地了解该组织或与我们联系。

这意味着它是一个好主意,包括网站上的这些功能,您应该打破之前常见的设计原则,三思而后行。这一点,你认为可能是东西是显而易见的,但它并非总是如此。

一些网站所有者,例如,决定是超级创意,想出了不同的方式来显示菜单。取而代之的是,在那里它通常发现顶部,它包含在内置到后台设计(或其他一些创造性地包括比标准的方式与其他菜单),一棵树的树枝。

有时这些疯狂的新方法能奏效,但通常都行不通。在大多数情况下,遵循一般的设计原则(这样你就不会让访问者感到困惑)要比想出一个疯狂的新布局好得多,这个布局可能有创意,但并不直观。

结论

希望你通过阅读这些七宗罪网页设计的罪学到了很多东西。他们中的大多数似乎是常识,但他们都得到更频繁地比你想象打破。

记住,如果你打算做所有的任何设计变更,请确保您测试您的更改,看看它们是如何影响你的底线!(提示:使用KISSmetrics为了这。)

现在您了解了这些原则,注意你遇到,看看有多少遵守这些规则的网站。我相信你会开始意识到这些规则是多么的重要,这将加强为什么他们是重要遵循。

交给你:我错过了你经常在网上看到犯下任何致命的网页设计的罪?发表评论添加到这个列表中。

关于作者:乔·普特南(@josephputnam)是一种生长经理iSpionage,一个PPC竞争情报工具,使得它更容易为智能广告(和机构)建立有利可图的运动速度更快。今天注册一个免费ISPY竞争对手警报为你选择的网站获得关于新的PPC关键字,广告副本和SEO术语的自动更新。

更多来自企业家beplay体育提款

现在注册到企业家出版社:周书beplay体育提款
获取堆积折扣的书你爱直接传递到您的收件箱。每个星期,我们将拥有不同的书,分享独家优惠,你不会找到其他地方。
利用“企业家内幕”启动你的业务beplay体育提款
启动你的生意。beplay体育提款“企业家内幕”是你获得技能、专家和关系网的全部通道,你需要这些技能、专家和关系网来让你的企业起飞——或者让它更上一层楼。
看看企业家保险beplay体育提款
你在商业保险上花费太多了吗?在你的承保范围中,你是否有重大的缺陷?相信企业家会beplay体育提款帮你找到答案。

最新的企业家beplay体育提款