Автор

Олег Михалевич статей 49

О чем нужно знать, приступая к редизайну

Редизайн был необходим для проекта Промокодабра не только в связи с последними обновлениями Google, но также потому, что старый дизайн уже не отвечал запросам нашей аудитории. За три года работы в купонном бизнесе мы также заметно улучшили сервис, и технические проблемы, который вначале возникали редко из-за малых объемов трафика и небольшого количества партнеров, стали все чаще надоедать нашим разработчикам и значительно тормозили работу. 

В процессе работы мы сформулировали основные рекомендации по проведению редизайна: 

  1. Помните о принципе: “Пользователь + Миссия = Цель”

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

Для того, чтобы лучше представлять своего пользователя, составьте карту эмпатии. 

Выглядит она следующим образом:

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

Можно узнать о пользователе еще больше на основе использования тепловых карт CrazyEgg, например, проанализировав старый дизайн: тепловая карта покажет, какие элементы страницы пользователь использует чаще, и вы сможете их сохранить в новом дизайне, а неиспользуемые, засоряющие layout — удалить. Тепловые карты также улучшат usability и увеличат время нахождения на сайте.

Итак, вы составили портрет пользователя и определили миссию компании; теперь выберите  цвета, которые будут частью вашего бренда. В этом поможет опрос среди ваших лояльных пользователей (в социальных сетях, по рассылке). Узнайте, какими прилагательными пользователи могли бы описать ваш сайт сейчас и каким бы они хотели видеть его в будущем? Вы узнаете много нового, что может обрадовать или расстроить, но самое главное — согласно этим прилагательным вы сможете составить цветовую карту сайта. Психо-визуальный аспект очень важен и не стоит относиться пренебрежительно к  данным исследований в этой области. Вот, что получилось у нас:

Таким образом, на основании всего вышеперечисленного сформулируйте цель вашего редизайна. При необходимости исследуйте вашего потенциального пользователя подробнее при помощи приема “карточной сортировки” (можно провести среди коллег — расположить карточки с элементами сайта на них в оптимальном для каждого порядке), сплит-тестировнаия и многие другие.

Помните про цель:

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

2. Проанализируйте конкурентов

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

Для этого:

-       выберите трех конкурентов с такой же целевой аудиторией, что и у вас;

-       определите цель анализа (чтобы не делать лишнюю работу);

Можно пользоваться разными способами анализа, в зависимости от поставленных целей. Мы, например, использовали “многоугольник характеристик сайта”. 

Как это работает:

Выделите важные свойства вашего продукта и продукта конкурентов, составьте список. Все три сайта-конкурента оцените по этой шкале (есть свойство или нет). Расположите все свойства по кругу на листе бумаге и соедините прямыми между собой те свойства, которыми обладает ваш продукт. Постройте по тому же принципу, но другими цветами, многоугольники для ваших конкурентов. Такая схема сразу же поможет вам понять, чего не хватает продукту. 

3. Не забудьте про адаптивность

70% пользователей, заходя на сайт с мобильного, совершают покупку в течение часа, но только при условии, что дизайн сайта адаптивный. Более того, в разное время суток ваши клиенты используют разные девайсы в большей или меньшей мере. Согласно исследованиям Smartinsights, в утренние часы большей популярностью пользуются смартфоны, днем — ноутбуки, вечером — планшеты. Соответственно, неадаптированные сайты упускают большую часть трафика по утрам и вечерам. Адаптивность — ключевое требование после последних обновлений Google, не пренебрегайте ею.

В этой связи два совета от специалистов нашей компании по созданию адаптивного дизайна:

Гектор Ривас — главный IT-разработчик проекта 

“Самый простой метод для создания адаптивного дизайна — viewport. Для того, чтобы ваш сайт хорошо смотрелся на мобильных устройствах, необходимо задать параметры области просмотра при помощи viewport-a. Этот мета-тег подходит для всех устройств:

Он поддерживается не всеми старыми смартфонами, однако для оптимизации сайта в сжатые сроки он вполне подойдет”.

Габриэль Гамбарини — ведущий frontend разработчик проекта

“Можно создать адаптивный дизайн при помощи медиазапросов CSS. Мы использовали атрибут max-width, который применяется к браузеру с шириной, которая меньше, чем указана в запросе:

4. Создайте “пузырь”

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

  • не бойтесь пространства

Перенасыщенный дизайн утомляет пользователя и он быстрее покидает сайта.

  • дайте “руль” пользователю

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

  • избавьтесь от ненужной информации

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

Поставьте акценты там, где это необходимо, и избавьтесь от отвлекающих элементов.

5. Будьте социальны

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

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

6. Ведите диалог с дизайнером

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

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

Поделиться с друзьями

Комментарии

комментариев: 0

(максимально 200 символов)

(максимально 256 символов)