Как называются кнопки на сайте

Основные виды кнопок пользовательского интерфейса на сайтах и в приложениях

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

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

Данный пост является переводом этой статьи от Tubik Studio.

Что такое кнопка в интерфейсе?

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

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

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

Далее, рассмотрим типы кнопок, наиболее широко применяемых в мобильных и веб-интерфейсах.

Кнопка призыва к действию CTA (Call-To-Action)

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

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

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

Текстовая кнопка

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

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

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

Этот изящный дизайн разработан для онлайн-магазина модной одежды. Как видите, интерактивная часть интерфейса основана на текстовых ссылках. Здесь лишь один объект с призывом к действию (Shop new arrivals) представлен легко распознаваемой кнопкой, а все остальные в хедере и вкладках — отличаются только текстом о предложениях магазина. Такой подход к оформлению поддерживает легкий и минималистский дизайн веб-страницы.

Кнопка с выпадающим списком

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

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

Кнопка «Гамбургер»

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

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

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

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

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

Кнопка-плюс

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

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

Кнопка с выбором вариантов

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

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

Кнопка «Поделиться»

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

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

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

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

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

Она на первый взгляд выглядит «пустой». В принципе, визуально хорошо узнаваема благодаря своей форме и тонкой обводке. В случае нескольких элементов призыва к действию этот вид кнопок помогает установить визуальную иерархию: основной CTA-объект представлен в виде заполненной кнопки, а вторичный (тоже активный) – в виде прозрачной.

В качестве примера представлена форма логина и регистрации приложения ресторана. Здесь вы видите 3 типа кнопок:

1. основная CTA-кнопка представлена заполненным элементом как наиболее простой способ быстрой регистрации;
2. призрачная — обеспечивает доступ к менее известному варианту;
3. текстовая — в виде ответа на вопрос выделена цветом и интегрирована в строку внизу экрана.

Подобный подход в дизайне помогает реализовать четкую иерархию интерактивных объектов/элементов на экране.

Плавающая кнопка действия (FAB)

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

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

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

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

Факторы, определяющие эффективность дизайна кнопок UI

Размер

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

Лидеры рынка часто в своих руководствах дают рекомендации по размерам, например:

• Apple считают, что размер кнопок CTA в мобильном интерфейсе должен быть не менее 44х44 пикселей;
• Microsoft рекомендует значение = 34х26 пикселей.

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

Цвет

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

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

Форма

Если речь идет о Call To Action элементах, то они обычно имеют форму прямоугольника. Она помогает ясно понять, что кнопка является кликабельной и интерактивной + пользователи привыкли воспринимать объект прямоугольной формы как кнопку.

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

Местоположение

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

Текст

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

Например:

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

Рассмотрим все кнопки, используемые на странице:

• Основная Call To Action кнопка приглашает посетителей присоединиться, она мгновенно привлекает внимание: дизайнер использовал прямоугольную форму с закругленными краями. Яркий цвет кнопки контрастирует с фоном и визуально связывает ее с анимационным hero image изображением – самым заметным визуальным элементом на странице. Поддерживающий CTA-текст набран заглавными буквами и легко читаемым шрифтом.
• В хедере размещены 4 текстовые кнопки, которые помогают пользователям перейти к самым важным разделам контента на веб-сайте.
• В левой части хедера находится хорошо заметная дополнительная CTA-кнопка, которая позволяет уже зарегистрированным юзерам входить в свои учетные записи.
• Кнопки «Поделиться» имеют круглую форму и не слишком резко контрастируют с фоном – их легко увидеть, но при этом они не отвлекают внимание от основных объектов.

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

Кнопка для сайта: виды и способы создания

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

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

Основные типы кнопок для сайта

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

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

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

«Мы обязаны делать клиентов довольными
любыми доступными способами!»

Алексей Молчанов,
основатель международной IT-компании Envybox

Текущая ситуация в стране и мире с каждым днем набирает все больше и больше оборотов.

Сегодня каждый предприниматель задается вопросом: “А что же сейчас будет с моим бизнесом?”

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

Направляйте максимум усилий и внимания на продвижение своей компании и увеличение потока новых клиентов.

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

Ниже вы можете скачать чек-лист из простых и доступных для любой компании инструментов привлечения стабильного потока новых клиентов или возвращения существующих. А также в качестве бонуса получить бесплатное использование наших сервисов для увеличения заявок с сайта в течение 7 дней и 30% скидку на их подключение. Желаем вам удачи, новых клиентов и больших продаж!

СКАЧАТЬ ЧЕК-ЛИСТ
+ БОНУС

• Где используются

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

3D-кнопки визуально поднимаются и меняют цвет при клике. Особенно они заметны на контрасте с плоскими кнопками.

2. Плоские кнопки

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

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

3. Переключатель (слайдер)

Предназначен для переключения между двумя или несколькими состояниями.

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

• группа содержит три или более кнопок;
• на каждой из них присутствует пояснительная иконка или текст (либо то и другое).

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

4. Контурная кнопка

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

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

5. Плавающая кнопка с выпадающим меню

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

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

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

Читайте другие статьи по теме повышение конверсии сайта

Выбор типа кнопки для сайта

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

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

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

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

В своём обычном состоянии кнопка должна быть похожа на кнопку – это основное требование. В противном случае пользователь будет испытывать недоумение по поводу кликабельности объектов (как, например, в меню настроек Windows 8).

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

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

Кнопка либо приобретает соответствующий вид, либо исчезает вовсе.

У скрытия кнопки с сайта есть свои плюсы:

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

Если оставить кнопку на месте и придать ей соответствующий вид, то:

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

Как сделать кнопку для сайта

1. Простая кнопка для сайта

Простейшая кнопка для сайта реализуется HTML-тегами button и input c определённым типом. У этих тегов отсутствует атрибут href, перекидывающий пользователя на указанную страницу. Но можно снабдить их атрибутом onclick – небольшой вставкой javascript’а, в которой прописывается целевая страница:

2. Кнопка с фоновой картинкой

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

Для этого вам потребуется:

• Нарисовать пиктограмму (своими руками или посредством генератора кнопок для сайта).
• Загрузить картинку на сервер (например, с помощью файлового менеджера) и прописать ссылку на неё.
• Указать в CSS-файле все необходимые стили.

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

Пример оформления кнопки на CSS:

В разделе “Панель управления” – “Дизайн” – “Редактор / CSS” напишите код вроде следующего:

.site-button background-color: #488bfa;
border: 2px solid #ffffff;
color: #ffffff;
padding: 12px 26px;
border-radius: 10px;
font-size: 17px;
>

И не забудьте про HTML-код кнопки:

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

3. Кнопка на сторонний сайт

Иногда нужно отдавать свою готовую кнопку на сайты пользователям, чтобы они могли её установить у себя. Предоставляйте им полный HTML-код, чтобы они могли его скопировать и без проблем вставить на свой сайт. Такую заготовку под кнопку лучше оборачивать тегом textarea.

Топ 6 полезных статей для руководителя:

1. Как провести мозговой штурм среди сотрудников
2. Этапы воронки продаж
3. Закон Парето в бизнесе и в жизни
4. Что такое трафик и как его посчитать
5. Конверсия продаж: 19 причин низкой конверсии
6. Обратный звонок на сайте

Особенности распространенных кнопок для сайта

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

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

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

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

Некоторые считают, что формулировка «Добавить в корзину» более конверсионна, чем «Купить»: первая подразумевает процесс выбора товаров, не требующий принимать решение о покупке прямо сейчас. Возможно, в этом есть доля истины. Вопрос в том, какое действие вы считаете конверсионным. Если это добавление продукта в корзину, то именно так и следует называть кнопку (помня о том, что корзины часто бросают, и что отложить товар – ещё не значит купить и оплатить его). Если конверсией считается оформленный и оплаченный заказ, то не стесняйтесь дать кнопке название «Купить».

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

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

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

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

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

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

Теперь выберем цвет кнопки «Купить» на сайте.

С помощью Гугла или Яндекса можно найти статистику по проведённым А/Б тестам, показывающую, что красные кнопки наименее эффективны, зато зелёные работают прекрасно, оранжевые – тоже неплохо. Но есть и противоположная точка зрения. Поэтому не стоит принимать каждое подобное утверждение на веру и срочно переделывать сайт.

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

Это не меньший бред, чем тестировать цвет кнопок на сайте.

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

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

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

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

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

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

При этом монохромные серые кнопки (второстепенные – «Быстрый заказ», «Сравнить», «Добавить в избранное») есть во многих магазинах, это довольно популярная ошибка. Вроде бы дизайнеры стремятся всё сделать правильно и обеспечить достаточный контраст между главной целевой кнопкой и вспомогательными элементами, но забывают о пользовательских привычках, сложившихся за много лет работы с операционными системами: всё, что окрашено серым, будь то чекбокс или ссылка, неактивно и некликабельно.

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

При этом цвет кнопки «Купить» (при условии, что она достаточно крупная, отделена отступами от окружающих объектов и контрастна) не столь важен. Аргументы и контраргументы против различных цветов приводились выше.

Поэтому А/Б тестирования интернет-магазинов показывают противоречивые результаты: где-то повышает конверсию красная кнопка, где-то – зелёная. Зачастую секрет заключается не в самой кнопке, не в товаре и даже не в целевой аудитории, а в дизайне всего интерфейса и том контексте, который окружает кнопку на сайте.

2. «Заказ» или «Быстрый заказ»

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

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

Для магазинов, где клиенты обычно берут более одной товарной позиции, в этой кнопке нет смысла: если сделать её слишком заметной и она перебьёт главную кнопку «Купить», может уменьшиться сумма среднего чека (потому что клиенты пойдут сразу оформлять заказ и не продолжат класть товары в корзину), а менеджерам придётся тратить больше времени на консультирование покупателей по телефону.

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

Ещё одна нередкая проблема кнопок моментального заказа – это то, что данные по таким заказам попадают в отдельный список (а не в общий, как при обычной покупке товаров через корзину) либо вообще приходят только в почту менеджерам. Это, по сути, функционал кнопки «Заказать звонок» для сайта и для шоппинга не подходит.

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

Ещё одна распространённая проблема – необходимость каждый раз вбивать своё ФИО и номер телефона при быстром заказе. Данные авторизованных пользователей должны подтягиваться в форму автоматически, чтобы человеку оставалось только подтвердить оформление заказа. Тогда покупка действительно будет быстрой.

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

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

Например, очень странное впечатление будет производить кнопка «Отправить в корзину» в онлайн-магазине одежды: товар кладётся в корзину, но без возможности выбрать для себя нужный размер и расцветку. А если такая опция есть, то без сравнительной таблицы российских и зарубежных размеров и инструкции сложно определить свой размер. Это затрудняет выбор.

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

4. Оформление заказа

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

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

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

Это соответствует общему принципу: не называть одинаково элементы с разным функционалом и назначением.

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

Шаг в корзине

Название кнопки

ФИО, электронная почта, телефон

Укажите адрес доставки

Выберите способы доставки и оплаты

Способы оплаты, доставки

Отправить / Завершить заказ

Оплата / Перейти к оплате

Страница оплаты (Робокасса и т. п.)

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

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

Что касается подписей на кнопках, принцип здесь тот же: какое действие кнопка инициирует, так и называется. Для более абстрактных формулировок вроде «Далее» рядом даются пояснения, куда конкретно попадёт пользователь, кликнув по кнопке.

В одношаговых корзинах целевые кнопки могут быть двух типов: либо «Перейти к оплате», либо, при наличии отдельной промежуточной «Thank you page», «Отправить заказ».

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

1. Соответствие фирменному стилюКнопки должны быть органичной частью интерфейса, что означает их соответствие контексту, цветовой гамме и графической стилистике бренда. Оцените свой логотип: возможно, его форма может быть использована и для кнопок. У вас преобладают плоские цвета на веб-сайте или в приложении? Тогда откажитесь от стеклянных кнопок в стиле Apple. Очертания, оттенки и декоративные приёмы должны соответствовать логотипу и фирменному стилю.
2. Соответствие контексту Следует учитывать не только дизайн логотипа, но и особенности самого интерфейса. Например, в некоторых случаях кнопки, присутствующие в мобильной версии или в корпоративном приложении, целесообразно заменить какими-либо другими элементами, иначе обыграть в десктопной версии сайта.
3. Достаточная контрастность Стиль Apple вдохновил тысячи дизайнеров по всему миру и породил собственную стилистику, элегантную и минималистичную. Один из её недостатков – малая контрастность кнопок на сайте по отношению к другим элементам UI: кнопки просто теряются и плохо выполняют свои функции. Ищите свежие решения: пробуйте различные цветовые схемы, шрифтовые гарнитуры, отступы, размеры, чтобы выделить кнопку на странице.
4. Закруглять уголки или нет? Если в приложении или на сайте все кнопки имеют закруглённые уголки, можно пойти дальше и самую важную из них сделать, например, круглой, чтобы она привлекала внимание пользователей и призывала нажать на неё.
5. Маскируем остальные элементы Второстепенные кнопки, ссылки, текстовый контент и т. п. не должны быть заметнее конверсионной кнопки. Их оформляют в едином стиле и делают менее контрастными. Даже если у контроллеров, бегунков и т. п. одинаковый угол закругления, можно окрасить их в разные цвета (включая фоновый), уменьшить в размере, залить градиентом, придать им цветные обводки, тени или 3D-эффекты.
6. Контуры и обводки Многие кнопки на сайтах имеют некое подобие границ или обводки, более или менее заметных. Здесь существует одна простая закономерность: для темных кнопок на светлом фоне делают ещё более тёмную обводку, а для светлых кнопок на тёмном фоне – обводку чуть темнее фонового цвета.
7. Аккуратнее с размытой теньюОпытным дизайнерам известен принцип, который можно назвать «Законом Теней»: любая тень эффектнее смотрится, если светлый элемент находится на более тёмном фоне. В противном случае потребуется особая аккуратность при работе с тенями, чтобы они не превратили кнопку на сайте в грязное пятно.
8. Использование графических символов Мелкие символические иконки (такие как, например, стрелки) придают кнопкам на сайте («Подробнее», «Далее», «Назад») ещё большую наглядность и показывают, что случится при клике на них. Используйте их там, где это разумно: стрелку вправо – для перехода на следующую страницу (или ухода с текущей), стрелку вверх – для кнопки «Вверх» на сайте, стрелку вниз – для раскрытия выпадающего меню.
9. Иерархия элементов Разрабатывая интерфейс с большим набором опций, всегда следуйте иерархии элементов и определяйте для каждого её уровня собственный визуальный язык. Так, первичные кнопки (обычно это кнопки целевого действия) окрашивают в более сильные и яркие оттенки, а менее значимые вторичные и третичные – в менее насыщенные и контрастные. Второстепенные кнопки, бегунки и т. п. уменьшают. Снизить их визуальный вес также можно посредством правильного подбора гарнитуры и размера шрифта, уровня тиснения, отступов и толщины границ.
10. Различные состояния кнопки В зависимости от того, в каком состоянии находится кнопка на сайте, она должна менять свой внешний вид. Пользователю важно понимать, что в данный момент происходит с кнопкой и страницей в целом: нажалась ли она, активна ли и т. п. Вам в помощь такие CSS-свойства, как обводки, градиентная заливка, тени и т. д.

Часто задаваемые вопросы про кнопки для сайта

Почему кнопка «OK» – совсем не ОК для сайта?

Во многих интерфейсах, особенно в операционных системах компьютеров, присутствуют стандартные кнопки: «Да», «Нет», «Cancel», «ОК» и т. п.

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

Зачем располагать конверсионные кнопки в нижнем правом углу?

На этот вопрос можно ответить, лишь изучив диаграмму Гутенберга.

Страница состоит из четырёх сегментов, по которым движется взгляд читателя. Максимальное внимание пользователь уделяет первому квадрату (верхнему левому), с которого начинает читать страницу, и последнему (нижнему правому). А вот левый нижний квадрат пользователь проскакивает почти не глядя. Очевидно, что для целевой кнопки на сайте лучше всего подходит правый нижний угол.

Надо ли располагать конверсионную кнопку справа в диалоговом окне?

В модальных окнах, содержащих более одной кнопки действия, целевую кнопку («Заказать», «Подтвердить», «ОК», «Купить» и т. д.) действительно лучше помещать в правой части.

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

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

Как сделать целевую кнопку на сайте более заметной?

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

Вот несколько проверенных дизайнерских приёмов визуального выделения элемента интерфейса:

• Высокая насыщенность цвета для целевой кнопки и меньшая – для альтернативной.
• Фоновый цвет для второй, менее важной, кнопки – она сливается с контейнером, в котором находится. Например, так сделана кнопка «Выйти» в Skype.
• Альтернативное действие обозначать не кнопкой, а текстовой ссылкой.
• Альтернативная кнопка прозрачна (и кажется неактивной).

Почему у пиктограмм должен быть прозрачный фон?

Использование иконок – отличный способ сделать интерфейс более удобным и эффективным. Люди воспринимают визуальный паттерн быстрее, чем читают текст, в десятки тысяч раз. Чтобы сделать иконку максимально понятной, помещайте её на прозрачный фон.

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

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

8 типичных ошибок в создании кнопок для сайта

1. Специальная кнопка для сброса В ней нет смысла: допустив ошибку, пользователь её исправит, а сбрасывать все введённые данные и перезагружать страницу для этого незачем. Как назло, на сайте такие кнопки обычно располагают слева, где их легко случайно задеть. Многие посетители разочарованно покидают ресурс, обнаружив, что все поля формы, столь старательно заполняемые ими, обнулились.
2. Крохотные кнопочки Не скупитесь и сделайте управляющие элементы нормального размера, чтобы их было видно и чтобы на них чаще нажимали! Особенно это касается кнопок «Заказать» на сайте и «Подписаться на рассылку»
3. Кнопки, сливающиеся с фоном Делайте кнопки не только яркими, но и контрастными фону. Это поможет пользователям быстро их обнаружить.
4. Непривычный вид кнопок Дизайнеры в погоне за оригинальностью порой создают такие элементы интерфейса, по которым трудно считать их функции и назначение. Кнопки, не похожие на кнопки. Лучше простой и понятный дизайн, чем избыточный креатив. Даже простая кнопка серого цвета с текстом будет работать эффективнее, чем изыски, отличающиеся от привычных элементов управления. Помните, что за много лет пользования интернетом люди уже привыкли к тому, как должна выглядеть кнопка на сайте, и ищут именно такие объекты.
5. Слишком абстрактные или вводящие в заблуждение ярлыки «Далее» и «Отправить» – это ещё не все возможные кнопки для сайта. Не каждый ярлык носит название следующего действия, но все они должны чётко описывать, что произойдёт при нажатии: «Подтвердить заказ», «Сохранить изменения в профиле», «Следующий шаг» и т. п. Хорошо добавлять к текстовому названию символы >> и
6. Избыток кнопок Увидев на сайте скопление кнопок, напоминающее пульт управления космическим кораблём, посетитель запросто может растеряться и покинуть ресурс. Делайте на сайте кнопки только для самых значимых действий, к которым хотите склонить пользователя: одну крупную кнопку для самого важного и, при необходимости, несколько мелких.
7. Нет подписей Далеко не всем дизайнерам и создателям сайтов очевидно, что кнопки должны быть подписаны тем действием, которое они инициируют.
8. Анимированные кнопки на сайте Анимация – не всегда хорошая идея. Мигающие, движущиеся или каким-то ещё образом раздражающие глаз кнопки будут только оттягивать внимание и вызывать ассоциации с первыми сайтами конца 90-х. Анимированная кнопка легко превратит ваш сайт в дилетантскую поделку и образец дурного вкуса.

Кнопка является важнейшим элементом в веб-интерфейсе, поскольку именно с помощью неё клиенты перемещаются по разделам сайта, отправляют данные, делают заказы и т. п. Поэтому конверсионная кнопка на сайте должна быть:

• заметной и яркой;
• понятной;
• правильного размера.

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

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

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

UX-дизайн кнопки: советы по созданию, типы и состояния

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

Советы по созданию кнопок

Кнопки должны выглядеть как кнопки

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

Очень тщательно продумайте размер зоны прикосновения и внутреннего поля. Размер кнопок также помогает пользователю понять, что это за элемент. Каждая платформа дает свои рекомендации в отношении минимального размера зоны прикосновения. Результаты исследования, проведенного MIT Touch Lab, показали, что средний размер для прикосновения подушечками пальцев составляет 10-14 мм, а для кончиков пальцев — от 8 до 10 мм, при этом наиболее оптимальный минимальный размер зоны прикосновения будет 10Х10 мм.

Расположение и порядок

Разместите кнопки там, где пользователи без труда их найдут или там, где они ожидают их увидеть. Посмотрите, как в руководстве по разработке iOS советуют размещать кнопки.

Не забывайте о порядке размещения и положении кнопок. Порядок, в котором идут кнопки, особенно если есть парные кнопки (например, «предыдущий» и «следующий»), очень важен. Убедитесь, что основной акцент в дизайне сделан на основном или самом важном действии пользователя.

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

Надписи

Надписи на кнопках должны означать действие, которое выполняет кнопка. Четко опишите, что произойдет при ее нажатии.

Точно такие же кнопки, как и вверху, но без соответствующей надписи. Чувствуете разницу?

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

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

Форма кнопки

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

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

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

Типы кнопок и поведение

1. Объемная кнопка

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

Применение

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

Поведение

Объемные кнопки приподнимаются и заполняются цветом при нажатии.

Пример

Объемные кнопки выделяются на фоне плоских. Пример приведен для приложения Android.

2. Плоские кнопки

Плоские кнопки не приподнимаются, но также заполняются цветом. Основное преимущество плоских кнопок в том, что они не отвлекают внимание от контента.

Применение

В диалоговых окнах (чтобы соблюсти единство действия кнопки и контента)

На панели инструментов

Расположение снизу, чтобы пользователь быстрее их нашел

Пример

Плоская кнопка в диалоговом окне приложения на Android.

3. Переключатель

Кнопка-переключатель позволяет пользователю переключаться между двумя или (более) состояниями.

Почти все переключатели применяются в качестве кнопок Вкл\Выкл.

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

· В группе должно быть не менее трех кнопок

· На кнопках должен быть текст, иконка или и то, и другое.

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

Очень важно выбрать правильную иконку для кнопки. Я рассказывал об этом в статье «Иконки как фактор удачного пользовательского опыта».

В Apple iOS переключатели использованы в разделе «Настройки».

4. Контурные кнопки

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

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

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

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

На сайте AirBnB есть контурные кнопки для действия «Стать хозяином».

5. Плавающая кнопка с выпадающим меню

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

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

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

Выбор типа кнопки.

Выбор стиля кнопки зависит от ее важности, количества контейнеров на экране, и от разметки экрана.

Функция: Достаточно ли важна и уникальна кнопка, чтобы сделать ее плавающей?

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

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

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

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

Главное правило этого состояния – кнопка должна выглядеть как кнопка в нормальном состоянии. Windows 8 это показательный пример неудачного дизайна кнопки. Пользователю сложно понять кликабельны или нет объекты в меню настроек.

Состояние в фокусе

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

Нажатое состояние

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

Неактивное состояние

Есть два варианта – спрятать кнопку, либо отобразить ее в неактивном состоянии.

Преимущества скрытой кнопки:

• · Ясность. Отображается только то, что необходимо для текущей задачи.
• · Сохранение пространства. Это позволит вам менять управление, используя одно пространство для разных целей. Что очень удобно, если присутствует очень много элементов управления. Gmail применяет этот способ.

Преимущества использования неактивного состояния:

• Показать возможность действия. Даже если кнопка не используется, пользователь знает, что действие возможно. Можно даже сделать подсказку и объяснить критерии использования.

Заключение

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

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

• Веб-дизайн
• Интерфейсы
• Usability
• Дизайн мобильных приложений
• Графический дизайн

Кнопки для сайта

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

Сначала покажу самые простые способы, как сделать кнопку для сайта. Дальше будет чуть посложнее, но интереснее.

Любой рисунок можно легко сделать кнопкой, если поместить его в «якорь» ссылки. Для этого необходимы лишь знания HTML.

**К примеру, рисунок слева — кнопка. (Кликнув по ней, попадёте на страницу, посвящённую технике создания простых кнопок для сайта. Откроется в новом окне.)

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

Нажмите на нижнюю кнопку. Узнаете, как подключать видео и аудио к страницам сайта.

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

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

Одна кнопочка: подключил для показа красивого рисунка.

И ещё 3 кнопочки: подключены к одной картинке, т.к. все три находятся в одной форме (а у неё один атрибут «action»). Вроде, — бесполезное дело?

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

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

Динамические кнопки

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

Подробнее познакомиться с технологиями, применёнными для их создания, сможете на странице «Псевдоселекторы» (откроется в новом окне) .

Вот первая кнопка. Подключена к БОЛЬШОМУ разделу «Фотошоп» .

Ещё одна кнопка, с загрузчиком(!). То есть, пока будет загружаться красивая картинка, на ней отображаются стрелки — символ загрузки.

И ещё динамическая кнопка. Правда, уже «хитрая».
Дело в том, что для её создания применил элементы JavaScript. НО! Совсем чуть-чуть, и прописал их, как атрибуты тэга напрямую в коде HTML (даже без файла CSS!).

Наведите курсор мыши на кнопку — она изменится. Кликните — откроется рисунок. Снова наведёте — появится надпись. Снова кликните — исчезнет. Короче, пробуйте!

Для возвращения кнопки в исходное состояние, страницу нужно перезагрузить.

У последнего показанного метода есть хорошее преимущество: изменения происходят мгновенно! Браузеру не нужно открывать новую страницу.

Заключение

Показал здесь, как легко создаются кнопки для сайта. Просто. Без использования каких-либо сложных скриптов.
Разумеется, этим не исчерпываются возможности HTML+CSS.

На странице «Галерея» посмотрите практическое применение этих базовых технологий интернета: галереи рисунков, фотогалереи (откроется в новом окне) .

Желающие узнать, как ещё можно сделать кнопку на сайт, посетите страницу о создании шапок в программе «Фотошоп»: «Шапка для сайта» (откроется в новом окне) .

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

Ну, и напоследок.

Хоть этот подраздел я посвятил теме создания простых кнопок для сайта, всё же нужно показать и другие, пусть не самые простые, зато чрезвычайно(!) функциональные .

Это кнопки, с помощью которых создаются навигаторы, называемые МЕГА-меню. Кода и скрипта в них всякого «выше крыши», но . . . .
Короче, смотрите сами: «jQuery МЕГА-меню» (откроется в новом окне) .

Все права защищены. Copyright © 2009 — Коротеев Владимир.