Как называются кнопки на сайте
Перейти к содержимому

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

  • автор:

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

image

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

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

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

image

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

image

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

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

image

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

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

image

Надписи

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

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

image

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

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

image

Форма кнопки

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

image

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

image

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

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

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

image

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

Применение

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

Поведение

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

image

Пример

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

image

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

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

image

Применение

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

image

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

image

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

image

image

Пример

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

image

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

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

image

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

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

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

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

image

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

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

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

image

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

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

image

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

image

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

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

image

image

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

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

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

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

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

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

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

image

image

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

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

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

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

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

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

image

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

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

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

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

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

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

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

image

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

image

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

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

image

Заключение

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

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

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

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

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

Общий макет

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

Хедер

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

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

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

Футер

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

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

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

Сетка

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

Типографика

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

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

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

Навигация

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

Меню

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

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

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

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

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

Карта сайта

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

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

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

Пагинация

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

Пагинация Coursera.png

Пагинация Coursera

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

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

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

Поиск

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

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

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

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

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

Формы

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

Поля

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

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

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

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

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

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

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

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

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

CTA-кнопки

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

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

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

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

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

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

Изображения

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

Иконки

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

Слайдер

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

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

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

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

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

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

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

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

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

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

FAQ

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

FAQ на Reg.ru.png

FAQ на Reg.ru

Заключение

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

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

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

Юзабилити для чайников: какими должны быть кнопки на сайте

Юзабилити для чайников: какими должны быть кнопки на сайте

Дмитрий Дементий Редакция «Текстерры»

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

Кнопки нужны, чтобы на них нажимали

Когда использовать кнопки вместо ссылок

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

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

Кнопки vs. ссылки

Как отличить важное действие от менее важного? Задайте себе вопрос: «Влияет ли предполагаемое действие на мой бизнес или мой сайт?»

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

Как правильно использовать градиенты

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

Создавая кнопки, помните:

  • Человек воспринимает кнопку, освещенную в верхней части и затемненную в нижней, как выпуклую.
  • Человек воспринимает кнопку, освещенную в нижней части и затемненную в верхней, как вогнутую или нажатую.

Выпуклая (слева) и вогнутая кнопки

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

Как сделать кнопку убеждающей

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

  • Используйте градиенты, тени и закругленные углы, чтобы сделать кнопку реалистичной

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

Градиенты, тени и закругленные углы создают эффект трехмерности

  • Используйте контрастные цвета

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

Контрастный цвет

  • Сделайте кнопку достаточно большой, но не неестественно огромной

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

Большая хорошая кнопка всегда побеждает маленькую хорошую кнопку

  • Используйте слова, создающие эффект срочности

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

Создавайте эффект срочности

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

Мягкий CTA

  • Правильно используйте заглавные и строчные буквы

Если ваш CTA состоит из двух слов, пишите оба с заглавной буквы. Заглавные буквы делают текст побуждающим. Если ваш CTA состоит из трех слов и более, пишите с заглавной буквы первое слово, а остальные пишите со строчных. В этом случае текст воспринимается в качестве диалога. Формулы выглядят так: жесткий CTA = одно или два слова + каждое слово с заглавной; мягкий CTA = три слова и более + с заглавной только первое.

Строчные буквы смягчают CTA

  • Иллюстрируйте призывы к действию

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

Иллюстрируйте призывы к действию

  • Используйте эффекты при наведении

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

Верной дорогой: указательный жест убеждает действовать

Почему кнопки OK больше не о’кей

Разработчики интерфейсов часто используют кнопки типа «OK», «Cancel», «Да», «Нет» и т.п. Если вы пользуетесь ПК, то видите такие кнопки каждый день.

Кнопки «Да» и «Нет» не связаны с действием

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

Кнопки «Выйти» и «Отменить» связаны с действием

Почему конверсионные кнопки лучше располагать в правой нижней части страницы

Ответить на этот вопрос можно после изучения диаграммы Гутенберга.

Диаграмма Гутенберга

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

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

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

Кнопка желаемого действия слева

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

Когда кнопка желаемого действия находится справа, путь к конверсии сокращается на один шаг:

Кнопка желаемого действия справа

Когда кнопка желаемого действия находится справа, внимание пользователя сначала останавливается на второстепенной опции, а затем переходит к желаемой опции.

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

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

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

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

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

    Использование насыщенного цвета для кнопки желаемого действия и ненасыщенного для кнопки альтернативного действия.

Благодаря насыщенному цвету конверсионные кнопки выделяются

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

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

Прозрачный фон облегчает визуальное восприятие

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

Непрозрачный фон делает все иконки одинаковыми

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

Как использовать стрелки и многоточия

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

Стрелка на кнопке указывает на завершение действия

Стрелки в меню указывают на доступность дополнительных опций.

Доступны дополнительные опции меню

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

Многоточия указывают на доступность нескольких опций

Стрелки и многоточия делают кнопки и меню интуитивно понятными.

Кнопки должны быть заметными и убедительными

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

Адаптация материалов с сайта UX Movement.

  • Как улучшить сайт с помощью SEO и юзабилити: 4 мини-кейса
  • Как повысить коэффициент конверсии: пошаговый план
  • 10 интересных решений для увеличения конверсии на коммерческих сайтах

Шпаргалки UI дизайнера: создание кнопок

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

Итак, в этой статье мы рассмотрим:

  1. Кнопки действия
  2. Общие стили кнопок
  3. Выбор цвета и стиля кнопки
  4. Состояния кнопок и обратная связь
  5. Надпись кнопки
  6. Сенсорные цели
  7. Размещение кнопок
  8. Кнопка доски почета
  9. Заключительные мысли

1. Кнопки действия

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

1. Кнопки призыва к действию (CTA/C2A)

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

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

2. Первичное действие

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

Для кнопок этого типа я использую простые прямоугольные кнопки с округлыми краями.

3. Вторичное действие

Вторичные кнопки – это кнопка «Назад» возле первичной кнопки «Далее». Или кнопка «Отмена» возле кнопки «Подтвердить». Вторичные кнопки – это альтернатива первичного действия, которое мы предоставляем пользователям.

Для данных кнопок рекомендуется использовать контурные кнопки или текстовые ссылки.

4. Третичное действие

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

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

2. Общие стили кнопок

В этом разделе мы рассмотрим общие стили кнопок. Стиль – это просто эстетика кнопки, а не то как ее следует использовать.

Сплошные кнопки

Все просто, сплошные кнопки – это кнопки со сплошной заливкой.

Контурные и призрачные кнопки

Контурные кнопки – это кнопки без заливки. Несмотря на то, что они часто используются взаимозаменяемо, контурные кнопки обычно светлого цвета (с темным контуром и текстом), а кнопки-призраки – темного цвета (со светлым контуром и текстом).

Закругленные кнопки

Закругленные кнопки – это кнопки, у которых радиус углов максимально скруглен.

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

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

Плавающие кнопки действий – это продуманное дизайнерское решение, популярное в Google Material Design. Хотя они могут выглядеть как кнопка со значком, фактически они используются для первичного действия на экране.

Текстовая ссылка

Текстовые ссылки – это очень простой тип кнопок. Есть несколько способов показать, что надпись является ссылкой. Это может быть цвет, подчеркивание, положение ссылки, или просто сам текст (например, «Читать дальше»).

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

Кнопка “значок с надписью”

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

Самое сложное в работе с такими кнопками – найти правильное соотношение иконки и шрифта.

  • Вариант 1: размер иконки соответствует высоте заглавных букв.
  • Вариант 2: размер иконки намного больше высоты строки.

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

Кнопка-значок

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

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

Иконка рядом с текстовой ссылкой

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

3. Выбор цвета и стиля кнопки

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

1. Цвет

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

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

Например, зеленая кнопка «Удалить» собьет с толку любого пользователя, как и красная «Сохранить».

2. Закругление углов

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

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

Читайте также: Как структурируются команды UX разработчиков в «Shopify»

3. Тень

Тень на кнопке создает ощущение, будто кнопка находится за пределами страницы, и это действительно привлекает внимание. Тени также могут быть использованы для обозначения различных состояний. Material Design использует тень очень органично, делая кнопку «ближе» при наведении курсора.

4. Стиль надписи

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

Вот несколько простых способов сделать шрифт читабельным:

  1. Лучше использовать заглавные буквы в начале каждого предложения или капитализировать начальные буквы всех слов в предложении, чем делать все буквы заглавными. (Хотя Material Design использует кнопки со всеми заглавными буквами).
  2. Убедитесь, что цвет надписи выделяется на фоне кнопки. В этом поможет этот инструмент.
  3. Выбирая шрифт убедитесь, что он разборчивый и достаточно большой. Также шрифт должен быть средней плотности.

5. Вертикальный отступ

Размер кнопки играет большую роль в доступности интерфейса. Большинство неопытных дизайнеров скажут что-то вроде «Кнопки должны иметь высоту 36 пикселей». Это не лучшее решение, особенно для веб-дизайна. Всегда нужно учитывать высоту строки используемого вами шрифта и добавлять к нему единицу измерения. Например: «Надпись моей кнопки имеет высоту строки 20 пикселей, а отступ по вертикали 8 пикселей».

Спросите зачем? Существует две причины:

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

6. Горизонтальный отступ

Первый вариант:

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

Второй вариант:

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

Читайте также: 10 лучших подкастов для UX-дизайнеров

4. Состояния кнопок и обратная связь

Состояния кнопок позволяют пользователю узнать, может ли он кликнуть или уже это успешно сделал. Также следует помнить, что кнопка может иметь несколько состояний. Например, она может быть «активной» и «зависать» одновременно.

1. Активное и неактивное состояние

Активное состояние – это когда кнопка «кликабельна». Хотя это покажется очевидным, важно отметить, что кнопка может быть неактивна, если пользователь не выполнил необходимые шаги. Например, если не введено имя и адрес электронной почты, пользователь не сможет нажать кнопку «Подтвердить».

2. Hover & hover off (навести курсор/убрать курсор)

На десктопных устройствах кнопка должна иметь разные состояния, чтобы пользователь знал, что на нее можно нажать. Также анимация может побудить пользователя к нажатию. Обычно состояние «hover off» противоположно состоянию «hover on», но это не обязательно.

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

Читайте также: UX-дизайн и креатив: как найти баланс между разработкой и творчеством

3. Фокус внимания

Состояние фокуса довольно сложно для понимания. Так что самый простой способ объяснить – показать его в действии.

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

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

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

4. Нажатие кнопки

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

5. Нажатая кнопка

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

5. Надпись кнопки

1. Использование глаголов

Большинство кнопок содержат глаголы для указания того, что кнопка будет делать, например, «Сохранить», «Опубликовать», «Редактировать». Хотя «Назад» и «Далее» не являются глаголами, в контексте интерфейса они работают одинаково. Мне нравится использовать структуру “глагол” + “существительное”. Так действие звучит более инструктивно, например, «Сохранить сообщение», «Следующий шаг» и так далее.

Читайте также: Тренды UI и UX дизайна 2019

2. Шрифт

Вы также должны решить, какой вариант шрифта использовать. Вот некоторые общие рекомендации:

  1. Все буквы заглавные, например, «СЛЕДУЮЩИЙ РАЗДЕЛ». Я использую их для более профессиональных платформ.
  2. Капитализация начальных букв всех слов в предложении, например, «Следующий Раздел». Я стараюсь ее не использовать, так как текст становится трудночитаемым. Что касается тона, это нечто среднее между профессиональным и разговорным тоном.
  3. Капитализация начальной буквы только первого слова в предложении, например, «Следующий раздел». Я использую ее для более дружественных или разговорных платформ.
  4. Все буквы строчные, например, «следующий раздел». Я очень редко использую надписи со строчными буквами. Наверное, это самый неофициальный выбор из существующих.

3. Последовательность

При выборе надписей для кнопок убедитесь, что вы сохраняете последовательность. Вот несколько вещей, которые следует сделать в начале проекта:

  1. Выберите количество слов: Одно, два или более слов на кнопку;
  2. Выберите регистр: Капитализация начальной буквы только первого слова в предложении, капитализация начальных букв всех слов в предложении, все буквы заглавные, или все буквы строчные;
  3. Структура надписи: Например, «глагол» + «существительное» или просто «глагол» и так далее.

6. Сенсорные цели

Размер кнопки для настольных приборов

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

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

Размер кнопки для сенсорного экрана

Исследование MIT Touch Lab показало, что часть пальца, используемая для прикосновения к экрану, составляет 8–10 мм, поэтому минимальный целевой размер должен быть 10 мм или больше.

Итак, какого размера нужно делать кнопки? Вот что говорят эксперты:

Material Design считает, что цель касания должна быть 48dp x 48dp с 8dp между точками касания.

7. Размещение кнопок

Спорное положение первичной кнопки

Если бы вы располагали 2 кнопки рядом, на какой стороне находилась бы первичная кнопка?

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

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

8. Кнопка доски почета

В том разделе я хочу отметить некоторые крутые принципы дизайна и систем. Мне нравятся кнопки Material Design System именно потому, что их принципы действительно хорошо продуманы.

Кнопка Material Design System

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

Просмотрите их раздел о кнопках здесь.

А также информацию о плавающих кнопках действий можно просмотреть тут.

9. Заключительные мысли

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *