Все, что нужно знать о дизайне кнопок
Эти малыши приводят вам лидов, продают ваши товары и услуги и буквально касаются пользователя
Кнопки — потрясающее изобретение: тыкнул пальцем и вот на телефоне зажегся экран, автомобиль заработал, ракета улетела на ту сторону планеты… а пользователю даже не нужно понимать механизмы или алгоритмы всея волшебства. В digital кнопки стали средством управления цифровым пространством — легко, ненавязчиво и привычно :)
Эволюция кнопок. Источник
Несмотря на то, что современная бытовая техника и другие устройства переходят на сенсорное управление, в ближайшее время физические кнопки никуда не исчезнут. Они уже сформировали у нас поведенческие привычки и посему нам интуитивно понятно и просто использовать виртуальные кнопки.
Кнопки vs Cсылки
Часто мы наблюдаем грустную картину — вместо кнопок используют ссылки, и наоборот. Различие между кнопками и ссылками имеет значение:
- Ссылки используются, когда вы переходите в другое место, например: страница «просмотреть все», «мой профиль» и пр.
- Кнопки сообщают о действии, которое может выполнить пользователь: «отправить», «объединить», «создать новый», «загрузить» и пр.
Состояние кнопки сообщает пользователю о её статусе
Каждое состояние кнопки должно четко определять ее возможности. Одно состояние должно отличаться от другого, а также от окружающих ее элементов, но в то же время не должно радикально менять саму кнопку или создавать визуальный шум.
Какими бывают состояния и о чем они сообщают:
Нормальное — элемент интерактивен и включен.
Фокус — пользователь выделил элемент.
Ховер — пользователь поместил курсор на интерактивный элемент.
Активное (или нажатое) — пользователь нажал на кнопку.
В процессе/загрузка — на выполнение действия требуется время, и это действие в процессе выполнения.
Отключено/Неактивно — элемент в настоящее время не интерактивен, но может быть включен при выполнении определенных действий.
Нормальное — элемент интерактивен и включен.
Фокус — пользователь выделил элемент.
Ховер — пользователь поместил курсор на интерактивный элемент.
Активное (или нажатое) — пользователь нажал на кнопку.
В процессе/загрузка — на выполнение действия требуется время, и это действие в процессе выполнения.
Отключено/Неактивно — элемент в настоящее время не интерактивен, но может быть включен при выполнении определенных действий.
Стили кнопок
Чаще всего используются прямоугольные кнопки со скругленными углами, которые легко узнать и которые хорошо смотрятся рядом с полем ввода. Выбор правильного стиля для кнопки будет зависеть от цели, платформы и их рекомендаций (речь о гидах iOS и Android). Вот некоторые из самых популярных стилей:
Стили говорят о важности действия
Стили используются, чтобы отличить более важные действия от менее важных. Создайте иерархию действий, которая поможет пользователю ориентироваться в вариантах выбора. Это может быть одна заметная кнопка (этот стиль часто называют «первичным») и несколько средних «вторичных» и «третичных» действий с более низким акцентом.
Не все кнопки должны быть в первичном стиле
Как правило, дизайнер берет наиболее часто выбираемую пользователями кнопку, задает ей первичный стиль и задает ей состояние фокуса. Это помогает пользователям быстрее выполнять свои задачи и указывает на правильный выбор.
Исключение составляют случаи, когда все варианты выбора равны или действие несет за собой серьезные последствия, чтобы бездумно согласится на него, причем отменить его нельзя. Делая обе кнопки в одинаковых стилях, вы заставляете пользователя вчитываться в надписи, а не нажимать по привычке на самую большую или яркую из них.
Исключение составляют случаи, когда все варианты выбора равны или действие несет за собой серьезные последствия, чтобы бездумно согласится на него, причем отменить его нельзя. Делая обе кнопки в одинаковых стилях, вы заставляете пользователя вчитываться в надписи, а не нажимать по привычке на самую большую или яркую из них.
Не заставляйте пользователя думать
«Капитан очевидность» на посту: интерфейс должен быть понятным для пользователей, а не становиться квестом и лабиринтом. За годы использования различных устройств и других продуктов у нас сформировалось определенное представление о том, как кнопки должны выглядеть и функционировать. Если перекреативить и сильно отклониться от того, что считается «стандартным», это приведет к путанице и, как следствие, к ошибкам пользователей.
Избегайте использования одного цвета для интерактивных и неинтерактивных элементов. Если интерактивные и неинтерактивные элементы имеют одинаковый цвет, людям сложно понять, куда нажимать.
Последовательность всему голова
Это один из самых действенных принципов UI — когда все работает одинаково, пользователям не нужно переживать о том, что произойдет после нажатия.
Последовательность поможет минимизировать количество ошибок, или вовсе их избежать. Предсказуемость в последовательности действий даст пользователям ощущение контроля над ситуацией и уверенность, что они достигнут своих целей с помощью вашего продукта. Когда вы создаете кнопки в первичном, вторичном и третичном стиле, постарайтесь объединить их некоторым общим элементом: цвет, форма и пр. Старайтесь быть не только последовательными внутри концепта дизайна (или — огого — дизайн-системы), но и осознавать, где и для чего будут использоваться эти кнопки.
Последовательность поможет минимизировать количество ошибок, или вовсе их избежать. Предсказуемость в последовательности действий даст пользователям ощущение контроля над ситуацией и уверенность, что они достигнут своих целей с помощью вашего продукта. Когда вы создаете кнопки в первичном, вторичном и третичном стиле, постарайтесь объединить их некоторым общим элементом: цвет, форма и пр. Старайтесь быть не только последовательными внутри концепта дизайна (или — огого — дизайн-системы), но и осознавать, где и для чего будут использоваться эти кнопки.
Сделайте кнопки нормального размера
Народная мудрость гласит: «Нормально делай — нормально будет». Нажать кнопку должно быть легко, а если пользователь не может сделать такое простое действие или есть шанс по ошибке нажать на соседний элемент, это приведет к негативному опыту.
В большинстве случаев рекомендуется делать области касания не менее 48×48 dp (dp или dip (density-independent pixels) — это абстрактная единица измерения, которая помогает сделать так, чтобы приложение или сайт выглядели одинаково на разных экранах и разрешениях. Проще говоря — соотношение пальца и пиксельной кнопки). Физически — это около 9 мм, независимо от размера экрана. Рекомендуемый целевой размер элементов для сенсорного экрана — не менее 7−10 мм.
В большинстве случаев рекомендуется делать области касания не менее 48×48 dp (dp или dip (density-independent pixels) — это абстрактная единица измерения, которая помогает сделать так, чтобы приложение или сайт выглядели одинаково на разных экранах и разрешениях. Проще говоря — соотношение пальца и пиксельной кнопки). Физически — это около 9 мм, независимо от размера экрана. Рекомендуемый целевой размер элементов для сенсорного экрана — не менее 7−10 мм.
Если кнопка — это иконка, то убедитесь, что область касания выходит за визуальные границы элемента. То есть не нужно в аккурат целиться в пиксели внутри иконки, а достаточно ткнуть в место, где эта иконка находится. Это относится не только к мобильным устройствам или планшетам, где основной инструмент — палец, но и к устройствам, где мы пользуемся мышью или стилусом.
Доступность дизайна кнопок
Размер целевой области — один из факторов, влияющих на доступность (ещё размер шрифта, цвет и контраст).
Существует множество инструментов, которые помогут вам легко проверить, насколько эффективно работают элементы дизайна. Вот несколько из них:
- проверка на контраст
- проверка на цвет
- проверка на контраст двух цветов
- проверка на несколько факторов
- проверка доступности цветов при некоторых зрительных заболеваниях
Жесты становятся все популярнее
Жесты позволяют пользователям взаимодействовать с приложением с помощью касания. Использование прикосновений в качестве альтернативного способа выполнения задачи может сэкономить время и дать тактильный контроль. Хотя некоторые жесты, такие как смахивание для запуска действий, двойное касание, чтобы поставить отметку «Нравится» или долгое нажатие, используются все шире с каждым днем, они все еще не очень очевидны для обычного пользователя. Их стоит использовать как альтернативный способ выполнения действия для более продвинутых пользователей.
Надпись на кнопке должна побуждать к действию
То, что написано на кнопках, не менее важно, чем-то, как они выглядят. Это снова вопрос разочарований и ошибок пользователя.
Хорошая надпись на кнопке побуждает пользователей к действию. Лучше всего использовать глаголы и обозначать кнопку тем, что она на самом деле делает. Как будто кнопка спрашивает пользователя: «Хотите [добавить в корзину]?» или «Хотите [подтвердить заказ]?».
Избегайте плоских «Да» и «Нет» или слишком общих названий, например, «Отправить» (что отправить? куда отправить? для чего отправить?).
Хорошая надпись на кнопке побуждает пользователей к действию. Лучше всего использовать глаголы и обозначать кнопку тем, что она на самом деле делает. Как будто кнопка спрашивает пользователя: «Хотите [добавить в корзину]?» или «Хотите [подтвердить заказ]?».
Избегайте плоских «Да» и «Нет» или слишком общих названий, например, «Отправить» (что отправить? куда отправить? для чего отправить?).
Что ставить в начале: ОК/Отмена или Отмена/ОК?
Ну, камон. Оба варианта — это всего лишь выбор, а дизайнеры могут часами спорить о своих предпочтениях.
- Расположить первой кнопку с «ОК» значит поддержать естественный порядок чтения. Например, Windows сначала ставит «ОК».
- Расположить кнопку «ОК» второй значить улучшить динамику. Это помогает пользователям оценить все варианты, прежде чем предпринимать действия, и помочь избежать ошибок и поспешных решений. Например, Apple ставит кнопку «ОК» второй.
Любой из вариантов имеет веские аргументы в свою пользу, и ни один из них не приведет к катастрофе.
Не деактивируйте кнопки
Каждый был в такой ситуации, когда застрял на экране на несколько секунд или минут, пытаясь понять, что не так и почему ничего нельзя сделать из-за заблокированной неактивной кнопкой и что нужно сделать, чтобы все заработало.
Вместо того, чтобы деактивировать кнопки (например, вы ждете, пока пользователь заполнил поля), напишите, что нужно сделать, чтобы продвинуться дальше. Если кнопка имеет неактивный статус, а подсказок никаких нет, это может ввести пользователя в ступор. Ведь тут логика проста: что вижу, то и думаю. А вижу я, что раз кнопка неактивна, то и вся форма неактивна.
При активной кнопке и подсказках все станет понятнее: я должен ввести то, что от меня хотят, а затем нажать кнопку.
Вместо того, чтобы деактивировать кнопки (например, вы ждете, пока пользователь заполнил поля), напишите, что нужно сделать, чтобы продвинуться дальше. Если кнопка имеет неактивный статус, а подсказок никаких нет, это может ввести пользователя в ступор. Ведь тут логика проста: что вижу, то и думаю. А вижу я, что раз кнопка неактивна, то и вся форма неактивна.
При активной кнопке и подсказках все станет понятнее: я должен ввести то, что от меня хотят, а затем нажать кнопку.
Очевидно, но факт
Кнопки — наше все. Пользователь не понял или ошибся, и вы потеряли клиента. Пользователю надоело догадываться или промахиваться по кнопкам, и вы потеряли продажу. UX/UI — это не только о понятных и красивых концепциях дизайна, но и о таких мелких деталях, которые это «понятное и красивое» формируют.
Материал подготовлен на основе статьи Button Design — UI component series.
Материал подготовлен на основе статьи Button Design — UI component series.