Чему я научился благодаря подходу к проектированию, управляемому данными

1656646819 chemu ya nauchilsya blagodarya podhodu k proektirovaniyu upravlyaemomu dannymi

Майкл Лоскальцо

Что происходит, когда пристрастные мнения отходят на второй план вместо уроков, полученных из показателей?

widiEqLbOV4j5PGXRvQF2TRAhBr7uL4jjgUQ

Начнём с конца…

? Показатели моего блога показывают, что 60% читателей не читают сообщение полностью. Итак, давайте очень быстро рассмотрим то, что я узнал во время редизайна веб-сайта, управляемого данными!

ВИНОС №1

Если правильно представить, посетитель потратит больше время просмотра меньше содержание. Несмотря на уменьшение количества страниц и уменьшение количества слов на странице, я наблюдал увеличение средней продолжительности сеанса.

Изменения:

  • Длинные блоки текста были переоценены и сокращены к более лаконичным инструкциям.
  • Консолидированная структура сайта позволила посетителям быстро находить подходящий контент.
cCr3MsX7kj7vGzhvZIqghBzOEkcKKW8AR5yV
Увеличение средней продолжительности сессии свидетельствует о том, что посетители остаются на сайте дольше.

ВИНОС №2

Паттерны дизайна работают! Может возникнуть соблазн нарушить все правила, но правда заключается в том, что шаблоны дизайна знакомы посетителям и используют композицию, использующую естественное движение глаз зрителя.

Изменения:

  • Просмотренная домашняя страница имеет z-образный узор (рабочий стол) и определяет приоритетность наиболее часто просматриваемого содержимого. На страницах с большими текстовыми блоками использовался f-образный шаблон (рабочий стол).
  • Основная навигация была пересмотрена, чтобы она стала более интуитивно понятной и удобной для мобильных устройств.
yVs34Eiazyqr5YlN9AYXqiQ9APlxT34l7VR1
Уменьшение показателя отказов на 8% свидетельствует о более глубоком посещении веб-сайта.

ВИНОС №3

Удалите шаги с пути пользователя, чтобы улучшить коэффициент конверсии. Удаление одного шага на пути пользователя привело к значительному увеличению конверсий.

Конверсии измерялись процентом посетителей, заполнивших анкету.

Изменения:

  • Меньше шагов для посетителя, чтобы добраться до формы анкеты с адекватной информацией о предложениях.
  • Повышенная рельефность формы.
  • Вместо одной длинной формы (15 вопросов) форма была разбита на три небольшие части (5 вопросов на часть).
gl3B-LuvnggO44-l4Dpk4kP8CXwdOmnDmV4W
Значительное увеличение коэффициента конверсии указывает на то, что больше посетителей выполняют желаемое действие в ответ на призыв к действию (CTA).

Спасибо, что дочитали до этого места!

Ниже я представил более подробный анализ того, почему были внесены определенные изменения, а также улучшение ключевых показателей эффективности (KPI).

Клиент

В 1980 году Кэрол Йилмаз и еще девять родителей искали должное образование для своих одаренных детей. Вместе они основали Лонг-Айлендская школа для одаренных (LISG), частная дневная школа совместного обучения.

Миссия LISG:

Обеспечить надлежащее образование для одаренных детей от дошкольного возраста до девятого класса в благоприятной среде, где они будут иметь интеллектуальные проблемы и будут комфортны в социальном плане, таким образом, предоставляя этим детям возможность расти и развивать свой потенциал.

Веб-сайт LISG стремится предоставить будущим студентам и их родителям подробную информацию об уникальных предложениях, доступных в школе. Предварительным шагом в процессе подачи заявки является форма «Вступительная анкета», которую можно заполнить на сайте. Кроме того, веб-сайт предоставит ценную информацию зарегистрированным студентам и их родителям.

Сайт LISG: 2014-2017

До 2014 года сайт LISG был в основном статичным. Веб-сайт 2014-2017 содержал карусель фотографий, цифровой календарь событий и вступительную форму анкеты, которая поможет будущим родителям быстро начать процесс подачи заявки.

h2E9ItwlD3p32hda3forHaIwlIBUMuMdo3XL
Сайт 2014-2017 годов при просмотре на планшете и смартфоне.

Несмотря на то, что обновленный дизайн веб-сайта LISG в 2014–2017 годах был улучшен по сравнению с предыдущим дизайном, собранные показатели показали, что можно внести дополнительные улучшения.

ИНСТРУМЕНТЫ АНАЛИТИКИ

  • Google Analytics: Измерение веб-сайта, приложения, цифровых и автономных данных для получения информации о клиентах.
  • JotForm: это онлайн-приложение, которое позволяет администраторам веб-сайтов быстро создавать собственные онлайн-формы. JotForm предлагает инструмент аналитики форм.

КЛЮЧЕВЫЕ ВЫВОДЫ

  • Различные типы пользователей: Исходя из трафика веб-сайта и потока поведения, кажется, что существует два разных типа пользователей с двумя разными потребностями в содержимом. Два типа пользователей: потенциальные родители/ученики и зарегистрированные родители/ученики.
  • Средняя продолжительность сеанса: Типичный посетитель проводит только короткое время на каждой странице, что указывает, что длинные блоки текста не читаются.
  • Превращение: Приблизительно 0,69% посетителей заполняют вступительную анкету.
  • Рост мобильного трафика: Мобильный трафик на сайт вырос почти на 50% в течение трех лет.

Веб-сайт LISG: обновленный дизайн в 2017 году

После изучения данных за 2014-2017 годы мы начали процесс редизайна с четкими целями.

ЦЕЛИ РЕДИЗАЙНА

  1. Уточните структуру сайта: Объедините содержимое сайта и уменьшите текст.
  2. Улучшение мобильного интерфейса: Увеличение мобильного трафика подчеркнуло необходимость усовершенствования мобильной навигации.
  3. Используйте установленные шаблоны проектирования: Установленные шаблоны дизайна знакомы посетителям и используют композицию, использующую естественное движение глаз зрителя.
  4. Улучшите путь пользователя: Устраните ненужные препятствия и позвольте посетителям быстро и легко найти то, что они ищут.
  5. Увеличение конверсий: Улучшите видимость формы вводной анкеты и сделайте ее менее сложной для заполнения.
hhsnLeNOiXDynU23bu0vZkFXW0bPg73GvIli
Редизайн сайта 2017 для просмотра на планшете и смартфоне.

ЦЕЛЬ №1: УТОЧНИТЬ СТРУКТУРУ САЙТА

Хотя большая часть содержимого веб-сайта может быть актуальна как для будущих, так и для зарегистрированных студентов/родителей, были приложены усилия, чтобы определить, какой тип пользователей будет в первую очередь заинтересован в каждой странице. Кроме того, содержимое было консолидировано или удалено, когда это было необходимо.

Этот подход позволил нам уменьшить размер сайта на четыре страницы с целью создания более интуитивно понятной структуры сайта.

oh4vg2OT7b73xl1ZuJJrpXs1eaZc-Jv6iXtj
Оценка содержимого по типу пользователя и консолидация содержимого на меньшем количестве страниц.

Когда мы разработали первый редизайн в 2014 году, было желание поделиться обилием информации и сделать веб-сайт надежным. Длинные блоки текста могли оттолкнуть посетителей, которые, вероятно, исследуют и оценивают несколько школ за один присест.

OBkL0X0aW5VyAlN5uWonlnFuPgS7LJ12hJPe
Длинные блоки текста стали более лаконичными аннотациями или маркерами.

ЦЕЛЬ №2: УЛУЧШЕНИЕ МОБИЛЬНОГО Интерфейса пользователя

Панель навигации, появившаяся на веб-сайте 2014–2017 годов, на мобильном устройстве стала смята в левой части окна просмотра. Еще хуже, на нескольких устройствах некоторые кнопки исчезли под складкой. Вероятно, эти проблемы привели к увеличению показателя отказов на смартфонах.

hvMRjaHnO5gMVuRQ20KVkYfilPuk4k3pDbLw
Слева: мобильная навигация на мобильном телефоне не работает. Справа: упрощенный макет предлагает простые призывы к действию и меню «Гамбургер».

ЦЕЛЬ №3: ИСПОЛЬЗОВАНИЕ УСТАНОВЛЕННЫХ ШАБЛОНОВ ДИЗАЙНА

Использование шаблонов F и Z может помочь создать визуальную иерархию в веб-дизайне.

«Это [Z-shaped] шаблон работает, потому что большинство западных читателей будут сканировать вашу страницу так же, как и книгу сверху вниз, слева направо».

– Ник Бабич, UX Planet

8orXuzIPU8g-AYO3c3ReaSn-NHq51Q9KCvpJ
Примерный шаблон движения глаз Z на домашней странице LISG 2017.
FQWbM20fOhUwE4Tr90xxkumHTCQZY-VP3ewe
Справа: обновленный дизайн веб-сайта 2017 удаляет навигацию с левого столбца и организует содержимое в F-образной форме просмотра.

ЦЕЛЬ №4: УЛУЧШИТЬ ПУТЬ ПОЛЬЗОВАТЕЛЯ

На основе демографических данных и трафика страниц мы смогли заключить, что большинство посетителей веб-сайта были будущими студентами/родителями. В идеале будущие родители используют веб-сайт, чтобы узнать школу, определить, имеет ли их ребенок право на поступление, и они могут даже начать процесс подачи заявки, заполнив вводную анкету.

«Путешествия пользователя – это шаг за шагом, который пользователь проходит, чтобы достичь своей цели. Это путешествие часто будет состоять из нескольких страниц веб-сайта и точек принятия решений, которые переносят пользователя от одного шага к другому.

— Опыт UX

Используя показатели потока поведения, мы увидели, что требовалось три взаимодействия, прежде чем они заполнили вступительную анкету. С каждым взаимодействием происходит изъятие посетителей.

QQHeVXyR81b20JUVTVMor4QJWTnpth1AjfZz
Самый распространенный поток поведения на версии сайта 2014–2017.

В версии веб-сайта за 2014–2017 годы показатели показывают, что только около 5% посетителей попадают на страницу поступления с достаточной информацией об учебном заведении, чтобы с уверенностью определить, хотят ли они заполнить форму вступительной анкеты или нет.

sLq9O6d7fpr1wiCkKacsNfW1Y0VJfmweyqmL
Самый распространенный поток поведения в версии сайта 2017 года.

В обновленном дизайне 2017 почти 15% посетителей попадают на страницу поступления с адекватной информацией о школе.

ЦЕЛЬ №5: УВЕЛИЧЕНИЕ КОНВЕРСИИ

Основываясь на данных за 2014–2017 годы, мы предположили, что пользователям, возможно, было трудно найти вводную форму анкеты (она содержалась в аккордеонном меню). Кроме того, форма могла выглядеть пугающей, поскольку была вертикально длинной.

P06EGnPk71zpAMbdDmZi9J6Ija5ejsMvufyW
Долгое время было разбито на три меньших сегмента.

Одностраничная форма с 15 вопросами с меньшей вероятностью будет заполнена, чем 3-страничная форма с 5 вопросами на странице.

Количество поданных форм возросло на 129%. Коэффициент конверсии вырос с 0,69% до почти 1,6%.

И таким образом мы завершили успешный редизайн. Спасибо, что читаете! Если вам понравилась эта история, вы можете Подробнее или Следите за мной в Twitter.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *