6 ошибок предпринимателей при создании веб-сервисов
Ко мне часто обращаются предприниматели, которые хотят вырастить продажи на веб-ресурсах, но не понимают, что может отталкивать пользователей. Большинство совершает одни и те же ошибки при создании сайтов и посадочных страниц. В этой статье на основе ревью сайтов бизнесов, с которыми мне удалось посотрудничать, я выделяю 6 часто встречающихся ошибок и предлагаю способы решения.
🚫 Ошибка 1. Разместить в первом экране всю возможную информацию о продукте.
Предприниматель погружен в продукт: он знает о нём всё и кажется, что вся эта информация важна для потребителя. Поэтому уже в первом экране начинают выписывать все факты о продукте.
Как итог, получается перегруженный по количеству информации первый экран: ведь здесь будут и видео, и многострочный заголовок, и здоровый блок с текстом, и пара-тройка кнопок. Пользователь теряется, не понимая, куда смотреть и на что нажимать.
Пример перегруженного экрана
Люди в интернете не любят читать много текста. Особенно, когда он состоит из обрывков мыслей и фактов о продукте. Посетителю сайта становится сложно выделить основную мысль, мозг закипает и человек уходит, так и не осознав, что вы предлагали.
Пример хорошего первого экрана
👉 Решение
Чтобы избежать этого, сформулируйте главные принципы и преимущества продукта и упакуйте в 1-2 коротких предложения с помощью формулы: [Название продукта] поможет [сегменту людей: владельцы малого бизнеса, женщины, которым не безразличны здоровье и красота кожи и т.п.] с [проблемой] с помощью [преимущества], используя [секретный соус(ключевое отличие от большинства аналогов)].
🚫 Ошибка 2. Разместить в первом экране заезженных маркетинговых фраз и абстрактных картинок, не донося сути продукта.
Первостепенная задача сайта — зацепить пришедшего клиента с первого экрана, чтобы у него появился интерес к продукту.
Ясное дело, что все стараются рассказать про себя исключительно с позитивной стороны: лучшее соотношение цены и качества, самый большой интернет-магазин, самое выгодное вложение и т.п. Однако большинство пользователей уже не ведётся на такие тексты, слишком много стало «всего самого лучшего».
В примере ниже представлен продукт, который помогает подобрать наилучшую для их кожи косметику с помощью искусственного интеллекта. Обратите внимание, что при текущей формулировке продукт больше похож на интерне-магазин.
Аналогично с изображениями: если можете поместить фото продукта/сервиса или видео с демонстрацией его работы —это и стоит сделать. Это гораздо лучше поможет заинтересовать человека, нежели абстрактная иллюстрация или фотография, взятая со стока.
👉 Решение
Проработайте формулировку по формуле, о которой уже говорилось в первом пункте. Поставьте на первый экран фотографию, анимированную гифку или видео, чтобы за короткий временной промежуток и уже на первом экране успеть заинтересовать.
Помните! Более 60% аудитории не идет дальше первого экрана, если вы их не зацепили.
🚫 Ошибка 3. Подальше спрятать интересную и важную количественную информацию и инфографику или вообще их не показывать.
Ваш продукт в цифрах — это самая объективная информация о продукте. Она помогает клиенту самостоятельно сделать оценку, основываясь на данных, очищенных от субъективного суждения. Это поможет быстро взрастить доверие и лояльность.
👉 Решение
Числовую информацию о продукте стоит размещать во втором, максимум третьем экране. Не бойтесь писать о том, сколько у вас клиентов и партнёров, единиц продукции (какое количество брендов представлено), как много лет работает компания, сколько времени и денег сэкономит (или заработает) пользователь, приобретая продукт и т.п.
Консалтинговая компания INV размещает информацию о своей деятельности прямо в первом экране
🚫 Ошибка 4. Забыть о блоке социального доказательства
Людям страшно быть первыми: первым купить, оформить, написать и т.п. Когда кто-то уже делал подобное действие, психологически его проще повторить. Поэтому когда нет никаких отзывов о продукте или упоминаний о том, что им пользуются— сложно решиться на покупку.
👉 Решение
Если у вас уже есть клиенты: просите у них делиться впечатлениями об использовании продукта, а также фотографиями и видео. Смело размещайте на сайте скриншоты сообщений, ссылки на отзывы на внешний сайтах типа «Отзовик», видео с ютуба и т.п. Это станет социальным доказательством успешного взаимодействия с вами других людей и упростит новым клиентам задачу принятия решения о покупке или сотрудничестве.
Примеры хорошо представленных блоков с социальным доказательство
🚫 5. Разместить гигантские блоки абстрактного текста, не сопровождая его изображениями.
Чем быстрее текст передаёт суть, тем выше вероятность зацепить пользователя и довести до покупки. Большое количество абзацев без особой конкретики оттолкнёт пользователя от вас: в лучшем случае он пойдёт листать дальше, в худшем — уйдёт с сервиса.
👉 Решение
Старайтесь убирать абстракции. В повествовании отталкивайтесь от болей, которые испытывает потребитель. Пообщайтесь с вашими покупателями (или опросите аудиторию конкурентов), спросите, как они пришли к осознанию необходимости в продукте, как он облегчил жизнь.
Подавайте информацию в виде списков, карточек, инфографики — так она быстрее считывается и запоминается.
🚫 6. Смешивают гигантское количество стилей и анимаций на одной странице.
На сайтах часто встречаается разнообразие цветов, видов анимации, а главное — шрифтов.
Например, кнопки, отвечающие за целевое действие выглядят по-разному, из-за чего сложно сфокусироваться на главном целевом действии.
Или наоборот: одна и та же по стилю кнопка ведет как к целевому действию (купить или оформить), так и к дополнительным (подписаться на новости или читать подробнее). Из-за чего клиенту приходится самому расставлять акценты и понимать, что первично, а что вторично — что опять же приводит к расфокусировке внимания и пользователь с меньшей вероятностью совершит целевое действие.
Излишнее разнообразие анимации и применение в неудачных местах может не только отвлечь от знакомства с продуктом, но и заставить вовсе покинуть сайт. К тому же анимационное разнообразие приводят к постоянному эффекту неожиданности, из-за чего сайт теряет консистентность и становится сложным в восприятии.
Однако самая частая ошибка — это разнообразие гарнитур, выключки и начертаний в тексте. В этом случае страница начинает походить на новогоднюю ёлку, сильно затрудняется чтение. Люди и так неохотно читают текст в интернете (в особенности молодые), а разношерстный текст и вовсе быстро надоест и приведёт к покиданию ресурса.
👉 Решение:
Займитесь стандартизацией стилей и компонентов (иначе это называется созданием дизайн-системы). Вот правила, о которых стоит помнить:
Не используйте много цветов. Выберите один главный цвет бренда развивайте палитру. Так вы получите гармоничный и разнообразный набор цветов. При желании подберите дополнительный цвет, который будет использоваться для второстепенных или декоративных элементов.
Старайтесь не использовать чистый черный цвет, в особенности в сочетании с чистым белым — из-за высокого контраста у пользователя быстро появится резь в глазах.
Четко распределите функции элементов: за что отвечает каждый тип кнопки или карточки и применяйте эти правила при сборке страниц.
Выберите один или 2 типа анимации, и применяйте их. Не нужно с каждым новым экраном пользоваться новым видом. Старайтесь использовать мягкие эффекты, которые не раздражают глаз не вызывают чувство навязывания.
Используйте одну гарнитуру для текстов и заголовков или добавить ещё одну отдельно для заголовков. Чтобы не ошибиться в сочетании выберите из готовых шрифтовых пар (легко найти в интренете).
Выберите стиль для заголовков 1–4 уровня, подписи под заголовками, параграфов, для маленьких приписок и кнопок. Это стандартный набор, которого хватит для небольших лендингов и сайтов. Расширять набор нужно аккуратно и только по мере необходимости.
Центральную выключку можно использовать только для выравнивания заголовков и небольших подстрочников внутри новой секции. В остальных случаях старайтесь не использовать выключку (выравнивание) текста по центру, т.к. это ухудшает читабельность текста.
Не применяйте несколько начертаний одновременно, например: жирный курсив или написанное заглавными буквами с подчеркиванием и т.п.
Никогда не выделяйте большие текстовые блоки жирным. Это будет равносильно тому, что вы не выделите ничего.