18 лет на рынке,
более 1500 клиентов

+7 (495) 726–85–79

+7 (812) 982–84–58

+7 (831) 277–59–50

Оставить заявку

Дизайн и конверсия. Как это связано?

Дарья Макарова Дарья Макарова

Арт-директор

1361 06.08.2015

Совсем недавно наш арт-директор Дарья Макарова делилась секретами разработки дизайн-концепции сайта на митапе "Теплицы социальных технологий". Если у вас не получилось попасть на её выступление - спешите прочитать доклад, гарантируем много полезной информации!

Разработка web дизайна является частью производственного процесса по созданию сайта.

 presentationwebnew150622142451lva1app6891_1page0021

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

presentationwebnew150622142451lva1app6891_1page003

Объясню почему:

У каждого специалиста (заказчика), принимающего участие в разработке сайта есть свое видение собственного web-ресурса. Есть свои определенные ожидания от его создания и критерии оценки готового проекта.

Зачастую разработкой сайта со стороны клиента занимается менеджер, в лучшем случае маркетолог. А согласовывается готовый результат непосредственно с хозяином бизнеса, который в силу тех или иных причин не принимает участие в разработке сайта.

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

Директорат и приближенные к нему считают не обязательным и не нужным общение с простым смертным дизайнером. Они не доступны для диалога. С ними нет обратной связи. Зачастую мы сталкиваемся с проблемой некомпетентности лица подающего информацию для разработки дизайна. Менеджер не знает и не понимает, да и вникать не хочет, чего хочет владелец бизнеса. Часто он просто боится задать лишний вопрос и предпочитает переложить всю разработку сайта на конечного исполнителя, а уже потом вносить правки. Так просто проще и не нужно заморачиваться.  Причем аналитикой заниматься, в его понимании, вообще не обязательно. Нужно просто свалить все материалы, накопленные за 5 лет в 1 папку, отправить дизайнеру и ждать.

Это кардинально не верный подход, не профессиональный и не эффективный. Если в вашей фирме именно так создавался сайт, задумайтесь. Что-то нужно менять.

А выглядит это примерно так:

presentationwebnew150622142451lva1app6891_1page004

Возникновение проблем  в данной схеме неизбежно из-за расплывчатого понимания целей проекта.

У маркетологов (как правило, но не у всех) на этот случай всегда заготовлены общие фразы типа: ДИНАМИЧНО,СОВРЕМЕННО,СТРОГО, МОДНО, ЧТОБЫ ПОКАЗАТЬ КАКИЕ МЫ КРУТЫЕ и тому подобная вода, не дающаяя конечному исполнителю - дизайнеру понимания о цели создания проекта.

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

 

 

Приведу пример брифа нашей компании с неудачным заполнением. 

presentationwebnew150622142451lva1app6891_1page005

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

presentationwebnew150622142451lva1app6891_1page006

Самое важное при проектировании дизайна сайта - понимание цели проекта.

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

 

Цели сайта всегда легко поделить на конкретные категории:presentationwebnew150622142451lva1app6891_1page007

  • Продажные сайты
  • Информирующие проекты
  • Промо проекты (популяризующие проекты) - Сайты чтобы "ВАУ!"

Если цель сайт определена, как продажи (а это самая распространенная цель), то необходимо составить этапный список, как реализовать эту цель. Данное планирование поможет грамотно структурировать информацию и выделить необходимые активные зоны в макете.

 

 

 

Приведу пример классических ошибок при проектировании дизайна:

presentationwebnew150622142451lva1app6891_1page008

Это классический макет среднестатистического предприятия Нижегородской области. В основном, в нашу компанию приходят клиенты имея именно такие сайты и претензии. Начинается диалог, как правило так: "Нам все тут не нравится, мы не знаем что точно не так, но нужно все переделать, тут все устарело, а у Иван Иваныча из соседнего предприятия вон какой сайт! И еще й него куры денег не клюют! Мы думаем все дело в дизайне. Нужно что-то свежее и не как у всех!" Знакомо?

Почему клиент получил именно такой макет и как так произошло:

Первая, самая распостраненная ошибка- цель создания ресурса не была определена.

- Создание макета было полностью переложено на дизайнера, без какого-либо ТЗ и анализа.  Цель создания такого макета не понятна.

- Не продажи – так как у сайта крайне бедный каталог.

- Фильм о заводе во 2-3 скролле, панорамное фото завода  в подвале сайта. 

Вторая ошибка - не структурированный материал.

  • Хотели большие кнопки спросить, написать, много кнопок с каталогом, ну и чтобы было красиво.
  • Посыл был: у нас есть вот фото, видео, ну сертификат еще есть  и телефоны. Их много.

presentationwebnew150622142451lva1app6891page009

 

 

 

 

 

 

 

 

 

 

 

 

В итоге что получилось:  Дизайнер расставил весь набор информации в вольной форме. И конверсия у этих элементов 0

  • ISOв подвале - а производители знают, как важен этот знак
  • Контакты в подвале, но есть курсы валют в шапке
  • Серый текст на серой плашке( но эта ошибка скорее говорит о кач-ве дизайнера) – плохая читабельность, логотип производителя сайта выделен относительно другой информации.

Кроме цели сайта и четкой иерархии используемых материалов крайне важно не переборщить с современными фишками и интерактивом.

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

При входе на сайт выскакивает окно с консультантом "Чем я могу помочь?". Сразу, не давая возможности пользователю просмотреть информацию на сайте. Выскакивает каждые 40 секунд. Это слишком навязчивая продажа. И слишком активный дизайн. Если бы цель была помочь пользователю, то дизайн был бы менее активным и не перекрывал контент. Скорее всего поп-ап всплывал бы где-то сбоку, снизу и имел нейтральный цвет и не крупный шрифт.presentationwebnew150622142451lva1app6891page012

Подведу итоги :

Чтобы получить от дизайнера хороший, качественный макет, необходимо предоставить ему нужный инструментарий.

В свою очередь грамотный дизайнер должен уметь им пользоваться.

presentationwebnew150622142451lva1app6891page013

Наиболее распространенным инструментом для создания редизайна можно считать Яндекс Метрику: вебвизор, карта кликов, аналитика форм.

У Google Analytics с анализом поведения дело обстоит чуть сложнее, но можно проследить поведение пользователя по тепловой карте кликов.

Еще одним инструментом можно считать АБ тестирование (по запросу менеджера проекта).  Зачастую цвет и место той или иной информации оказываются непредсказуемо ошибочными, что необходимо признать и вовремя скорректировать. 

 

 

 

 

 

Приведу пример с извесным сервисом. Каждый, я думаю, хоть раз бронировал билеты в интернете, поэтому данный слайд будет ему знаком.

presentationwebnew150622142451lva1app6891page014

В результате АБ тестирования было определено, что большая масса пользователей пытается кликнуть по этому заголовку. Это типичная ошибка дизайнера. Заголовок размещен не верно. Он как бы является одной из кнопок, помещен в среду среди кнопок.  Конверсия сайта существенно снижается из-за не кликабельности элемента. Многие пользователи просто уходят на другие сервису по подбору не получая ожидаемого от кнопки подбора.

Как определить хороший ли у вас дизайн макет:

1.     Макет должен быть логичным и выполнять глобальную цель проекта.

2.      Дизайн должен быть хорошо читаем.

3.      Макет должен быть лояльным, способным к трансформации и доработке на протяжении хотя бы года. 

Ну а хороший, профессиональный  web-дизайнер должен иметь крепкие нервы  и допускать критику в адрес своего макета. Признавать ошибки  и исправлять их.