Кнопка «Узнать больше»: оптимизируйте ее!
Кнопки «Узнать больше», «Подробнее» и аналогичные им, как правило, размещаются на странице с тизерным описанием продукта/услуги, акцией или блоком другой информации. Хотя они не являются прямым призывом к действию, наверняка вы видели такие элементы на лендингах или сайтах:
В тексте, размещенном до кнопки, обычно достаточно информации для того, чтобы пользователь понял, куда он перейдет после нажатия
Частое употребление CTA-кнопок «Подробнее» обусловлено растущей популярностью мобильного интернета. Так как мобильные версии сайтов должны быть короче и удобнее для просмотра на небольшом экране, некоторые разработчики используют именно кнопки типа «Подробнее», чтобы не урезать контент слишком сильно и не жертвовать полезной для пользователя информацией.
В этой статье будут рассмотрены проблемы, связанные с подобными кнопками, а также приведены примеры сайтов, которые нашли удачные решения их использования.
Кроме того, у вас будет возможность потренироваться в составлении качественных описаний блоков.
- Контурные кнопки: 15 примеров призывов к действию на посадочных страницах
Какие проблемы могут возникнуть?
Очевидным является следующий факт — даже если предшествующий кнопке «Узнать больше» текст дает исчерпывающую информацию, данный элемент усложняет пользовательский опыт. Для посетителя, решившего нажать на кнопку, все равно остается загадкой — перейдет ли он на страницу с полной информацией по теме, или окажется на лендинге, или ему снова придется выбирать из нескольких ссылок.
Все это ведет к тому, что слово «Подробнее» создает неопределенность, хотя должно действовать с точностью наоборот. Это отражается на дальнейших действиях посетителей — например, значительное их количество может вовсе не заинтересоваться загадочным «Подробнее».
Чтобы повысить эффективность элемента, нужно изменить его название, придав ему описательный характер, то есть предупредить читателя в краткой форме о том, что его ждет при клике по нему.
Такое решение имеет множество преимуществ:
- делает ссылки более понятными;
- увеличивает интерес пользователя;
- помогает поисковой оптимизации сайта за счет ключевых слов в «теле» кнопки;
- способствует вовлечению пользователей, которые не вчитываются в информацию, а «пробегают» страницы глазами.
- Как дизайн CTA-кнопки может увеличить конверсию?
Что написать на кнопке: три удачных варианта
Теперь перейдем непосредственно к тому, что именно писать в тексте кнопки. Ниже представлены три наиболее удачных решения.
Вариант №1: Использовать в описании ключевые слова и фразы
Данный подход встречается чаще всего и, как правило, действует безотказно. Для того чтобы определиться с ключевиками, обратитесь к семантическому ядру сайта. Если такого нет, можете сами посмотреть в сервисе Яндекс. Вордстат ключевые слова, подходящие по теме вашей странице. Конечно, делать описание совсем большим тоже не стоит.
Вариант №2: Оставьте фразу «Узнать больше» и добавьте ключевые слова
Следование этому методу потребует от вас некоторых усилий. Если формат «Узнать больше» действительно подходит вам лучше всего — например, вы предлагаете подробнее ознакомиться с услугами, то вставьте ключевые слова после указанной фразы на кнопке. Обычно это выглядит так: «Узнать больше: как оптимизировать CTA-кнопки». Есть одновременно минус и плюс такого подхода: слишком длинный текст может быть трудно читать, но большая кнопка привлекает больше внимания. Решение за вами.
Вариант №3: Добавьте яркий заголовок к предшествующему кнопке тексту
Если заголовок написан качественно и действительно привлекает внимание, можете включить его и в «тело» кнопки.
В описании к CTA-кнопке используйте ключевые слова и фразы, соответствующие семантическому ядру сайта
Твитнуть цитату
Удачные примеры
Каждый из приведенных ниже примеров демонстрирует удачные альтернативы банальному «Узнать больше».
Вдохновляйтесь и внедряйте оригинальные идеи на своих сайтах и лендингах!
На сайте Pugetsound.edu представлены три истории, и вместо привычного «Читать далее» авторы решили поместить под заголовком краткое содержание статьи:
Rei.com email: Текст ссылки дает пользователю понять, что его ждет дальше даже без чтения заголовка: «Больше советов по кэмпингу», «Читать блог», «Обучающие курсы по кэмпингу и походному туризму».
Пользователи могли и не знать, что скачивая приложение на сайте Barclays.co.uk, они участвуют в благотворительной акции. Кнопка «О приложении» позволяет лучше ознакомиться с сутью программы:
На сайте Mq.edu.au заголовки вообще сами являются гиперссылками, ведущими к подробному описанию:
- Призыв к действию (CTA) — примеры, взятые из практики
Попробуйте сами!
Теперь, когда вы знаете, какими словами заменить банальное «Подробнее», попробуйте улучшить описание, предшествующее CTA-кнопкам.
Ниже приведены примеры описаний целевых страниц нескольких сайтов. Конечно, однозначно правильного варианта нет, однако вот несколько советов:
- поставьте себя на место пользователей, которые не знают, о чем страница и напишите то, что помогло бы вам это понять;
- обратите внимание, как выделены заголовки на сайте;
- используя информацию о целевое странице, попробуйте переписать текст на кнопке.
| Оригинал | Текст по ссылке | Ваш вариант |
Будьте всегда на связи! Теперь благодаря Samsung SmartThings вы можете подключить к одному устройству девайсы всей семьи, даже других брендов, и легко взаимодействовать в большой компании ПОДРОБНЕЕ | …Продукты, перечисленные ниже, являются сертифицированными устройствами для взаимодействия в системе SmartThings | |
Компания BCG (Build. МЫ ПРИНОСИМ ПОЛЬЗУ НАШИМ КЛИЕНТАМ, ОБЩЕСТВУ И МИРУ Подробнее | …Карьера. Работа. Культура. Путь. Присоединяйся | |
Подключите свое воображение Вы даже не представляете, какие возможности таит в себе обычный свет. Единственным реальным реальным ограничением является ваше воображение. ПОДРОБНЕЕ | …С помощью Philips Hue, беспроводной системы освещения, вы можете стать настоящим художником. Подключайте лампы к одному устройству и управляйте светом, создавая неповторимую атмосферу |
Вместо заключения
Если вы сомневаетесь, поймет ли пользователь, зачем ему переходить по ссылке «Узнать больше» и думаете, что это может ввести его в заблуждение, обратитесь к примерам и способам оптимизации, перечисленным в этой статье. Делайте описания более информативными, а текст на кнопке — более оригинальным и привлекательным для посетителей, и результат не заставит себя ждать.
Высоких вам конверсий!
По материалам: nngroup.com
24-02-2016
Кнопки призыва к действию: лучшие практики
Не всегда кнопке с призывом к действию уделяется достаточное внимание. К примеру, дизайнер может смотреть на нее с позиции эстетики и соответствия оформлению. Но кнопка call-to-action слишком значима, чтобы не рассматривать влияние разных деталей на конверсию. Важно представлять какие цвета / формы / размеры / стиль обеспечивают нормальный CTR кнопки.
Далее о типах CTA, удачных призывах, идеях оформления с нестандартными подходами к дизайну кнопок.
Прежде чем разбирать все Call to ActionsПара примеров продающих сайтов, интересно и красиво оформивших свое уникальное предложение. Призывы к целевому действию подразумевают последующие шаги и хороший дизайн помогает их совершать. Основатель Apple Стив Джобс:
Кнопка на экране должна выглядеть так, чтобы ее хотелось лизнуть
Молодая быстрорастущая CPA-сеть с русскоязычной поддержкой
Лаконичный сайт c приятным флэт оформлением – выглядит достойно и удобен для клиентов. Правильно подобранные UI контрасты позволили добавить дизайну мягкости.
Пример Call to Actions на сайте британского агентства c эффектным дизайном
При цветовом и шрифтовом контрасте, кнопки CTA захватывают внимание где бы не встречались:
- В первом развороте – на фоне высветленного фото с цветокоррекцией
- В блоках с различными бэкграундами
- В последнем экране, где контраст усиливает отрицательное пространство
Виды и назначение CTA-кнопок
Призыв может быть:
- Обобщенным — «Подробнее», «Скачать». Более индивидуальным и даже с добавлением микротекста
- Желаемого / альтернативного целевого действия и второстепенным. Уже стало практикой размещать в первом экране парные кнопки с призывами вида LERN MORE / BUY NOW
При стандартной формулировке, какую ценность в призыве увидит потребитель? Просто общепринятую фразу. SEO-эффект не должен служить оправданием – его улучшают связанными ключевыми словами лид-текстов / подзаголовков.
Испытывая недоверие к новому, потребители стремятся обезопасить себя и амбициозные призывы «Купи или умри» не пройдут. Лучше повлиять на глубинные эмоции и убедить выполнить конкретное действие.
Есть два типа кнопок призывающих зарегистрироваться:
- Перейти к форме регистрации и создать аккаунт
- Перейти к корзине для последующей оплаты
Сайт старейшей американской компании бизнес-консалтинговых услуг
Стильная индивидуальность в оформлении шапки и футера с шероховатыми текстурами. Кнопка желаемого действия доминирует над остальными СТА-элементами
2. Кнопки «Добавить в корзину»E-commerce ресурсы создают для того, чтобы их просмотр завершало целевое действие в карточке товара. Кнопка вида «Добавить в корзину» становится кульминационным моментом конверсии посетителя в покупателя.
Пример одностраничного лендинга продающего моно-товар — терморучку 3D
Полупрозрачные кнопки на фоне видео продающего терморучку 3D: PLAY – второстепенное действие открывает видеопрезентацию в pop-up окне и не уводит с главного экрана, ORDER – заказ в два клика
3. Кнопки вида «Download»Побуждая к обладанию, кнопка «Скачать» во многом напоминает предыдущий тип
Модальное окно с призывом «Подписаться» проинформирует о загрузке софта, поблагодарит или уведомит о несовместимостях
Этой кнопкой завершают инфо-блоки с тизерными описаниями УТП, обозначают переход к ПОРТФОЛИО, КЕЙСАМ. Обычно их дизайн прост, а размер – достаточный для привлечения внимания. Явного призыва не несут, но продвигают пользователя вперед к цели. Применять рекомендуют с ключевыми словами в окружающем контенте (тематичными сайту, переходу).
Cайт digital-агентства с призрачными кнопками, тонкими эффектами, продуманным UI.
Показать клиентам прежде всего то, зачем они пришли это рациональный подход
Продающий сайт школы бизнеса с разнообразием CTA и стильным флэт-оформлением.
Платные и бесплатные предложения сопровождаются многообразием призывов к действию: от «Перейти к заказу», до «Нажмите чтобы посмотреть»
Оформительские идеи
Специфика сайта для бизнеса – в его тематической обособленности, нацеленности на клиента. Дизайн может создавать или уничтожать доверие. Нацеленность на лучшее, стоит заменить подходом «не сделать плохо» и обеспечить заметность, сократить путь к цели, не оттолкнуть посетителя, не отвлечь от действия и т.д.
Контраст создают: цвета, формы, пропорции, негативное пространство
Важно:
- Правильно подобрать акценты для преобладающего цвета
- Выдержать общий стиль
- При крупных размерах не использовать ярко выраженного отличия цветов
- Красивые формы и hover-эффекты увязать с пользовательским опытом (UX)
Нет цветов вызывающих продажи или конверсию. Сам цвет кнопки ничего не решает, а солидных результатов добиваются не психологическим трюком. Зрительное впечатление складывается из всей визуальной структуры и лишь дополняет общее восприятие ресурса.
О форме:
- Слегка закругленные кнопки эффективны – воспринимаются уже не напоминая баннеры
- Как правило, округлые формы меньше сливаются с общим планом
- Вытянутая CTA-кнопка больше вмещает, цепляет взгляд и легко захватывается курсором
- Контурной кнопке можно придать и меньшую и большую заметность
У бренд агентства из Санта-Моники приятный сайт с продуманным UI
Мягкие тона, контрастная типографика и впечатляющий скролл-эффект тонирования с высветлением /затемнением первого экрана. Анимированная стрелка и затемняющая заливка повышают заметность CTA
Чикагское маркетинговое агентство разрабатывает сервисы под B2B/B2C и сайты для бизнеса
Освежающие лаймовый и ярко-оранжевый противоположны на цветовом круге. Сочетаясь с оттенками серого, эти цвета создают комплементарную гармонию, а плоская тень и эффект осветления кнопки добавляют особую эстетику
Запущенный в 2012 году стартап доставки еды, набрал популярность и оценивается в $3 млрд, растет по 130% в год, в перспективе рынки Азии и Европы.
Сайт американского сервиса доставки еды (продуктовых наборов)
Триадная цветовая гармония с акцентным оранжевым и доминирующем синем. Третий оттенок задается зеленью продуктовых фото. Простота и выразительность продающего дизайна способствовала запоминанию образа сервиса
Сайт австралийского агентства с красивыми эффектами, округлыми формами и линиями
Сайт запоминается креативно и выразительно оформленным оффером с розовыми CTA элементами
Flywheel – вордпресс хостинг для дизайнеров и агентств
Яркий плоский дизайн, блоки-растяжки служат фоном для более светлых / темных кнопок того же цвета, обеспечивая заметность CTA-призывов без лишней пестроты
Сайт медиасообщества c услугами медийщикам, журналистам и маркетологам ищущим журналистов
Умеренный контраст бирюзово-голубого к белому позволил укрупнить второстепенные кнопки. Основной CTA визуально выделяется контуром призрачной кнопки
Иконки помогают понять смысл перехода или действия, систематизируют множественные призывы. Интересные стилевые эффекты и графика – отличный способ привлечь внимание, создать эмоциональный настрой и улучшить опыт пользования.
Wistia – платформа видеохостинга с прочими решениями для малого и крупного бизнеса
На объемном сайте много CTA-призывов. Флэт дизайн позволил визуально разнообразить кнопки и добавить стилевой эффект появления плоской тени
Пример кнопок с иконками, улучшающих UX на сайте рекламной студии
Появляющиеся по наведению мыши иконки: повышают интуитивную понятность целевых действий не перетягивая на себя внимания
Размещение в соответствии с ходом мысли посетителя
Выше линии сгиба высока вероятность пользовательского взаимодействия с элементами CTA. Чтобы конверсионная кнопка притягивала взгляд ей придают больший визуальный вес, оформляя альтернативное действие ссылкой, контурной или менее контрастной кнопкой. Но если призывов к действию в первом экране будет слишком много, еще не успевший оценить полезность предложения посетитель подсознательно настроится на волну «избирательного внимания».
Внимание аудитории скорее поможет завоевать емкое предложение, когда информация подается «по кусочкам» и с тематической графикой. С точки зрения дизайна и юзабилити, многое решает единообразие страниц, их хорошая визуальная организация с учетом Z-схемы просмотра. Эти принципы используют Landing Pages.
1. Триггеры создающие довериеПризывы к совершению действия хорошо работают с триггерами доверия. О главном в тезисах:
- Доверие продает – на практике эта формула опирается на эмоции
- Кнопка желаемого действия – это однозначный, ясный и побуждающий посыл. Чем меньше эмоциональная привязка, тем скорее кнопка несет лишь функциональное значение
- Лаконичность заголовка о вашем бизнесе влияет на целевое действие. Упоминая бренд, сообщите главное преимущество – как в слогане: «Ralf Ringer – когда нигде не жмет»
- Охват нескольких целевых запросов потребует усиления мотивации к действию.
Например, правдиво обещающей «зацепкой» в лид-абзаце - Социальные подтверждения усиливают доверительный посыл на сайте с коммерческим предложением
Совмещение с доводами доступным языком. Пример сайта агентства, специализирующегося на маркетинге и консалтинге.
Доверительное отношение выстраивается многократным обращением к аудитории. Доступным языком объясняется: что в результате получите, сможете, будете знать. Целевое действие с призывом УЗНАТЬ РЕШЕНИЕ завершает важные страницы
Совмещение с социальными доказательствами. Callibri – российский сайт коллтрекинг-услуг и сервисов работы с клиентским потоком.
Соц. доказательства на главной странице и завершающий призыв «Тоже хочу попробовать»
Совмещение с тематической графикой. Сайт канадского медсервиса онлайн-консультаций. Иллюстрированным дизайном намного проще передать ощущение заботы о здоровье и внимания к клиенту.
Уникальное предложение предельно ясно расписано по шагам. Анимированная иллюстрация неоспоримого преимущества с заголовком огромными буквами: «Без очередей в поликлинике»
Взгляните на ресурс профессионалов айтрекинга, улучшающих UX и конверсию сайтов, тестирующих лендинги.
Обширный сайт с продуманной структурой легок в пользовании
Привлекательный первый экран с Hero изображением и сочными цветами UI-интерфейса создают оптимистичный настрой
Сайт с карточным дизайном продвигает горнолыжные курорты штата Юта
Тизер перед CTA-кнопкой должен затронуть воображение, разбудить интерес. Необходимое для конверсионного элемента свободное пространство «вырезано» из карточки
Преимущества мощного призыва
В чем же сила? Для заинтересованного посетителя элемент сall-to-аction оказывается первым звеном на пути к цели – поворотный момент, продолжить или воздержаться? Предложений много и в муках выбора требуется дополнительный стимул.
Удачно сформулированные предложение & призыв не оставят сомнений и в этом главное преимущество. Вялые, недостаточно проработанные и неудачно заимствованные CTA вряд-ли побудят действовать. Правило без исключений:
1. Слово как триггерЧтобы CTR (показатель кликабельности) вас радовал, призыв к действию должен сохранять целевого пользователя в зоне комфорта
Подходящая фраза в CTA-тексте кнопки служит эмоциональным якорем – акцентирует внимание, уменьшает раздумья и сомнения.
Персональный лендинг: эмоциональный призыв хорош при коротком цикле принятия решения
Положительное «ДА» в призыве, уже настраивает на позитивную волну. Ограниченная по времени акция «сегодня скидка…» – еще триггер. Использована триадная цветовая гармония. У основного CTA тройной контраст: текста, фона кнопки, подложки, узорчатого бэкграунда
Пользователей Сети бесплатное интересует больше, чем премиум и профешнл. Всем знакомы фразы в призывах: «…Free 14-Day Trial», «…попробуйте бесплатно», «Начните сегодня…со скидкой». Раздающих что-то бесплатно чаще замечают, лучше запоминают, а поисковые системы ранжируют выше. С заветным словом обычно предлагают услугу на ограниченное время, пробное тестирование или бесплатный тариф.
MVP-проект Citrix с лендинговым оформлением
Поля формы и CTA-призыв на полупрозрачной подложке окружены направленными взглядами. Текст под кнопкой подогревает интерес к предложению: пробуйте без «кредитки», скидка… Визуальная иерархия сделала оффер заметным
Сайт сервиса СМС рассылок с блогом о email маркетинге
Главная страница отличается от остальных и оформлена под название сайта. Для целевых кнопок применяется смелый контраст и градиентная заливка. Срочность задают фразы «Попробуйте сейчас», «Начните…»
Глаголы с побудительным значением или повелительного наклонения (императив 2-го лица) ориентируют на поступок. Намек для каждого – необходимо действовать! Образность лаконичной метафоры затрагивает эмоции посетителя: mclean-dentist.com – «сделайте улыбку светлей».
Неотразимые призывы четко выражают какую-то возможность – не отреагируешь, значит не воспользуешься случаем получить… упускаешь выгоду. Например, вместо «Подробнее» и «Купить», новатор продаж zendesk.com.ru демонстрирует индивидуальность, специфику и свое ХОРОШЕЕ ОТНОШЕНИЕ, что тоже плюс.
Сайт топового интернет-агентства рунета с сильным визуальным контрастом кнопок CTA
Комплиментарные и минимальные контрасты (из родственных цветов) выделяют CTA, не создавая напряженности. Призыв НАЧАТЬ СОТРУДНИЧЕСТВО выражает возможности, а привлекательная функциональная форма заявки усиливает посыл
Cервис удаленного доступа к экрану для видео-конференций и правок
Организуя совместную работу, Join.me экономит время. В том же духе простой и ясный процесс конверсии: ярко, компактно и убедительно. Короткое доменное имя позволяет включать его в CTA
Индивидуальность, самовыражение и нестандартные СТА
Целевая кнопка смотрится выигрышней на страницах со стилевым разнообразием. Но нередко повышение рентабельности продаж выливается в сокращение расходов. Основательное улучшение сайта заменяют тактики, ставшие маркетинговым клише – уже не работают и только раздражают. Такой подход не лучше, чем стандартные кнопочки с вялыми призывами к действию. Еще в VI веке до н.э. стратег Сунь-Цзы говорил:
Тактика без стратегии — это просто суета перед поражением
Трамвай-желаний.рф — проект-победитель «Рейтинга Рунета»
Загадочный вид сайту придают контент, подгружаемый горизонтальной и вертикальной прокруткой. Flip-переворот заменяет номер телефона на призыв «Заказать звонок». Очень необычно оформлен завершающий призыв к действию
Сайт технологической компании запоминается индивидуальностью и коротким доменом зоне .
technologyНестандартная разметка с уникальным согласованием элементов. Добавляют изящества тонкие эффекты и переходы. Кнопки с призывом обращаются в «призрачные» по наведению
Дизайн сайта пивоваренной компании «Mother’s» с винтажным посылом
Сайт запоминается брендинговой картинкой и оригинальными призывами. Анимированные ленты притягивая взлгяд, создают эмоциональный настрой на качество
Fresh Consulting — яркий современный сайт агенства дизайна и разработки
В соответствии с доменным названием, UI-интерфейс сайта освежающее оранжево-зеленый. Оригинальные анимации с микроитерациями дополняют визуальную айдентику
Сайт процессинговой компании обслуживающей сети банкоматов
СТА-кнопки закругленные и даже КРУГЛЫЕ – в контурном UI с округлыми геометрическими формами воспринимается гармонично
Функциональный Flat-сайт продает систему управления финансами семейного бюджета
Продающее видео не просто продвигает продукт, а генерирует лиды – когда под ним мотивирующий слоган и CTA-призыв с кратким именем YNAB (аббревиатура от доменного названия You_Need_A_Budget)
Как начать применять лучшие практикиВдохновляйтесь идеями, экспериментируйте и анализируйте ключевые выгоды от применяемых методик. Задайтесь вопросом: «Как получить больший эффект от применения кнопок с призывами к действию (разных видов) на страницах моего сайта?» Влияют не только визуальные факторы и удачно разработанный призыв и одной лишь оптимизацией работы CTA-элемента не совершить магию. Однако повысить коэффициент конверсии кнопки вполне осуществимо, что станет поворотным моментом к увеличению продаж и эффективности сайта.
Подробнее Дизайны кнопок, темы, шаблоны и загружаемые графические элементы на Dribbble
Просмотр таблицы электронной торговли
Исследование таблицы электронной торговли
Просмотр взаимодействия с дизайном домашней страницы The Banky
Взаимодействие с дизайном домашней страницы Banky
Посмотреть больше превью
Больше превью
Посмотреть приложение языкового курса / страницы со способами оплаты и информацией о курсе
Приложение языкового курса / Способы оплаты и подробная информация о курсе, стр.
Посмотреть приложение электронного курса (больше экранов!)
Приложение электронного курса (больше экранов!)
Посмотреть приложение онлайн-курса | Больше экранов
Приложение для онлайн-курсов | Больше экранов
Посмотреть целевую страницу SiNow Learn
Целевая страница SiNow Learn
Просмотр концепции взаимодействия с кнопкой «Поделиться»
Концепция взаимодействия кнопки «Поделиться»
Просмотреть аренду лодок — нажмите, чтобы узнать больше
Аренда лодок — нажмите, чтобы узнать больше
Просмотр пользовательского интерфейса заголовка BeLearn
Интерфейс заголовка BeLearn
Просмотр кнопки — материал стекла
Кнопка из стекла
Посмотреть Узнать больше!
Узнать больше!
Посмотреть мобильное приложение __ БОЛЬШЕ
Мобильное приложение __ БОЛЬШЕ
Посмотреть шапку официального сайта блокчейна Okcoin
Заголовок официального сайта блокчейна Okcoin
Посмотреть мобильное приложение
Мобильное приложение
Просмотр неоморфизма в пользовательских интерфейсах
Неоморфизм в пользовательских интерфейсах
Просмотр добавления отображения дизайна модуля на официальном сайте Okg Web3
Добавить отображение дизайна модуля на официальном сайте Okg Web3
Посмотреть исследование значка сохранения для приложения Instasize
Сохранить значок исследования для приложения Instasize
Посмотреть веб-сайт институционального блокчейн-проекта BTS
Сайт институционального блокчейн-проекта BTS
Посмотреть Бангладеш
Бангладеш
Просмотр действия кнопки «Дополнительно»
Действие кнопки «Дополнительно»
Посмотреть веб-баннер стабилизатора
Веб-баннер с карданным подвесом
Смотреть Делиться, учиться, больше не опаздывать
Делитесь, узнавайте, больше не опаздывайте
Просмотреть Узнать больше Line Hover
Подробнее Line Hover
Зарегистрируйтесь, чтобы продолжить или войдите в систему
Идет загрузка…
Ссылки «Подробнее»: You Can Do Better
Некоторые тенденции тоньше других. Подобно низкоконтрастному тексту, использование Узнать больше в качестве отдельной метки ссылки постепенно набирает популярность. Интернет теперь имеет множество ссылок с этим общим ярлыком, в основном привязанным к информации второстепенной или третичной важности. (Поиск Google находит 1,4 миллиарда вхождений этого термина, хотя некоторые, по общему признанию, могут быть результатом правильного использования термина в общем содержании.) Как правило, эти ссылки размещаются после короткого абзаца, который кратко представляет тему, функцию или услугу, поэтому что Узнать больше указывает посетителю на страницу сведений. Обычно эти ссылки не являются основными призывами к действию на странице, что частично объясняет, почему этой детали копирайтинга не уделяется столько внимания или A/B-тестирования, как другим призывам к действию.
Многие из вас наверняка видели этот узор. Ниже приведен пример того, о чем мы говорим:
. Smartthings.com: В качестве отдельного ярлыка Узнать больше не содержит описательных ключевых слов, которые помогают пользователям понять, чего ожидать от следующей страницы. Распространение ссылок Подробнее , вероятно, связано с мобильными устройствами: сайты, оптимизированные для мобильных устройств, все лучше откладывают второстепенный контент. То есть вместо того, чтобы делать все детали доступными по умолчанию, заголовки и короткие абзацы обеспечивают легко читаемый и удобоваримый обзор основного контента. Когда пользователи решают, что им нужно больше информации, они могут нажать на ссылку или развернуть аккордеон, чтобы перейти к менее важному контенту. Этот шаблон дизайна определенно полезен для мобильных устройств, и наша статья представляет собой критику только ярлыка ссылки, а не общей практики откладывания менее важного контента.
Сначала мы рассмотрим, почему эта фраза проблематична, когда используется сама по себе, и почему стоит быть более описательной. Затем мы рассмотрим, как понять, что сказать вместо этого, на примерах сайтов, которые сделали это хорошо. У вас даже будет возможность попробовать переписать этикетки самостоятельно. Для этой заключительной части мы рекомендуем вам иметь под рукой письменные принадлежности, потому что да, будет викторина.
Почему
Узнать больше Является проблемойДавайте сначала признаем, что если текст, который предшествует ссылке, делает очевидным, что будет дальше, то метка «Узнать больше» не будет разрушительной для пользователя. Помните, эта статья о , как сделать лучше. Описательный текст действительно помогает прояснить и установить ожидания. Однако даже в этой ситуации часто возникает неясность в отношении области действия ссылки. Ссылка ведет на полную страницу, посвященную теме? Или он ведет на целевую страницу, где пользователю придется выбирать из дюжины других ссылок? Указывает ли он на внешний сайт или магазин приложений? На все эти вопросы может помочь ответить информативный ярлык ссылки.
Фраза наиболее опасна, когда используется одна из-за ее двусмысленности и слабого информационного чутья. Это создает неопределенность, потому что пользователи не знают, чего ожидать , если они нажмут, или стоит ли ждать загрузки новой страницы. Это чувство неуверенности может заставить пользователей колебаться и переходить в состояние когнитивного напряжения. Некоторые могут прибегнуть к парковке страниц для оценки нечетких ссылок.
Если на веб-странице есть несколько Подробнее ссылок, пользователи могут интересно, ведут ли ссылки на одну и ту же страницу или на разные страницы . Опять же, неопределенность и когнитивное напряжение отрицательно сказываются на пользовательском опыте. Хуже того, когда они указывают на одну и ту же страницу, пользователи могут тратить клики и разочаровываться, обнаружив, что предоставлена та же самая страница. Это добавляет разочарования и путаницы в смесь.
Наконец, в качестве отдельной ссылки отсутствие описательных ключевых слов представляет собой серьезную проблему для доступности . Люди с нарушениями зрения, использующие программу чтения с экрана или лупу, не могут быстро вернуться к тексту предыдущего абзаца, чтобы увидеть, что Дополнительная информация по ссылке . Большинство пользователей программ чтения с экрана услышат список прочитанных им ссылок без визуального контекста, который поможет им понять различные общие ссылки Узнать Подробнее или Читать Подробнее .
Таким образом, если вы используете описательные метки вместо отдельного текста Подробнее , ваша копия выиграет по нескольким причинам:
- Ссылки станут более доступными.
- Ссылки будут более привлекательными для пользователей и потенциально более убедительными.
- Пользователи будут чувствовать себя более уверенно, переходя со страницы на страницу.
- Больше ключевых слов на странице поможет поисковой оптимизации.
- Значимые ссылки будут стоять отдельно и помогать пользователям, просматривающим страницу.
Что сказать вместо: 3 решения
Теперь, когда вы готовы переписать метки ссылок, давайте посмотрим, что можно написать вместо них. Ниже приведены три наиболее распространенных подхода.
Вариант 1. Используйте ключевые слова, описывающие назначение ссылки.
Это наиболее распространенный и, как правило, лучший подход. Для этого вам нужно посмотреть на целевую страницу и понять, о чем она. Не пропускайте этот шаг. При переписывании меток не забудьте попытаться загрузить текст ссылки заранее, поместив наиболее релевантные ключевые слова в начало текста. Например, вместо «Узнайте, как профессиональные повара готовят тыкву» попробуйте «Готовьте тыкву, как профессионалы». Загрузка текста спереди позволяет пользователям намного быстрее сканировать страницу и решать, что делать дальше.
Вариант 2. Сохраните формат
Подробнее и добавьте описательные ключевые слова. Бывают случаи, когда допустимо сохранить Узнать больше , если вы дополните его информацией о том, что нужно изучить (например, Узнать больше о наших услугах ). Недостатками этого подхода являются ограничения по пространству для более длинной этикетки и снижение возможности сканирования, поскольку релевантные ключевые слова появляются в конце, а не в начале фразы. Тем не менее, длинная ссылка создает большую цель, которую пользователи быстрее нажимают и нажимают, чем маленькую цель. В некоторых случаях вы можете попробовать связать только описательную фразу, например: «Подробнее: как ссылка является обещанием».
Вариант 3: преобразовать заголовок предыдущего абзаца в единственную ссылку.
Если заголовок предыдущего абзаца явно стилизован под ссылку, а копия четко описывает, на что указывает ссылка, то ссылка Узнать больше , вероятно, излишня.
Примеры эффективных альтернатив
В каждом из приведенных ниже примеров вы можете видеть, как легко дизайнерам было бы вернуться к Подробнее или Читать Подробнее . Вместо этого они приложили немного дополнительных усилий к копии, и это окупается. Используйте их в качестве вдохновения для своих собственных сайтов.
Pugetsound.edu: В противном случае под всеми тремя избранными историями могла бы быть ссылка Подробнее или Узнать больше . Вместо этого описательные ссылки поясняют, что пользователи увидят, если нажмут. Например, Выпуск 2019 года, группа Facebook и Читайте обновления Елены в блоге SOAN . Электронная почта Rei.com: пользователи могут сканировать оранжевые подчеркнутые ссылки и знать, чего ожидать, даже не читая большие заголовки, выделенные белым цветом. Вместо Узнать больше , REI использовала описательные и привлекательные ярлыки: Дополнительные советы по кемпингу, прочтите блог и Найдите уроки кемпинга и походов . Barclays.co.uk: пользователи, возможно, не ожидали, что смогут делать пожертвования на благотворительность с помощью приложения. Или они могут не знать, что Barclays Pingit — это мобильное приложение для отправки и получения денег. В любом случае кнопка О приложении помогает информировать пользователей об услуге. Mq.edu.au: Используя 3-й подход сверху, эта страница использует заголовки как ссылки вместо создания повторяющихся ссылок, чтобы узнать больше о каждой теме. Теперь попробуй
Теперь, когда вы увидели, как сделать лучше, чем просто Узнать больше , пришло время попробовать это самостоятельно. (Я не шутил насчет этого теста. В конце концов, вы же знаете, мы проводим экзамены по UX. Извините, это упражнение не засчитывается.)
Ниже приведены несколько примеров копирования и описание целевой страницы. Попробуйте придумать лучшую метку для ссылки. Как и во всех текстах, здесь нет единственно правильного ответа. (Но мы включили некоторые из наших собственных предложений ниже; просто не смотрите, пока не попробуете сначала сами.)
, часть 1. Во-первых, прочитайте оригинальную копию ниже и угадайте, к чему могут привести ссылки
Подробнее . Этот шаг должен помочь вам поставить вас на место ваших пользователей, которые не знают, о чем каждая страница, прежде чем щелкнуть ее. Обратите внимание, что заголовки выделены жирным шрифтом, а заглавные буквы сохранены с исходного веб-сайта.
, часть 2. Затем, используя информацию с целевой страницы, попробуйте переписать метку ссылки.
| Оригинал Копия | Со страницы назначения | Ваш альтернативный номер |
А. | Хорошо играет с другими В дополнение к собственному семейству датчиков SmartThings вы также можете управлять сотнями подключенных устройств других брендов через открытую платформу SmartThings. УЗНАТЬ БОЛЬШЕ | Открытая платформа для умного дома …В дополнение к собственному семейству датчиков SmartThings перечисленные ниже продукты являются примерами официально сертифицированных устройств, обеспечивающих наилучшее качество обслуживания клиентов. |
|
Б. | Сборка. Соединять. Расти. СДЕЛАЙТЕ ИЗМЕНЕНИЕ ДЛЯ НАШИХ КЛИЕНТОВ, ОБЩЕСТВА И МИРА Узнать больше | Карьера Работа, Культура, Путь, Присоединяйтесь |
|
С. | МЕРОПРИЯТИЯ И СТУДИИ — АРЕНДА ПЛОЩАДОК Events and Studios на первом этаже Биржи — это специально построенное место для проведения трансляций и мероприятий в самом центре города. Идеальное расположение на площади Патерностер делает это место лучшим местом для проведения объявлений, конференций или просто стильных развлечений. Подробнее | Академия LSEG — это собственный специализированный учебный центр нашей Группы, обслуживающий клиентов в Великобритании, Италии и по всему миру. |
|
Д. | Включите воображение №Существуют безграничные возможности превратить повседневное освещение в необыкновенное событие. И с сотнями приложений на выбор, единственным реальным ограничением является ваше воображение. Узнать больше | Ваша личная беспроводная система освещения Улучшите свою повседневную жизнь. Philips Hue рад приветствовать вас дома. Разбудить вас. Получите заряд энергии. Заставьте вас чувствовать себя в безопасности. Улучшите свое настроение. Расширьте свои возможности развлечений. Он может даже информировать вас о погоде или входящих вызовах. Возможности безграничны, как только вы начнете исследовать. |
|
Вывод
Если вы полагаетесь на Подробнее или Подробнее в качестве отдельных меток ссылок, помните, что они создают неопределенность для пользователей и ухудшают доступность.
