@tonyrenko

Как UX-writing помогает улучшить дизайн

2022-07-31T10:37:49.641Z

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

Считать, что именно дизайн заставляет пользователей полюбить ваш сайт и с удовольствием взаимодействовать с ним — большое заблуждение.

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

Но есть одна загвоздка:

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

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

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

1. Что такое UX-копирайтинг?

Челси Армстронг приводит такое определение в Copy Hackers:

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

Проще говоря, UX-копирайтинг – это написание текста, ориентированного на пользователей. Сюда относится все, что связано контентом — заголовки, текст на кнопках и другие элементы интерфейса. В то время как UX-дизайн помогает пользователям ориентироваться в интерфейсе, UX-копирайтинг направляет действия пользователей, объясняя:

что делать;
зачем это делать;
куда нажимать.

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

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

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

Но как насчет смысла?

Да, пользователи намного быстрее воспринимают изображения, но разве это ваша цель? Главная задача в том, чтобы создать положительный пользовательский опыт, а чтобы этого добиться — изображения должны передавать четкий и понятный смысл. При отсутствии слов, всегда существует риск того, что пользователи воспримут изображение двусмысленно, с ошибочными ассоциациями и ложными предположениями о том, что происходит на странице. Именно в таких случаях текст поможет четче передать идею и сделать дизайн более удобным в использовании.

2. Как пользователи воспринимают текстовую информацию в Интернете?

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

UX-копирайтинг включает в себя текст на таких элементах интерфейса, как:

кнопки;
иконки;
теги;
уведомления;
сообщения об ошибках;
навигация;
руководства для пользователей и др.

Не стоит забывать, что весь этот текст — часть дизайна и пользовательского опыта.

Пользователи читают текст на экране на 25% медленнее, чем напечатанный на бумаге. Кроме того, пользователи читают только 20-28% слов, которые они видят на сайте. Учитывая это, UX-копирайтинг должен отвечать трем критериям:

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

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

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

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

3. Советы по использованию UX-копирайтинга в дизайне

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

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

Рассмотрим приемы UX-копирайтинга, которые помогут создать более удобный интерфейс.

Скажите "Нет" тексту-”рыбе”

Приступая к работе над новым пользовательским интерфейсом, вы вставляете так называемый текст-”рыбу” (бессмысленный текст-заполнитель) в места, предназначенные для текстовых блоков. Верно?

Не делайте этого.

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

Поэтому, чем раньше вы начнете использовать в интерфейсе реальный текст, тем лучше, поскольку:

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

Скажите "нет" сложному языку

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

Итак, основные правила:

Никаких технических терминов или профессионального жаргона;
Никаких слишком длинных и сложных слов;
Никакого пассивного залога.

Более того, по возможности используйте речевые поощрения в названиях кнопок призыва к действию. Например, чтобы сообщить пользователю о наличии ошибки, вместо обычного «Oк» гораздо лучше использовать — «Попробуйте еще раз».

Использование положительных утверждений работает намного лучше, чем отрицательных. Например, сообщение «неправильный пароль» (где слово «неправильный» несет в себе негативный оттенок) будет звучать несколько лучше, если заменить его на что-то вроде «Не похоже, что этот пароль верный».

Используйте цифры

Сила цифр давно всем известна, люди подсознательно ассоциируют их с:

фактами;
измерениями;
статистическими данными;
всем, что потенциально может им пригодиться.

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

Более того, нечетные числа — мощное оружие копирайтеров: такие заголовки, как «11 способов освоить принципы UX-копирайтинг для электронной коммерции за 15 минут в день», цепляют пользователей и заставляют их просматривать контент.

Для UX-копирайтеров цифры — отличный инструмент, чтобы сделать контент более компактным. Они позволяют сделать текст кратким, что экономит время пользователей.

Отразите стиль вашего бренда

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

Каков ваш бренд? Как он звучит?

У вас есть клиенты или пользователи? Вы предоставляете услуги или предложения?

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

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

Используйте творческий подход

Несмотря на то, что UX-тексты должны быть краткими, информативными и отражать стиль бренда, это не значит, что они должны быть скучными.

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

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

Заключение

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

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

Как главное изображение влияет на первое впечатление пользователя

2022-07-31T10:36:34.792Z

Даже если вам не знаком термин “hero image”, вы, вероятно, понимаете, о чем идет речь. Это большое заметное изображение, которое обращает на себя внимание при входе на сайт.

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

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

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

Будь героем для самого себя, автор изображения OrangeCrush

1. Что такое “hero image”?

Hero image — это большое выразительное изображение на главной странице сайта. Такое изображение представляет собой масштабный и яркий элемент, который знакомит вас с брендом (даже когда сам бренд не является особенно ярким).

Вот несколько примеров основных изображений на веб-сайтах:

Веб-дизайн, автор Vilius Balciunas

Веб-дизайн, автор patrykb

Веб-дизайн, автор Orangedan

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

Веб-дизайн, автор Vilius Balciunas

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

2. Что делает основное изображение эффективным?

Эффективное основное изображение показывает, а не рассказывает.

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

Веб-дизайн, автор MNoriega

Веб-дизайн, автор Prismonline

Эффективное основное изображение включает несколько компонентов. Рассмотрим их:

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

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

Заголовок — неотъемлемая часть основного изображения

Эффективное основное изображение должно работать совместно с заголовком. Даже самый гениальный текст не сможет привлечь и удержать внимание пользователя сам по себе. Главное изображение без грамотно составленного текста может постигнуть та же участь. Однако при совместной работе заголовок и отличное изображение станут идеальным сочетанием для hero image на вашем сайте.

Веб-дизайн, автор DSKY

Взгляните на то, как эффективно работают изображение и текст в примере от DSKY выше. Основное изображение сообщает пользователям важную информацию о бренде еще до того, как они прочитают абзац, объясняющий что Stillwater Investing — это инвестиционная компания в штате Мэн. Вы понимаете, что компания из Новой Англии обещает помочь вам добиться финансовой независимости и утверждает, что, доверив ей свои деньги, вы сможете вести такой же образ жизни, как на рисунке: проводить время с близкими людьми и заниматься хобби в живописной обстановке. А все это потому, что вы будете чувствовать себя финансово защищенными.

Веб-дизайн, автор MNoriega

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

Релевантные изображения

Изображения, которые вы выбираете для главной страницы сайта, должны быть релевантными (соответствующими) бренду.

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

Веб-дизайн, автор MercClass

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

Основное изображение не обязательно должно быть статичным. Многие бренды, например, fivefootsix, размещают на главной странице анимированные изображения.

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

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

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

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

Четкий призыв к действию (CTA)

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

Веб-дизайн, автор Prismonline

Веб-дизайн, автор MercClass

Разрабатывая дизайн hero image, не забывайте о визуальной иерархии и балансе. Баланс — это размещение изображений и текста таким образом, чтобы композиция выглядела гармоничной. Неверным будет размещение текста и изображений в следующих случаях:

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

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

чтение заголовка;
чтение подзаголовка и любого дополнительного текста;
призыв к действию (при этом выбранное вами изображение должно помогать пользователю и направлять его взгляд).

Веб-дизайн, автор Dmitrij

Если на сайте отсутствует четкая визуальная иерархия, пользователи могут запутаться и потерять интерес, поскольку у них не получится последовательно и логично воспринимать информацию.

Отзывчивое основное изображение

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

Дизайн, способный “отзываться” на потребности пользователей и адаптироваться к различным устройствам называется отзывчивым (адаптивным).

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

Веб-дизайн, автор Mike Barnes

Вектор восприятия сайта в целом

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

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

3. Создание подходящего основного изображения

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

Лендинг, автор Powder Point Designs

Веб-дизайн, автор VisualMedia

При разработке hero image, обратитесь к айдентике бренда. Такие элементы, как цвет, шрифт, формы или общий эстетический стиль могут вдохновить вас на создание основного изображения. Чтобы определить, в каком направлении двигаться, вы можете не только использовать айдентику, но и провести исследование рынка.

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

4. Эффективное основное изображение — залог успеха

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

Как повысить конверсию в 2022 году: 7 эффективных решений

2022-07-31T10:34:44.973Z

Целевые страницы имеют решающее значение для конверсии.

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

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

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

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

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

Давайте начнем…

Почему дизайн целевой страницы так важен для конверсии

Целевая страница — это первая остановка на пути ваших онлайн покупателей и наилучшая возможность произвести впечатление.

Люди в интернете становятся менее терпеливыми. Посетителю требуется около 50 миллисекунд (прим. 0,05 секунд), чтобы сформировать мнение о бренде и решить, хочет ли он оставаться на сайте или покинет его.

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

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

Ниже мы рассмотрим некоторые данные, которые подтверждают влияние дизайна целевой страницы на показатель конверсии:

У вас есть всего 7 секунд, чтобы произвести сильное впечатление. В течение этого времени пользователи поверхностно просматривают страницу и принимают решения.
Публикация более 40 эффективных целевых страниц через регулярные промежутки времени может привлечь в 12 раз больше потенциальных клиентов.
Средний показатель конверсии лендинга во всех отраслях составляет всего 2,35%.
Использование правильных типов таргетинга и тестирования может повысить показатель конверсии до 300%.

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

Обзор 7 целевых страниц с высокой конверсией и выводы из анализа

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

ПРИМЕР №1 — ЗАМЕНИТЕ СКУЧНЫЕ ОНЛАЙН-ФОРМЫ ДЛЯ КЛИЕНТОВ НА ИНТЕРАКТИВНЫЕ КВИЗЫ

Целевая страница: Целевая страница компании Nextiva с квизом “Какие Коммуникации подходят вашему бизнесу?” (прим. квиз — тест, который в данном случае позволяет выяснить информацию о клиентах, чтобы предложить именно тот продукт, который будет отвечать их потребностям)

Отрасль: программное обеспечение для передачи голоса по IP

Конверсия измеряется: количеством потенциальных покупателей, которые заполняют форму, если их интересует продукт

Основная цель редизайна: увеличение количества и повышение качества потенциальных клиентов

Решение: заменить онлайн-форму на интерактивный квиз

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

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

Nextiva использовала свой творческий потенциал, чтобы заменить скучную форму для клиентов на интерактивный квиз. В 2021 году компания добавила его в дизайн своей страницы.

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

Сравните оба дизайна:

Версия 2019 года

Версия 2021 года

Ключевые выводы:

На целевой странице версии 2021 года теперь есть бесплатный квиз “Какие Коммуникации подходят вашему бизнесу?”. Потенциальные клиенты заполняют его в интерактивном режиме. В верхней части квиза есть информация о том, сколько шагов осталось до его завершения. Это упрощает для пользователя понимание того, сколько времени он потратит на прохождение теста.
Вместо фонового изображения Nextiva разместила иконки коммуникаций, чтобы посетителю было проще понять, какие виды услуг предлагает компания.
Страница выглядит более аккуратной и легкой для восприятия.

ПРИМЕР № 2 — ДЕЛАЙТЕ УПОР НА СИЛЬНЫЙ ВИЗУАЛ И ДЕТАЛИ ПРОДУКТА

Целевая страница: Версия Главной страницы Western Rise

Отрасль: электронная коммерция

Конверсия измеряется: покупкой одежды

Основная цель редизайна: увеличить число потенциальных клиентов

Решение: улучшить текст и визуальные элементы

Western Rise — компания, которая занимается продажей одежды через интернет. Они поняли, что наличие впечатляющих изображений и подробной информации о товарах на целевой странице имеет большое значение.

В версии 2021 года они заменили обычные фотографии товаров на яркие визуальные образы моделей в одежде Western Rise. Кроме того, под изображением продукта есть подробная информация о товаре, которая отсутствовала на старой странице.

Оцените значительную разницу между версиями 2019 и 2021 года одной и той же целевой страницы Western Rise:

Версия 2019 года

Версия 2021 года

Ключевые выводы:

У новой целевой страницы яркий заголовок — “Износостойкая одежда для путешествий, работы и активного отдыха”. В двух словах бренд рассказывает о себе все. “Износостойкая одежда” — это их уникальное торговое предложение (прим. УТП (USP — unique selling proposition)), которое сообщает покупателям, что их продукт долговечен. Вторая часть заголовка “для путешествий, работы и активного отдыха” поясняет, для чего предназначен товар. Современным покупателям нравятся продукты, которые удовлетворяют конкретную потребность. Western Rise упростила для пользователей понимание важности их товаров, которые предоставляют им именно то, что нужно.
Смелые визуальные эффекты в качестве современных снимков моделей на новой странице производят сильное впечатление на аудиторию. Фотографии кликабельны, чтобы дать пользователю возможность внимательно рассмотреть стиль и качество одежды Western Rise.
Описание товаров на новой странице включает незначительные детали и функции продукта, которые часто игнорируются другими брендами одежды. Речь идет не только о цвете, ткани, фасоне и т.д., но и об особенностях товара и указании поводов для ношения выбранной модели.

ПРИМЕР № 3 — ИСПОЛЬЗУЙТЕ НАДЕЖНЫЕ СОЦИАЛЬНЫЕ ДОКАЗАТЕЛЬСТВА ДЛЯ ПОВЫШЕНИЯ КОНВЕРСИЙ

Страница: Целевая страница компании Aura "Скидка 50%"

Отрасль: Программное обеспечение, которое предотвращает хищение персональных данных

Конверсия измеряется: онлайн-регистрацией или входящим звонком

Основная цель редизайна: увеличить количество подписок

Решение: добавить сильное социальное доказательство

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

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

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

‍БОНУС:

Другой пример применения сильного социального доказательства — целевая страница подписки на новостную рассылку Exploding Topics (прим. бесплатный онлайн сервис для отслеживания быстрорастущих поисковых запросов).

Exploding Topics — это новостная рассылка с подпиской Pro для контент-маркетологов и всех, кто интересуется актуальными темами во всевозможных областях. Это отличный пример использования нескольких социальных доказательств на целевой странице, которая бесплатно что-то раздает, например, делает еженедельную новостную рассылку или присылает электронную книгу.

Как вы могли заметить, на этой целевой странице есть несколько типов социальных доказательств сразу. Во-первых, там перечислены бренды, которые доверяют Exploding Topics. Во-вторых, они цитируют отзыв учредителя журнала Wired Кевина Келли. За его цитатой следует положительная обратная связь о новостной рассылке в форме твитов (прим. публикация в Твиттере) реальных людей.

“Мне нравится эта бесплатная рассылка Exploding Topics. В еженедельном электронном письме содержится около 5 слов или фраз, которые быстро набирают популярность среди поисковых запросов и упоминаний в социальных сетях.” Кевин Келли, учредитель ежемесячного журнала Wired и автор книги “Неизбежно”.

Ключевые выводы:

Exploding Topics использует несколько различных типов социальных доказательств, которые подходят для разных демографических групп.
Логотипы всемирно известных компаний, которые им доверяют, обращают на себя внимание потенциальных B2B подписчиков.
Цитата Кевина Келли привлекает внимание продвинутых читателей.
Несмотря на то, что на сайте размещены социальные доказательства, форма подписки по-прежнему расположена в ее верхней части. Это лучшая практика, которая применима почти ко всем страницам.
На целевой странице используются фактически встроенные твиты (а не скриншоты), которые подтверждают достоверность отзывов.

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

ПРИМЕР №4 — ПРЕОБЛАДАНИЕ ВИЗУАЛА НАД СЛОЖНЫМ СОДЕРЖАНИЕМ

Целевая страница: Версия главной страницы Perfect Keto

Отрасль: пищевые добавки

Конверсия измеряется: покупками в интернете

Основная цель редизайна: увеличить число покупок

Решение: улучшить контент в верхней части страницы

Контент в верхней части страницы сильно влияет на принятие решений покупателем. Дизайну целевой страницы 2019 года Perfect Keto не хватало этой привлекательности.

В 2021 году они переделали дизайн: улучшили визуал и придали странице более профессиональный внешний вид.

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

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

Взгляните на обе версии целевых страниц Perfect Keto (2019 и 2021 года):

Версия 2019 года

Версия 2021 года

Ключевые выводы:

Заголовок страницы 2021 года более привлекательный, потому что он четко передает суть их продукта. На старой странице не было указано целевое назначение продукта.
В новой версии есть дополнительный раздел, который создан с целью обучить клиентов кето-диете и показать им с чего начать. Он помогает посетителям лучше разобраться в продукте.
Размещение изображения товаров в верхней части страницы привлекает внимание пользователя и повышает уровень доверия. Теперь первое, что люди увидят при переходе на целевую страницу, будут продукты, которые предназначены для покупки.
На новой странице с гордостью продемонстрированы товары, которые представлены в публикациях журналов, таких как Women’s Health, Healthline, Reader’s Digest и Popsugar. Это способствует укреплению доверия к бренду со стороны покупателей.
На странице также есть видео с основателем Perfect Keto, которое отлично привлекает внимание и повышает лояльность посетителей.

ПРИМЕР №5 — СДЕЛАЙТЕ ПРИЗЫВ К ДЕЙСТВИЮ БОЛЕЕ УБЕДИТЕЛЬНЫМ

Целевая страница: Целевая страница программного обеспечения для служб поддержки клиентов Zendesk

Отрасль: SaaS (прим. программное обеспечение как услуга)

Конверсия измеряется: онлайн-регистрациями

Основная цель редизайна: увеличить количество регистраций через веб-сайт

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

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

В 2021 году они добавили на страницу кнопку запуска бесплатной пробной версии. Это позволяет пользователям понять, что у продукта она есть и действовать быстрее.

С той же целью кнопка “Начать” (прим. Get started), которая располагалась наверху была заменена на кнопку с названием “Бесплатная пробная версия” (прим. Free trial или Start free trial).

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

Проанализируйте обе версии целевой страницы:

Версия 2019 года

‍Версия 2021 года

Ключевые выводы:

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

ПРИМЕР №6 — ИСПОЛЬЗУЙТЕ КОНТРАСТ ДЛЯ ВЫДЕЛЕНИЯ ВАЖНОГО ТЕКСТА НА СТРАНИЦЕ

Целевая страница: Целевая страница GetResponse, платформы для создания сайтов

Отрасль: программное обеспечение для работы в режиме онлайн

Конверсия измеряется: онлайн-подписками

Основная цель редизайна: увеличить количество подписок

Решение: использовать контраст для выделения важного текста на странице

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

Инфографика — это следующее, что обращает на себя взгляд посетителей. Она прекрасно описывает то, как работает конструктор веб-сайтов и чем он полезен для клиентов.

Ключевые выводы:

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

Заключение

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

Однако стратегия для целевых страниц время от времени требует внесения корректировок. Это необходимо для достижения лучших результатов. Примеры и рекомендации, которые мы рассмотрели в этой статье, доказывают, что дизайн целевых страниц 2021 года значительно улучшился по сравнению с версиями 2019 года.

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

Как создать лендинг: секреты продающей посадочной страницы - AIDA, CTA, PMPHS, УТП

2022-07-31T10:33:32.476Z

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

Вообще говоря, landing page (aka посадочная или целевая страница) полезен, когда целевое действие может быть выполнено нажатием одной кнопки. Посадочные страницы эффективны только в том случае, если вы точно знаете, что и кому вы хотите продать. И хотя потрясающая целевая страница не обязательно превращает посетителей в покупателей, она точно поможет вам найти покупателей среди посетителей сайта. Чтобы создать эффективную, высококачественную landing page, мы поговорим о 3 основных темах:

Вот классический сценарий целевой страницы: посетитель приходит, посетитель понимает и посетитель действует. Чтобы этот сценарий работал, вам нужны 2 вещи:

Трафик. Landing page создана для привлечения к ней конкретных людей - людей, которые заинтересованы в предложении, которое несет этот лендинг. Содержание информации о продукте зависит от той аудитории, которую вы пытаетесь привлечь.

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

Существует несколько популярных формул для создания целевой страницы, в том числе:

AIDA, или внимание (attention), интерес (interest), желание (desire), действие (action). Привлеките внимание, получите интерес, создайте желание и достигните действия.

PMPHS, или боль (pain), больше боли (more pain), надежда (hope), решение (solution).

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

8 РАСПРОСТРАНЕННЫХ ОШИБОК, КОТОРЫЕ МОГУТ ПОВЛИЯТЬ НА КОНВЕРСИЮ

Если вы создаете посадочную страницу, ваша главная цель - побудить пользователей совершить действие. Имея это в виду, давайте рассмотрим восемь типичных ошибок целевой страницы, которые могут заставить пользователей уйти, не совершив желаемых действий:Неясное предложение. Текст на странице не дает четкого объяснения того, что получит пользователь. Кнопка CTA вне поля зрения или ее трудно найти. Если это кнопку нажимают нечасто, возможно, пользователям трудно ее увидеть или найти.Утомительно долгое чтение. Когда половина пользователей уходит, не доходя до нижней части страницы, вам следует подумать о сокращении текста этой страницы.Текст и изображения, которые не связаны между собой. Если пользователи не могут понять, какие описания связаны с какими изображениями, вы рискуете потерять их внимание.Неряшливый или некачественный дизайн. Возможно, ваши заголовки слишком велики или слишком малы. Возможно, ваши иконки и изображения низкого качества. Возможно, вы использовали слишком много цветов или шрифтов, ослепляя глаза так, что пользователи не могут сосредоточиться.Монотонный контент. Если текста слишком много, а картинок слишком мало, читать или смотреть может быть скучно.Элементы, которые кажутся кликабельными, но на самом деле неактивны. Если статические элементы выглядят кликабельными, пользователи могут кликать их несколько раз, не получать результата и уходить разочарованными.

Немотивирующий текст на кнопке. Возможно, текст на кнопках или заголовках CTA не мотивирует пользователей его нажимать. Или, может быть, пользователи не понимают, что именно они получат, нажав кнопку.

5 ШАГОВ К СОЗДАНИЮ ЭФФЕКТИВНЫХ LANDING PAGE

Для ясности и удобства мы разделили процесс создания эффективных целевых страниц на несколько последовательных шагов:

Анализ конкурентов
Анализ целевой аудитории
Копирайтинг
Прототипирование
Создание дизайна посадочной страницы

ШАГ №1: АНАЛИЗ КОНКУРЕНТОВ

Если вы продаете или предлагаете что-то полезное, у вас наверняка есть конкуренты. Люди обязательно выбирают между конкурирующими предложениями. Ваша задача - заставить их выбрать вас.Чтобы сделать этот выбор очевидным и ясным, вам нужно выделиться среди конкурентов. Как вы это сделаете? Покажите, что ваше предложение выгоднее или удобнее.Подумайте о тех качествах, которые помогут вам сравнить себя с конкурентами. Составьте таблицу, демонстрирующую эти качества. Запишите возможные сомнения ваших пользователей в отношении каждой такой "фишки". Запишите сильные стороны каждой своей фишки с точки зрения вашего пользователя. В конечном счете, именно эти сильные стороны должны быть выделены на вашей целевой странице.

ШАГ №2: АНАЛИЗ ЦЕЛЕВОЙ АУДИТОРИИ

Чтобы ваша landing page была эффективной, вы должны хорошо понимать, кто является вашей аудиторией и что вы хотите этим людям предложить. Следует описать ваш продукт для конкретной аудитории.Чтобы определить целевую аудиторию вашей посадочной страницы, сформулируйте точное целевое предложение. Рассмотрим популярные методы анализа, используемые при разработке сайтов:

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

Начните с создания от 1 до 4 основных персонажей. Именно для них вы разрабатываете свою целевую страницу.Затем создайте 1 или 2 дополнительные персоны. Это люди, которые могут стать вашими клиентами в будущем.Опишите цели и сомнения каждой персоны. Обратите внимание на то, что может запутать покупателя. Запишите все спорные моменты, которые вам нужно проработать на целевой странице. Метод "работы, которую надо сделать". Маркетологи и дизайнеры используют этот метод для определения целей пользователей на странице. Чем больше целей помогает достичь целевая страница, тем выше вероятность того, что ваши посетители станут покупателями. Для этого:Определите цели на странице. Подумайте, как каждый человек (или персона), которого вы описали, будет использовать эту страницу, и на каких условиях он сможет принять ваше предложение.Выберите основные и второстепенные цели на странице. Убедитесь, что второстепенные цели помогают решить основную.

ШАГ №3: КОПИРАЙТИНГ

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

Придумайте структуру. Структура текста является основой, к которой будут прикреплены детали. Текст с хорошей структурой легко читается и перемещается, что облегчает пользователям запоминание информации. Переходя с одной части страницы на другую, пользователи находят ответы на свои вопросы.Напишите предложение (offer aka УТП - уникальное торговое предложение). Чтобы написать предложение, вам нужно ответить на два вопроса: "Что это такое?" и "Почему это необходимо?". Предложение - это суть вашей целевой страницы. Это объяснение преимуществ для пользователя. Предложение отвечает на основные вопросы, которые могут возникнуть у посетителей прямо здесь и сейчас. Самым распространенным методом написания хорошего предложения является метод 4U (в русском варианте скорее ПУПС). Дэвид Огилви предложил формулу идеального предложения еще в 50-х годах. По сути, ваше предложение всегда должно быть хотя бы одним из следующих:

Полезное (Useful)Уникальное (Unique)Предельно конкретное (Ultra-specific)Срочное (Urgent)Напишите текст. При написании текста используйте четкий, информативный стиль написания (от инфостиля Максима Ильяхова еще никто не умирал). Избегайте предвзятых мнений и пишите о фактах. Задайте вопрос, ответьте на него и приведите доказательства. Подумайте, как вы можете доказать каждое свое утверждение.Оптимизируйте его. Оптимизированный сайт проще найти в интернете. Для этого необходимо подготовить сайт к эффективному ранжированию с помощью внутренней оптимизации:Техническая оптимизация, делается для поисковых систем. Это облегчает им доступ к сайту и его индексацию. Чем лучше (полнее) проиндексирован сайт, тем легче его найти.Оптимизация текста включает в себя добавление ключевых слов к тексту. Это общие фразы, которые люди используют для поиска товаров и услуг в интернете. Ключевые слова более заметны для поисковых систем, когда они появляются в заголовках.

ШАГ №4: ПРОТОТИПИРОВАНИЕ

Ваш прототип - это, по сути, карта вашей целевой страницы. Он схематически изображает все, что будет внутри страницы, включая ее структуру, текст, изображения, видео и ссылки. Прототип решает 2 проблемы:Он позволяет позиционировать один контент относительно другого.Он позволяет тестировать расположение элементов.При создании своего прототипа вам нужно думать об экранах. 1 экран = 1 раздел = 1 законченная мысль. Именно так информация воспринимается пользователями легче всего. Целевые страницы состоят из определенного набора элементов, а именно:Первый экран. Функция первого экрана - произвести правильное впечатление на пользователей. Он должен информировать пользователей о том, куда они попали. Это также должно мотивировать их остаться и прокрутить (scroll) дальше вниз по странице.История. Этот элемент должен содержать подробное описание продукта или услуги: как они работают, на кого они нацелены, сколько они стоят и т.д. Нужно, чтобы историю нельзя было игнорировать - пролистать, проскроллить, просвайпить. Прежде чем объяснять преимущества или призывать к действию, вы должны убедиться, что пользователи понимают, что вы им предлагаете.Явные преимущества. В этом разделе объясняется, чем вы выгодно отличаетесь от своих конкурентов. В большинстве ниш конкуренция высока, поэтому вам необходимо представить четкие и убедительные аргументы в пользу того, почему люди должны выбирать вас.Блоки доверия. Эта группа блоков помогает построить доверие. Отзывы, истории успеха, гарантии и сертификаты, партнеры - даже номер телефона и адрес вашего офиса помогут придать вашему продукту привлекательный вид. Эти блоки помогают показать, что ваш продукт реален, что ему (и вам) можно доверять.Целевое действие. Предприятиям нужны клиенты, поэтому посадочные страницы должны иметь блоки, которые генерируют потенциальных клиентов. Это могут быть формы заказа, подписки, обратной связи или номера телефонов.Когда прототип будет готов, придет время вспомнить список тех целей, которые вы собрали, используя метод "работы, которую нужно сделать". Вы должны убедиться, что ваша схема помогает пользователям успешно завершить все сценарии.Результатом этого шага является полная карта вашей страницы. Следует отметить, что вносить изменения в прототип легче, чем в готовую страницу. Поэтому важно обратить на него такое пристальное внимание.

ШАГ №5: СОЗДАНИЕ ДИЗАЙНА

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

Разделение страницы, семантика и пробелы:

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

Заголовки одного уровня (h1-h6) используют одни и те же размеры шрифта.Заголовки заметно больше основного текста.

Текст:Информация, представленная в тексте, не чрезмерна. Сохранена только самая важная ее часть.В любом столбце не более 2-3 строк текста.Выравнивание по центру (align:center) не используется для текстового блока, содержащего более 3-4 строк.Изображения, иконки и кнопки:

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

.Цвет:Основные и акцентные цвета находятся в соотношении от 90% до 10%.Цвет соответствует предложению (УТП).Композиция:Используется динамическая композиция.

Анимация:Используется уместная анимация.

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

10 элементов целевой страницы, которые повышают конверсию

2022-07-31T10:28:47.125Z

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

Они позволяют вам нацеливаться на конкретных клиентов с конкретными решениями конкретных задач.

Легко запутаться в том, что такое целевая страница, поскольку пользователи "целятся" на многие страницы. Когда мы говорим о целевых страницах, мы имеем в виду страницу, полностью посвященную определенному типу клиентов. На самом деле, если бы мы могли создать уникальную целевую страницу для каждого отдельного пользователя, это было бы замечательно.

Вы можете подумать, что главная страница вашего сайта и является лендингом, но это не так. На самом деле, пользователи могут попасть на вашу целевую страницу различными способами — напрямую, через обычный поиск или обратную ссылку. Кроме того, целевая страница обычно посвящена конкретной маркетинговой кампании. На нее попадают по ссылке в электронном письме, через социальные сети или, чаще всего, через рекламу PPC (Pay Per Click — контекстная реклама).

Вот 10 элементов целевых страниц, которые, как доказано, успешно конвертируют:

1. Используйте единый призыв к действию

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

Регистрируются ли они на бесплатную пробную версию? Подписываются ли они на вашу рассылку? Покупают ли они продукт? Обращаются ли они к вам? Что бы вы ни хотели от них, сделайте это предельно ясным.

Закон Хика-Хаймана в UX гласит: чем больше вариантов выбора вы предоставляете пользователю, тем меньше вероятность того, что он вообще сделает выбор; и наоборот, чем меньше вариантов, тем больше вероятность того, что он пойдет дальше.

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

‍2. Сохраняйте простоту форм

Зачастую на вашей целевой странице требуется информация о потенциальном клиенте. То есть пользователи могут создавать свой аккаунт, устанавливать пробную версию или просто присоединяться к вашей рассылке.

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

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

3. Сделайте заголовок ярким

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

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

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

После заголовка «Наковальня “Койот”» лучше всего добавить подзаголовок «Порадуй себя дичью на ужин!»

Ваша цель для заголовка — объяснить ваш продукт или услугу за 2-3 секунды.

‍4. Сконцентрируйте контент вокруг вашего ценностного предложения

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

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

Ценностные предложения лучше всего подкрепляются фактами. «Самые точные наковальни в мире» лучше всего подкреплены доказательствами: «9 из 10 койотов заявили, что при использовании нашей запатентованной наковальни Accu Anvil вероятность попадания в цель выше». (здесь отсылка к одному из самых популярных мультиков Луни Тьюнз, производства компании Warner Brothers. В этом мультфильме про бегущего койота наковальня также была “главным персонажем”: он то сбрасывал ее на своих врагов, то она сама “прилетала” ему на голову).

‍5. Списки, списки и еще раз списки

У вас есть несколько секунд, чтобы привлечь потенциального клиента, возможно, даже меньше. Один из способов завладеть его вниманием — отличный заголовок, но вы должны удерживать внимание своего клиента и после заголовка.

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

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

‍6. Используйте эффект Зейгарник

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

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

Незавершенность процесса сохраняет целевую страницу и продукт или услугу в памяти потенциального клиента. Поэтому, когда они увидят электронное письмо для завершения регистрации, они точно воспользуются им.

‍7. Доказательство

Кто угодно может создать сайт. Это просто. И в результате потенциальные клиенты не всегда доверяют вам.

Одним из способов борьбы с этим является предоставление доказательств. Это могут быть официальные сертификаты, отзывы или просто независимые обзоры.

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

Но будьте осторожны, чтобы не показаться слишком безупречным. Если вы публикуете только 5* отзывы, люди интуитивно заподозрят подвох. Но если вы опубликуете и 3* отзыв, то он может оказать вам услугу, сделав 5* отзывы более искренними.

‍8. Прогнозируемые образы

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

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

‍9. Последовательность

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

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

Помните: клиента привлекло что-то в вашей рекламе, так дайте ему те же заманчивые качества на вашей целевой странице.

‍10. Откажитесь от навигации

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

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

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

Правило близости . Как не заварить кашу на сайте

2022-07-31T10:26:50.029Z

Посмотрите на этот сайт.

Нарушено правило близости везде, где можно и нельзя — КАША

Не буду говорить о шрифтах, цветах и содержании текста. Расскажу только об одной проблеме и как её избежать.

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

Пользователь открывает сайт и теряется от обилия информации. Слишком много всего и сразу.

Такой дизайн заставляет напрягаться, а этого не любит никто. Скорее всего человек закроет такой сайт и поищет что-то более приятное и простое.

Возьмем другой сайт той же тематики и сравним. Какой вам нравится больше?

Важно помнить:задача дизайна - четко и однозначно донести информацию, сразу не навести красоту или показать всё.

Я расскажу, как помочь воспринять информацию. Начнём с 8 строк теории.

настраиваемый

Если два элемента расположены рядом, это значит, что они покрывают друг друга. Даже если речь идет о друге от друга, но они оказываются близко, они воспринимаются вместе. Это действие называется «Принцип управления».

Расстояние А точки встречи в одну группу. Расстояние Б делит группу точек на 3 столбца. Если мы уравняем взаимодействие ( А = Б ), точки зрения объединятся в общественную группу.

Столбцы срослись в одну кашу

Как принцип настройки работает в дизайне

В основе конструкции лежит принцип работы. Если не следовать этому принципу, получается каша, как на первом подъеме.

Печальные последствия нарушения защиты

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

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

Рассмотрим на примерах насколько важно соблюдать принципы в веб-дизайне.

Текстовый блок

Абзац и заголовок это два самостоятельных блока. Расстояние от заголовка до статьи будет внешнее ( Б ). Расстояние между строчками текста - просмотра ( А ).

В понимании Б = А текст воспринимается как одно целое. Читать его неудобно.

Наведем порядок. Увеличим расстояние от заголовка до текста.

Стало лучше. Теперь внешне больше внутренних или Б > А . Заголовок обрел независимость.

Рассмотрим пример посложнее.

Текстовый блок с изображением

Возьмем блок сайта по продаже букетов. Блок состоит из текста, заголовка и фото.

Смотрим на получение и сообщаем, что заголовок относится к фото. Текст же посещает отдельно. Это неправильно. Исправим.

исключить наши встречающиеся буквы, чтобы было проще.

Б - от фото до заголовка. А - от заголовка до текста.

Заголовок принадлежит тексту. Расстояние между ними должно быть меньше, чем от заголовка до фото. А < Б

Теперь заголовок и текст представляют собой блок, который вступает в связь с фото.

Добавим заголовок

Три наших блока объединяются в один большой и вступают во взаимодействие с заголовком «Наши услуги».

Появляется третья буква В . И формула теперь выглядит иначе В > Б > А .

коробка

Мне тяжело давался анализ внешнего и внешнего внешнего вида. желательно его упростить. Я вывела для себя принцип «коробки».

Давайте представим, что у нас много коробок. Они занимают всю кухню и мешают ходить к холодильнику;) А выбрасывать их нельзя. Что будет делать? Собеременность одна в одну. Также предлагаю сделать с блоками сайта.

Вернемся к примеру с букетами.

Начинаем упаковывать коробку с самой маленькой. Мы знаем, что текст и заголовок полностью один блок. Запихиваем их в одну коробку А.

Самая маленькая коробка

Коробка с текстом и заголовком имеет связь с фотографией . Берем большую коробку и упаковываем фото туда и коробку поменьше . Теперь коробка А отделена от коробки Б растоянием своей картонной коробки.

Коробка побольше

Мы получили 3 коробки, которые покрываются заголовком «Наши услуги». Упаковываем коробку и кладем их в большую большую коробку.

Картонных стенок между коробкой А и коробкой В стало больше. Следовательно, больше и расстояние между ними.

Варите кашу на завтрак, а не в дизайне

Запомните формулу представления: ≤внешне. использовать ее на практике.

Если вам понравилось правило «коробки» — використовуйте его. Раскладывайте всю информацию по «коробкам».

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

Пошаговое руководство: как повысить конверсию сайта

2022-07-31T10:24:42.767Z

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

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

Разработка макета бизнес-сайта

Шаг 1. Сначала продумайте путь пользователя

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

Если у веб-сайта отсутствует хороший пользовательский опыт, шансы привлечь приличный объем трафика снижаются. Ведь UX и SEO тесно взаимосвязаны. Есть исключения, когда сайты с несерьезным UX все еще привлекают множество пользователей — см. Craigslist. Но у компаний с лучшим UX, таких как Uber, Airbnb и Slack, гораздо больше шансов положительно повлиять на развитие своей отрасли.

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

Сортировка карточек поможет вам спроектировать общую структуру дизайна вашего веб-сайта и его навигацию. (Источник)

‍Информационная архитектура (IA) — это организация информации на веб-сайте наглядным и интуитивно понятным образом. Вспомните, как вы просматриваете веб-страницы. Когда вы переходите на плохо структурированную веб-страницу, которая не демонстрирует свою полезность за считанные секунды, скорее всего вы сразу же нажмете кнопку “Закрыть” или “Назад”.

Хорошая IA создаст иерархию, которая подчеркнет наиболее важные элементы и поддержит интерес посетителей. Без прочного “скелета”, на который можно опереться, вас ждет провал.

Навигация — один из ключевых аспектов IA, который вам следует учесть заранее. Если пользователи не могут сориентироваться на сайте, то неважно, насколько он красив. Три основные характеристики хорошей навигации:

Простота
Ясность
Последовательность

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

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

Шаг 2. Правильно выстраивайте визуальную иерархию

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

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

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

Какие инструменты помогут создать четкую визуальную иерархию?

Используйте сетку

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

Ориентируйтесь на паттерны просмотра страницы

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

F-паттерн
Z-паттерн

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

Важно отметить, что Nielsen-Norman group открыла этот паттерн чтения в 2006 году. Недавно они пересмотрели свое исследование и объяснили некоторые заблуждения относительно F-паттерна: на самом деле он не приносит значительной пользы как читателям, так и компаниям, и его следует избегать.

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

Вот несколько способов, как сориентировать посетителей, чтобы они прочитали приоритетный контент:

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

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

Примеры чтения по F-паттерну. Источник: NNgroup

Проектирование, которое препятствует просмотру страницы по F-паттерну, хорошо подходит для сайтов с большим количеством текста, например для блогов и новостных сайтов. Для сайтов, на которых минимум текста и всего несколько ключевых элементов привлечения внимания пользователя, Z-паттерн подходит лучше. В лендингах часто применяется Z-паттерн, чтобы направить взгляд пользователя по пути конверсии.

Такой макет веб-сайта отлично подходит, когда вы хотите привлечь внимание пользователей к конкретной кнопке с призывом к действию или контенту на странице. Источник: Basecamp

Расставьте приоритеты для ключевых элементов

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

Размер

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

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

Цвет

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

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

Макет

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

В своем ежеквартальном издании Google применяет карточки, чтобы организовать контент на странице и побудить пользователя к своей главной цели: подписке. Источник: Think with Google.‍

Интервалы

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

Компания Apple хорошо известна применением свободного пространства. Источник: Apple‍

Стиль

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

Чтобы добавить индивидуальности и привлекательности своему продукту, Airtable применяет сделанные на заказ иллюстрации. Источник: Airtable

Применяйте правило третей

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

Концепт редизайна сайта National Geographic, автор Гаян Ваматева

Шаг 3. Делайте акцент на кнопках с призывом к действию

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

Вот что нужно учитывать при разработке кнопок.

Убедитесь, что ваши кнопки выглядят кликабельными

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

Использование исключительно прозрачных кнопок может запутать пользователя. Источник: Visage

Это пример применения визуальной иерархии к кнопкам с призывом к действию. Обратите внимание, каким образом обозначено то, что прозрачная кнопка предназначена для дополнительного действия. Источник: Typeform

Четко подписывайте все кнопки

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

Визуально выделите самые важные призывы к действию

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

Ошибки в оформлении презентаций и способы решений

2022-07-16T19:08:18.311Z

Много текста, картинка не усиливает желаемый эффект

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

Как исправить

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

Эффективные слайды, которые доносят миссию компании

Полезный инструмент

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

Нагромождение контента на слайде

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

Как исправить

Разбиваем контент на два слайда и осваиваем всё пространство:

Информацию на слайдах проще воспринимать, нет нагромождения текста

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

Неправильно расставленные акценты

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

Как исправить

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

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

Полезный инструмент

Найти основные схемы подачи информации можно в Diagrammer Нэнси Дуарте — библиотеке готовых схем-зависимостей между терминами. В нашем случае полезен таймлайн:

Варианты оформления таймлайна в Diagrammer

Много текста, мало визуализации

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

Информация на слайде структурирована, но быстро забывается

Презентации, цель которых — запомниться и продать, должны быть ярче и захватывать внимание.

Как исправить

Подбираем яркую ассоциацию к каждому слову и соответствующее фото, равномерно распределяем контент по слайду, где можно — сокращаем текст.

Благодаря фото текст на слайде запоминается лучше

Полезный инструмент

Чтобы не придумывать ассоциации самому, используйте Kartaslov. Введите слово, и сервис подберёт к нему ассоциации, по которым будет проще подобрать подходящие картинки.

Обрезанные видео и скриншоты

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

Как исправить

Я ищу нужный тип мокапа под планшет, десктоп или мобильный и вставляю туда нужный мне скриншот или видео:

Мокап показывает, как скриншот или видео выглядят на экране смартфона

Полезный инструмент

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

Слайд без структуры

Иногда хочется донести мысль, но вместо слайдов получаются только страницы документа. Такие странички выглядят скучно, читать их никто не хочет.

Если писать просто текст с подзаголовками, слайды будут выглядеть как страницы Word

Как исправить

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

Шаги в содержании слайда считываются при первом взгляде

Полезный инструмент

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

Сложные процессы показаны без анимации

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

Полезные инструменты

Я всегда использую анимацию в Power Point или Keynote. Для тех, кто не хочет углубляться и изучать настройки анимации, есть инструменты вроде Beautiful.AI, где можно создать презентацию онлайн. К сожалению, такая презентация с анимацией не будет открываться корректно в стандартных графических редакторах, её можно будет показывать только по ссылке от сервиса.

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

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

Экспорт объектов символов из Sketch в Zeplin

2022-07-16T19:01:18.846Z

Если вы создаете слой, экспортируемый в Sketch, Zeplin будет генерировать необходимые ресурсы (в разных форматах и масштабах) в зависимости от платформы, над которой вы работаете. Это довольно просто. Хотя, есть несколько советов и трюков, которые могут помочь вам получить максимум от символов в Zeplin.

Делая символы экспортируемыми

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

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

Подобно всем другим экспортируемым слоям, имя символа становится именем объекта в Zeplin. Если вы используете / для группировки символов, то будет использоваться только последняя часть названия: /some/long/path/icCameraSelected становится icCameraSelected .

Вот, как выглядит элемент экспортируемого символа в Zeplin, в iOS проекте:

Используя вложения

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

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

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

Без дополнительных усилий ресурсы всех трех иконок теперь должны быть доступны в Zeplin. Вот, как они выглядят в iOS проекте:

Buttons in UI Design

2022-07-16T18:57:33.206Z

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

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

Эволюция стиля

Трехмерная кнопка

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

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

Элементы, которые кажутся приподнятыми, выглядят так, будто их можно надавить (щелкнуть мышью)

Скевоморфная кнопка

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

Изображение предоставлено: theultralinx

Кнопка плоского дизайна

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

Обычная и плоская кнопка

Приложение-калькулятор для Apple iOS

Когда все плоско, как пользователи узнают, какие части являются кнопками?

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

Почти плоский дизайн и плавающая кнопка действия

Почти плоский дизайн был развитием оригинального (или ультра) плоского дизайна. Этот стиль в основном плоский, но использует тонкие тени, блики и слои, чтобы создать некоторую глубину в пользовательском интерфейсе. Язык Material Design от Google является одним из примеров почти плоского дизайна с правильными приоритетами и предлагает новый тип кнопок: плавающую кнопку действия . Эти кнопки расположены в верхней части интерфейса и привлекают внимание к продвигаемым или основным действиям. Они действуют как кнопки призыва к действию («используются для продвигаемого действия»), предназначенные для представления одного действия, которое пользователи выполняют чаще всего на этом конкретном экране.

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

Карта Google на Android

Еще один хороший пример использования FAB в дизайне пользовательского интерфейса — Evernote. Несмотря на в основном плоский пользовательский интерфейс, приложение предоставляет несколько тонких теней на панели навигации и плавающей кнопке действия («добавить новый»).

Приложение Evernote для Android

Призрачная кнопка

В 2014 году одной из доминирующих тенденций в дизайне пользовательского интерфейса были кнопки-призраки . Кнопки-призраки — это прозрачные и пустые кнопки, имеющие базовую форму, например прямоугольную или, возможно, квадратную. У них также есть такие названия, как «пустые», «голые» или «полые» кнопки. Кнопки-призраки обычно окаймлены очень тонкой линией, а внутренняя часть состоит из обычного текста.

Нормальное состояние (слева) и сфокусированное состояние (справа)

Кнопки-призраки произошли от революции плоского дизайна, а кнопки-призраки стали модными, когда Apple выпустила iOS 7. Многие кнопки в пользовательском интерфейсе iOS — это то, что мы бы назвали кнопками-призраками. Простая и незамысловатая прямоугольная форма в сочетании с аккуратным шрифтом внутри рамки отлично смотрятся в плоском интерфейсе.

«Имя», «Данные выпуска» и «Избранное» — это призрачные кнопки. «Получить» — кнопка-призрак.

Чаще всего они выглядят как кнопки призыва к действию (CTA) и выглядят аккуратно. Сайт Specular — хороший пример использования кнопок такого типа.

Specular имеет плоскую кнопку в качестве основного действия «Купить сейчас» и призрачную кнопку «Посетить тур» в качестве дополнительной кнопки.

Основные рекомендации для кнопок

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

Сделайте кнопки похожими на кнопки (см. Форма )
Упростите взаимодействие пользователя с кнопками (см. раздел « Размер и отступы» ) .
Пометьте кнопки тем, что они делают (см. Метка )
Используйте цветовой контраст, чтобы побудить пользователей к действию (см. Цвет ) .

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

Форма

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

Некоторые исследования показывают, что закругленные углы улучшают обработку информации и привлекают внимание к центру элемента.

Круглая прямоугольная кнопка

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

Кнопки с закругленными углами приятнее для глаз. Кредиты: агентство дизайна UX Ramotion

Размер и заполнение

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

Размер. Когда касание используется в качестве основного метода ввода для вашего приложения или сайта, вы можете положиться на исследование MIT Touch Lab , чтобы выбрать правильный размер для ваших кнопок. Исследование Массачусетского технологического института показало, что средний размер подушечек пальцев составляет 10–14 мм, а кончиков пальцев — 8–10 мм, что делает 10 мм x 10 мм хорошим минимальным размером мишени для касания.

Источник изображения: uxmag

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

Изображение предоставлено: ux.stackexchange.com

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

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

Отступы между плоскими кнопками в диалоговом окне «Дизайн материалов»

Этикетка

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

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

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

Кредит изображения: uxmatters

Цвет

Выбирая цветовую палитру , не забудьте подумать о том, как цвета помогут пользователям ориентироваться и понимать действие :

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

Обратите внимание, что действие «Удалить» сильнее по цвету и контрасту. Изображение предоставлено: Материальный дизайн

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

Amazon использует контрастные цвета для кнопки CTA «Добавить в корзину».

Вывод

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