Для чего нужны эти кнопки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кнопка-плюс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Размер

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

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

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

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

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

Форма

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

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

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

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

Текст

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

Например:

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

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

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

Источник

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

Ник Бабич разработчик, UX/UI специалист написал заметку в блоге UX Planet про UX-дизайн кнопки: советы по созданию, типы и состояния. Наша команда выполнила перевод данной статьи

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

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

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

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

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

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

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

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

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

Надписи

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

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

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

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

Форма кнопки

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

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

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

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

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

Применение

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

Поведение

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

Пример

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

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

Применение

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

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

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

Пример

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Источник