Что делать, если сайт плохо конвертит? Проверьте по этому чек-листу, нет ли в его дизайне ошибок

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

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

По данным платформы для связи с клиентами Jivo, есть разница в понимании «оптимальной конверсии сайта» для разных сфер:

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

Ошибка 1. Неочевидная, сложная навигация

Нестандартная или «креативная» навигация может вызвать у пользователя трудности. Старайтесь сделать ее простой и привычной — чтобы она помогала легко находить нужную информацию. Множественные переходы и длинные скроллы до целевого действия повышают вероятность ухода клиента.

Используйте ясные формулировки в названиях разделов или ссылок. Оптимальное количество пунктов меню: 5–6.

❌ Примеры неудачной навигации ❌

❌ Меню спрятано в правый столбец, плохо заметно на фоне других блоков, сами пункты неинформативные.

✅ Примеры удачной навигации ✅

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

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

❌ Неудачный и удачный пример с иконками ✅

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

Ошибка 2. Использование нестандартных паттернов

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

❌ Неудачный пример использования паттернов ❌

❌ Оказывается, только название The Party здесь работает как ссылка, что совсем неочевидно. Все остальные элементы — просто текст.

✅ Примеры общепринятых элементов интерфейса ✅

✅ Слева направо: позвонить, отправить email, добавить в корзину, удалить, открыть меню. Снизу — кнопка.

Лучше использовать проверенные рабочие решения, но если все-таки хочется попробовать что-то нестандартное, проведите тестирование на реальных пользователях.

Ошибка 3. Избыточная информация

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

❌ Пример неудачной структуры ❌

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

✅ Пример хорошей структуры ✅

✅ Есть название блока и подзаголовки, которые привлекают внимание.

Длинные строки требуют дополнительных усилий при чтении. Оптимальная ширина текстового блока в вебе — примерно 60 символов, или 9 слов. Межстрочное расстояние для текста — в 1,5 раза больше размера шрифта.

❌ Пример неудачной верстки ❌

❌ Строчки слишком длинные, слишком много выделений текста, что делает его «кричащим». При этом непонятно, что из выделенного действительно важно.

✅ Пример удачной верстки ✅

✅ Узкий блок текста, выделяются только действительно значимые фразы.

Про избыточность текста хорошо пишут Максим Ильяхов и Людмила Сарычева в своей книге «Пиши, сокращай».

Ошибка 4. Слишком подробные формы

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

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

❌ Пример слишком длинной формы❌

❌ Для формы записи на занятия поля «Отчество», «Фамилия», «Год рождения», «Пол», «Адрес», «Доход» и «Время посещения» явно избыточные. Имя и фамилию при необходимости можно объединить в одно поле. Всю дополнительную информацию — уточнить при дальнейшем контакте.

✅ Пример удачной формы ✅

Собирается только необходимая информация.

Ошибка 5. Отсутствие адаптивности

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

Используйте крупные шрифты, кликабельные номера телефона, фиксированное при скролле меню, а минимальный размер элементов для нажатия делайте не меньше 44х44 px.

❌ Примеры неудачных мобильных версий ❌

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

✅ Пример удачной мобильной версии ✅

✅ Меню превратилось в гамбургер и фиксируется при прокрутке. Кнопка действия крупная и также фиксируется при скролле, второстепенной кнопки нет.

Ошибка 6. Дизайн ради дизайна

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

При выборе цветов рекомендую опираться на правило «60:30:10», где 60% — это основной цвет, 30% — дополнительный, а 10% — акцентный. Такие пропорции создают ощущение гармонии в дизайне.

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

❌ Пример избыточного количества цветов и стилей текста ❌

❌ При небольшом объеме информации страница рябит и выглядит очень хаотично.

✅ Пример удачного дизайна ✅

✅ В качестве основного цвета выступает темно-серый, второстепенного — белый. А акцидентный — фуксиевый — служит только для выделения кнопок и ссылок.

Запомнить!

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

Итак, еще раз кратко пройдусь по ошибкам в дизайне и интерфейсе, которые могут негативно отразиться на конверсии сайта:

1 - Сложная навигация. Множественные переходы и длинные скроллы до целевого действия повышают вероятность ухода клиента.

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

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

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

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

6 - Избыточный дизайн. Используйте два шрифта: один для заголовков, он может быть акцидентным, т.е. более дизайнерским, второй — для основного текста, легко читаемый. При выборе цветов опирайтесь на правило «60:30:10», где 60% — это основной цвет, 30% — дополнительный, а 10% — акцентный.

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

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

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