10 ошибок веб-дизайна

Разработка продающих сайтов: 10 ошибок веб-дизайна, которые мешают компании получать прибыль

Если использование продукта или навигация на сайте вызывают у клиентов затруднения, они будут вынуждены уйти к конкурентам. Как показывают данные исследования Experience Dynamics, получение плохого пользовательского опыта (UX), как и неудовлетворённость пользовательским интерфейсом (UI) на каком-либо ресурсе, для 79%  людей является весомым аргументом, чтобы перестать его посещать. Более половины респондентов (52%) и вовсе начнут избегать любые продукты данной компании. Это означает, что UX и UI напрямую влияют на бизнес. В первую очередь под удар попадают такие параметры, как лояльность клиентов, конверсия и узнаваемость бренда. Даже незначительный просчёт в проектировании бизнеса может стать причиной серьёзных проблем.

1. Плохая вёрстка

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

Специальные исследования, проведённые Кевином Ларсоном из Microsoft и Розалинд Пикард, профессором MIT, показали, что веб-дизайн UX/UI оказывает влияние на настроение человека и его способность принимать решения. При посещении страниц с удачной вёрсткой у испытуемых заметно возрастала креативность. Креативность измеряли с помощью известного теста Карла Данкера: людям даётся свеча, спички и коробка кнопок. Их задача – закрепить свечу на стене так, чтобы воск не капал на пол или на стену. Задача становится простой, когда человек понимает, что коробка с кнопками не только контейнер для кнопок, но и ресурс, который можно использовать. Переход от стандартного восприятия ситуации к творческому и сводобному и есть признак повышения креативности.

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

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

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

• сайт с первого взгляда даёт представление о том, зачем он и какие задачи можно с его помощью решить. Визуальный стиль такого сайта отражает его смысл – сайты банков говорят о надёждности, сайты маркетплейсов – о радости и лёгкости, сайты дорогих ресторанов – о высоком стиле и качестве и т.д. У каждой сферы уже есть условный диджитал-стандарт, который быстро считывается пользователями.
• наверху главной страницы сайта сразу есть наиболее важный и частотный блок. Например, кнопка брони тура для турагентства, кнопка оформления выгодного вклада или кредита – для банка, форма загрузки файлов – для облачного хранилища, поле поиска – для браузера.
• сайт обладает простой информационной архитектурой и удобной навигацией. Значит, на нём удобно искать информацию и решать задачи и пользователю сразу понятно, в каком из разделов сайта находится нужный ему блок.
• сайт имеет единый стиль, который выражен во всем – в шрифтах, подборе фото, цветовой палитре, стиле иконок, тоне общения с пользователем. На любой странице сайта пользователь понимает, что он всё ещё на этом сайте и его отношение остаётся одинаковым.
• сайт также должен всегда иметь актуальную информацию, регулярно обновляться, чтобы пользователь чувствовал, что фирма активно работает, услуги предоставляются, цены соответствуют действительности, а товары в наличии.
• и продающий сайт должен вызывать у посетителя эмоциональный отклик. Он должен видеть, как будет решена его задача и каким будет желаемый результат. Хороший телефон продают не его описания, а качество фото и видео, снятых на него. Хороший отель – фото счастливых посетителей. Хороший образовательный курс – положительный отзывы, высокие рейтинги и истории успеха его выпускников.

2. Низкое качество текстов

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

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

3. Отсутствие контраста

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

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

4. Недостаточная оптимизация

Сайт со слабой оптимизацией скорости загрузки не может рассчитывать на лояльность клиентов. Если загрузка страницы занимает более двух секунд – это уже тревожный сигнал, особенно это касается разработки интернет-магазинов. А каждая лишняя секунда работает на снижение лояльности пользователей на 16% и конверсии – на 7% (по данным AberdeenGroup).

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

На повышение скорости загрузки страниц оказывают влияние:

• количество HTTP-запросов (чем их меньше, тем лучше);
• наличие плагинов (требуется их сокращение);
• настройки изображений и видео (нужна их оптимизация).

Сегодня также важно, чтобы сайт одинаково хорошо открывался как на компьютере, так и на экране телефона. Пожалуй, можно даже сказать, что будущее именно за m-commerce. В 2021 году её доля от е-commerce составила более 70%. Недостаточная оптимизация приложения или мобильной версии сайта неизбежно приводит к потере половины клиентов. В наше время это непозволительная роскошь.

5. Сложные формы

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

На заполнение форм должно уходить минимум времени, поэтому желательно обойтись только самыми необходимыми полями. При грамотном веб-дизайне UX/UI их количество обычно не превышает 2-3, чтобы хватило на основную контактную информацию. Слишком большое количество полей снижает конверсию.

Пример проработки сайта. Разработка продающего сайта психолога.

6. Разработка продающих сайтов и непродуманная навигация

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

Провести посетителя по запланированному пути помогает чёткая структурированность всех элементов и понятная навигация. Разработка продающих сайтов предполагает соблюдение следующих требований:

• обязательно наличие многоуровневого «Меню» с подробным указанием всех страниц и разделов сайта;
• пункты меню могут делиться на уровни в соответствии с ожиданиями пользователя (например, более общий по содержанию пункт первого уровня «Фотоаппараты» конкретизируется пунктами второго уровня – «Зеркальные» и «Беззеркальные»);
• возможность поиска по сайт или каталогу, позволяющая найти интересующие клиента товары или услуги, даже если они были напечатаны с ошибками;
• результат поиска не должен приводить к пустой странице – лучше разместить на ней карточки с описаниями альтернативных или рекомендуемых продуктов.

7. Проблемы с работой кнопки Call to Action и её наличие

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

Веб-дизайн UX/UI и вообще разработка продающего сайта предполагают, что кнопка CTA должна быть:

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

8. Отсутствие обратной связи от других людей

Перед тем как принять решение о покупке товара, большинство людей (по данным Mintel, не менее 70%) предпочитают сначала ознакомиться с отзывами реальных людей. Вот почему важно размещать на сайте так называемые «социальные доказательства» того, что данный продукт или услуга действительно обладает заявленными в описании характеристиками.

Статистические данные, собранные компанией Reevoo, свидетельствуют о том, что наличие отзывов способно повысить конверсию почти на 5%, а общий объём продаж – на все 18%. Между тем, некоторые компании «забывают» разместить на сайте блок с обратной связью от  своих клиентов, и это серьёзная недоработка, влияющая на уровень продаж.

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

9. Проблемы с состоянием сайта

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

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

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

Примеры оформления страницы 404 ошибки в дизайне сайтов от MindRepublic.

10. Неумение донести до потребителя ценность продукции

Результаты многочисленных исследований наглядно доказывают, что человек принимает решение о покупке в первые несколько секунд (в среднем от 3 до 7). Компании в условиях жёсткой конкуренции должны действовать быстро и сразу же создавать у потенциального клиента положительное мнение о себе и своей продукции. Для этого нужно сначала чётко сформулировать, а затем и в доступной форме рассказать о ценности и уникальности предлагаемых товаров и услуг. В этом помогает определение позиционирования компании и разработка платформы бренда.

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