您的位置:首页 > 视觉交互 > 全屏弹出广告交互设计探讨

全屏弹出广告交互设计探讨一、广告类型及使用场景

全屏弹出

图片JPG或者GIF,屏位高,面积大的广告必须考虑页面加载广告后的流畅程度
用于大型活动推广,频率控制在一季度或一年度一次为宜。

二、设计目标
1、效果好!尽量让茶坊用户都注意到这个活动。
2、干扰小!把对此活动不感兴趣的用户的干扰降到最小。

三、设计要点
1、什么屏位最恰当?

全屏弹出的屏位

全屏弹出 未必一定要再页头之上,只要不遮盖内容,放在导航与搜索之间的方式还是不错的。既然没有破坏页面整体性,就可以大胆使用大尺寸的广告,不把页头(LOGO和导航)挤出首屏,都是可接受的。用户总是能快速扫描到网站的页头。找到他们需要的导航入口,去到他们想要去到的地方,用户就会很满意。另外初次加载出现,不要使用高度伸缩动画展开方式,使得广告下方的内容部分能稳定在窗口的固定位置上,确保用户在广告加载完毕之前能精确点击所需内容的链接。总之,大一点没关系,但不要乱晃。

2、是否可以遮挡内容?
绝对不可以!
这就是为什么取消背投而采用其他广告来替代的原因,背投广告(闪屏广告)很受客户青睐的原因是,客户觉得效果好,但是他们基于强迫用户的基础上。
从点击数据来看,这类广告在首页总点击的占比分布在2% – 20%之间。这意味着:有至少80%以上的用户可能对我们的活动并不感兴趣,他们中大部分是带着明确目的来网站使用特定产品的。如果广告内容遮盖了网站内容,将严重干扰这部分用户的正常使用。他们所能做的是无奈地等待广告收起或立即关闭(如果提供了关闭按钮)。不排除有少量用户会因为你的强制遮挡而被迫点击广告,但我们绝不应该为了这几个少量的转化而得罪大部分用户。

 3、是否要提供关闭功能?
必须的。还要在cookie中记录下来,用户再次来到这个页面时不要再次出现。

4、是否需要在一段时间后自动关闭?
其实不需要。因为用户阅读广告所需时间的个体差异很大,我们不能为用户统一设置这个时间的长度。第三点已经说的很清楚,提供关闭功能,把控制权交与用户。当没有读完广告,被强制关闭,也是另用户反感的。
下图是最近一次我们检测用户主动关闭广告的时间,验证了我们的设想。图中x轴表示时间,y轴表示经过对应时间后关闭广告的用户数。

点击调研图如果某些特殊情况下需要自动关闭,可以考虑在广告上显示倒计时,让用户预知还有几秒会自动关闭广告。

5、被关闭后,是否要提供重新展开功能?
常规交互原则:操作可撤销,状态可恢复。
提供重新展开功能可以给部分用户提供在完成主任务后再点回来看看的机会。关闭和重新展开都可以配合动画,以增强页面变动的平滑度。交互方式供参考:
重新展开的方式

 

 

真的,我猜你也会喜欢的:
    共有13 条评论 添砖加瓦

    访客留言

  1. :grin: 广告好啊,广告的多寡体现了网站的价值。让广告来的更强烈一些吧 :!:

  2. 小图和大图要传达的信息一样。。为什么还要大小图切换呢?为此增加了展开收起按钮,增加了页面复杂度,利弊哪个大呢?个人拙见 ;-)

  3. ;-) 个人比较反感此类广告,感觉没有必要做成全屏的,如果这样不如做成专题,广告200px感觉足矣,太大的话比较影响网站以下的内容区,个人拙见~

  4. :| 这个广告可以营造出盛世的感觉,我很喜欢。当然,仅限于用在茶坊自己的大型活动的时候,如果KFS弹出这么大一个广告,我会很烦躁。

  5. 好的广告也可以给网站增色哦。 :!: 大家别那么反对广告啦。

  6. 全屏弹出广告有种给人惊喜的感觉,频率确实以少为好,关键还是要看活动的内容,如果内容不吸引人,弹出就会立马给关掉,反之好的活动即使已经收起后还会再点击展开。
    所以,做好广告的界面后还是把内容的审核权交给用户吧,拒绝强加!

  7. 好看、有创意的全屏弹出还是很赏心悦目的。。 :|

  8. 有道理!
    强迫客户的广告,确实令客户头疼!!就像王牌一样!~希望可以改进!!

  9. @麻小烦:你在说这个广告好看是吧?

  10. 其实有点反感这种广告~

  11. [...] 什么屏位最恰当? 是否可以遮挡内容? 是否要提供关闭功能? 是否需要在一段时间后自动关闭? 被关闭后,是否要提供重新展开功能? 这些问题都是需要考虑到的,下面是UCD社区的一篇文章,放到这里做个引子,有想法和建议的可以就广告设计这一话题展开讨论。 http://www.365ucd.com/archives/525.html [...]

  12. 全屏的话给用户视觉冲击非常大

添砖加瓦




icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif