Как использовать призрачные кнопки в дизайне интерфейсов: важные характеристики, советы по разработке
НАЗАД

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

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

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

Что это такое

Ghost button — прямоугольник с прозрачным фоном и ярко выраженной рамкой. Тренд начал активно распространяться в 2014 году. До этого момента кнопки такого формата иногда встречались на сайтах и в приложениях, но к ним не было приковано внимание профессионального сообщества.

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

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

Призрачные кнопки в некоторых случаях делают больше традиционных, чтобы подчеркнуть их важность. Есть мнение, что лайт варианты не подходят для призыва к действию. Они отличаются от стандартных решений и сбивают пользователей с толку. Из-за такого подхода бизнес может потерять клиентов, а информационные сайты — аудиторию. В реальности, ghost button при правильном использовании может увеличить показатель CTR.

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

Как использовать ghost buttons

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

Пример ниже наглядно демонстрирует, как легко можно сочетать несколько кнопок. Каждая из них важна для аудитории. В первом случае откроется библиотека знаний, а во втором — начнётся загрузка файлов.

Обе кнопки изначально были призрачными, а при наведении область закрашивается соответствующим цветом. Call to action срабатывает отлично, ссылка в состоянии hover показывает, что пользователь получит после нажатия.

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

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

Стандартная кнопка отличается большим визуальным весом. Юзеры видят их постоянно на разных сайтах и в приложениях. А вот ghost button используется редко. В этом случае возможны два варианта развития событий. Или пользователь быстро проскроллит и пройдёт мимо блока, или остановится, чтобы изучить нестандартный элемент. Дизайнеру надо постараться, чтобы срабатывал второй сценарий.

Советы по разработке призрачных кнопок

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

Подберите контрастные цвета

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

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

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

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

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

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

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

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

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

Осторожно экспериментируйте с формами

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

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

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

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

Добавьте всплывающие подсказки

Можно использовать тултипы, чтобы усилить призыв к действию. Этот приём сработает только если на странице размещены несколько кнопок в ряд. Добавьте лаконичную подсказку, чтобы пояснить, что произойдёт после нажатия на баттон.

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

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

Обратите внимание, как стильно оформлены кнопки. Они объёмные и большие. При наведении область закрашивается белым, а подпись становится чёрной.

Найдите идеальное место

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

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

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

Откажитесь от размытия

В погоне за красивыми эффектами дизайнеры забывают о юзабилити. Ghost button и так часто сбивают пользователей с толку. Если добавить размытие фона и снизить прозрачность, call to action вообще не попадёт в поле зрения аудитории.

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

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

Преимущества и недостатки

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

Преимущества:

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

Недостатки:

  • снижают кликабельность при неправильном использовании;
  • плохо заметны на общем фоне без контрастного перехода;
  • в стандартном варианте выглядят блеклыми.

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

Главные характеристики призрачных кнопок

Мы выяснили, что ghost button отличается от стандартного решения прозрачным фоном и чёткими границами. Теперь определим ключевые особенности, которые влияют на эффективность использования формата.

Уникальность

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

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

Простота

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

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

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

Читабельность

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

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

Прозрачность

Одно из главных свойств, которое выделяет ghost button — прозрачный фон. Её вполне можно было назвать прозрачной кнопкой. Именно отсутствие фона внутри области делает элемент необычным. Мы привыкли, что call to action обязательно должен быть ярким и цепляющим. В умелых руках альтернативные решения принесут больше пользы.

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

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

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

Размер

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

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

Анимация

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

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

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

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

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

И обращайтесь в IDBI, если хотите работать со специалистами, понимающими задачи без лишних слов.