想要提高网页转换率?试试这16个UI秘诀

  优异的用户界面(user interface,UI)让用户用得顺心,从而提高转换率(conversion
rate),换言之,好的UI在使用与销售层面上形成双赢。UI设计师Jakub
Linowski列出16点改善UI的诀窍,而这份清单仍在继续累积,有兴趣的读者可以订阅他的电子报,随时获得最新的UI秘诀。

  1、单栏型式优于多栏

  单栏型式让你更能掌握自己的内容,从顶部到底部一气呵成,用故事引导读者,最终是要诱引他们「采取行动」(call to
action,下称CTA,意指下载或消费等目的);而多栏反而可能导致读者分心。

  2、不要劈头销售产品

  「略施小惠」给用户,贩卖的意图不要设计得太明显。小小的优惠或礼物,对未来的销售会带来大大的帮助。

  3、统一相似的功能,避免支离破碎的UI

  浏览网站时,我们很常看到琳琅满目的元素或特色,但它们的功能毫无二致,而相似的选项太多,只会提高让用户无所适从。倘若发现自己的网站内有以不同型式重复相同功能的状况,不妨考虑重新设计UI,把类似功能整合起来。譬如图中「Customer
Service(客服)」、「Contact Us(联系我们)」其实是一样的意思,应当保留一个选项就好。

  4、用者见证或提出销售实据

  「社会认同」(social proof)是刺激转换率很好的策略,自己再怎么天花乱坠终究只是自吹自擂,请用户见证或数字实据才有效。

  5、主要目的请反覆强调,别只提一次

  希望用户点击的链接或按钮(比如购买或下载),别只出现一次,可以考虑放在单栏网页的顶端与底部,或在多个页面呈现。

  6、清楚区别三种功能性(可点击、已点击、纯文字)元素

  可点击的元素(链接、按钮)、已点击的元素、纯文字三者彼此应该以颜色、深度或对比等各种设计技巧清楚区隔,让用户浏览网站畅行无阻。例如左图,蓝色字体是链接,黑色字体是用户点击的选项,或者是用户正在浏览的页面。

  7、突显推荐方案

  如果服务有多种选择,请把最推荐的方案强调出来,如左图就将「product X」特别放大,Y、Z 缩小。

  8、善意提醒vs. 突兀确认

  如果用户更改了某个选项,用一行文字提醒他们可以「复原」就好,无需大费周章设计「再次确认」的跳出窗口。因为多数时候用户的动作都具有意识,后者太突兀,可能让用户觉得被纠正而产生被冒犯的感觉。

  9、清楚阐述目标客群

  描绘适合使用你服务或产品的客群,可以链接到更多相似特质的人,同时也让他们感受自己的独特性。

  10、肯定,避免犹豫不决

  语气应该直接且肯定,优柔寡断是大忌,讯息中如果出现「也许」、「有趣吗?」、「想要吗?」等疑问字眼,在显示自信与强调权威上可能还有进步空间。

  11、采用强烈对比

  CTA应该与众不同。运用色调、深度、互补色等方式,将CTA跟其他网页元素区隔开来。

  12、产品的诞生地点

  说明你、你的产品或服务来自何处,就像在自我介绍一般,赋予人性化的亲切感受,而且强调产地或许也会带来品质保证的效果。

  13、表单问题愈简化愈好

  注册表单太杂,用户往往容易不耐烦而半途放弃,问题尽量少而精简。

  14、别把选项藏起来

  下拉式选单虽然不占空间,但却让选项更难被察觉。适合下拉式选单的问题是可预测性的或者人人皆很熟悉的时间(如出生日期)或地理位置,跟产品或服务有关的重要问题选项,最好并列在页面明显的位置上。

  15、连贯顺畅的页面

  不要让用户产生「已经卷完页面」而实际上根本还未看到底部的错觉。制造一种视觉型式或节奏,令用户得以顺利浏览完整个页面,才不会白费苦工。

  16、不要分散焦点

  如果你的网页唯一目的是要触发用户卷到底部时「采取行动」,那中间安插的任何链接都可能导致他们分心,甚至将他们带离你的网站,因此必须小心谨慎的安排链接数量与位置。

原文链接 :http://www.t1xy.com/download/cat-1.html

想要提高网页转换率?试试这16个UI秘诀,布布扣,bubuko.com

时间: 2024-10-21 11:00:35

想要提高网页转换率?试试这16个UI秘诀的相关文章

提高网页性能的九大技巧

第一条,DOM 的多个读操作(或多个写操作),应该放在一起.不要两个读操作之间,加入一个写操作. 第二条,如果某个样式是通过重排得到的,那么最好缓存结果.避免下一次用到的时候,浏览器又要重排. 第三条,不要一条条地改变样式,而要通过改变 class,或者 csstext 属性,一次性地改变样式. // bad var left = 10; var top = 10; el.style.left = left + "px"; el.style.top = top + "px&q

【前端开发】25种提高网页加载速度的方法和技巧

尊重原创:http://blog.csdn.net/wxzking/article/details/4089384 您希望加快网页的加载速度吗?了解如何通过缩短加载时间来改善拨号上网用户的浏览体验,在某些情形下,加载时间最多可缩短 80%.下面介绍二十五中网速方法和技巧. 一.使用良好的结构 可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显.XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的 <start> 和 <end> 标记),这意味着浏览器

【代码优化】如何提高网页加载速度

原文链接 1.减少页面请求: 从WEB运行原理上讲,IIS请求是无状态的,在服务器端一直是连接和关闭的不断进行着,如果能减少服务器请求,总的时间将会减少. 之前我下载163邮箱的登陆页面的图片时发现,它们的只用到了一个图片来完成整个页面的所有图片,当时我就纳闷了,这跟平时做的网站不一样呀.然来这样做减少浏览器的请求次数,用httpwatch你会发现请求的总时间大大减少了.同样的想法,在做css样式,JavaScript代码的时候也要做到尽可能的放在一个文件下来减少WEB请求. 2.页面压缩技术,

window.requestAnimationFrame 兼容性封装,调节重新渲染,提高网页性能

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/ // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating // requestAnimationFrame polyfill by Erik M?ller. fixes from Paul Irish and Tino Zijde

提高网页打开速度的方法

如果一次载入所有需要的JavaScript代码会造成初始网页打开速度变慢,而且很多载入的代码并不需要使用,这种无谓的性能浪费应该 避免.如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加<script>结点,并将此结点的src属性(即 外联 Javascript文件)设置为需要动态载入的JavaScript代码. 下面是一个完成这样功能的例子. (1).新建JsLoaderTest.html文件 Java代码   <html xmlns="http:

OutputCache缓存优化asp.net代码 提高网页性能

对于asp.net编写的网页来说,使用缓存是一种非常重要也是很常用的优化技术,它可以大大减轻服务器的负载压力,优化这些网页的性能,在网与使用 .NET Framework 的任何其他功能相比,适当地使用缓存可以更好地提高站点的性能.同时,在网页加速显示上也起了很大的作用. OutputCache以声明的方式控制 ASP.NET 页或页中包含的用户控件的输出缓存策略. 语法: <%@ OutputCache Duration="#ofseconds"   Location=&quo

HTTP/2 服务器推送(Server Push)教程(HTTP/2 协议的主要目的是提高网页性能,配置Nginx和Apache)

HTTP/2 协议的主要目的是提高网页性能. 头信息(header)原来是直接传输文本,现在是压缩后传输.原来是同一个 TCP 连接里面,上一个回应(response)发送完了,服务器才能发送下一个,现在可以多个回应一起发送. 服务器推送(server push)是 HTTP/2 协议里面,唯一一个需要开发者自己配置的功能.其他功能都是服务器和浏览器自动实现,不需要开发者关心. 本文详细介绍服务器推送的原理和配置方法. 一.传统的网页请求方式 下面是一个非常简单的 HTML 网页文件index.

125个提高网页可用性的优化小技巧(二)

125个提高网页可用性的优化小技巧(二) --安阳师范学院互联网+应用技术学院UI设计方向讲师 崔凯让常用功能和重要数据信息更接近用户预测用户的意图,让他们尽可能接近目标. △ 筛选出或跳至用户正在搜索的条目 △ 将用户常选项目列为默认选项△ 产品列表页上把重要数据信息展示出来很多时候用户需要像踩弹簧高跷杖一样,点击一个产品,查看信息,返回上一页,再反复操作以查看其他产品.这种设计的可用性差.应把重要信息直接放在主要页面,减少用户反复操作的次数.如果你怕这样页面会杂乱,也可以设计成鼠标悬停时显示

动静分离,提高网页访问速度

? 起源 有些人总是不带我喝咖啡,认为喝咖啡高雅,吃大蒜低俗,还好,没有俗就没有雅...我就俗了,怎么地,打我呀....哈哈 动静分离,那么什么动态的,什么是静态的呢? 访问网页的时候,我们总会发现浏览器会加载各种各样的文件,有html文件,有css样式表,有js脚本,还有图片,还有流媒体等各种文件,这些其实就是静态的文件,放在服务器上,无须动态生成的文件那么就是静态文件.那么什么是动态文件呢?例如java写的jsp文件,需要通过编译器进行编译成字节码文件,然后在java虚拟机上运行,运行之后,