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

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

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

Создавая кнопки для мобильных приложений, необходимо продумать размер зоны прикосновения. Согласно исследованию MIT Touch Lab (IТ-лаборатория, США) оптимальный размер зоны прикосновения будет 10х10 мм.

Untitled-2

Не играй с пользователем в «найди кнопку»

Важен порядок расположения кнопок, особенно если есть парные. Например, как расположить кнопки «Назад / Вперёд»?Логично, что кнопка, которая перемещает вас вперёд, должна быть справа, а кнопка, которая перемещает вас назад, должна быть слева.

Важно разполагать кнопки там, где их ожидают увидеть!

Основной акцент следует делать на самом важном действие пользователя.

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

1

Кнопки должны говорить, что произойдёт при нажатии

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

2

Форма кнопки

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

Главное, соблюдать единство стиля всего сайта.

Установите приоритетность кнопок

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

Позаботьтесь о порядке

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

Не забудьте ответить

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

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

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

Объёмная кнопка

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

3

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

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

6

Кнопка-переключатель

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

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

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

7

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

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

8

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

9

Состояния кнопок

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

11

Нормальное состояние

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

10

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

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

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

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

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

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

12

Заключение

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

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

Лучший способ сказать автору «СПАСИБО»рассказать друзьям или поделиться ссылкой!
Другие статьи:
Шрифт в веб-дизайне

25/03/2020

Обсудим, имеет ли большое значение размер шрифта на сайте? И сразу спойлер: имеет!

Шрифт в веб-дизайне
10 ошибок начинающих дизайнеров

17/02/2020

Шрифты – это одежда для текста! Разберём 10 основных ошибок типографики.

10 ошибок начинающих дизайнеров
Мошенники от лица R01 рассылают фальшивые письма c уведомлениями о продлении доменов

11/06/2018

Мошенники от лица R01 рассылают фальшивые письма с уведомлением о продлении доменных имен и других услуг регистраторов. 4-го июня один из наших клиентов получит уведомление от "регистратора r01" с предложением продлить домен.

Мошенники от лица R01 рассылают фальшивые письма c уведомлениями о продлении доменов
REG.RU лишил партнерского статуса хостинг-провайдера «Beget»

08/06/2018

Сервис Beget 5-6 июня лишился права доступа к инструментам API REG.RU. В следствии чего многие тысячи пользователей остались в подвешенном состоянии.

REG.RU лишил партнерского статуса хостинг-провайдера «Beget»
Как бесплатно заработать на своей странице в Instagram

14/10/2016

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

Как бесплатно заработать на своей странице в Instagram
Почему нельзя использовать PLUSO и почему он вставляет iframe

30/09/2016

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

Почему нельзя использовать PLUSO и почему он вставляет iframe
Продвижение сайта через социальные сети

24/08/2016

Чтобы быстро завоевать приличные места в рейтингах поисковых систем, необходимо эффективно использовать все доступные средства продвижения. Конечно, на первом месте идёт оптимизация контента сайта и его HTML-кода как основа SEO.

Продвижение сайта через социальные сети
Возлюби дизайн, и будет всем счастье!

25/05/2016

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

Возлюби дизайн, и будет всем счастье!
Почему аудит ключевой этап в SEO продвижении?

03/11/2015

Мы начинаем цикл статей, посвященных вопросам SEO продвижению сайтов, а так же SMM продвижению.В данном цикле мы познакомим вас с основными понятиями, возможностями и приемами продвижения веб сайтов.

Почему аудит ключевой этап в SEO продвижении?