landing page的五个设计原则

2009-09-14 / 用户体验 / 0 Comments

Copywriter不一定要自己设计landing page,不过作为一名广告文编写人你需要了解有效的landing page设计的原则,这样你才能更好的与专业的landing page设计师沟通和交流。理解landing page设计原理有利与你和你的团队认准相同的目标,并提升产品的转换。

关于页面布局,Omniture最近发表了一个叫做 Best Practices for Conversion: The New Engagement Funnel in 7 Steps的白皮书,在其中的第三步:组织和优化网站结构中详细介绍了页面布局相关的基本方针,通过他的指南可以帮助你更好的组织和格式化你的landing page:

  • 仔细研究你的竞争者的landing page设计,并延伸他们的设计思想。 贯穿竞争者页面的转换过程,考虑那些你觉得与你的想法不一致的地方,思考是否应该修改或删除这些内容,你必须自己动手进行测试。
  • 将landing page中最重要的文字放到页面最上方的300像素以内: 几乎有一半的访客不会使用浏览器的滚动条来浏览页面下一屏的内容,因此把你推销的卖点放到landing page的第一屏,并添加上一个call to action。
  • 不要考虑得太复杂: 使用单字段格式,留出两个侧边空隙,居中的内容让你的访客更容易阅读。将大的段落分割为几个小段落,每个段落不要超过5行。你应该让访客跟随你的思想,而过于密集的文字会让他们无法完整的阅读。
  • 使用醒目而且通俗的语言: 给你的links加上下划线,让它显得更为醒目。尽量使用通俗易懂的语言,有一说一,没有哪个访客愿意来思考你的语言有什么引申的含义。
  • 确认你的页面读取速度足够快: 这一点非常重要,通常我们都建议针对不同的国家和地区都使用相同地区的主机。记住至今还有数百万的用户还在使用电话拨号,删除你landing page上不必要的图片,优化必要的图片大小,让你的landing page更快的被读取。如果你的页面在8秒内还不能完全被读取,那么你的用户很可能会迅速离开你的网站,同时你的adwords 关键词质量分也会大打折扣,这无疑会增加你的广告预算。

别忙,这里还有5个小常识你应当时常记在脑中:

  • 基于 the F-Pattern Eye-Tracking 原理来格式化你的landing page: 互联网读者都倾向于一种粗略的F-shared模型来浏览web内容,因此把你的重要图片放到文字左面去。 (什么是F-shaped模型, 实际上就是普通人浏览web内容的眼球轨迹,也叫做尼尔森的F视觉模型,这里有一份调查报告,请参考 Jakob Nielsen’s eyetracking research.)
  • 使用一致的网站配色/让你的ads视觉元素与landing page相互匹配: 平滑一致的颜色配置,不要让你的访客觉得不协调,看上去象个皮包公司。
  • 不要使用剪切画!制作自己的广告图片: 尽量使用一个产品图片,如果没有产品,你可以使用自己制作的logo或本地计算机上面的一些相关图片,让访客有点击的欲望,在图片上添加一点有利可图的介绍是非常好的办法,比如big save,30% off等字样。如果你的图片看上去你自己都不愿意去点的话,删除它,因为它毫无用处。
  • 把无关痛痒的元素放到侧边栏或者直接删除掉
  • 让你页面的表单输入更加简单: 不要为你的访客设置复杂的表单,你认为他们会一个一个认真填写吗?

记住, 你的landing page的目标是什么,促成销售或者引导注册,还是都有?你的landing page 文章与设计都应当围绕着即定的目标来进行,完成之后自己读一遍,有老婆的建议让老婆也读一遍,你会发现大多数人想的和你想的都不一样!

Read More

landing page设计的5个小经验

2009-06-08 / 用户体验 / 0 Comments

Copywriter不一定要自己设计landing page,不过作为一名广告文编写人你需要了解有效的landing page设计的原则,这样你才能更好的与专业的landing page设计师沟通和交流。理解landing page设计原理有利与你和你的团队认准相同的目标,并提升产品的转换。

关于页面布局,Omniture最近发表了一个叫做 Best Practices for Conversion: The New Engagement Funnel in 7 Steps的白皮书,在其中的第三步:组织和优化网站结构中详细介绍了页面布局相关的基本方针,通过他的指南可以帮助你更好的组织和格式化你的landing page:

  • 仔细研究你的竞争者的landing page设计,并延伸他们的设计思想。 贯穿竞争者页面的转换过程,考虑那些你觉得与你的想法不一致的地方,思考是否应该修改或删除这些内容,你必须自己动手进行测试。
  • 将landing page中最重要的文字放到页面最上方的300像素以内: 几乎有一半的访客不会使用浏览器的滚动条来浏览页面下一屏的内容,因此把你推销的卖点放到landing page的第一屏,并添加上一个call to action。
  • 不要考虑得太复杂: 使用单字段格式,留出两个侧边空隙,居中的内容让你的访客更容易阅读。将大的段落分割为几个小段落,每个段落不要超过5行。你应该让访客跟随你的思想,而过于密集的文字会让他们无法完整的阅读。
  • 使用醒目而且通俗的语言: 给你的links加上下划线,让它显得更为醒目。尽量使用通俗易懂的语言,有一说一,没有哪个访客愿意来思考你的语言有什么引申的含义。
  • 确认你的页面读取速度足够快: 这一点非常重要,通常我们都建议针对不同的国家和地区都使用相同地区的主机。记住至今还有数百万的用户还在使用电话拨号,删除你landing page上不必要的图片,优化必要的图片大小,让你的landing page更快的被读取。如果你的页面在8秒内还不能完全被读取,那么你的用户很可能会迅速离开你的网站,同时你的adwords 关键词质量分也会大打折扣,这无疑会增加你的广告预算。

别忙,这里还有5个小常识你应当时常记在脑中:

  • 基于 the F-Pattern Eye-Tracking 原理来格式化你的landing page: 互联网读者都倾向于一种粗略的F-shared模型来浏览web内容,因此把你的重要图片放到文字左面去。 (什么是F-shaped模型, 实际上就是普通人浏览web内容的眼球轨迹,也叫做尼尔森的F视觉模型,这里有一份调查报告,请参考 Jakob Nielsen’s eyetracking research.)
  • 使用一致的网站配色/让你的ads视觉元素与landing page相互匹配: 平滑一致的颜色配置,不要让你的访客觉得不协调,看上去象个皮包公司。
  • 不要使用剪切画!制作自己的广告图片: 尽量使用一个产品图片,如果没有产品,你可以使用自己制作的logo或本地计算机上面的一些相关图片,让访客有点击的欲望,在图片上添加一点有利可图的介绍是非常好的办法,比如big save,30% off等字样。如果你的图片看上去你自己都不愿意去点的话,删除它,因为它毫无用处。
  • 把无关痛痒的元素放到侧边栏或者直接删除掉
  • 让你页面的表单输入更加简单: 不要为你的访客设置复杂的表单,你认为他们会一个一个认真填写吗?

记住, 你的landing page的目标是什么,促成销售或者引导注册,还是都有?你的landing page 文章与设计都应当围绕着即定的目标来进行,完成之后自己读一遍,有老婆的建议让老婆也读一遍,你会发现大多数人想的和你想的都不一样!

Read More

6个最普遍的可用性设计错误

2009-06-08 / 用户体验 / 0 Comments

1. 让人困惑的网站结构和内容

对用户而言,没有什么东西比一个让人困惑的站点更让人气愤了,它们没有任何方位说明,混乱的站点导航,甚至没有站点导航,你根本没有办法在该站找到下一个对你有用的信息,除了当前你正在浏览的页面,你最想做的事情就是立刻离开这个网站,并且永远不再回来!研究人员指出,网络用户应该能够在不超过3次点击的情况下,在一个网站上的每一个页面去到任何一个他们想去的精确页面。

当然,我们说的3次点击肯定应该理解为同一个站点的任何两个不同网页之间。如果不能通过3次点击到达他们所需要的目标页面,你很可能会失去他们。检查你的web站点,如果超过3次点击,web设计师会告诉你,如果你想重新设计或者定义网站结构,那将是一个非常耗费时间的活计!

在今天,我们如何评价一个网站的结构是好是坏呢,有什么主要的特征来判断呢?答案很简单:简约。一个好的站点就是一个所有人都易于有效使用的简单站点。

同时,你还需要注意的是,一个站点有大量的信息,但是它们并不是每个普通用户都需要的。考虑到这一点,你可能需要使用Google Analytics网站分析工具来精确检测用户从哪些网页离开你的网站。通过该工具的帮助,你可以从你的网站流量得到一些提示,哪些页面你需要替换或者重新考虑它。

不要忘记为你的网站使用一个站点地图[Sitemap]:有的时候,这个细节被我们跳过了。站点地图本来是为站点可用性而设计,然而在今天,随着站点地图对SEO的作用减弱,很多网站和博客都对sitemap不再那么重视,而它对站点可用性的作用也逐渐被人们以往。实际上,如果以SEO2.0的标准来衡量,网站的可用性设计占据着非常重要的地位,因此为你的站点设计一个HTML格式的sitemap就更显得重要了,不是为了SEO,而是为了Web Usability。站点地图的创建应该是以最终用户的可用性设计为理念,就像它的名字一样,它让你的用户不至于在你的网站上迷失。我在以前有一篇关于免费站点地图生成工具的文章,大家可以参考一下。

Http://www.havenworks.com这个网站就是一个典型的可用性设计反面教材,这是一个不合理的,让人迷惑的网站。尽管这个网站宣称他们的内容最新的,不过在导航和设计上看来,他们似乎还停留在10年以前!

2. 缺少搜索功能

尽管不是所有的网站都需要搜索功能,但是在页面右上方的一个搜索框却是让客户发现最需要的信息最快和最直接的方式。我认为尽管主菜单已经有了一定数量的链接,然而搜索功能的重要性还是不容忽视的,尤其对于资源丰富的网站。

搜索功能是必要的,但是并非放置一个搜索框到你的网站这样简单而已。很多时候,如果你的搜索功能没有正确建立,它所提供的结果并不能让你的防客满意。搜索结果的精确匹配非常重要,如果你的搜索不能为用户返回最相关的搜索结果,那必定会给用户带来不好的印象,他们会认为你的网站没有他们所需要的内容,但事实上却并不是他们想的那样。

下面是关于添加搜索功能应当注意的一些技巧:

  • 搜索框的位置,通常放在页面的右上角是个不错的选择;
  • 搜索选项应该有能力检测错误的拼写,并为用户提供正确的搜索建议;
  • 搜索框应该尽量的简单,在大多数网站都没有必要添加高级搜索选项;
  • 简单的搜索不应该对大小写敏感;
  • 在搜索框旁边放置一个带“搜索”标签的按钮;
  • 精确匹配的结果应该放置在近似匹配结果的前面;
  • 使用醒目的颜色来标志搜索关键词及词组片段;
  • 不要有零条记录被发现的消息,对于类似的情况,提供相关的搜索建议给用户选择。

更多关于站内搜索的技巧,大家可以参考Stoney deGeyter的文章 ‘Searching for Better On-Site Search Usability

3. 隐秘的链接

还有一个打击可用性的问题就是,对于普通文本和链接使用同样的颜色。 这样做的结果是让一部分访客感觉到混乱,他们尝试去点击一些不是链接的文本,然而真正的链接他们却难以发现。

另外,链接的长度也不宜过长,通常在5到7个单词比较合适。关于链接的设计,你可以参考 ‘How to Design your Links‘.

4. 没有优化的404页面

404页面错误或者 “Page Not Found” 消息是服务器的一个HTTP响应,错误表示web浏览器能够与服务器通讯,但是服务器无法正确的处理或识别相关的请求,或者是服务器没有一个适当的配置来满足用户的请求

下面是几个优化你网站404错误页面的几个方法:

  • 放置一个FAQ/支持页面链接
  • 放置一个sitemap链接
  • 放置一个最重要的分类链接
  • 放置一个搜索框在页面上方显著位置
  • 添加与其他页面相同的404页面样式

与隐秘链接类似,404页面的自定义也是一个容易被忽视的问题。

5. 可用性表单

Avangate.com的可用性资源中心为我们提供了一篇 可用性表格清单 文章给大家可以参考,其中提到了许多最重要和最相关的关于表单可用性的技巧,最关键的一点还是:简洁。

这里我们只列出一些最应该考虑的重要规则:

  1. 不管是新用户还是老用户,都应当让他们了解完成表单的填写对他们有什么好处
  2. 应当尽量避免在表单中提供了过多的填写项目
  3. 不要有任何重复的填写项目
  4. 如果有必要的话,将一个表单撕裂为几个页面
  5. 保证表单外观的整洁
  6. 以不同的方式标记必须要完成的重要表单项目
  7. 相应的错误消息应该被返回

考虑用户的时间,避免使用复杂的表单。对于注册信息表单,创建关键表单项,对于用户问卷调查表单,则尽量使用简洁的回答方式,能设置预设答案的项目尽量设置好,提高用户完成表单的效率。

通常使用免费下载,免费资源来刺激用户完成表单是一个不错的选择。

6. 醒目网页 [Splash pages]

Splash pages 被定义为一个网站的介绍页面或者引导页面。在很多时候,它们都由下面这些元素构成:图形或logo,动画或者flash影象。醒目网页现在还像以前一样非常流行,或许现在稍微冷却了一些吧,但是这也是一个让最终用户讨厌的东西。

但是,让我们用一个开发人员的角度来看看醒目网页有什么优点和缺点:

优点:

  • Splash页面读取时间快并且把所有的信息都放在一个独立的页面
  • Splash pages 允许访问者选择适合于他们的站点技术
  • 站长可以通过广告获得潜在的收入

缺点

  • 对于用户来说没有任何可用性可言
  • 用户可能会尝试离开网站:根据相关研究表明,有25%的用户在看到splash page后选择离开
  • 大多数的搜索引擎不能索引到splash page
  • 在splash page上的重复动画可能导致用户的厌烦

通过上面的优点和缺点的比较,你可以选择使用或者不用splash页面,要注意的是多数时候这个东西会造成用户的反感。

结论

可用性是个主观的东西。在web设计师或者开发人员的眼里看似好用网页设计对于最终客户来说却有可能完全不一样。Web完全是一个相互作用的环境,我们必须注意网站与访问者交互的方式,以及了解访问者是否能理解你的网站为他们提供的方便。

你很难找到一个手册来告诉你正确的步骤。不要忘记,当你创建一个网站的时候,你应该把你自己当作一个普通访问者来看待;在成为一名网站艺术家之前,你需要理解访客的需求。为了获得最好的效果,你必须经常测试:让一些从来没有来过你网站的人到你的网站做一些你想让他们做的事情。

Read More

用户体验设计的八个步骤

2009-05-26 / 用户体验 / 0 Comments

步骤一:数据调查
   数据可以带来什么?对于各页面及路径的pv(产品),uv(用户)的总结,可以得到产品使用情况的一个大致概貌。
缺乏什么?不了解用户,不了解过程。

步骤二:用户访谈
   有什么好处?产品和用户之间的联系,就像一个黑匣子。对用户的访谈,就是一个试图打开黑匣子的过程。
打开了黑匣子,我们就可以改造他们之间的路径。从而使两者无缝融合。就像是研究dna,对结构的研究可以重塑基因。反映到产品上,就是我们可以以用户的心理模型去创造产品,或者是用富于创造的产品去影响用户。

步骤三:产品分析
   即使了解用户,是否能提出有效的解决方案呢?此时,对于相关产品的研究就会作出帮助。如果说对用户的需求,可以对产品有纵深的认识。那么对产品的分析,有利于横向去加深去产品的理解。为什么做同一个功能,会产生出两种不同的产品?差异表现在大体,也体现在细节,通过不断的比较,会发现产品各功能间,产品和用户间千丝万缕的联系。

步骤四:产品定位
   定位本应在一个产品做出之前决定,可为什么我会在此阶段提出这个步骤呢?事实上,因前面工作的铺垫。只有了解了用户,了解了相关产品后,定位才会更加明确。最初时,时时需要一个定位,却感觉模糊,在此刻,就清楚许多。能否改变,看造化了~~

步骤五:功能确认
   基于对用户和产品的分析,此时会提出一些新的功能。从产品长远的发展,对用户使用的引导,以及易用性综合考虑,慎审地推出每一项功能。

步骤六:信息架构
   产品的印象开始在脑海里浮现。此时,将信息注入到产品结构中去。导航,管理等是很重要的几项,需要格外小心。另外,不同的页面有不同的信息,以及页面与页面间的信息跳转,甚至是产品间的跳转,每条信息都需要经过审核。如果对产品没有帮助,或者对用户是负担,都不要向里加。

步骤七:页面原型
   就个人而言,在页面原型阶段,除了用visio来画结构图,还是不自觉得要用ps去协助找感觉,这个过程,对自己而言也是一个迭代的过程。当然,之前那些阶段,使整个产品的结构都在脑海里快成型了,这个只需要把它落实到纸上。
原型的确认,需要坚持。如果是你自己做了这个过程,而且每一点都是经过思考的。那么就去说服来自各方的反对。事实上,你要相信,人们相信思考的价值,只要你付出了,就有回报,最怕没有付出天天在那里抱怨。

步骤八:视觉设计
   不必多说了。可能会比较多,icon,字体,区域的划分,模块的统一,css的定义,风格的设定~~~所有的一切,都要体现前面工作所得到的东西。
步骤清晰,但其实中间的过程可能更有意思。
   首先要获得运营人员的支持,如果他们不参与进来,整个过程会很难做。通过不断的交流,他们可能会很乐意一起做用户访谈等的工作。这个看你的沟通能力了。
然后获得团队其它同事的支持。需要不断展示阶段性成果,大家会慢慢认识到ue工作的作用。
有过这么一次以后,团队里认识到这个职位的职能,以后就可以开展更深入的工作了。

Read More