规划成功网站的5个步骤

null

时钟读到凌晨1:30,你只想上床睡觉。你是居家办公,坐在你的电脑前,绘制形状,编辑过滤器和试验排版,但设计并没有结合在一起。你向右移动一个方框。你把它移回去。您已经建立了创建美观且用户友好的网站的职业生涯,那么为什么设计始终是一场斗争?

这是一个问题,大多数人,如果不是我们所有人在我们的职业生涯中多次遭遇过。我们称之为创意块。其中存在问题。因为制作人们会发现易于使用的网站 - 鼓励人们转换的网站 - 不是创造力。这是关于计划。和研究。并将最终用户置于设计之前。

在我真正开始理解流程的重要性之前,我是一名网页设计师和前端开发人员已有好几年了。我看过网页设计师 - 他们是自由职业者,为大型代理商工作,还是介于两者之间 - 一遍又一遍地遵循相同的一般事件序列。他们有一些启动会议,然后回到他们的计算机并进行网站设计。

尽管这种方法很受欢迎,但它从未真正起作用。即使您设法创建视觉上引人注目的东西,也有100%保证您错失了与用户建立联系和转换的机会。通过实施在网站上工作时通知决策的实际流程,您可以创建卓越的产品,提升用户体验并增加转化率。下次你为了从你的创意天才头脑中召唤出漂亮的网页设计而将头撞在墙上时,请尝试按照此处列出的五个关键步骤进行操作。

01.站点地图和用户流程

Steve Jobs’ famous opinion on the definition of design

史蒂夫乔布斯关于设计定义的着名观点

你有一个开球会议。您进行了行业研究,完成了竞争对手分析并开发了用户角色。您已准备好开始使用,但有两个重要问题您应该始终首先询问客户。

首先,要求他们确定网站最重要的一到三个优先事项。这样可以很好地了解对他们来说重要的事情。它要求他们开始考虑优先事项,这有助于发展和保持关注。它还为讨论这些优先级意味着什么以及调整它们是否有意义打开了大门。

你应该问的第二件事是:一个成功的网站对你来说是什么样的?当您开始规划用户流和转换目标时,这个问题非常重要。获得该信息后,您就可以开始为该网站创建计划:站点地图。

网站的计划

站点地图是将包含在网站上的内容的第一个可视化,以及如何组织它。这是迈向以用户为中心,以内容为中心的产品的第一步。有两种观点需要研究。首先,看看你工作的公司的目标。他们想要实现什么目标?接下来,确定他们的客户正在寻找什么。这两种观点的结合最终将意味着成功。

开始考虑需要提供的信息类型,以适应最终用户和公司的目标。将用户目标放在第一位 - 提醒公司,对用户来说最好的东西对他们的业务来说也是最好的。

例如,如果ABC公司发明了一项新技术,那么优先考虑技术所解决的用户问题的信息比引导ABC公司的历史和任务声明更有意义。您可能还希望将联系信息和行业特定博客作为资源包含在用户中。突然间,您有了站点地图的开头。

浏览信息

当您开始回答有关整个网站的一般信息层次的问题时,您还将开始预测用户如何浏览该信息。这是您的用户流程。

通过在项目开始时创建理论用户流,您可以开始了解信息部分如何交互以创建理想的用户体验。谁是你的用户?信息层次是否适用于各种用例?用户是否能够自然地通过网站查找与他们相关的内容?

在空白页面的顶部,标识您的用户角色。在每个人的下方,开始思考他们如何在网站上移动。考虑他们可能正在寻找什么,以及一部分信息如何引导他们通过网站到下一个。

02.客户获取渠道

Userflow patterns.com is a collection of short user-flow videos for reference and inspiration

Userflow Patterns.com是一组简短的用户流视频,供参考和启发

此时,您已经开始了解用户将通过网站进行的旅程,并且可能已经开始考虑如何引导他们进行转换。这是您的客户获取渠道。

使用您在第一步中创建的用户流程图,考虑如何将用户引导通过站点到达转换点。要创建客户获取渠道,请将自己置于用户的角度。使用特定的角色而不是广泛的受众,并将您的渠道定位到特定的人。他们的目标是什么?你怎么能帮助他们实现这些目标?

想象一下,我们正在为一家鞋店创建一个网站。如果用户以购买一双鞋的目的到达我们的网站,我们的目标是尽可能让他们这样做。在线鞋店应该通过购物流程快速有效地汇集用户以结账。

制定计划以吸引具有相关内容的用户,让他们通过引人注目的号召性用语进行转换,简化转换过程并定期跟进。创建焦点以帮助指导用户。开发客户获取渠道是使网站成为商业工具而不仅仅是漂亮图片的原因。不驱动结果的设计不是好设计。

03.内容开发

The five phases of a user’s journey to conversion

用户转化之旅的五个阶段

内容是网站的核心。这就是你与人联系的方式。这就是你的销售方式。这就是你设计的基础。设计一个没有内容的网站就像试图拼凑一个没有任何拼图的拼图游戏;你只是抓住附近的随机物品(叉子,灯泡,也许是咖啡杯)并试图让它们融合在一起。

了解设计是客户的有趣部分。内容是困难的部分。很大程度上正因为如此,它也是能够阻碍项目的第一件事。这些是在设计开始之前应该开发完整版本的网站内容的原因。

那么我们如何生成内容呢?最好的方法是回顾一下您的站点地图。您可以在此处确定要向用户显示的内容类型。使用此处概述的页面或部分创建空白副本文档。对于每个部分,包括页面标题,内容的目标,您要定位的关键字,标题和正文。包括您期望在那里生活的内容类型以及您希望如何将其分解以便于阅读和精神消化。

请记住,网站内容的理想阅读水平非常低。主页内容不应超过6年级阅读水平(11-12岁左右),子页面内容应该在8年级(13-14岁)左右。百万美元的单词在这里不赚取积分,他们失去了用户。您可以使用Flesch-Kincaid可读性公式测试您的副本,以确保用户能够轻松快速理解。

简化和简化

另一种让您的副本更易于阅读的好方法是易于理解的内容。使用较小的段落并包含图标和图片来分解您的内容会使您的网站更具可读性。而不是呈现需要注意力承诺的大量文本,而不是来自用户,简化内容并使其易于浏览。

完成写作后,请仔细检查每一个不必要的单词或短语,以获得最佳清晰度。完成此过程后,请返回并重新执行此操作 - 您可以删除更多内容。 The Little Prince(一本每个人都应该阅读的儿童读物)的作者,出色的Antoine de Saint Exupery说:“似乎没有更多的东西可以达到完美,但是没有什么可以消除的。”

创建网站内容的最后一个也是最重要的提示是:如果您不是撰稿人,请雇用一个。这是他们每天都在做的事情。他们可以做得更好,更快。他们可以创建针对搜索引擎优化的副本,参与和语法正确。

04.线框

A simple template for a content document. It’s an easy way to start developing content based on your sitemap

内容文档的简单模板。这是一种基于站点地图开始开发内容的简便方法

现在内容已经完成,是时候开始考虑布局了。站点地图是网站整体架构的计划,用于通知内容;线框代表该内容的架构。

线框不应包含任何颜色,字体选择或设计元素。它是一种从结构角度组织内容的工具,以确保以对用户有意义的方式呈现内容。线框不再是像素完美的页面布局渲染。他们将采用更细粒度的方法来实现您迄今为止所构建的计划。在此步骤中,您将发现如何组织信息,并从视觉角度巩固层次结构。

应该以什么顺序呈现内容?移动设备如何呈现层次结构?桌面?中间还是上面?响应式网页设计必须使线框与我们工艺的每一步都变得不那么具体,而且更加灵活。

创建层次结构

如何生成线框完全取决于您。有很多很好的线框图和原型设计工具,但简单的笔和纸也可以工作。线框图的目标是使用我们通过前面步骤做出的决定来建立内容呈现的顺序。

如果您查看已创建的内容,则应该是一个直观的过程。您的内容是否存在明确的层次结构?查看标题,段落,标注和侧边栏。总结一下应该出现什么类型的信息,以及重点应该落在哪里。问:这个信息的要点是什么?

跳过线框图很容易。它们通常对客户来说并不意味着很多,而且看起来像是多余的努力 - 尤其是在如此努力地完成其他所有步骤之后。在创建设计元素时,难道不能实现线框的目标吗?简而言之,没有。线框是从内容到设计的桥梁。对于网站的整体成功而言,它们与流程中的其他步骤同样重要。

05.设计

Designs need to be optimised to display content as clearly as possible across devices

需要对设计进行优化,以便尽可能清晰地跨设备显示内容

现在是有趣的部分。您一直在为之工作的部分,而您的客户一直在等待。你准备好了。您正在进入设计阶段,并根据明智的决策制定攻击计划,而不仅仅是审美偏好。您知道需要放置哪些元素才能获得最大效果。您现在准备设计转换机!

但是你如何设计响应式网络?每个设计师都有不同的工作流程,你必须找到适合自己的东西。尽管如此,仍有一些方法和工具可以有效且易于全面采用。

响应方法

如果您的网站可以在移动设备上运行,那么您应该先设计移动设备。这仅仅意味着从移动布局开始并从那里开始构建。这样做要比尝试将元素堆叠到屏幕上要容易得多,屏幕尺寸只是它们设计尺寸的一小部分。

您还应该使用模式库。这是您界面中的一系列设计模式。您可以在图书馆和设计之间来回移动;在设计中添加新元素时,将其添加到模式库中,反之亦然。使用这种方法,无论任何变量,按钮都是按钮;代码和它看起来的方式。

这将在细节上建立一致性,这将对公司的专业水平产生显着影响。一致性可建立信任并提高可用性。还有效率优势,因为我们可以轻松调整元素和更新样式。

行动计划

MailChimp’s pattern library is viewable online at ux.mailchimp.com/patterns

MailChimp的模式库可在ux.mailchimp.com/patterns上在线查看

按照本指南,您将采用完整的行动计划逐步到达。每个步骤都以前面的步骤为依据。整个过程的重点是尽可能以最佳方式提供最有用和最相关的内容。

您可能会发现需要在流程期间或网站启动后重新访问部分计划。德怀特·艾森豪威尔说:“在准备战斗时,我总是发现计划毫无用处,但计划是不可或缺的。”正是这种情绪正好总结了这一过程的重要性 - 你正在计划取得成功。你猜不出来。您已经建立了一个基础,您可以在其上创建一个有效的网站。

本文最初发表于网络杂志问题286。在这里购买。

相关文章:



翻译字数超限