数据驱动从方法到实践pdf_我从数据驱动设计方法中学到的东西

数据驱动从方法到实践pdf

by Michael Loscalzo

通过迈克尔·洛斯卡佐(Michael Loscalzo)

我从数据驱动设计方法中学到的东西 (What I learned from a data-driven design approach)

当先入为主的概念退居从度量中学到的教训时，会发生什么？ (What happens when preconceived notions take a back seat to the lessons learned from metrics?)

让我们从结尾开始... (Let’s begin at the end…)

? My blog metrics indicate that 60% of readers don’t read the full post. So, let’s take an extremely quick look at what I learned from a data-driven website redesign!

？ 我的博客指标表明60％的读者没有阅读完整的帖子。 因此，让我们快速浏览一下我从数据驱动的网站重新设计中学到的知识！

外卖1 (TAKEAWAY 1)

If presented properly, a visitor will spend more time viewing less content. Despite a decrease in the number of pages, and a reduction to the word count per page, I observed an increase in average session duration.

如果呈现正确，访问者将花费更多时间查看更少的内容。 尽管页数减少了，每页的字数减少了，但我发现平均会话持续时间有所增加。

The changes:

变化：

• Long blocks of text were reevaluated and truncated into more concise blurbs.
  重新评估了较长的文本块并将其截断为更简洁的内容。
• Consolidated site structure enabled visitors to quickly find relevant content.
  合并的站点结构使访问者可以快速找到相关内容。

外卖2 (TAKEAWAY 2)

Design patterns work! It may be tempting to break all of the rules, but the truth is, design patterns are familiar to visitors and utilize a composition that takes advantage of a viewer’s natural eye movement.

设计模式起作用！ 打破所有规则可能很诱人，但事实是，设计模式对于访客来说是熟悉的，并且利用了利用观看者自然眼动的构图。

The changes:

变化：

• The revised homepage features a z-shaped pattern (desktop), and prioritizes the most frequently viewed content. On pages with large text blocks, an f-shaped pattern (desktop) was used.

  修改后的首页具有Z形图案 (桌面)，并优先考虑了最常查看的内容。 在具有大文本块的页面上，使用了F形图案(桌面)。

• The primary navigation was revised to be more intuitive and mobile-friendly.
  修改了主要导航，使其更加直观和移动友好。

外卖3 (TAKEAWAY 3)

Remove steps from the user journey to improve conversion rate. The removal of a single step in the user journey resulted in a large increase in conversions.

从用户旅程中删除步骤，以提高转化率。 消除了用户使用过程中的一个步骤，就大大提高了转化率。

Conversions were measured by the percentage of visitors that submitted a questionnaire form.

转化是通过提交问卷调查表的访问者的百分比来衡量的。

The changes:

变化：

• Fewer steps for a visitor to reach the questionnaire form with adequate information about offerings.
  访问者以较少的步骤来访问带有足够产品信息的调查表。
• Increased prominence of the form.
  形式的突出性。
• Instead of one long form (15 questions), the form was broken into three small portions (5 questions per portion).
  代替了一个较长的表格(15个问题)，该表格分为三小部分(每部分5个问题)。

Thank you for reading this far!

感谢您阅读本文！

Below, I have provided a much more granular examination of why certain changes were made and the resulting improvements observed in key performance indicators (KPIs).

下面，我对为什么进行某些更改以及在关键绩效指标(KPI)中观察到的改进进行了更为细致的检查。

客户端 (The client)

In 1980, Carol Yilmaz and nine other parents sought an appropriate education for their gifted children. Together, they founded Long Island School for the Gifted (LISG), a private coeducational day school.

1980年，卡罗尔·耶尔马兹(Carol Yilmaz)和其他9个父母为他们的天才孩子寻求适当的教育。 他们共同创立了长岛资优学校 (LISG)，一所私立男女同校的日间学校。

The LISG mission statement:

LISG任务说明：

To provide an appropriate education for gifted children in pre-kindergarten through ninth grade, in a nurturing environment where they will be both intellectually challenged and comfortable socially, thereby providing these children with the opportunity to grow and develop to their potential.

为处于幼儿园的九年级至七年级的资优儿童提供适当的教育，在一个育人的环境中，他们将在智力上受到挑战，并在社交上感到舒适，从而为这些儿童提供成长和发展潜力的机会。

The LISG website seeks to provide prospective students and their parents with details of the unique offerings available at the school. A preliminary step in the application process is the “Introductory Questionnaire” form, which can be completed on the website. Additionally, the website would provide valuable information to enrolled students and their parents.

LISG网站旨在为准学生及其父母提供学校可提供的独特服务的详细信息。 申请过程的第一步是“介绍问卷”表格，可以在网站上完成。 此外，该网站还将为入学的学生及其父母提供有价值的信息。

LISG网站：2014-2017 (LISG website: 2014-2017)

Prior to 2014, the LISG website was largely static. The 2014-2017 website featured a photo carousel, digital student event calendar, and an introductory questionnaire form, which would help prospective parents jump start the application process.

2014年之前，LISG网站基本上是静态的。 2014-2017网站上设有照片轮播，数字学生活动日历和介绍性问卷表，这将有助于准父母开始申请程序。

Although the 2014–2017 redesign of the LISG website was an improvement over the previous design, the metrics collected indicated that additional improvements could be made.

尽管LISG网站的2014-2017年重新设计是对先前设计的改进，但收集的指标表明可以进行进一步的改进。

分析工具 (THE ANALYTICS TOOLS)

• Google Analytics: Measures website, app, digital, and offline data to gain customer insights.

  Google Analytics(分析)：测量网站，应用程序，数字和离线数据，以获取客户见解。

• JotForm: is an online application that allows website administrators to quickly create custom online forms. JotForm offers a form analytics tool.

  JotForm：是一个在线应用程序，允许网站管理员快速创建自定义在线表单。 JotForm提供了表单分析工具。

主要发现 (THE KEY FINDINGS)

• Distinct user types: Based on website traffic and the behavior flow, there appears to be two distinct user types with two distinct content needs. The two user types are prospective parents/students and enrolled parents/students.

  不同的用户类型：根据网站的访问量和行为流，似乎有两种不同的用户类型具有两种不同的内容需求。 两种用户类型是预期的父母/学生和已注册的父母/学生。

• Average session duration: The typical visitor is only spending a short time on each page, indicating that long blocks of text are not being read.

  平均会话持续时间：典型的访问者仅在每个页面上花费很短的时间，表明没有阅读较长的文本块。

• Conversion: Approximately .69% of visitors are completing the introductory questionnaire.

  转换：大约0.69％的访客正在完成入门调查表。

• Rise in mobile traffic: Mobile traffic to the website increased by nearly 50% during a three year period.

  移动流量的增长：网站的移动流量在三年期间增长了近50％。

LISG网站：2017年重新设计 (LISG website: 2017 redesign)

After examining the data from 2014–2017, we began the redesign process with clear goals in mind.

在检查了2014-2017年的数据之后，我们开始进行重新设计，并牢记明确的目标。

重新设计的目标 (THE GOALS OF THE REDESIGN)

1. Refine site structure: Consolidate site content and reduce text.

   优化网站结构：合并网站内容并减少文本。

2. Improve mobile UI: The increase in mobile traffic highlighted the need for improvements to the mobile navigation.

   改善移动用户界面：移动流量的增长突显了对移动导航的改进需求。

3. Leverage established design patterns: Established design patterns are familiar to visitors and utilize a composition that takes advantage of a viewers natural eye movement.

   利用既定的设计模式：既定的设计模式对于访问者来说是熟悉的，并利用了观众自然眼动的构图。

4. Improve the user journey: Remove unnecessary obstacles and enable visitors to quickly and easily find what they are looking for.

   改善用户旅程：消除不必要的障碍，并使访问者能够快速轻松地找到他们想要的东西。

5. Increase conversions: Improve the visibility of the Introductory Questionnaire form and make it less daunting to fill out.

   增加转化次数：提高“简介问卷”表格的可见度，并减少填写的难度。

目标1：精炼场地结构 (GOAL 1: REFINE SITE STRUCTURE)

Although much of the website content can be relevant to both prospective and enrolled students/parents, an effort was made to determine which user type would primarily be interested in each page. Furthermore, content was consolidated or eliminated when appropriate.

尽管许多网站内容可能与预期的和已注册的学生/家长都相关，但仍努力确定哪种用户类型将主要对每个页面感兴趣。 此外，适当时合并或消除了内容。

This approach enabled us to reduce the size of the website by four pages with the goal of creating a more intuitive site structure.

这种方法使我们能够将网站的大小减少四页，以创建更直观的网站结构。

When we developed the first redesign in 2014, there was a desire to share a lot of information and make the website appear robust. Long blocks of text may have been off-putting to visitors who are likely researching and evaluating several schools in one sitting.

当我们在2014年进行第一次重新设计时，人们希望共享大量信息并使网站看起来更健壮。 长长的文本块可能会吸引来访者，他们很可能一次就研究和评估几所学校。

目标2：改善移动用户界面 (GOAL 2: IMPROVE MOBILE UI)

The navigation that appeared on the 2014–2017 website became squished on the left side of the viewport on mobile. Even worse, on several devices, some of the buttons disappeared beneath the fold. These issues likely contributed to an increased bounce rate on smartphones.

2014-2017网站上显示的导航在移动设备视口的左侧变得狭窄。 更糟糕的是，在一些设备上，某些按钮在折叠下方消失了。 这些问题可能导致智能手机的跳出率增加。

目标3：利用已建立的设计模式 (GOAL 3: LEVERAGE ESTABLISHED DESIGN PATTERNS)

The use of F and Z patterns can help to create visual hierarchy in web design.

F和Z模式的使用可以帮助在Web设计中创建视觉层次结构。

“This [Z-shaped] pattern works because most western readers will scan your page the same way that they would scan a book — top to bottom, left to right.”

“ [Z形]模式之所以有用，是因为大多数西方读者将以与扫描图书相同的方式来扫描您的页面-从上到下，从左到右。”

— Nick Babich, UX Planet

— UX Planet的Nick Babich

目标4：改善用户旅程 (GOAL 4: IMPROVE THE USER JOURNEY)

Based on demographics data and page traffic, we were able to conclude that the majority of website visitors were prospective students/parents. Ideally, a prospective parent is using the website to learn about the school, determine if their child is eligible for admission, and they may even begin the application process by filling out the introductory questionnaire.

根据人口统计数据和页面访问量，我们可以得出结论，大多数网站访问者是准学生/父母。 理想情况下，准父母使用该网站了解学校，确定他们的孩子是否符合入学条件，甚至可以通过填写入门问卷来开始申请程序。

“User journeys are the step by step journey that a user takes to reach their goal. This journey will often consist of a number of website pages and decision points that carry the user from one step to another… This journey is then redesigned to form an ‘ideal’ user journey free from frustration.”

“用户旅程是用户达到其目标所采取的逐步旅程。 该旅程通常由许多网站页面和决策点组成，这些站点页面和决策点将用户从一个步骤带到另一个步骤。然后，对该旅程进行重新设计，以形成无挫折的“理想”用户旅程。”

— Experience UX

— 体验UX

Using behavior flow metrics, we could see that it took three interactions before they filled out the introductory questionnaire. With each interaction, there is visitor drop-off.

使用行为流指标，我们可以看到在填写入门调查表之前需要进行三个交互。 每次互动都会吸引访客。

In the 2014–2017 version of the website, the metrics indicate that only around 5% of visitors reach the Admissions page with enough information about the school to confidently determine if they wanted to fill out the introductory questionnaire form or not.

在网站的2014–2017版本中，这些指标表明，只有大约5％的访问者进入“招生”页面，其中包含有关学校的足够信息，可以自信地确定他们是否要填写入门调查表。

In the 2017 redesign, nearly 15% of visitors reach the admissions page with adequate information about the school.

在2017年的重新设计中，将近15％的访问者进入招生页面，并获得有关学校的足够信息。

目标5：提高转化次数 (GOAL 5: INCREASE CONVERSIONS)

Based on the 2014–2017 data, we hypothesized that users may have been having difficulty finding the introductory questionnaire form (it was housed within an accordion menu). Additionally, the form may have looked daunting because it was vertically long.

基于2014-2017年的数据，我们假设用户可能难以找到介绍性的调查表(位于手风琴菜单中)。 此外，该窗体可能看起来令人生畏，因为它在垂直方向上很长。

A one page form with 15 questions is less likely to be completed than a 3 page form with 5 questions per page.

与每页5个问题的3页表单相比，包含15个问题的一页表单完成的可能性较小。

The amount of form submissions increased by 129%. The conversion rate rose from .69% to nearly 1.6%.

提交的表单数量增加了129％。 转化率从0.69％上升到近1.6％。

And that’s how we completed a successful redesign. Thank you for reading! If you enjoyed this story you can Read more or Follow me on Twitter.

这就是我们完成成功的重新设计的方式。 感谢您的阅读！ 如果您喜欢这个故事，可以阅读更多或在Twitter上关注我 。

翻译自: https://www.freecodecamp.org/news/3-takeaways-from-a-data-driven-design-approach-70c6b52540b/

数据驱动从方法到实践pdf