【编者按】本文作者为 Wes McDowell,主要介绍通过四个步骤实现层级清晰的导航栏,进而提高网站的转化率。文章系国内 ITOM 管理平台 OneAPM 编译呈现。

精心规划的导航策略可以成就一个网站,反之,则可能毁了一个。规划得好,网站访客就会顺着你安排的路径走下去,要么购买你的商品、成为你的潜在客户,要么填完网站咨询表单。

规划得不好,访客们就会在网站上随意游荡。他们有可能达成你的目的,也可能不会。何必冒险呢?

出色的用户体验是不应该如此随意地对待客户转化问题的——我们应当手把手地指导用户,给出能吸引他们注意的、明确的提示。这样,他们才能找到自己想找的东西,同时你也能获得自己想要的东西——客户转化。

在本文中,笔者将向你介绍一个简单的、提升转化率的策略,它适用于所有网站。

只要使用得当,你交付的网站不仅美观大方,还能帮客户实现他们的商业目标。

也就是说,你是他们的大英雄。

第一步:着陆页策略

我们知道对2016年的网络营销来说,每个网站都应当配有着陆页,这是转化策略的一部分。如果你打算重新设计你的网站,这一步并不要求你删掉已有的页面,而是增加一些内容。

你需要建立一个信息齐全的页面,这个页面应当囊括了刺激转化所需的所有内容。着陆页的数量不定,取决于具体的业务和目标。为了简便,我们用私人作品网站为例。

假设你提供网页设计和商标设计两种服务,那么在你的作品网站上,除了简单的作品集页面,还应当建立两个全新的着陆页——每一个着陆页对应一种业务。在各个着陆页上,你可以放上重点作品、有说服力的销售文案、服务特点列表、客户推荐信、以及清晰的行为召唤(CTA)按钮。

着陆页存在的原因是:客户无需在不同页面之间来回切换,而可以在一个页面上看到所有信息。如此一来,你的销售漏斗将更加成功,同时,因为省去了切换环节,客户也不会再半途放弃。

第二步:重点放在可以“生利”的页面

除了着陆页以外,是否还需要一些别的页面来刺激转化?例如一个专门放客户推荐信的页面?或者是其他服务项目的介绍?

如果你觉得需要的话,那么你有以下几种选择:

相关链接

在着陆页的正文中插入链接,可以有效地引导客户走向预设的方向。假设你的着陆页上有一些案例分析,那么可以在案例的下方加入相关链接,引导客户前往查看更多案例。

精简的标题导航栏

另一个方案是,做一个精简的标题导航栏,指向两三个最常用的页面。还是以作品网站为例,你可以把那两个着陆页都放到标题导航栏里,这样访客就可以在不同服务之间来回切换。

理想状态下,标题栏应当是“静止的”,即使用户滚动页面,标题栏仍会保持原位。

第三步:弱化其它内容

你听说过“选择疲劳”吗?它的意思是,当人们面临太多选择时,往往更不可能采取任何行动。有个著名的果酱试验阐释了这一概念。

研究人员在一家食品店的小货架上放了五种果酱。路过的人们会停下来看一眼,其中大部分人会购买一种果酱。之后,研究人员不断增加果酱的品种,直至三十种之多。人们还是会停下看看,折服于如此之多的选择,然后就走开了。

我们不想这种情况出现在网站上。如果导航栏有太多的选择,访客们就没有一条清晰的路径,于是干脆离开。我们可以这样解决这个问题:

所有其它页面的链接都不应出现在主要选项中。 我们可以把它们放在次级导航中。

你可以随意处理次级导航。既可以把它们放在不那么重要的位置,(例如页脚上方,)或者把它们放在一个会自动隐藏的侧边栏菜单中,访客可以点击菜单按钮来访问。

是的,我知道这个问题是用户体验专家们争论的焦点。有很多人非常讨厌隐藏式导航,认为它为用户的使用创造了一个障碍。但是请记住:你的着陆页以及主要的导航项,应当足以刺激转化了。次级页面只是为那些想要寻找它们的访客而准备的。

消除了那些不重要的选项,(或者至少弱化了它们),访客们将会拥有一条更为清晰的路径。从任何角度来说,这都是不错的用户体验。

第四步:设置你的CTA(行为召唤)按钮

清晰、明确的CTA代表着网站的所有目的。

还是以作品网站为例,假设你的最终目标是让潜在客户填写一份表格,定下一个咨询时间。一旦想清楚了这一点,你一定会想把这个链接放在最显眼的地方。

除了放在着陆页的正文位置,笔者建议还可以在标题导航栏再放一个。

但是,为了使它有别于其他导航选项,你可以把它做成一个按钮。这样更具视觉冲击。如果它的颜色是亮丽的流行色系,那突出效果将更佳。

整体效果

一旦完成了上述步骤,你就完成了层次清晰的导航设计,你的导航就会变得非常有层级:

  1. 最重要的:CTA按钮
  2. 第二重要的:主导航栏选项
  3. 不太重要的:隐藏的或弱化的次级导航选项

一旦建立了这样的层级关系,由于突出了CTA,并且辅以其他的主要导航选项,网站的转化率将会全面提升。

其他的那些对于转化帮助不大的元素都可以隐藏起来,以免访客分心。

总结

作为一名网页设计师,我们的首要任务就是帮助客户最大化他们的营销工具——网站——可能带来的优势。当我们的网站拥有一条明晰的路径,直通更高的转化率,就能够促成客户的成功。这种附加价值往往会让我们从其他设计师中脱颖而出,进而找到更优质、愿意投入更多经费的客户。

网站的美观固然重要,但毕竟,能带来更高的转化率,才是决胜的大必杀。

本文转自 OneAPM 官方博客

原文地址:https://www.sitepoint.com/how-to-boost-conversions-with-prioritized-navigation/

四个步骤实现层级清晰的导航栏相关推荐

  1. 微信小程序从零开始开发步骤(三)底部导航栏

    上一章节,我们分享了如何创建一个新的页面和设置页面的标题,这一章我们来聊聊底部导航栏是如何实现的.即点击底部的导航,会实现不同对应页面之间的切换. 我们先来看个我们要实现的底部导航栏的效果图:(三个导 ...

  2. C# 导航栏无限层级树

    #region 获取导航栏方法-无限层级         /// <summary>         /// 获取导航栏方法-无限层级         /// </summary&g ...

  3. iOS导航栏标题错乱的解决方法

    一般隐藏和显示导航栏,只要在基类如下写就好: -(BOOL)needHiddenNavigationBar:(UIViewController *)vc{BOOL isHidden = NO;if ( ...

  4. bootstrap4--导航及导航栏的创建

    目录 导航创建 面包屑导航创建 导航栏创建 导航创建 创建一个简单的导航方式如下: ●水平导航:<ul>元素上添加.nav类(创建导航必须基础类),每个<li>选项上添加.na ...

  5. uniapp实战项目 (仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件

    实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...

  6. 学完css,做了一个csdn导航栏(一步一步做csdn导航栏,内容满满)

    学完css,做了一个csdn导航栏,内容满满 步骤 1.导航栏框架 2.导航栏左边部分 3.导航栏中间部分 4.导航栏右边部分 5.搜索框聚焦和用户头像简介信息展示 知识点 完整代码 番外:本来打算做 ...

  7. 【最全IDEA个性化教程】idea设置主题+恢复主题默认设置+设置选中代码颜色+关键字颜色+设置字体大小、样式、颜色+设置背景颜色、图片+设置导航栏背景颜色+设置控制台字体样式及背景+常用快捷键)

    目录 下载设置主题样式+恢复主题默认设置 1 个性化代码段 1.1设置颜色 设置光标颜色 自定义图片做背景 修改代码段的颜色和背景颜色 选中代码块颜色修改,修改括号颜色 1.2 设置字体大小.格式 1 ...

  8. 四个步骤在CRM系统中设置游戏化机制

    长期高强度的单一工作会让销售人员逐渐失去对工作的兴趣,导致销售状态缺少动力和激情,工作开展愈加困难.不少企业通过CRM销售管理系统设置游戏化竞赛,调动销售人员的工作积极性.那么,如何在CRM系统中设置 ...

  9. 熊啸锋:精准营销及推广的四个步骤,倍增你的利润

    ​哈喽,我是熊啸锋老师!今天分享的主题是精准营销及推广的四个步骤. 作为营销人,企业老板,项目负责人,市场开发人员等,你会经常面临,如何开发客户?如何获得大量的潜在客户名单?等很多的问题. 还经常有人 ...

最新文章

  1. SAP RETAIL 初阶之使用事务代码WRFMATCOPY创建商品主数据
  2. Directory lookup for the file xxx.mdf failed with the operating system error 2
  3. CF1097D Makoto and a Blackboard(期望)
  4. The Annotated Transformer
  5. 在ubuntu14.04 64位中使用jd-gui
  6. 逻辑数据库读取bseg
  7. N小时改变一次url时间戳的方法
  8. Vulhub 靶场下载使用
  9. 本地项目推送到码云私有仓库
  10. linux系统硬盘数量,Linux ext4文件系统划分磁盘inode数量
  11. Python项目实践:绘制七段数码管
  12. oracle clob 粘贴,使用Oracle SQL Developer将CLOB导出到文本文件
  13. python统计图像灰度直方图_python 对一幅灰度图像进行直方图均衡化
  14. swagger注解的使用
  15. Quartz定时任务不定时执行
  16. 飞鸽传书2007绿色版该消息称
  17. 解决在onedrive里无法打开onenote笔记本的问题
  18. CannotGetJdbcConnectionException:Failed to obtain JDBC Connection
  19. 线上点餐APP开发基本功能
  20. 【OBS】OBS Studio 的安装、参数设置和录屏、摄像头使用教程

热门文章

  1. XML中CDATA及其字符实体的使用
  2. 还有人不懂分布式锁的实现就把这篇文章丢给他
  3. Service Mesh是大方向,那Database Mesh呢?
  4. NetScaler的部署实验之二NetScaler的传输环路值的设定
  5. 自动化测试基础篇--Selenium框架设计(POM)
  6. 【133天】尚学堂高淇Java300集视频精华笔记(71-72)
  7. HBase概念学习(八)开发一个类twitter系统之表设计
  8. Gulp 自动化的项目构建工具
  9. Open Cascade DataExchange DXF
  10. 看菲菲详解如何快速获取linux命令帮助