Как сделать непродающий сайт

6 ошибок предпринимателей при создании веб-сервисов

🚫 Ошибка 1. Разместить в первом экране всю возможную информацию о продукте.

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

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

Пример перегруженного экрана

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

Пример хорошего первого экрана

👉 Решение

Чтобы избежать этого, сформулируйте главные принципы и преимущества продукта и упакуйте в 1-2 коротких предложения с помощью формулы: [Название продукта] поможет [сегменту людей: владельцы малого бизнеса, женщины, которым не безразличны здоровье и красота кожи и т.п.] с [проблемой] с помощью [преимущества], используя [секретный соус(ключевое отличие от большинства аналогов)].

🚫 Ошибка 2. Разместить в первом экране заезженных маркетинговых фраз и абстрактных картинок, не донося сути продукта.

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

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

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

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

👉 Решение

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

Помните! Более 60% аудитории не идет дальше первого экрана, если вы их не зацепили.

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

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

👉 Решение

Числовую информацию о продукте стоит размещать во втором, максимум третьем экране. Не бойтесь писать о том, сколько у вас клиентов и партнёров, единиц продукции (какое количество брендов представлено), как много лет работает компания, сколько времени и денег сэкономит (или заработает) пользователь, приобретая продукт и т.п.

Консалтинговая компания INV размещает информацию о своей деятельности прямо в первом экране

🚫 Ошибка 4. Забыть о блоке социального доказательства

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

👉 Решение

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

Примеры хорошо представленных блоков с социальным доказательство

🚫 5. Разместить гигантские блоки абстрактного текста, не сопровождая его изображениями.

Чем быстрее текст передаёт суть, тем выше вероятность зацепить пользователя и довести до покупки. Большое количество абзацев без особой конкретики оттолкнёт пользователя от вас: в лучшем случае он пойдёт листать дальше, в худшем — уйдёт с сервиса.

👉 Решение

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

Подавайте информацию в виде списков, карточек, инфографики — так она быстрее считывается и запоминается.

🚫 6. Смешивают гигантское количество стилей и анимаций на одной странице.

На сайтах часто встречаается разнообразие цветов, видов анимации, а главное — шрифтов.

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

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

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

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

👉 Решение:

Займитесь стандартизацией стилей и компонентов (иначе это называется созданием дизайн-системы). Вот правила, о которых стоит помнить:

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

Старайтесь не использовать чистый черный цвет, в особенности в сочетании с чистым белым — из-за высокого контраста у пользователя быстро появится резь в глазах.

Четко распределите функции элементов: за что отвечает каждый тип кнопки или карточки и применяйте эти правила при сборке страниц.

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

Используйте одну гарнитуру для текстов и заголовков или добавить ещё одну отдельно для заголовков. Чтобы не ошибиться в сочетании выберите из готовых шрифтовых пар (легко найти в интренете).

Выберите стиль для заголовков 1–4 уровня, подписи под заголовками, параграфов, для маленьких приписок и кнопок. Это стандартный набор, которого хватит для небольших лендингов и сайтов. Расширять набор нужно аккуратно и только по мере необходимости.

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

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

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