Как провести аудит дизайна вашего сайта

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

Лучший способ выявить и исправить эти проблемы - провести аудит дизайна всего вашего веб-сайта. В этой статье мы научим вас, что это за аудит и как они могут вам помочь. Затем мы поговорим о некоторых инструментах, которые помогут вам его провести, прежде чем, наконец, показать вам, как это сделать в три простых шага. Давай приступим к работе!

Что такое аудит дизайна (и чем он может вам помочь)

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

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

• Возможность проверить свои проекты. По мере того, как тенденции дизайна входят в стиль и выходят из него, также вероятно, что ваши визуальные элементы могут начать выглядеть немного устаревшими. Аудит дизайна может предоставить вам проверку на реальность и возможность сделать обновления.
• Проверьте свой брендинг. Большинство веб-сайтов имеют собственный брендинг, основанный на нескольких визуальных элементах, таких как логотип, строки тегов, изображения заголовков и т. Д. Со временем эти элементы могут стать несовместимыми, что, в свою очередь, может повлиять на восприятие вашего бренда.
• Вы можете предложить это как консультационные услуги. Если у вас есть опыт проведения успешных дизайнерских аудитов, вы можете продавать свои услуги другим компаниям и помогать им в этом процессе. Многие компании не осведомлены о преимуществах, которые они предлагают, поэтому для этого есть шанс убедить их, что они нужны.

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

3 инструмента, которые помогут вам проверить удобство дизайна вашего веб-сайта

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

1. Сумасшедшее яйцо

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

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

Ключевая особенность:

• Разместите тепловые карты на своем веб-сайте.
• Отслеживайте, как далеко посетители прокручивают ваши страницы.
• Следите за источниками трафика и сегментируйте данные пользователей на их основе.

Цена: 9 долларов в месяц, выплачивается ежегодно | Больше информации

2. Удобство использованияИнструменты

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

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

Ключевая особенность:

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

Цена: 19 долларов в месяц | Больше информации

3. UsabilityHub

И последнее, но не менее важное: у нас есть UsabilityHub. Это немного отличается - это платформа, которая включает в себя несколько инструментов, любой из которых может помочь вам сделать аудит дизайна успешным.

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

Ключевая особенность:

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

Цена: 2,50 доллара за ответ на ваши тесты | Больше информации

Как провести аудит дизайна вашего сайта (за 3 шага)

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

Шаг №1: соберите все элементы визуального брендинга

Instagram - отличный пример веб-сайта с простым, но последовательным брендингом.

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

Это позволит вам проанализировать все ключевые элементы брендинга с высоты птичьего полета и проверить, имеют ли они смысл вместе (об этом мы поговорим на следующем шаге). Объединение элементов воедино может показаться ненужным, но некоторые недостатки в вашем дизайне могут не проявиться, пока вы не посмотрите на всю картину.

Что касается того, какие элементы вам нужно собрать, вот простой список, с которого вы можете начать:

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

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

Шаг № 2: проанализируйте визуальные элементы вашего веб-сайта

Стратегия брендинга Netflix проста, но последовательна - они всегда стараются использовать свой логотип.

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

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

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

• Убедитесь, что ваш логотип остается неизменным на всех ваших страницах, а если нет, при необходимости замените его.
• Убедитесь, что ваши фоновые изображения имеют схожий стиль, чтобы переход между страницами и разделами не резался. Если вы обнаружите какие-либо изображения, которые не подходят по форме, замените их.
• Убедитесь, что ваши значки имеют схожий стиль, и если это не так, попробуйте заменить их альтернативами из одного семейства, такими как Font Awesome Icons (которые можно интегрировать с Divi).

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

Шаг № 3: Создайте руководство по стандартам дизайна для своего веб-сайта

В руководстве по использованию бренда Urban Outfitter рассказывается о том, что делает их бренд уникальным.

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

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

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

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

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

Заключение

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

Вот три основных шага для проведения аудита дизайна вашего сайта:

1. Соберите все элементы визуального брендинга онлайн и офлайн.
2. Проанализируйте собранные вами элементы.
3. Создайте руководство по стандартам дизайна для своего веб-сайта.

У вас есть вопросы о том, как провести успешный дизайн-аудит вашего сайта? Спросите в разделе комментариев ниже!

Миниатюра статьи Дарко 1981 / shutterstock.com