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

32 User interface элементов для UI дизайнеров

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

UI элементы:

1. Input Controls
2. Navigation Components
3. Informational Components
4. Containers

Input Controls

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

Navigation Components

Navigation Components помогают пользователям перемещаться по продукту или веб-сайту. Общие навигационные компоненты включают панели вкладок на устройстве iOS и меню гамбургеров на Android.

Informational Components

Informational Components делятся информацией с пользователями.

Containers

Containers содержат связанный контент вместе.

Словарь UI элементов:

Аккордеоны (Accordion)

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

Bento Menu, Döner Menu, Hamburger Menu, Kebab Menu, Alt-burger, meatball

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

Хлебные крошки (Breadcrumb)

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

Кнопка (Button)

Кнопки позволяют пользователю взаимодействовать с формами на сайте.

Карточка (Card)

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

Карусель (Carousel)

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

Checkbox

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

Комментарий (Comment)

Dropdown

Лента (Feed)

Сложно представить соц сети такие как Facebook, twitter и т.п без ленты. Содержание ленты варьируется от простого текста до изображений и видео.

Форма (Form)

Иконки (Icon)

Поле ввода (Input Field)

Loader

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

Модальное окно (popup)

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

Уведомления

Нотификации дают юзеру понять, что есть что-то новое, например, сообщение или какое-то системное уведомление.

Пагинация (Pagination)

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

Picker

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

Progress Bar

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

Radio Buttons

Radio Buttons похожи на чекбоксы, но отличаются тем, что можно 1 из нескольких вариантов.

Поле поиска (Search Field)

Боковая панель (Sidebar)

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

Ползунок (Slider Controls)

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

Stepper

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

Тэг (Tag)

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

Tab Bar

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

Tooltip

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

Toggle

Toggle это флаг который позволяет выбрать между Да или Нет.

Барабан

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

Элементы интерфейса сайта

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

Кнопка — элемент, при нажатии на который происходит какое-то действие на сайте.

Radiobutton — позволяет пользователю выбрать одну опцию.

Checkbox — позволяет выбрать несколько опций.

Select — позволяет пользователю выбрать одну опцию из выпадающего списка.

Accordeon — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента.

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

Контент — текст, изображения, видео, то есть наполнение сайта.

Popup — небольшое всплывающее окно в углу экрана.

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

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

Раздел — страница сайта. Тут все просто.

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

Подвал (футер / footer) — самая нижняя часть сайта. Чаще всего в ней расположена карта сайта, контактные данные, быстрые ссылки на популярные разделы, копирайт, политика конфиденциальности и ссылка на разработчика сайта.

Галерея — набор из нескольких изображений.

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

Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками).

Тултип (tooltip) — подсказка, всплывающая при наведении на элемент.

Курсор Поинтер (Pointer) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку.

Курсор Текст (Text) — тип курсора, стандартный для редактирования текста.

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

П агинация — нумерация страниц, обычно отображенная как навигация в конце страницы.

Списки — в веб интерфейсах присутствуют нумерованные списки (цифрами), маркированные списки (точки, квадратики, кружки, черточки) и списки определений.

Стрелочки — вид навигации.

Поисковая строка — строка для ввода поискового запроса.

Плеер — элемент воспроизводящий аудио и видеофайлы.

Ползунок — предназначен для ввода чисел в указанном диапазоне.

Текстовое поле — поле для ввода текстовых значений.

Поле пароля — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки.

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

Ссылка — элемент интерфейса перенаправляющий вас по адресу, указанному в нем.

Состояние ссылок и кнопок: Hover (Ховер) — состояние выбранного элемента при наведении на него курсора мыши (важно знать — в мобильных устройствах нет этого состояния)

Состояние ссылок и кнопок: Focus (Фокус) — состояние выбранного элемента при переключении между элементами клавишей tab (чаще всего это синяя обводка вокруг элемента)

Состояние ссылок и кнопок: Active (Эктив) — состояние выбранного элемента в момент нажатия на него.

Якорь — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем.

Вкладки (табы) — элемент интерфейса, так же как и аккордеон, состоит из заголовка и скрытого контента, на который можно попасть при обращении к заголовку.

Строка загрузки — элемент, показывающий степень загрузки контента или исполняемой функции.

Переключател ь (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл.

Алерт окно — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером.

П релоадер (Preloader) — анимированный элемент, воспроизводящийся в процессе загрузки сайта, видео, изображений и другого контента.

Рейтинг (Rating bar) — элемент интерфейса показывающий среднюю оценку.

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

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

Элементы интерфейса сайта

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

Общий макет

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

Хедер

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

Хедер Альфа Банка

Футер

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

Футер Альфа Банка

Сетка

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

Типографика

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

Цветовая схема

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

Навигация

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

Меню

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

Меню в виде выпадающего списка на Кинопоиске

Меню в формате аккордеона в интернет-магазине Золотое Яблоко

Карта сайта

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

Хлебные крошки

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

Пагинация

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

Пагинация Coursera

Навигационные кнопки

Еще один элемент, который стоит внедрить для повышения удобства пользовательского опыта — навигационные кнопки:

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

Поиск

Функции поиска полезны в объемных веб-проектах. Особенно важно проработать разные опции поиска для интернет-магазинов, маркетплейсов, агрегаторов:

• Строка поиска, куда можно ввести название товара или его характеристики;
• Фильтрация: по брендам, регионам доставки, цветам или другим критериям;
• Сортировка: по новизне, популярности, ценам и т.д.

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

Поисковая строка Ozon

Формы

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

Поля

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

Вход в личный кабинет Альфа Банка

Чек-боксы, радиокнопки

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

Чек-боксы в фильтрах на Ozon

Радиокнопки в фильтрах на Ozon

CTA-кнопки

Кнопки призыва к действию (CTA) направляют пользователей к целевым действиям, например, «Подписаться», «Купить», «Отправить заявку». Они должны:

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

Кнопки в карточке товара на Ozon

Визуальные компоненты

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

Изображения

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

Иконки

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

Слайдер

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

Слайдер с офферами на главной странице интернет-магазина Золотое Яблоко

Контентные блоки

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

Текстовые блоки

Юзабилити текстов — отдельная тема, в которой много тонкостей. Однако есть общие рекомендации, которые вы можете внедрить моментально:

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

Контентный блок на странице издательства МИФ

FAQ

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

FAQ на Reg.ru

Заключение

Мы рассказали о главных элементах сайта, из которых состоит их UI. Для экспресс-проверки вы можете использовать этот короткий чек-лист с вопросами:

• Видимость: могут ли пользователи легко найти элемент? Достаточно ли он выделяется?
• Согласованность: cоответствует ли дизайн компонента общему оформлению сайта?
• Отзывчивость: насколько хорошо элемент работает на разных экранах? Удобен ли он для мобильных пользователей?
• Интуитивность: сразу ли понятно, для чего нужен компонент и как его использовать?
• Эффективность: помогает ли он быстро и легко достичь цели? Нет ли ненужных шагов или сложностей?
• Обратная связь: есть ли реакция на действия пользователя, например, эффекты наведения курсора на блоки, по которым можно щелкнуть мышью, или сообщения о проверке вводимой формы?

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

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
• Дизайн мобильных приложений
• Графический дизайн