你可能有很好的内容要和你的网站访问者分享,但是如果你不帮助他们找到它,那么它也可能不在那里。本文将帮助您规划网站布局、架构、导航和措辞。目的是让你的网站更有趣,更少混乱,进而更值得点击。
“值得点击” 是什么意思?除了一般的 “值得点击和查看/阅读” 之外,这意味着用户能够找到你想要他们找到的信息,并采取你想要他们采取的行动。
在开始制作网站甚至打开photoshop开始设计之前,请停止。问问自己 “这个网站应该完成什么?”
例如:
您是否正在尝试在电子商务商店中增加产品的销量?您是否正在尝试让人们预约?您是否正在尝试吸引更多读者访问您的博客?如果三个不同的企业主具有上述示例目标,则他们应该创建三种截然不同的网站。他们为网站选择的布局,内容,体系结构,甚至技术都应该有所不同。
在你完成了你的总体目标之后,更深入地挖掘更多的问题,比如下面的问题。不要-我再说一遍,不要-开始寻找Wordpress主题或计划线框,直到您头脑风暴了这些重要问题的答案。请注意以下不同的示例答案如何极大地改变网站的设计:
示例问题1: 如果我的访问者在访问我的网站时能做一件事,而且只有一件事,我想让他们做的一件事是什么?
来自 “John Doe” 的示例答案:
我希望他们在一个大目录中找到一种产品,然后购买该产品。
与 “无名氏” 的答案相比:
我希望人们预约来看我。一旦他们进入我的办公室,这笔交易就可以了。
示例问题2: 我该如何帮助我的访客做一件事?
John Doe的回答:
因为我的商店有300产品,我将把它们分成不同的类别,并允许用户通过电子商务过滤器搜索深入他们正在寻找的产品类型。我将在一个非常明显的地方有一个搜索栏。我将把购物车放在一个容易找到的地方。我将在主页上介绍产品类别。我将不太优先考虑谈论我的公司的网站页面,同时不忽视他们。与无名氏的回答:
我的主页将有一个明确的行动号召 “超越折叠” 我会要求人们在我网站的每一页上填写一份预订表格,如果没有弹出窗口或烦人的元素会妨碍他们或阻止他们留在我的网站上,我会确保我的预订表格不会太长,因此,人们不会灰心地填写它。我将使用写得很好的页面来详细描述我的服务,并解释人们可能马上就有的常见问题。这样,我可以删除任何不填写我的预订表格的原因。我将有一个照片库,上面有我服务的前后照片,这样人们就会看到,通过联系我,他们可以得到相同的结果。示例问题3: 当我的访问者登陆我的网站时,我该如何让他们知道他们在哪里,我做什么,以及他们为什么应该关心?
John Doe的回答:
我的徽标下方将有一个标语,确切地说明了我所售的商品。它不会很可爱,不会使用双关语或包含仅对我有意义的单词。它会如此具体,以至于它甚至会把不想要我拥有的用户赶走。我的导航标签将按产品类别名称进行组织,这样人们就会知道他们会在我的电子商店中找到什么。与无名氏的回答:
我将在主页顶部放置一个基于动词的介绍性标题,然后是一个简短的预告片,说明人们填写我的预订表将得到什么。我将使用强大的摄影和视频来证明我的信誉,并展示我可以做些什么来帮助人们。示例问题4: 我可以用一句话来回答上面的问题吗?
John Doe的回答:
“小部件商店-X小部件、Y小部件和Z小部件,免费发货!”
与无名氏的回答:
“现在就预订,让X完全免费,我就把Y扔进去!
空间有限,但您不会后悔进行此预订,因为您会得到 _______,这将通过改善 ____________ 来改变您的生活。”
当然,以上只是样本,而不是过于简化的。在开始网站设计之前,还有几个问题要问。要真正实现网站目标,你还需要专注于其他事情,比如你的文案。这就引出了我们的下一个观点。
标题对于网站的成功至关重要。确保您在标题,导航标签甚至身体副本中足够具体的最佳方法是问自己,您的单词在另一种情况下是否可能意味着其他含义。如果可以的话,那么您可能太含糊了。
继续这个想法,问问自己: “一个15岁的孩子会明白我做什么或卖什么吗?如果有人登陆我的网站,对我的行业一无所知,如果我只用 “创新” 、 “perse” 、 “战略” 或 “工业” 这样的词,他们会 “得到它” 吗?“
“工业” 可以指无数的公司和行业。“创新” 和 “战略” 是过度使用的炒作词,不再有任何意义。Twitter具有创新性,这种天然尿布软膏的创造者也是如此,但它们却大不相同。所有优秀的公司都有战略,所以它们都是 “战略性的”。你明白了。
看看一个现实生活中的例子,看看这个公司是如何在谷歌信息卡上描述的,从维基百科中摘录的:
如果您以前从未听说过这家公司,那么此描述将无法帮助您了解他们的工作。你只会学到,他们是爱尔兰人,他们在全球范围内运作,有一次,他们与演习有关。他们是钻探还是出售钻头尚不清楚。他们还这样做吗?我们不知道。但是,嘿,我们确实知道它们是 “工业的” 和 “变态的”。
去他们的网站也没什么帮助。你首先看到的是一个带有标题的标志,上面写着 “一个世纪的创新”。
这种情况很快就消失了,但你仍然不知道这家公司做什么,也不知道为什么你应该关心,更不用说还有谁应该关心。
“创新” 标题消失后,用户看到一个男人在大城市里拿着平板电脑的照片。这占据了主页上 “折叠上方” 区域的很大一部分。
他们现在是一家科技公司吗?
我们仍然不知道这家公司是做什么的。
顶部导航显示 “发现我们” 、 “加入我们” 、 “投资者” 、 “产品”。
嗯... “产品” 下有什么?
“俱乐部车” 、 “英格索兰” 、 “热王” 和 “特灵”
叹息。好的。让我们试着消化一下。
“俱乐部车” -- 这是汽车服务吗?还是你卖车?
“英格索兰” -- 这不是公司名称吗?还是现在的产品名称?
“热王” -- 听起来像床垫取暖器。
“特灵” -- 这是一个拼写错误。对吗?
让我们离开导航菜单。让我们看看那张大照片下面写的是什么。
“我们如何
舒适 | 建造 | 交付 | 滚动”
英格索兰,你现在真的失去了我们。你做什么舒服?我们现在回到床垫上了吗?你建造什么?你送什么,送给谁?你喜欢UpS吗?滚动是怎么回事?
这里的标签没用。因此,让我们尝试将鼠标悬停在每个 “我们如何” 菜单项上。
我们只是得到徽标。我们已经完成了这个网站。该离开了。
在这个例子中,我们看到新写的标签、实际标题和产品照片可能是使这个网页与未学习的用户相关的开始,更不用说有趣了。该网站可能是为内部员工和管理层提供的,而不是新客户。
然而,为了避免这变成用户界面 (UI) 文章,我们将在这里停止,回到我们的原点:
非常清楚你用你的话卖什么,而不仅仅是你的照片或设计概念。不要依赖你的品牌知名度为用户做繁重的工作。他们可能从未听说过你。
如果您的产品或服务正在成为一种趋势,或者是现有市场中的新参与者,那么毫不含糊地写作就变得极为重要。比较两家销售几乎相同产品的不同公司的主页。一个毫不怀疑他们卖什么,而另一个让你认为他们在卖 “优雅”:
你更倾向于从哪一个购买?解释其产品并告诉您好处的产品,还是使用 “优雅” 一词并试图出售带有向日葵图片的室内设计的产品?
我能想到的以转换为重点的优秀文案写作的最好例子之一是在23andme网站上。
他们的许多标题都以动词开头,要求用户 “做” 某事。每个页面都有一个带有明显按钮的号召性用语,要求人们 “立即订购”,这也是一个面向动作的动词。
这减少了用户的被动。他们知道网站的意图是什么,公司特别希望他们做什么。甚至网站的布局也吸引了他们的行动号召。(23andme网站上的其余信息是外围的,但是如果用户需要的话,它就在那里。)毫无疑问,这个网站的主要目标是让人们订购DNA检测试剂盒。
这似乎是显而易见的,但你会惊讶于公司在他们的措辞和设计中忘记他们的网站目标是多么容易,从而让用户没有一个 “目标” 来瞄准,也没有一个 “路线图” 来遵循。
除此之外,23andme主页在这一概念方面处于领先地位,并且还遵循我们上面概述的所有 “规则”。见下面截图中的红色方框,表示动词用法:
请注意,网站的顶部标题中显示了一条标语,确切地描述了该公司的业务和报价 (请参见上面的规则2)。介绍性标题向用户解释了其中的内容。这个网站没有继续谈论这家公司有多 “创新”。它侧重于对用户的好处。通过要求人们做一件简单的事情-立即订购,它开始了追逐。然后它不断给出更多的理由去做那一件事,比如:
另一个使用动词的好地方是在导航菜单中。许多提供有关导航菜单建议的文章都会告诉您不要偏离web命名约定。这是真的,但是如果你保持明确和明显,你仍然可以利用面向动词的导航菜单。
最早启发我这样做的网站是biblesforamerica.org。通过一次采访,我了解到这个网站经历了一年多的规划和头脑风暴。对我来说,最令人着迷的项目之一是主导航菜单使用动词的方式,使每个可单击的项目成为行动号召:
这里要注意的重要一点是,这个导航菜单使用两行。第二行进一步解释了用户在每个动词下可以找到的内容。在这种情况下,如果没有第二行上的附加单词,动词菜单将无法工作。
例如,如果动词 “访问” 是一个独立的链接,则用户将不得不问 “访问?你想让我去你的办公室看看?”但是第二行清楚地表明,“访问” 的地方是博客。
有时,没有第二行解释的单字动词链接可能会起作用,但是如果旁边的动词差异不够,或者过于模棱两可,则可能会造成混淆:
在这里,当使用动词 “访问” 时,毫无疑问,该站点正在要求用户访问博物馆。众所周知,博物馆是吸引面对面参观的教育场所。
但是,菜单在旁边使用动词 “explore” 时会感到困惑,而没有第二行解释。“探索博物馆?这不是我参观博物馆的原因吗?您是要我们做两次同样的事情吗?”用户需要进一步调查才能知道 “探索” 指的是什么,等等。
本节的另一个标题可以是 “为了时髦而尽量不要太时髦”。换句话说,除非你真的知道自己在做什么,否则坚持传统的网站布局。如果您尚未通过用户界面设计课程,那么最安全的选择就是遵循规范,因为规范已被证明对用户有效。
不要通过将导航菜单放在主页的底部或使菜单在某些页面上消失来尝试与众不同。不要尝试将徽标放在右上角而不是左上角。如果您对排版了解不足,请不要删除侧边栏 (每条线路超过字符限制会导致焦点损失)。简而言之: 不要走出传统网页设计的 “安全区”。
记住,你的布局不应该取悦你。它应该使您的用户尽可能容易地找到他们想要的东西,并采取您希望他们采取的行动。用户没有太多的精力、注意力或时间来学习如何使用你的新 “时尚” 布局。
一个让我非常困惑的网站是kgms.ca。在你说出右边的方框是网站的主导航菜单,然后点击它的一个项目后,你会被滚动到一个看起来像一页网站的新部分; 但是,事实上,这是一个全新的页面上的新URL两个子文件夹深。
在此级别上,您会在顶部获得另一个菜单,但这不是顶级菜单; 它是子菜单。如果单击位于顶层菜单位置的子菜单之一,则会进入新页面。
如果你想从这里进入主页,你不能,至少不能用任何可见的 “主页” 按钮或链接。左上角的徽标已经消失,因此作为到达主页的 “第二个猜测” 是不可能的。
您唯一可以尝试从这里进入主页的方法就是向上或向下滚动。如果向上滚动,您将被带到网站上看起来像主页的部分,但事实并非如此。该URL显然是子级别页面。如果单击侧面菜单上的另一个链接,则会出现出现文本的新URL。那很好,但是,在没有通知的情况下,一张大照片从左边滑了进来,你不知道你的文字去了哪里。
如果您对上述内容感到困惑,那么,现在您知道我的感受了。
关键是,不要做这样的事情。是的,你可能已经展示了你的能力,使一个网站 “摇摆” 和 “滑动” 很多,当然,美学是好的。但是问问你自己: “'好' 设计和过度使用 '酷' 技术值得所有这些困惑吗?”
你有时会转向 “跳出框框” 吗?是的,当然,但是首先知道你在做什么。另外,请记住您网站的目标 (上面的规则 #1)。例如,新的Moz.com网站是新的和时髦的,但并不令人困惑。他们网站上的每个页面都引入了新的布局,因为它有助于突出内容。但是顶部的导航仍然存在,可以帮助用户轻松地从一个页面到另一个页面 (博客区域除外,有时会迫使用户使用浏览器的 “后退” 按钮)。
当我与那些建议 (甚至坚持) 想法的客户一起工作时,我感到非常困惑,只是因为他们看到竞争对手这样做,而不是因为它是基于任何研究或电子营销原则。你的竞争对手可能对设计或什么能获得更多点击一无所知,很可能一直在 “即兴发挥”。
现在,我们没有违反上面的第4条规则。这不是指webconventions。如果您的竞争对手或大品牌遵循网络惯例,并且对他们有效,那么是的,您也应该这样做。但这不是 “复制”。实际上,您将遵循既定原则。
你不应该做的是复制一个布局或功能,只是因为你在另一个网站上看到它,而不了解它是如何工作的,为什么它被放置在那里,以及有什么其他解决方案可以满足你的网站的目标 (见上面的规则 #1)。
例如,不要试图像星巴克那样使用导航菜单,仅仅因为你认为星巴克是一家大公司,因此,必须知道他们在做什么。您是否看到他们当前的导航菜单有什么问题?
这个导航菜单使用两行,除了第二行试图挤进三个单独的 “子标题”,创建单词,就好像它们是一个句子的一部分一样。这不是你使用两行菜单的方式!
例如,标签 “咖啡屋” 本身就令人困惑,因为该网站内显然没有咖啡屋 (除非星巴克找到了一种虚拟提供咖啡的方法)。用户必须依靠导航标签中的第二行来理解 “咖啡屋” 指的是什么。这很好,除了在星巴克的情况下,用户会得到什么?“音乐wi-fi社区。”
哦,有趣。星巴克有一个 “音乐wi-fi社区”。那是我们在他们网站上通过互联网谈论音乐的地方吗?还是某种新的社交网络?
不,两者都不是。如果您阅读其他菜单标签,您会发现他们正在尝试列出三个不同的单词,并且做得很差。如果将鼠标悬停在标签上,您将看到一个 “巨型菜单”,该菜单将其站点的不同子区域分开。通常,mega菜单可以很好地帮助大型站点在一个集中位置为用户组织其内容。
但是,此大型菜单需要一些简单的重新标记和可能的重新组织。这些区域都没有使用 “音乐” 一词,就像在第二行标签中一样。这些小节中的任何一个与 “咖啡馆” 一词有何关系?他们是指商店里发生的事情吗?但是,如果是这样,为什么 “在线社区” 在这里?为什么他们在本节中宣传移动应用程序?
这个网站可能已经超出了它的初衷和目标。这似乎是一种试图通过内容更新来延长其虚拟寿命的尝试,这应该需要对网站进行大修。如果您现在复制这个 “大品牌”,那么您的网络策略将落后于几年前的好主意。最好聘请真正的内容架构师,电子营销人员和UI设计师来坚持当今的现状。
如果你想让你的网站更值得点击,你需要:
你还有什么要补充的吗?你如何让你自己的网站更值得点击?讲你的故事!