Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Интернет журнал про стартапы и предпринимательство
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
31
Эбиа

Эбиа

www.ebia.ru

16
Enlite

Enlite

enlited.ru

16
Amarket

Amarket

amarket.io

13
likearea

likearea

smm.li

12
RockinRobin

RockinRobin

www.rockinrobin.co

11
Perezvoni.com

Perezvoni.com

perezvoni.com

10
Cookiezz

Cookiezz

cookiezz.com.ua

10
Битрикс24

Битрикс24

www.bitrix24.ru

10
MuWID

MuWID

muwid.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

Кнопки-призраки в UX-дизайне

451 2 В избранное Сохранено
Авторизуйтесь
Вход с паролем
В 2014 году главным трендом в мире UI-дизайна стали кнопки-призраки. Речь идет о прозрачных кнопках прямоугольной или квадратной формы, которые также называют «пустыми», «голыми» или «полыми».

В 2014 году главным трендом в мире UI-дизайна стали кнопки-призраки. Речь идет о прозрачных кнопках прямоугольной или квадратной формы, которые также называют «пустыми», «голыми» или «полыми».

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

f44vfbuu30q1mc584hipg7lm22.png

Обычный внешний вид (слева) и внешний вид при наведении курсора (справа)

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

Происхождение кнопок-призраков

Первый раз термин «кнопки-призраки» использовался на сервисе микроблогов Tumblr в блоге веб-сайты с кнопками-призраками. Своим происхождением кнопки-призраки обязаны, так называемой, революции плоского дизайна. Это стало настоящим трендом после выхода операционной системы iOS 7, где многие кнопки стали именно такими.

96o0ogrmrbk8g8nqg3cljio2qf.png

‘Name’, ‘Release Data’, ‘Featured’ и ‘Get’ – кнопки-призраки

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

Нам не страшны никакие призраки!

Давайте, теперь посмотрим, какие положительные моменты кнопки-призраки могут привнести в ваш дизайн и опыт пользователя:

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

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

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

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

Кнопки-призраки могут использоваться по отдельности или объединяться в группы; основное условие их эффективного применения – это располагать их на видных местах.

О чем следует помнить при разработке дизайна кнопок-призраков

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

Кнопки-призраки в качестве кнопок призыва к действию

Как правило, использование кнопок-призраков в качестве основного элемента для призыва к действию – не самая хорошая идея. Ниже приведен простой пример: посмотрите, как кнопка-призрак Download Bootstrap, практически, сливается с логотипом.

4bs5q7e49dausfsub3pjjbi6ho.png

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

Хорошим примером может служить веб-сайт Specular – используется плоская кнопка ‘Purchase Now’, которая призывает купить, но пользователю предоставляется выбор – он может еще ближе познакомиться с вашим предложением, нажав на кнопку-призрак ‘Take Tour’.

uqparn8akghcqbks5dkemvk24v.jpeg

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

Кнопки-призраки не выглядят, как «кнопки» в традиционном представлении

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

Не все пользователи способны одинаково воспринимать дизайнерские приемы; консервативные пользователи, не привыкшие к новым элементам, могут вообще не заметить кнопку-призрак, либо не догадаться, что на нее можно нажать. Например, вы сразу увидели кнопку ‘Get Access’ на нижней картинке? Это непростая задача даже для самых продвинутых в плане дизайна пользователей.

srac434h9p63etj54b3mk8bbb4.jpeg

Вывод: кнопки-призраки могут превратиться в настоящие приведения и раствориться на фоне вашей страницы.

Привлеките внимание

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

1*EA37q0w8o_6n3z9ZhZQ7OA.gif

Будьте осторожны с фоном

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

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

16obqjsv5ve4s6f2gt495abcnp.png

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

Используйте для кнопок-призраков текст со смысловой нагрузкой

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

Такой подход хорошо виден на сайте компании Integra: за выделенным текстом на домашней странице сайта идет демонстрация в виде сменяющих друг друга картинок. Внизу размещена кнопка-призрак с надписью ‘Showreel’ (демонстрация). Не возникает никаких вопросов, куда ведет ссылка на данной кнопке.

89a65l40hn17isru251frtdok3.png

Кнопки-призраки и индивидуальность

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

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

bsiemben8okg35ljjmhp1su4f.png

Заключение

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

https://uxplanet.org/ghost-buttons-in-ux-design-4cf3717334f8#.r442ex7j2

+2
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
ubercrm
уберизация и локальные справочники
Саша Noxon
симпатично
Ответить
Пора за дело!
Проект решающий проблемы начинающих бизнесменов
Юра Римский
Главное, чтобы было понятно, что элемент кликабельный. Пользователи не такие уж и дураки, чтобы не понять, где ссылка, а где нет. Нужен внутренний стандарт оформления: если на странице нет некликабельных слов в рамочках, то будет понятно, что это кнопки.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать