Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Преимущества компании на сайте: как описать и оформить блок с преимуществами, чтобы обойти конкурентов и влюбить клиентов
Блок с конкурентными преимуществами на сайте — неслабо влияет на конверсию, помогает убедить пользователя, что он делает правильный выбор. Но это работает, только если описать преимущества компании или продукта правильно, а не просто «чтоб было».
Что писать в преимуществах компании на сайте
Рассказать о преимуществах компании можно так, что пользователь больше не захочет искать другие варианты. А можно так, что он психанёт и закроет ваш сайт =)) Чтобы преимущества били точно в цель и повышали конверсию, закажите маркетинговое исследование. Так вы точно будете знать, что важно для ваших клиентов. Разберём основные ошибки подачи конкурентных преимуществ компании и расскажем, как их исправить.
Не пишите слово «Преимущества» в заголовке блока
Если блок озаглавлен:
● Преимущества нашей компании,
● Наши преимущества,
● Преимущества работы с нами,
● Почему мы,
● Почему надо заказать у нас,
● Почему выбирают нас
и прочими подобными фразами — считайте, что пользователь проскроллил этот блок мимо, так и не узнав, какие выгоды вы для него приготовили.
Как это работает: пользователь не читает текст на странице линейно от первого до последнего слова. Он просматривает её бегло, в основном читая заголовки и другие акцентные элементы, подсвеченные дизайнером. Если заголовок зацепил, то пользователь прочитает текст под ним. Если нет — проскроллит страницу дальше.
Поскольку большинство компаний не думают о пользователе, а просто пихают в блок преимуществ всякую ерунду, которая повторяется из раза в раз на тысячах сайтов, то видя заголовок «Преимущества», пользователь сразу делает мысленную пометку, что тут нет ничего интересного. Компания просто собирается расхваливать себя общими фразами из серии «доступные цены» и «индивидуальный подход».
● Наши преимущества,
● Преимущества работы с нами,
● Почему мы,
● Почему надо заказать у нас,
● Почему выбирают нас
и прочими подобными фразами — считайте, что пользователь проскроллил этот блок мимо, так и не узнав, какие выгоды вы для него приготовили.
Как это работает: пользователь не читает текст на странице линейно от первого до последнего слова. Он просматривает её бегло, в основном читая заголовки и другие акцентные элементы, подсвеченные дизайнером. Если заголовок зацепил, то пользователь прочитает текст под ним. Если нет — проскроллит страницу дальше.
Поскольку большинство компаний не думают о пользователе, а просто пихают в блок преимуществ всякую ерунду, которая повторяется из раза в раз на тысячах сайтов, то видя заголовок «Преимущества», пользователь сразу делает мысленную пометку, что тут нет ничего интересного. Компания просто собирается расхваливать себя общими фразами из серии «доступные цены» и «индивидуальный подход».
Примеры заголовков блока Преимущества на сайте. Поймайте себя на мысли, что вы только что прощёлкали все картинки, не даже пытаясь вчитываться в текст. Вам было всё ясно ещё из заголовка.
Вы можете круто проработать преимущества компании для клиента, предложить действительно конкурентные условия, но он никогда об этом не узнает, просто потому что «отсеял» вашу компанию уже на уровне заголовка. Почемумыканье — убийца конверсии.
Как исправить
Формулируйте заголовки нестандартно. Для этого есть 2 рабочих подхода:
- Вынести позиционирование в название блока, чтобы заголовок был больше похож на слоган,
- Вынести в заголовок главное преимущество.
Пример заголовка-слогана, который отражает позиционирование компании Albinel — проект WebValley Studio. Шуба — дорогая покупка, носится не один сезон. Покупатель тщательно подходит к выбору, посещает несколько салонов, выбирает из десятков вариантов. Но бывает, что померишь одну шубу, а она настолько хороша, что всё остальное уже кажется какими-то тряпками. Что больше не хочется ничего смотреть и мерить. После такого заголовка пользователя вштыривает. Он проникается этой идеей. А теперь представьте, что в заголовке было бы написано «Преимущества Albinel» — это фиаско.
Пример блока, в котором главное преимущество вынесено в заголовок. Реклама не бывает дорогой или дешёвой. Она либо окупается, либо нет. Наша окупается. Проект WebValley Studio.
Преимущества, которые подходят всем, не подходят никому
Начнём с примеров. Внимательно посмотрите на эти преимущества:
Пример преимуществ на сайте строительной компании
Пример преимуществ на сайте компании, которая занимается написанием студенческих работ
Пример преимуществ на сайте производителя СИП-панелей
Пример преимуществ на сайте компании, предлагающей осуществление электромонтажных работ
Пример преимуществ на сайте компании, оказывающей инжиниринговые услуги
Пример преимуществ компании для сайта фитнес-клуба
Пример преимуществ на сайте логистической компании
Обратите внимание, что перед нами 7 компаний из разных ниш, а в качестве преимуществ они называют одно и то же. Если б мы не подписали, вы бы и не поняли, о какой компании речь, и что предлагается в каждом из примеров.
Если из преимуществ можно убрать название компании, подставить любое другое, а текст всё ещё будет иметь смысл — значит хреновые это были преимущества. Текст, который подходит всем, не подходит никому.
ТОП самых убогих преимуществ компании для сайта:
- Индивидуальный подход,
- Гибкая система скидок (сотрудничества и пр.),
- Высокое качество,
- Приемлемые цены (доступные цены, низкие цены и т. п.),
- Соотношение цена / качество,
- Опытные высококвалифицированные профессионалы своего дела,
- Кратчайшие сроки, быстрые сроки
- Широкий ассортимент (на любой вкус и кошелёк),
- Качественные материалы (свежие продукты и т. п.),
- Контроль на каждом этапе,
- Выполним … любой сложности,
- Инновационные технологии.
Пускай это прозвучит категорично, но эти «преимущества» ни при каких обстоятельствах нельзя использовать на сайте компании. Они никогда не будут работать.
В чём их проблема: абстрактные общие формулировки, голословные заявления, отсутствие фактов, конкретики и доказательств. Это фразы ни о чём, именно поэтому они подходят любой компании, ведь в них не обещают ничего конкретного. Заезженные клише, которые кочуют из сайта в сайт.
Что такое индивидуальный подход? Как клиенту понять, к нему индивидуально подошли или тут ко всем так подходят? В чём его выгода клиента от этого индивидуального подхода?
Как можно писать про доступные цены? Для кого они приемлемы? Это даже нагло вот так заглядывать в карман клиента и решать за него, что ему доступно. Низкие цены? Пишите сразу сколько! Пускай пользователь сам решит, приемлемо это для него или нет. Если продукции много, и нет возможности указать одну конкретную цену — напишите, за счёт чего у вас низкая цена, как удаётся удерживать её на конкурентном уровне. В русском менталитете ещё сильно убеждение, что дёшево — значит некачественно. Если не хотите, чтобы низкая цена отпугнула клиента — не заставляйте его додумывать самому, почему она такая низкая.
Соотношение цена / качество — это треш из 90х. Морально устаревшее рекламное клише, которое дословно означает: «Как заплачено, так и зах*ячено». Не, ну, а чего вы хотели, за такие деньги-то?
Отдельного разговора заслуживает «любая сложность». Как правило, если вам компания обещает выполнить работы любой сложности, это означает, что ей, что ни поручи, всё будет сложно.
Нужны факты и доказательства. Если преимущество нечем доказать, значит этого преимущества нет.
Не пишите «Быстро установим пластиковые окна». Дайте конкретику: «За 3 часа успеем установить пластиковое окно и убрать за собой мусор». Каждое ваше преимущество должно быть полноценным оффером, только тогда они будут работать.
Копирайтеры, когда страдают творческой импотенцией, любят пихать везде, где надо и не надо, инновационные технологии. Как будто это какое-то волшебное слово, способное усилить любые преимущества. На самом деле, если компания специализируется на инновационных технологиях, то это её направление деятельности, а не преимущество. Мы же не говорим, что наше преимущество в том, что мы делаем сайты? Здесь то же самое. Во всех остальных случаях, надо хорошо подумать, а правда ли то, о чём я пишу — это инновации? В одном проекте, который мы взяли на продвижение, горе-копирайтер писал про «Безопасные неоновые вывески, произведённые по инновационной технологии». Знаете, какая там технология? Мужик с паяльником! Вот и вся инновация.
Реальная претензия одного из клиентов: «Вот, посмотрите, как у конкурента на сайте написано: „У нас работают настоящие профессионалы своего дела, опытные высококвалифицированные сотрудники“. А вы нам почему так не написали? У нас тоже такие сотрудники работают»! Вот в том-то и проблема, что у всех «тоже» такие работают. Кроме того, опыт сам по себе — ещё не преимущество. Какие выгоды клиенту от этого опыта — вот это важно. Можно проработать 10 лет, и все 10 лет хернёй заниматься, предлагая рынку слабый продукт. Так и в чём преимущество?
Есть простой лайфхак, который помогает понять: то, что вы предлагаете, действительно преимущество или нет. Поменяйте слова в тексте на фразы с противоположным значением, и оцените степень адекватности. Из преимуществ, описанных выше, у нас получится что-то такое:
«Мы понабрали профанов и бездарей, которые делают некачественный продукт по высочайшей цене, которая вам не по карману. Делаем всё очень долго, срываем дедлайны. У нас никто ничего не контролирует и ни за что не отвечает. Используем самые допотопные технологии. Нам особо нечего вам предложить, ведь ассортимент у нас очень маленький. Продукты мы берём с помойки, несвежие и невкусные, ведь мы не заботимся о вашем здоровье. Заказывайте у нас только что попроще, мы не любим сложностей. А если у вас нестандартная задача — нам всё равно, ведь мы метём всех клиентов под одну гребёнку».
Никто бы никогда не написал такое у себя на сайте. Это звучит как абсурд. Почему это так работает? Потому что вместо преимуществ используются вещи, которые априори свойственны продукту.
Копирайтеры, когда страдают творческой импотенцией, любят пихать везде, где надо и не надо, инновационные технологии. Как будто это какое-то волшебное слово, способное усилить любые преимущества. На самом деле, если компания специализируется на инновационных технологиях, то это её направление деятельности, а не преимущество. Мы же не говорим, что наше преимущество в том, что мы делаем сайты? Здесь то же самое. Во всех остальных случаях, надо хорошо подумать, а правда ли то, о чём я пишу — это инновации? В одном проекте, который мы взяли на продвижение, горе-копирайтер писал про «Безопасные неоновые вывески, произведённые по инновационной технологии». Знаете, какая там технология? Мужик с паяльником! Вот и вся инновация.
Реальная претензия одного из клиентов: «Вот, посмотрите, как у конкурента на сайте написано: „У нас работают настоящие профессионалы своего дела, опытные высококвалифицированные сотрудники“. А вы нам почему так не написали? У нас тоже такие сотрудники работают»! Вот в том-то и проблема, что у всех «тоже» такие работают. Кроме того, опыт сам по себе — ещё не преимущество. Какие выгоды клиенту от этого опыта — вот это важно. Можно проработать 10 лет, и все 10 лет хернёй заниматься, предлагая рынку слабый продукт. Так и в чём преимущество?
Есть простой лайфхак, который помогает понять: то, что вы предлагаете, действительно преимущество или нет. Поменяйте слова в тексте на фразы с противоположным значением, и оцените степень адекватности. Из преимуществ, описанных выше, у нас получится что-то такое:
«Мы понабрали профанов и бездарей, которые делают некачественный продукт по высочайшей цене, которая вам не по карману. Делаем всё очень долго, срываем дедлайны. У нас никто ничего не контролирует и ни за что не отвечает. Используем самые допотопные технологии. Нам особо нечего вам предложить, ведь ассортимент у нас очень маленький. Продукты мы берём с помойки, несвежие и невкусные, ведь мы не заботимся о вашем здоровье. Заказывайте у нас только что попроще, мы не любим сложностей. А если у вас нестандартная задача — нам всё равно, ведь мы метём всех клиентов под одну гребёнку».
Никто бы никогда не написал такое у себя на сайте. Это звучит как абсурд. Почему это так работает? Потому что вместо преимуществ используются вещи, которые априори свойственны продукту.
То, что в норме вещей, что само собой разумеется — не является преимуществом.
Клиент заказывает еду из ресторана — конечно, её приготовят из свежих качественных продуктов, а из каких ещё? Это ж ресторан! Клиент заказывает установку пластиковых окон — он сам в этом ничего не понимает, поэтому обратился к профессионалам. Конечно, он ждёт, что придёт опытный профессионал. А смысл открывать фирму и брать на работу людей, которые не знают, как устанавливаются пластиковые окна? Зачем напирать на соблюдение дедлайнов, когда для компании это должно быть нормой, укладываться в установленные сроки?
В некоторых классификациях эти вещи называют естественными конкурентными преимуществами компании. То есть, то, что компания работает так, а не иначе — это естественно. В отличие от искусственных преимуществ, для которых компании приходится прикладывать усилия, чтобы предложить клиенту лучшее решение его проблемы. С этой точки зрения, искусственные преимущества — настоящие, а естественные — вообще не преимущества для клиента.
В некоторых классификациях эти вещи называют естественными конкурентными преимуществами компании. То есть, то, что компания работает так, а не иначе — это естественно. В отличие от искусственных преимуществ, для которых компании приходится прикладывать усилия, чтобы предложить клиенту лучшее решение его проблемы. С этой точки зрения, искусственные преимущества — настоящие, а естественные — вообще не преимущества для клиента.
Как исправить
Большинство экспертов сейчас сказали бы, что надо подкреплять все преимущества фактами. Не просто писать про индивидуальный подход, а пояснять, что именно в нём индивидуального. Не просто писать, что низкие цены, а указывать, сколько конкретно. Но мы рекомендуем хорошо подумать, а нужны ли вам такие преимущества вообще. Правда ли это то, что волнует клиента? Любой текст можно усилить за счёт фактов и конкретики, сделать его более интересным и читаемым. Но если он изначально бесполезный, и не несёт ничего для того, чтобы покупатель принял решение заказать у нас, то как его ни приукрашивай, полезнее он не станет. Поэтому, прежде чем приправлять преимущества фактами, сначала разберитесь, а правда ли это преимущество.
Пример такой бестолковой докрутки преимущества:
Привели факты, добавили конкретику — теперь нельзя сказать, что это голословное утверждение. Но стал ли текст полезнее? Преимущество не в мире клиента. Мало кому понятен ISO 9001:2015, для них этот стандарт ни о чём не говорит. А те, кто знает, что это такое — знают и как получают сертификат менеджмента качества в нашей стране, и что он никоим образом не гарантирует качество оказанных услуг. Лучше расскажите, чем вы можете помочь клиенту, и как решите его проблему.
Другой пример:
Другой пример:
Готовить из несвежих продуктов и травить клиентов — подсудное дело. Когда человек заказывает еду из ресторана на дом, он меньше всего ожидает, что ему привезут несвежие блюда. А вот чего он действительно опасается, как показало проведённое маркетинговое исследование, так это несовпадения ожиданий и реальности. На картинках на сайте толстенный шмат филе лосося на подушке из овощей альденте и обильно политый сливочно-перечным соусом, красивая подача. А привезут какую-то шкурку от хвостовой части с двумя кружками морковки, политым чем-то подозрительно напоминающим майонез. В преимуществах надо закрыть этот момент, а не повторять в сотый раз за конкурентами про непревзойдённую свежесть.
Смотрите на примерах наших проектов, как оставить конкурентов далеко позади, если провести маркетинговое исследование и предложить мощные преимущества компании, каждое из которых тянет на отдельный оффер, а не пытаться повторять дешёвые клише за конкурентами.
Преимущества на сайтах конкурентов. Ниша — юридическая помощь при ДТП:
Смотрите на примерах наших проектов, как оставить конкурентов далеко позади, если провести маркетинговое исследование и предложить мощные преимущества компании, каждое из которых тянет на отдельный оффер, а не пытаться повторять дешёвые клише за конкурентами.
Преимущества на сайтах конкурентов. Ниша — юридическая помощь при ДТП:
Преимущества, написанные на основе маркетингового исследования:
Сильные преимущества компании, закрывающие страхи клиента, из которых понятно, что ты ничего не теряешь при обращении к юристам. Мощная понятная гарантия. Продуманная мотивация юриста: он получает оплату только после того, как клиент получит свою страховую выплату, кроме того, вознаграждение юриста измеряется в % от этой выплаты, значит, он максимально заинтересован: а) разрулить проблему как можно быстрее, чтобы не работать полгода бесплатно, б) содрать со страховой и виновного максимально возможную сумму, чтобы самому заработать больше. Сайт юридической компании МИАР Групп. Проект WebValley Studio.
Пример преимуществ производственной компании. Ниша — изготовление шкафов-купе на заказ. Преимущества на сайтах конкурентов:
Демократичные цены, индивидуальный подход персонального менеджера, высококвалифицированный персонал и широкий ассортимент качественных материалов. Клише на клише и клише погоняет. А доступность 24/7 — это отдельный вид искусства. Вдруг вам захочется заказать шкаф-купе по индивидуальному эскизу в 2 часа ночи в понедельник, и выбирать материалы с персональным менеджером до рассвета?
А вот пример того, как один из конкурентов решил «усилить» бестолковые преимущества, добавив к ним конкретики:
Преимущества, написанные на основе маркетингового исследования:
Крутая, грамотная подача преимуществ на сайте производственной компании. Никаких голословных утверждений. Нет рассказов об опытных профессионалах — сразу к сути: чем этот профессионализм поможет заказчику. Не просто человек с рулеткой, а эксперт, с которым вы тут же на месте накидаете эскизы и прикинете варианты. Не просто короткие сроки — а точно назвали сколько и пояснили, много это или мало, показали в сравнении с аналогом. Закрыли страхи, что придётся дважды отпрашиваться с работы: один раз, чтобы встретить доставку, второй — чтобы собрать шкаф, а в промежутке между этими событиями жить в окружении коробок. Объяснили, как выстраивается работа: не просто персональный менеджер, а показали, в чём выгода заказчика от коммуникации с ним. Сайт Ленинградского мебельного завода. Проект WebValley Studio.
Односложные нераскрытые преимущества
Частный случай ситуации описанной выше: преимущества, брошенные в клиента без каких‑либо пояснений.
Преимущества компании, которая предлагает услуги проведения инженерных коммуникаций. Хотя, как мы разбирали выше, они подходят абсолютно всем. Клиенту предлагается подумать самостоятельно, как ему помогут проверенные поставщики оборудования, с которыми сотрудничает эта компания, в чём будет заключаться гарантия и т. д. Преимущества не раскрыты, нет чёткой причинно-следственной связи, как они повлияют на результат, а значит, такой блок на сайте — бесполезен.
Похожая ситуация. Помимо клишированных преимуществ про кратчайшие сроки, здесь есть и вполне реальные. Но их ценность не донесена до клиента. Почему надо принимать в работу на любом этапе? Зачем мне проверка лицензирования, если у меня ещё нет лицензии, и я за ней и обращаюсь? Зачем мне ваше оборудование в аренду? Пользователь запутался, появилось множество вопросов, но самый главный так и остался без ответа — мне вообще смогут помочь в этой компании решить мою проблему? Нераскрытые преимущества так же бесполезны, как и клишированные.
Ещё один момент, на который надо обратить внимание в предыдущих примерах — гарантии. Это преимущество, которое на сайтах не раскрывается чаще всего. Прощёлкайте любые сайты в выдаче. До 90% сайтов будут обещать вам:
- Гарантия 100%,
- Гарантия качества,
- Гарантия на услуги,
- С гарантией,
- Гарантия 18 месяцев и пр.
Но если вы углубитесь в чтение, то обнаружите, что так и не поняли, а что именно вам гарантировали. Что является гарантийным случаем? Какие мои действия, если гарантийный случай наступит? Что будет дальше? Вы исправите косяки за свой счёт? Обменяете мне товар или отремонтируете? Выплатите компенсацию?
Гарантия — это настолько мощное преимущество, что в некоторых нишах (особенно всё, что связано с юридическими аспектами и взаимодействием с государственными органами), она становится ключевым фактором, влияющим на решение о покупке. И это преимущество можно вот так бездарно слить, если не пояснить, что мы имели в виду, а просто швырнуть в клиента гарантией.
Крутая гарантия — у нас есть страхование ответственности на 10 млн, но за все 20 лет работы мы им ни разу не воспользовались. Это гарантия в квадрате. Клиенту не просто гарантировали результат тем, что компания выигрывает 100% дел, но и сняли страх, что вдруг именно на моём деле случится осечка, что если именно я стану первым провальным проектом компании? Даже в этом случае клиент защищён, ведь есть страховка. А фраза, что за 20 лет работы мы ни разу ей не воспользовались, говорит о профессионализме куда лучше, чем пустые фразы о высококвалифицированных профессионалах. Сайт юридической компании МИАР Групп. Проект WebValley Studio.
Повтор заголовка в подписи
Следствие из предыдущего пункта. Преимущества высосаны из пальца. Из-за этого их невозможно нормально раскрыть. Но дизайнер, помимо заголовков преимуществ, заложил ещё и подписи к ним. Копирайтер решил проблему неизящно — в пояснениях написал тоже самое, что и в заголовке, налив сверху немного воды:
Этот шедевр был найден на сайте полиграфии. Собственное производство — у нас собственное производство. Индивидуальной подход — к каждому клиенту у нас свой индивидуальный подход. Абсолютно бессмысленный блок — занимает место, а ничего нового и полезного для клиента не несёт. Поясняющая информация тупо дублирует заголовок.
А это сайт центра медицинского лицензирования. Преимущества уже не такие бестолковые, но они не раскрыты, а значит — бесполезны. Вместо того, чтобы донести до клиента, в чём его выгода от того, что ему подберут персонал или проконсультируют по оборудованию, ему просто продублировали то, что он уже и так прочитал в заголовке.
Как исправить
Подпись должна раскрывать заголовок и доносить выгоды, а не тупо дублировать информацию. Если вы понимаете, что ничего не можете добавить к заголовку, никак не можете пояснить свою мысль и раскрыть выгоды — значит, это вообще не преимущество, и писать о нём на сайте незачем.
Свойства и преимущества
У любого товара, услуги, компании есть свойство, а есть — преимущество. Свойство — это характеристика, сухой факт. Преимущество — это выгода, которую получает клиент, благодаря этому свойству.
Смартфон имеет аккумулятор ёмкостью 10 000 А-ч — это свойство.
Забудьте о проводах, зарядных устройствах и пауэр-банках: ваш смартфон не разрядится в неподходящий момент — это преимущество.
Люди не покупают свойства, они покупают преимущества. Не пытайтесь продать характеристики, продавайте выгоды.
На примере товара, приведённом выше, разница между свойствами и преимуществами очевидна. Подмену преимуществ компании свойствами заметить сложнее:
Смартфон имеет аккумулятор ёмкостью 10 000 А-ч — это свойство.
Забудьте о проводах, зарядных устройствах и пауэр-банках: ваш смартфон не разрядится в неподходящий момент — это преимущество.
Люди не покупают свойства, они покупают преимущества. Не пытайтесь продать характеристики, продавайте выгоды.
На примере товара, приведённом выше, разница между свойствами и преимуществами очевидна. Подмену преимуществ компании свойствами заметить сложнее:
Перечисленные на сайте преимущества на самом деле являются свойствами компании. Это просто её характеристики, которые сами по себе ничего не несут для клиента. Свойства — это самовосхваление компании, а не польза и выгода для клиента от сотрудничества с ней. Более 500 человек в компании — ок, молодцы. Более 20 тыс. кв. м. площадь производственного комплекса — и что? Самое современное оборудование industrial 4.0 — ну, наверное, круто, не знаю. Вероятно, клиент должен упасть на колени и разрыдаться от счастья, что ему выпала честь работать с такой фирмой. Только это так не работает. Из этого бахвальства клиент так и не понял, почему ему надо заказать именно в этой компании, в чём для него будет выгода от сотрудничества.
Сравните с хорошим примером, чтобы понять, как правильно:
Преимущества на сайте застройщика, представленные в форме выгод клиента, а не характеристик компании. Например, собственное производство — это свойство, а преимущество в том, что благодаря ему клиент получает дом на 30% дешевле рыночной стоимости, плюс дополнительную гарантию от застройщика: ещё +12 месяцев к стандартной 5-летней гарантии, ведь в своих материалах он уверен и точно знает, что дом не развалится. Сайт строительной компании Генезис. Проект WebValley Studio.
Как исправить
Помните, что люди не покупают свойства, они покупают преимущества. Нельзя подменять одно другим. Преимущества доносят ценность до клиента, свойства — обосновывают и доказывают преимущество. При написании преимуществ компании для сайта всегда задавайте себе вопрос «А клиенту-то что с того»? Это поможет отделить реальные преимущества от пустого бахвальства и самовосхваления.
Преимущества в мире клиента
Часто компания выставляет преимуществом то, что ей кажется важным, не думая, имеет ли это значение для клиента. Такие преимущества не достигают цели. Например:
- Сертифицированные специалисты (товары, услуги, менеджмент качества) — компания может кичиться этим сколько угодно, а клиента волнуют более насущные проблемы. Ему не нужна реклама от сертифицированного специалиста, ему нужна такая, которая деньги приносит. Из серии, вам шашечки или ехать.
- 2 офиса: в Москве и Краснодаре. Если компания работает со всей Россией удалённо — то для клиента нет разницы, сколько офисов у компании. Пускай его даже не будет вообще. Если клиент в Москве — ему может быть удобно, что компания тоже находится в Москве, при этом, плевать он хотел, что где-то в Краснодаре есть ещё один офис. Но собственник компании считает это своим личным достижением, которое непременно надо подсветить на сайте.
- Благотворительность и забота о природе. Социальная ответственность бизнеса — это круто. Но при прочих равных условиях, не надейтесь, что это станет причиной, по которой клиенты захотят с вами работать.
- Производим распил на современном оборудовании industrial 4.0 (делаем сайты на платформе Тильда, используем краску для волос Wella и т. д.). Клиенту, как правило, плевать какие инструменты вы используете. Ему важен результат. От упоминания отдельных брендов, марок, стандартов желание купить именно у вас не вырастет.
То есть, преимущества не в мире клиента часто возникают из-за того, что компания сфокусирована на себе, а не на пользе заказчика. Это близко по смыслу с подменой свойств и преимуществ. Но есть более сложные случаи, которые, с одной стороны, связаны с непониманием своей целевой аудиторией, уровня её осведомлённости о продукте или компании, с другой — с обращением к неправильному сегменту аудитории.
Для первого случая характерны преимущества, которые понятны профессионалам. Они привыкли работать с определённой терминологией, инструментарием, технологиями. И забывают, что пользователь может этими понятиями просто не владеть, а потому не понять, какую непоправимую пользу ему пытается принести компания:
Преимущества на сайте стоматологической клиники не в мире клиента. Пользователю предлагают заплатить в 2 раза дороже за чистку по швейцарскому протоколу GBT. Что это? Откуда простым смертным это знать? Клиника пыталась подать это как нечто крутое, как мощное преимущество, отстраивающее её от конкурентов. Но, по-факту, клиент не понял, в чём преимущество. Ценность не сформирована. А если не видно разницы, зачем платить больше? =))
Преимущества на сайте компании, предоставляющей услуги финансового консалтинга. 9,5 оценка NPS. Целевая аудитория — предприниматели — ИП, малый и средний бизнес. NPS — это специфический термин, с которым знакомы далеко не все маркетологи, аналитики, бизнес-стратеги. Для предпринимателя, который совершенно не разбирается в построении финансовых моделей, бизнес-стратегиях, и пытается найти компанию, которая взяла бы эти вопросы на себя — это не преимущество. Оно не понятно. Не в мире клиента.
Второй момент, из-за которого преимущества получаются не в мире клиента — компания забывает, на какой сегмент целевой аудитории направлен текст, к кому он обращается:
Компания занимается продажей подшипников для спецтехники. Здесь особенно интересно четвёртое преимущество — Простота ремонта. На первый взгляд, преимущество неплохое, но задача сайта — продать товар ЛПР на стороне заказчика — генеральному директору предприятия, коммерческому директору, возможно, директору по закупкам — всем тем людям, которые сами подшипники в своей технике не меняют. Мы не работяг-механиков пытаемся убедить, а руководство. Значит и преимущества должны быть в мире руководства. Например: «Сокращение расходов от простоя техники. Наши подшипники долго не ломаются, не требуют постоянной замены, а их ремонт не отнимает много времени».
Питомник растений, который работает только с садовыми центрами — юридическими лицами, закупающими посадочный материал оптом. Если бы он был ориентирован на работу в розницу с физическими лицами, то указанные преимущества ничего бы не значили, были бы не в мире клиента. Среднестатистический человек не представляет, что такое 50 га площади. Насколько это большой участок земли и достаточен ли он для выращивания растений на открытом грунте. В то время как для садовых центров эта цифра говорит о многом: они сразу понимают, что это очень крупный поставщик посадочного материала. Сайт питомника растений Калужский тракт. Проект WebValley Studio.
Пример доработки ТЗ на копирайтинг маркетологом. Не всё, что собственник бизнеса считает своими преимуществами, на самом деле является преимуществами в мире клиента. Сайт застройщика Генезис. Проект WebValley Studio.
Всегда держите фокус на целевой аудитории. Помните, к какому сегменту вы обращаетесь. То, что важно одному сегменту, вообще не будет преимуществом для другого. Это одна из причин, почему аудиторию надо сегментировать. Мотивация к покупке и триггеры могут сильно отличаться, с ними нужно по-разному выстраивать коммуникацию.
Изучайте, что действительно важно для ваших клиентов, чтобы преимущества компании находили отражение в их мире.
Изучайте, что действительно важно для ваших клиентов, чтобы преимущества компании находили отражение в их мире.
Бутик шуб класса люкс стоимостью от 1 до 15 млн рублей. Это настолько высокий ценовой сегмент, что тут не работают те же триггеры, что с шубами за 100−300 тыс. Состоятельный сегмент целевой аудитории, который не привлечёшь на цена/качество или на любой вкус и кошелёк. Это люди, которым нужен сервис, которые хотят почувствовать свою исключительность. Не толпиться в магазине, пропахшем нафталином и старым мехом, где всё навалено так, что без продавца ничего не найдёшь, не ловить оценивающие взгляды, пытающиеся понять, сколько ж у тебя денег, а примерить роскошь в спокойной обстановке. Походить в шикарных мехах, как на подиуме. Рассмотреть каждую шубу и выбрать ту самую. Неочевидный триггер, который удалось почерпнуть из отзывов клиентов: «красиво висят». Этому сегменту важно даже помещение салона и экспозиция товара! Для них — это настоящее преимущество. Сайт мехового салона Albinel. Проект WebValley Studio.
Как исправить
Сместите фокус с компании на клиента. Меньше «мы», больше «вы». А чтобы преимущества были не только понятны для клиента, но и побуждали его к покупке — закажите маркетинговое исследование. Тогда вам не придётся рожать преимущества, ведь вы точно будете знать, что волнует вашего заказчика, и как закрыть эти страхи.
Что не так с преимуществами компании в цифрах: ужасное разоблачение
Популярный приём — выносить на сайт преимущества компании в цифрах:
Преимущества в цифрах на сайте WebValley Studio.
Это очень мощный приём, так как цифры указывают на реальные факты, легко воспринимаются, хорошо привлекают и удерживают внимание.
роалпиал56равплор — из всего этого вы, наверняка, выцепили только 56. Цифры зацепили внимание, тогда как окружающий текст прошёл мимо.
Но, как и любым мощным приёмом, цифрами в преимуществах надо уметь пользоваться. Начинающие дизайнеры и неопытные копирайтеры превращают это в цифры ради цифр, и получается ерунда.
Есть три основные ошибки при написании преимуществ в цифрах.
роалпиал56равплор — из всего этого вы, наверняка, выцепили только 56. Цифры зацепили внимание, тогда как окружающий текст прошёл мимо.
Но, как и любым мощным приёмом, цифрами в преимуществах надо уметь пользоваться. Начинающие дизайнеры и неопытные копирайтеры превращают это в цифры ради цифр, и получается ерунда.
Есть три основные ошибки при написании преимуществ в цифрах.
Цифры не в мире пользователя
Цифры должны быть понятны пользователю. Что значит «расстояние 60 метров»? В школе все бегали спринт на 60 метров, поэтому людям несложно представить себе, что такое «60 метров — расстояние от жилого комплекса до станции метро»:
Цифра понятна пользователю. Он знает, что 60 метров — это неподалёку от дома. Для больших расстояний уже имеет смысл указывать в минутах: 7 минут на автомобиле, 20 минут пешком и т. д. Дизайн сайта премиального коттеджного посёлка. Проект WebValley Studio.
Но что такое 60 метров в высоту? Как бы вы хорошо не понимали, сколько это на плоскости, представить 60 метров в высоту — затруднительно. Насколько это высоко?
Преимущества в цифрах на сайте компании, которая организовывает прыжки с тарзанкой для новичков. Что такое 60 метров — высота сооружения, с которого совершается прыжок? Это много или мало? Насколько это высоко? Тут было правильнее написать, например, «с высоты, равной 20-этажному дому» — это в мире клиента, такая цифра понятна даже тому, кто ни разу не прыгал. Тому, кто никогда не жил в 20-этажной высотке. Ведь даже если живёшь в стандартном 9-этажном доме, то уже можно прикинуть, что это — как 2 моих дома, то есть, очень высоко. А представить себе 60 метров — проблематично.
Неправильные выводы на основе вычислений
Человеческий мозг такая штука, которая, когда видит несколько стоящих рядом цифр, пытается производить с ними какие-то вычисления: складывать, делить, сравнивать.
Возможно, это школа так деформирует наш мозг, что он автоматически, как только видит текст, в котором вставлены цифры, начинает воспринимать его, как условие задачи, которую надо решить. Поэтому надо с пристрастием смотреть на свои преимущества в цифрах и искать, нет ли нестыковочек, скрытого подтекста — любых неправильных выводов, которые может сделать пользователь после несложных вычислений.
Возможно, это школа так деформирует наш мозг, что он автоматически, как только видит текст, в котором вставлены цифры, начинает воспринимать его, как условие задачи, которую надо решить. Поэтому надо с пристрастием смотреть на свои преимущества в цифрах и искать, нет ли нестыковочек, скрытого подтекста — любых неправильных выводов, которые может сделать пользователь после несложных вычислений.
Пример преимуществ в цифрах на сайте юридической компании, оказывающей услуги правовой помощи пострадавшим в ДТП. Первое, что считывается пользователем: из 2 млн обращений в компанию, всего лишь 4257 дел закончились в пользу клиента. Эта информация моментально считалась и ушла в подсознание. Из-за неумения работать с преимуществами в цифрах, компания добилась того, что пользователем был сделан неправильный вывод. Никто не станет разбираться, что 4257 удачных дел — это за 3 года, а более 2 млн клиентов — это за 10 лет. Хотя и эти цифры настолько разного порядка, что вызывают вопросы. Возможно, не все из этих 2 млн клиентов пошли в суд под защитой данной компании, а ограничились простой консультацией. Но из таких преимуществ мы этого не узнаем, да и не интересно это пользователю, он своё мнение уже сложил. К этому примеру вообще много вопросов, начиная с того, почему преимущества не приведены к одному знаменателю, почему компания работает 17 лет, количество клиентов указано за 10 лет, а успешные дела — за 3 года. Цифры выходят не сопоставимыми. Заканчивая тем, что такое «более 4257 вопросов». Надо либо нормально округлять — «более 4200 вопросов», либо уже писать точную цифру — «4257 вопросов». Оставлять, как на скрине, нельзя.
Сайт краевой администрации. 13 443 детей родилось, 6200 мест в детских садах построили. Какой первый вывод? О, Боже, детям мест в детских садах не хватит! Или… Постойте-ка =))
Почему это так работает: потому что роалпиал56равплор! Теперь понимаете силу цифр в преимуществах? Они настолько мощно захватывают внимание, что мозг зацепляется за них и перестаёт воспринимать другую информацию. Мало кто притормозит на этом моменте, проанализирует информацию и скажет: «Постойте-ка. Это же 6200 НОВЫХ мест. А ведь были ещё и старые. Если к старым прибавить новые, то, может быть, их всё-таки хватит на 13 443 ребёнка»? Большинство пользователей просто уйдут с сайта, бормоча, что местная администрация — козлы.
Цифры, высосанные из пальца
Копирайтер слышал, что преимущества компании в цифрах — это круто. Но работать с этим инструментом он не умеет. Не понимает, что цифры ради цифр не стоят ничего. Что недостаточно вписать в рядок несколько случайных чисел, чтобы попёрли продажи. В итоге получаются такие шедевры:
Преимущества в цифрах на сайте стоматологической клиники. 1е место занимает пациент, а сегодня 21 век =)) Бесценная информация.
Как исправить
Преимущества в цифрах на сайте — эффективный, но сложный инструмент, требующий от дизайнера или копирайтера опыта и навыка работы с числами в контенте. Цифры должны быть понятны пользователю и выражать преимущество, которое действительно ценно для клиента. Следите, чтобы рядом стоящие цифры не подталкивали клиента к неверным выводам. Если преимущества компании тяжело выразить в цифрах — лучше отказаться от этой идеи, чем пытаться высосать их из пальца. Круто, когда цифры характеризуют не компанию, а как она помогла клиентам: 173 выигранных дела по банкротству физлиц, принесли клиентам 20 млн рублей за год на рассылках и т. д. Просто цифры ради цифр работать не будут.
Гигиенические преимущества
Есть преимущества, которые объективно на преимущества не тянут, но их предлагают все конкуренты. Ваше предложение эти преимущества никак не усиливают, но если их не упомянуть, то как будто ваше предложение выглядит хуже, чем у конкурентов. Такие преимущества называют гигиеническими.
Большинство веб-студий, говоря о своих преимуществах, указывают, что делают сайты с адаптивной вёрсткой, а в услугу разработки входит подключение домена и хостинга. Но это никакие не преимущества. Делать сайты адаптивными — это отраслевой стандарт. Сайт, который некорректно открывается на мобильном телефоне — сегодня нонсенс. В 2007-м это ещё могло быть преимуществом, но не сейчас. Без домена и хостинга сайт вообще не работает, его и сайтом-то назвать будет нельзя, просто кусок кода. Так какое это преимущество? Это норма, и так делают все. Но если не сказать, что мы тоже делаем адаптивные сайты, сажаем их на хостинг и домен, то наше предложение как-будто бы выглядит хуже на фоне конкурентов.
Как исправить
Гигиенические преимущества нужны на сайте, но их не надо прописывать явно. О них можно сказать по тексту как бы между прочим, а не делать заголовок «Преимущества» и под ним перечислять очевидные вещи. В примере выше, правильнее было рассказать о домене, хостинге и адаптиве, когда перечисляем в тексте этапы работ: дизайн разрабатывается с адаптивной версией, а перед сдачей проекта заказчику, он тестируется, сажается на хостинг и домен. Так пользователь поймёт, что мы тоже это делаем, но мы не будем выглядеть глупо, выставляя это преимуществами.
Преимущества компании в сравнении с конкурентами
По этическим соображениям лучше не сравнивать себя с конкурентами слишком уж явно. Это бывает полезно только в том случае, если у вас действительно уникальный продукт. Либо малоизвестный аудитории, в отличие от более известного, но менее полезного аналога.
Адекватные преимущества в сравнении с конкурентами. Потребители уже хорошо знают, что такое хостел, у данного способа размещения есть активные сторонники. А с капсульными отелями большинство людей ещё не знакомы. Привлечь любителей путешествовать экономно за счёт сравнения с ближайшим аналогом — вполне уместно.
В любом случае, если вы выбрали такую форму подачи преимуществ на сайте, делайте это аккуратно, чтоб конкуренты по шее не дали.
Посмотрите, как агрессивно компания отстраивается от конкурентов. При этом много спорных моментов и голословных утверждений: «у всех конкурентов 12 месяцев», «у конкурентов этого нет вообще». Возникает вопрос: а хорошо ли вы знаете рынок, чтобы утверждать такое? Сколько конкурентов вы исследовали, чтобы сделать такие выводы? Каким образом собрали информацию, в том числе, инсайдерскую? С одной стороны — это обман потребителя, с другой — попытка полить грязью конкурентов, выставив себя в белом пальто. И то, и другое — отталкивает потребителя. Выглядеть лучше, за счёт принижения других — тактика слабаков.
Как исправить
Пишите свои преимущества как есть, а сравнивать с конкурентами и делать выводы — оставьте пользователю.
Много воды в преимуществах
Преимущества должны считываться мгновенно. Это не значит, что их надо писать односложно. Текст может быть подробным и длинным, но каждое слово должно быть весомым. Ненормально, когда клиенту приходится ковыряться в грязи, пытаясь откопать крупицы золота.
Строительная компания предлагает нам прочитать вот такую портяночку текста о своих преимуществах. Жёлтым выделена вода — текст, который можно безжалостно удалить без последствий для смысла. Примерно на 70% текст состоит из бесполезной информации. Никто не будет это читать, в надежде, что среди «задач не из лёгких», «жарких споров», «лучших умов строительного сектора экономики» вдруг найдутся реальные причины для обращения в эту компанию.
Как исправить
Выбрасывайте слова из текста о преимуществах до тех пор, пока ещё сохраняется смысл. Если видите, что слово опустили и смысл поплыл — значит, текст высушен до конца.
SEO в преимуществах компании на сайте
Чтобы страница продвигалась в поисковых системах, текст оптимизируют под ключевые запросы. Но, в погоне за первыми строчками в поиске, на сайте получается ерунда.
Преимущества на сайте компании, предоставляющей услуги медицинского лицензирования. Этот текст не несёт никакой пользы для клиента и существует только для того, чтобы вписать в него ключевые запросы. Фактически, весь этот текст не более чем обрамление для ключей.
Преимущества на сайте мебельной компании. Мало того, что текст тут только чтобы посадить в него ключи, так и вписаны они очень коряво: «…сотрудничество по дистрибуции вашего города Москва…» — ШТА?
Как исправить
Ключи должны быть вписаны в текст так, чтобы это было незаметно. Если ключ никак не садится — то лучше его не писать. Для SEO продвижения мало напихать в преимущества ключевых запросов. Текст должен быть уникальным, полезным, естественным, экспертным, оптимизированным. Только при соблюдении всех этих условий страница будет продвигаться в поиске.
Излишний креатив в преимуществах на грани неадекватности
Креатив в преимуществах уместен, только если он не мешает пониманию текста.
Преимущества на сайте компании, продающей подшипники. Креатив из копирайтера лез со всех щелей. Вероятно, клонированием пытались сказать, что мы всё успеваем, всегда на связи, у нас есть дополнительный ресурс для больших заказов. Игнорирование законов пространства и времени — попытка более интересно сказать о быстрой доставке. Транзакции — это начало, скорей всего означало, что мы не бросаем клиента, нет такого, что лишь бы продать. Намёк на гарантийное и постгарантийное обслуживание. Можно ли это понять без переводчика? И насколько наше толкование близко к тому, что хотел сказать автор? Неизвестно.
Как исправить
Основная задача преимуществ — донести выгоды работы с вашей компанией. Это не подходящее место для того, чтобы поупражняться в остроумии и красноречии. Если есть хоть малейшие сомнения, что ваш креатив может быть не понят читателем, или понят неправильно — не рискуйте. Не заставляйте пользователя отгадывать загадки.
Больше — не значит лучше
Если написать 20 преимуществ — это не значит, что клиент лучше проникнется и бросится покупать у вас. Кроме того, он может предпочесть конкурента, у которого 3 преимущества на сайте, но все бьют в цель.
19 преимуществ на сайте магазина часов. Такое чувство, что дизайнеру просто хотелось задействовать все иконки, которые у него есть. Но, видимо, фантазия закончилась уже после 5й фразы. Если вначале преимущества ещё были вполне неплохими, то к концу превратились в какую-то дичь. Мы вам пришлём подарок, но не скажем какой. А может и не пришлём. Не закажете — не узнаете =)) Какие-то акции проводим, не знаем какие. А в каталоге товаров (ну надо же!) есть описание этих товаров и фильтры. И возврат можно в течение 14 дней сделать. При том, что по закону «О защите прав потребителей» — в любом подобном магазине это возможно, в чём преимущество-то?
Как исправить
Не надо рожать преимущества. Не надо думать, что чем больше, тем лучше. Пусть преимуществ на сайте будет 2, но мощных, чем 6 (чтоб на сайт в шаблон красивенько село по 3 штуки в 2 ряда), но высосанных из пальца.
Не пользуйтесь подборками 3, 5, 10, 30 преимуществ компании на сайте для клиента
Худшее, что вы можете сделать для сайта компании, воспользоваться готовыми списками преимуществ. Помните, что ваша цель — отстроиться от конкурентов, показать покупателю, чем вы лучше, а не тупо повторить за ними ту же дичь, что они понаписали у себя на сайтах.
Преимущества в готовых подборках — 99,9%, что не подойдут для вашей компании. А представьте, сколько компаний уже воспользовались этими подборками, и со сколькими конкурентами у вас будут одинаковые преимущества?
Преимущества в готовых подборках — 99,9%, что не подойдут для вашей компании. А представьте, сколько компаний уже воспользовались этими подборками, и со сколькими конкурентами у вас будут одинаковые преимущества?
Список из 30 «универсальных» конкурентных преимуществ компаний, который кочует по интернету из сайта в сайт. Если вы читали статью внимательно, то уже видете, что предложенные преимущества — это дичь несусветная, которая никак не поможет в продажах. Вообще не в мире клиента. Самовосхваление компании в только одной ей понятных категориях. Да клиенту плевать, как и за счёт чего повышается ваша чистая прибыль, какие у вас кадровые перестановки были в прошлом году, брали вы кредит на оборудование или за свои кровные купили.
Как исправить
Забудьте о том, что существуют такие подборки. Речь о вашей компании, её репутации, статусе, продажах. Вы просто не можете позволить себе написать на сайте что-то из этих подборок. Закажите маркетинговое исследование, найдите реальные преимущества компании, которые отстроят вас от конкурентов и будут в мире клиента.
Нужны ли на сайте преимущества компании или хватит только преимуществ продукта
Что первично? Продукт или компания? Если держим фокус на продукте, а компания ничем не примечательна — то хватит преимуществ продукта. Например, компания торгует надувными бассейнами. Пользователю не так важно, где он его купит — в магазине у дома, с рук на Авито, закажет на Вайлдберрис или в вашем интернет-магазине. Его будут волновать только преимущества бассейна: то, насколько продукт закрывает его потребности. Читать великие достижения о том, что мы уже 2 года продаём эти бассейны и осчастливили ими 100 человек — никому не интересно.
Если продукт известный и стандартный, такой же как у конкурентов, то без преимуществ компании не обойтись, а на преимущества продукта можно забить. Например, если вы страхования компания и предлагаете полис ОСАГО. Нет никакого смысла выставлять преимущества продукта и объяснять, что ваш полис всем полисам полис! Важнее преимущества компании — какая история выплат у страховой? Как организован процесс получения полиса? Насколько тяжело получить возмещение и т. д.
Если ваш продукт или услуга — кастом, вы делаете что-либо на заказ, и эта работа требует экспертизы — на сайте надо указывать и преимущества продукта, и преимущества компании.
Если продукт известный и стандартный, такой же как у конкурентов, то без преимуществ компании не обойтись, а на преимущества продукта можно забить. Например, если вы страхования компания и предлагаете полис ОСАГО. Нет никакого смысла выставлять преимущества продукта и объяснять, что ваш полис всем полисам полис! Важнее преимущества компании — какая история выплат у страховой? Как организован процесс получения полиса? Насколько тяжело получить возмещение и т. д.
Если ваш продукт или услуга — кастом, вы делаете что-либо на заказ, и эта работа требует экспертизы — на сайте надо указывать и преимущества продукта, и преимущества компании.
Как оформить блок с преимуществами на сайте: примеры дизайна
Показываем примеры оформления блока преимуществ на сайте: от тех, которые давно пора забыть до самых креативных и современных.
Дизайн преимуществ на сайте с иконками
Когда речь заходит о преимуществах компании на сайте, все обычно представляют себе это:
Заголовок «Преимущества», а под ним в 3−4 колонки, в 1−3 ряда располагаются иконки с названием преимущества и коротким пояснением. Классический и, в определённой степени, клишированный приём. И к разговору о креативе на грани неадекватности — зацените, как эта компания обещает испортить нам воздух =))
По идее, это должно работать хорошо, ведь иконки легко считываются и поддерживают мысль, которая доносится в тексте. Но почему тогда это выглядит настолько всрато? Есть несколько причин, почему иконки удешевляют дизайн.
Много иконок из разных наборов
Больше иконок Богу иконок! Высыпьте весь набор, если хотите превратить дизайн в помойку.
Иконки из разных наборов: одни пустотелые, другие закрашенные, с детальной прорисовкой и примитивные, с острыми углами и скруглённые. Это делает дизайн грязным, неаккуратным. А когда их так много, начинает рябить в глазах, пользователь отвлекается на лишний шум, который они создают.
Иконки в дизайне блока преимуществ должны быть якорными объектами, фокусировать внимание, а не рассеивать его. Помните, что задача этого блока на сайте — убедить пользователя совершить покупку у вас. Вы же хотели ему рассказать, почему именно ваша компания сможет решить его проблему, а не показать, какие у вас есть иконочки?
Слишком крупные иконки
Иконки ведут взгляд пользователя. Ключевой момент: они должны притягивать внимание, а не перетягивать его на себя. Не делайте их слишком крупными или слишком яркими.
Гигантские иконки, с цветным грязным градиентом, ещё и акцентированные в кругах. Они полностью перетянули на себя внимание. Пользователь уже не воспринимает преимущества, написанные под ними. Вместо того, чтобы упростить восприятие контента, иконки сами стали контентом, оттеснив на задний план все смыслы.
Аккуратные минималистичные иконки. Правильный размер позволяет им быть заметными, при этом не перетягивать на себя излишнее внимание, и гармонично вписываться в дизайн, уравновешиваясь с другими объектами. Сайт мерчендайзингового агентства X-Merch. Дизайн WebValley Studio.
Излишняя детализация и редуцирование
Согласно исследованиям Джорджа Миллера «The Magical Number Seven, Plus or Minus Two», люди способны удерживать внимание, запоминать и воспринимать не более 7 элементов. Это не аксиома, но важный принцип, который говорит о том, что если в поле зрения человека находится слишком много элементов, то создаётся визуальный шум, который отвлекает и рассеивает внимание.
Если использовать иконки с высокой детализацией, возникает эффект, подобный описанному в предыдущем пункте: иконки пытаются стать главным элементом дизайна, затмить собой всё, только теперь не за счёт крупного размера, а за счёт количества деталей.
Если использовать иконки с высокой детализацией, возникает эффект, подобный описанному в предыдущем пункте: иконки пытаются стать главным элементом дизайна, затмить собой всё, только теперь не за счёт крупного размера, а за счёт количества деталей.
Пример дизайна блока преимуществ с иконками высокой детализации. Поймайте себя на том, что вы рассматриваете картинки, а не вникаете в преимущества. У вас в голове больше отложился визуал, чем смыслы.
Задача иконки — привлечь внимание, но не удерживать его. Как только вы это поймёте, сразу станет очевидно, что этой задачи не нужны человечки в очках и галстуках, секундомеры, с размеченной ценой деления и прочее. Для этого даже не важна форма: хватит цветных точечек.
Зелёные круги — это тоже иконки. Звёздочка, человечек и пожатые руки редуцированы до простых цветных точек. Стало ли менее понятно? Исказился ли смысл? Нет. Так выходит, чтобы иконка справилась со своей задачей — направила взгляд пользователя — человечкам не нужно дорисовать глазки и одежду? Более того, и сам человечек не нужен. Сайт дистрибьютора спутникового оборудования ТехноФорум Телекоммуникации. Дизайн WebValley Studio.
Тренд на редуцирование, упрощение, минимализм — не просто дань моде. Кроме того, что отсутствие лишних деталей в макете делает дизайн чище и премиальнее, оно также помогает сосредоточиться на главном, не отвлекаясь на фоновые элементы. Уделять внимание смыслам, а не рассматриванию иконок.
Идеально чистый дизайн блока преимуществ с редуцированными иконками. Тонкие кольца направляют взгляд пользователя, позволяя сосредоточиться на важном. Увеличение их количества от одного преимущества к другому считывается, как усиление выгод: с каждым пунктом доверие к фирме становится весомее. Сайт компании, предоставляющей услуги ценового инжиниринга, Ценовые Системы. Дизайн WebValley Studio.
Затёртые до дыр стоковые иконки
Стоковые иконки способны удешевить любой дизайн. Они шаблонные, заезженные, примелькавшиеся уже на 1000 сайтах. Уникальный дизайн с неуникальными иконками моментально превращается в шаблон.
Все эти ленточки со звёздочками, большие пальцы вверх и пожимание рук — наверняка вы всё это видели на других сайтах дохералион раз.
Чтобы иконки не удешевляли дизайн — отрисовывайте их под проект с нуля.
Уникальные иконки смотрятся стильно, необычно, интересно. А главное — идеально садятся в дизайн-концепцию. Ведь вам не приходится подбирать «что-то наиболее подходящее», идти на компромиссы и мириться с тем, что есть. Вы изначально рисуете то, что укладывается в настроение и стилистику сайта: воздушные или солидные, сгруглённые или острые. Сайт компьютерного клуба Panda Banda. Дизайн WebValley Studio.
Иконки, направленные на ассоциации первого уровня
Дёшево — значит надо показать свинью-копилку, кошелёчек или стопочку монет.
Быстро — значит надо показать часы, секундомер или ракету.
Качественно — значит надо показать наградную ленточку, звезду или большой палец вверх.
И чего после этого удивляться, что сайт выглядит, как дешёвый шаблон?
Быстро — значит надо показать часы, секундомер или ракету.
Качественно — значит надо показать наградную ленточку, звезду или большой палец вверх.
И чего после этого удивляться, что сайт выглядит, как дешёвый шаблон?
Примеры иконок, направленных на ассоциации первого уровня.
Иконки не должны быть оторваны от контекста. Ненормально показывать часы, а в преимуществах писать при низкую цену. Иконки должны выстраивать чёткий ассоциативный ряд. Но для этого необязательно опускаться до ассоциаций первого уровня.
Ассоциации первого уровня — это, что вижу, то пою. Всегда на связи — показали наушники с микрофоном. Экономия — монетки в свинью копилку сыпятся. То, что называется «дизайн в лоб».
Чтобы дизайн выглядел более профессионально, дорого и премиально, при отрисовке иконок нужно использовать ассоциации более высоких уровней. Редуцировать их до абстракций, чей смысл легко считывается на уровне подсознания, а не бьёт в лоб.
Шикарный пример того, что дизайн блока преимуществ на сайте может выглядеть стильно и дорого, даже если он оформлен с помощью иконок:
Ассоциации первого уровня — это, что вижу, то пою. Всегда на связи — показали наушники с микрофоном. Экономия — монетки в свинью копилку сыпятся. То, что называется «дизайн в лоб».
Чтобы дизайн выглядел более профессионально, дорого и премиально, при отрисовке иконок нужно использовать ассоциации более высоких уровней. Редуцировать их до абстракций, чей смысл легко считывается на уровне подсознания, а не бьёт в лоб.
Шикарный пример того, что дизайн блока преимуществ на сайте может выглядеть стильно и дорого, даже если он оформлен с помощью иконок:
Макет профессионального дизайнера, без примитивных иконок и дизайна в лоб. Виртуозная работа с композицией, цветом и ассоциациями третьего уровня — абстракциями. Тоже дизайн с иконками, но сравните с примерами выше. Разница видна сразу. Сайт IT-компании GartLight Solutions. Дизайн WebValley Studio.
Фишка в том, что «Экспертность» можно показать вот так:
Умный мужик, шестерёночки в голове-то крутятся, идеи приходят, лампочка загорается
А можно так:
Открытость сознания. Разносторонняя экспертиза. Непрерывный рост не только вверх, но и в стороны — не просто углубление своих знаний, но и понимание, смежных областей, позволяющее выстраивать систему. Эксперт — это больше, чем просто умный мужик, это творец.
«Гарантии» можно изобразить так:
Иконка, которая есть практически в любом наборе. Вы защищены щитом, а работа будет сделана. Вон, даже галочку поставили, что сде-ла-но.
А можно так:
Щит и галочка безошибочно считываются мозгом, без примитивных попыток навести геральдику. А двойная редуцированная галочка добавляет ощущение надёжности, двойного контроля, выполнения работы сверх ожиданий.
Абстрактные иконки считываются и понимаются пользователем не хуже, чем «иконки в лоб». А работают эффективнее, ведь они не просто считываются сознанием и моментально забываются, как миллион стоковых иконок, увиденных ранее, а уходят напрямую в подсознание, закрепляясь там, и формируя убеждение.
Хуже стоковых иконок могут быть только стоковые картинки
Блок преимуществ на сайте, оформленный фотографиями, смотрится не так дёшево и шаблонно, как с иконками. Но только не в том случае, если использованы стоковые клип-артные фотографии.
Смотришь и понимаешь, что люди ненастоящие. Эти улыбчивые силиконовые грузчики, холодильники, в которых лежат пластмассовые продукты, свиньи копилки в руках мужчин, одетых в деловые костюмы с галстуками. Нелепый трешачок.
Блок преимуществ нужен на сайте, чтобы вызвать доверие. А как можно доверять компании, если её сайт пропитан неестественностью и фальшью?
Могут ли уживаться иконки и картинки
Смешивать иконки и картинки в блоке преимуществ чаще всего плохая затея. Ту мач элементов, получается перебор.
Жесть. Какой-то адский борщ из стоковых картинок, иконок, галочек, плашек кнопок, текста… Всё пестрит, рябит, выглядит нечитаемо.
Более контрастный пример: уже можно рассмотреть и текст, и картинку, и иконки. Но возникает вопрос: на что смотреть? Фоновое изображение перетягивает на себя внимание, отвлекает от преимуществ, создаёт визуальный шум, мешает восприятию.
Но способ подружить иконки с картинками — существует. Просто не лепите их друг на друга. Разведите композиционно на разные участки холста.
Фото и иконки не мешают друг другу, дизайн не выглядит перегружено.
В дизайне использованы фото, иконки, текст, кнопки, списки. Но даже при таком количестве элементов, дизайн не выглядит перегружено. Он остаётся чистым и гармоничным. Обратите внимание, что в примере выше, где грузчики и квартирный переезд, использован тот же набор элементов. Но здесь — гармоничная, уравновешенная композиция, а там — просто помойка. Чтобы добиться такого результата от дизайнера требуется высокий уровень мастерства. Поэтому, если дизайн заказан у не очень опытного специалиста, лучше иконки с картинками не смешивать вообще. Сайт дистрибьютора спутникового оборудования ТехноФорум Телекоммуникации. Дизайн WebValley Studio.
Плашки в дизайне блока преимуществ
Плашками легко удешевить дизайн блока преимуществ на сайте. Это элемент, который способен любой дизайн сделать морально устаревшим, грязным, непрофессиональным.
Если в дизайне есть хоть один лишний элемент — это уже не дизайн. В дизайне каждый объект имеет определённое назначение и находится строго на своём месте. Плашка — бесполезный элемент, который не несёт никакой пользы. Только загрязняет и утяжеляет макет.
Отдельный вид искусства — плашки, положенные поверх фото:
Из-за плашек всё равно фото как следует не рассмотришь, даже если они полупрозрачные с эффектом матового стекла. Но пестрота на фоне отвлекает от главного — от преимуществ, которые вы хотели донести этим блоком. И здесь можно возразить, что в данном случае плашка как раз полезна, у неё есть функция — она делает текст читаемым на цветастом фото. Нет. То, что текст нечитаем, если его расположить поверх фото, говорит о том, что изначально у вас проблема с композицией и контрастом. Ошибка глубже и серьёзнее.
Смотрите эксперимент. Мы взяли один из блоков из примеров выше с плашками, и эти плашки просто стёрли:
Обратите внимание, насколько чище и аккуратнее стал макет. В этом дизайне ещё много проблем, но даже такое простое действие, как удаление лишнего, уже заставило макет задышать и сделало его легче для восприятия.
Тяжело придумать случай, когда бы плашки в дизайне были действительно необходимы, и работали на улучшение дизайна. Поэтому постарайтесь просто забыть о них, и никогда не использовать. Но если у вас плашковое недержание, и вы не представляете себе жизнь без того, чтобы не замыкать преимущества в отдельных клетках, рассмотрите в качестве альтернативы линейное искусство (line art):
Пример дизайна блока преимуществ в технике лайнарт. Тонкие, едва заметные линии расчерчивают макет на отдельные квадраты, образуя подобие сетки. Похоже на плашки, но гораздо легче и воздушнее. И да, это тоже создаёт визуальный шум. Но в данном случае приём применён грамотно, концепция поддерживается на всём сайте, плюс, ниша — инжиниринговые услуги, а в подобных тематиках линейное искусство работает особенно хорошо, так как подсознательно задаёт порядок, ровность, аккуратность. В околостроительных нишах — это важная ассоциация.
Современные тренды веб дизайна в оформлении блока преимуществ компании на сайте
Делимся фишками и лайфхаками, которые помогут оформить преимущества на сайте стильно.
Текстовое оформление преимуществ компании на сайте
Первое, с чем надо смириться, чтобы блок преимуществ перестал быть шаблонным — преимущества не обязательно должны быть расположены колонками по 3−4 штуки в ряд.
В предыдущем разделе, когда мы рассказывали о том, как правильно написать преимущества для сайта, мы много внимания уделили тому, что преимущества должны быть хорошо раскрыты. И если глупости, типа «Низкие цены», «Высокое качество», «Индивидуальный подход» укладываются в 2 слова, и их легко посадить в узкие колонки, то настоящие преимущества, которые доносят ценность и выгоды, предполагают много текста, который в узкие колонки уже не впихнёшь, если не хочешь, чтобы они отвисали как… ну, вы поняли =))
С объёмным текстом надо уметь работать. Это требует креатива и мастерства от дизайнера. В ответ на этот вызов сформировалось новое направление: типографический веб-дизайн. Есть целые сайты, которые созданы без графики вообще: никаких фотографий, иконок, финтифлюшек. Весь визуал задаётся через работу с типографикой: со шрифтами, иерархией заголовков, интересным положением текста в сетке и т. д.
Если дизайнер умеет работать с типографикой, то блок преимуществ не требует никакой графики. Не нужно лепить иконки, картиночки. Текстовое оформление блока будет достаточным, чтобы преимущества хорошо считывались, а внимание пользователя велось последовательно.
В предыдущем разделе, когда мы рассказывали о том, как правильно написать преимущества для сайта, мы много внимания уделили тому, что преимущества должны быть хорошо раскрыты. И если глупости, типа «Низкие цены», «Высокое качество», «Индивидуальный подход» укладываются в 2 слова, и их легко посадить в узкие колонки, то настоящие преимущества, которые доносят ценность и выгоды, предполагают много текста, который в узкие колонки уже не впихнёшь, если не хочешь, чтобы они отвисали как… ну, вы поняли =))
С объёмным текстом надо уметь работать. Это требует креатива и мастерства от дизайнера. В ответ на этот вызов сформировалось новое направление: типографический веб-дизайн. Есть целые сайты, которые созданы без графики вообще: никаких фотографий, иконок, финтифлюшек. Весь визуал задаётся через работу с типографикой: со шрифтами, иерархией заголовков, интересным положением текста в сетке и т. д.
Если дизайнер умеет работать с типографикой, то блок преимуществ не требует никакой графики. Не нужно лепить иконки, картиночки. Текстовое оформление блока будет достаточным, чтобы преимущества хорошо считывались, а внимание пользователя велось последовательно.
Типографическое оформление блока преимуществ на сайте бренда спортивной экипировки EQPT. Дизайн WebValley Studio.
Текстовое оформление блока преимуществ на сайте юридической компании Asap Legal. Дизайн WebValley Studio.
Работа с сеткой
Ещё раз: преимущества не обязательно должны стоять симметрично одно под другим в колонках. Не обязательно текст должен располагаться под иконочкой, а фото — над или сбоку от текста, который оно иллюстрирует. Сетка может быть любой, и асимметричной тоже. Главное, чтобы композиция была уравновешена.
Идеальная работа с сеткой. Вместо одного большого заголовка посередине, под которым было бы 3 картинки или иконки, под которыми, в свою очередь, находился бы текст преимуществ, было выбрано более креативное и стильное расположение элементов. Одно общее крупное фото на несколько колонок — шикарное решение для ниш, где визуал имеет значение для принятия решения. Сайт студии дизайна интерьеров INGAIN. Дизайн WebValley Studio.
Классный блок с преимуществами на сайте свадебного салона RE: BRIDE. Гармоничная асимметрия. Уравновешенность фото и текста. А в правой колонке — видео для полного WOW-эффекта.
Интересная подача преимуществ на сайте веб-разработчиков. Вместо картинка-текст, картинка-текст, все картинки убраны в левую часть блока, образуя коллаж-мудборд, который передаёт атмосферу, царящую в компании, а справа — текст преимуществ.
Ещё один из современных трендов — полноэкранный дизайн. Если текст преимуществ большой — не обязательно лепить его в один блок. Разбейте на несколько. При этом, эти несколько блоков, могут иметь совершенно разное оформление, поддерживаемое какими-то общими деталями концепта. Первое преимущество оформлено типографически. Заголовок вынесен под текст, оформлен, как цитата. В блоке не используется графика, только заливка фирменным зелёным цветом. Второй блок имеет классическое расположение текста и заголовка, а визуал вынесен в левую часть, что придаёт макету приятную асимметрию. И хотя блоки настолько разные, благодаря цифрам 01, 02, а также цветовым акцентам, у этих блоков есть преемственность, и мы понимаем, что это логическое продолжение.
Уравновешенная композиция с диагональной симметрией. За счёт работы с сеткой и интересного расположения текста относительно фото, блок преимуществ получился креативным и необычным.
Ещё пример диагональной симметрии. Текстовые блоки нативно вписаны среди изображений.
Дизайн, в котором есть и фото, и иконки, и текст. И они нормально уживаются друг с другом. В верхнем ряду фото и текст занимают по 2 колонки, в нижнем — чередуются через одну. Креативно, интересно, при этом, гармонично и уравновешенно.
Сплит экраны
Сплит экраны разделяют блок на несколько частей, чётко очерченных друг от друга. Это классная идея, которая помогает увязать несколько типов данных, например, текстовые преимущества и преимущества в цифрах.
Пример использования сплит экранов для блока преимуществ. Слева — текстовые преимущества, справа — преимущества в цифрах, по центру — фото, которое чётко разделяет секции, передаёт атмосферу, подсвечивает центральную идею. Если это заанимировать, чтобы при наведении на секцию, она раздвигалась — будет вообще круто.
Классическая конфигурация слева — текст, справа — картинка, приобрела более креативный вид, за счёт интересной сетки и использования сплит экранов.
Карусель
Спорный приём, к которому лучше не прибегать, если не уверены в эффективности. Обязательно тестировать и замерять результаты!
Дело в том, что преимущества компании — это важный для принятия решения текст, который напрямую влияет на конверсию. Нам нужно, чтобы клиент его прочитал. Поэтому прятать этот текст в аккордеоны, спойлеры, выпадающие списки, табы и карусели — запрещено. Всё, что по дефолту скрыто от глаз пользователя, с вероятностью 90% останется непрочитанным. Никто не станет листать слайдеры, жать на кнопки и т. д.
Но это современный креативный приём, о котором мы не могли не рассказать.
Дело в том, что преимущества компании — это важный для принятия решения текст, который напрямую влияет на конверсию. Нам нужно, чтобы клиент его прочитал. Поэтому прятать этот текст в аккордеоны, спойлеры, выпадающие списки, табы и карусели — запрещено. Всё, что по дефолту скрыто от глаз пользователя, с вероятностью 90% останется непрочитанным. Никто не станет листать слайдеры, жать на кнопки и т. д.
Но это современный креативный приём, о котором мы не могли не рассказать.
Преимущества в карусели на сайте производителя матрасов SILENCE SCIENCE. Возможно, это работает, так как на блоке с каруселью установлен принудительный горизонтальный скролл. Пользователь не может проскроллить ниже, пока не пролистается вся галерея влево.
Преимущества как часть дизайна
Приём, который шикарно работает в нишах, завязанных на визуал. Например, дизайн интерьеров. На сайтах таких компаний фото говорят больше слов. Для принятия решения пользователю нужно вдохновиться. Сайт приятным визуалом погружает его в атмосферу, продаёт ему определённый образ жизни, заставляет проникнуться идеей и осознать, что он хочет, как на картинке.
Суть метода в том, что преимущества нативно вписываются в дизайн, выступая подписями к визуалу, дополняя эмоции смыслом.
Суть метода в том, что преимущества нативно вписываются в дизайн, выступая подписями к визуалу, дополняя эмоции смыслом.
Не преимущества оформляются дизайном, а дизайн дополняется преимуществами. Когда задача — продать роскошный образ жизни, такой подход оправдан. Сайт премиального коттеджного посёлка. Дизайн WebValley Studio.
Для серьёзного бизнеса, где принятие решения о покупке строится на рациональных доводах, а не на эмоциях, лучше не экспериментировать, а сделать упор на типографическое оформление блока преимуществ, если хотите, чтобы пользователи не просто погуляли по сайту, рассматривая картинки, как достопримечательности, а уловили выгоды, которые предлагает ваша компания, и совершили покупку.
Автор статьи
Вероника Юдина
Руководитель SEO
13.10.2023
Доверьте разработку сайта профессионалам!
Оставьте заявку с кратким рассказом о проекте или заполните бриф.
Понравилась статья?
Поделись материалом с другими в социальных сетях — сохрани статью себе для быстрого доступа, поддержи нашу студию!
Подпишись, чтобы быть в курсе!
Подпишись на наш новостной дайджест, чтобы первым получать анонсы новых статей, материалов или мероприятий. Без спама, только по факту =). Наши соцсети в конце сайта.
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.
Смотрите также
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.
Дизайн
Вёрстка макетов дизайна для сайта
Качественная верстка не просто переносит в браузер то, что нарисовал дизайнер, она также формирует основу успеха поискового продвижения вашего будущего сайта.