На какую кнопку легче нажать? Usability кнопки: типы и состояния

 

https://cdn-images-1.medium.com/max/800/0*d586XEJR-osPUcJ_.png

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

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

Рекомендации по созданию кнопок

Делайте кнопки похожими на кнопки

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

https://cdn-images-1.medium.com/max/800/0*NA1Xj7dq-HAAnpse.png

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

Размер кнопок также играет ключевую роль в помощи пользователям понять, что это за элементы.

Различные платформы предоставляют рекомендации по минимальным размерам зоны касания. Результаты исследования, проведенного MIT Touch Lab показали, что среднее значение для подушечки пальца – 10-14 мм, а для кончика – 8 – 10 мм.

При этом, 10 мм x 10 мм – оптимальный минимальный размер зоны касания.

https://cdn-images-1.medium.com/max/800/0*E5IKQ8_HH4rweDAu.jpg

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

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

https://cdn-images-1.medium.com/max/800/1*Yi8MMBRQOvanWxcih9Tdjg.png

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

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

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

https://cdn-images-1.medium.com/max/800/0*M5PqyVBxaxLwBRri.png

Надписи

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

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

https://cdn-images-1.medium.com/max/800/1*wtgLaEsE-SalWKmUmM9jMw.png

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

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

https://cdn-images-1.medium.com/max/800/0*a60Rl2qHtldZJPnS.

Форма кнопки

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

https://cdn-images-1.medium.com/max/800/0*OV5wp3O_Kx5uYuwQ.png

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

https://cdn-images-1.medium.com/max/800/1*WliUbn25jprvwDm_2mCkgg.png

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

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

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

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

https://cdn-images-1.medium.com/max/800/0*YpE4W6z-rxS52KWx.png

Применение

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

Поведение

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

https://cdn-images-1.medium.com/max/800/1*Y9Qt2uRMT_jJSC48PPPxkA.png

Пример

Объемные кнопки выделяются сильнее, чем плоские. Пример для приложения Android.

https://cdn-images-1.medium.com/max/800/1*-PvOL9sDWRtLoJ-eWaTJ6w.png

2. Плоская кнопка

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

https://cdn-images-1.medium.com/max/800/1*Q5NC_WdMfDsFt-M59Kyofw.png

Применение

В диалоговых окнах (для объединения действия кнопки с содержимым диалогового окна)

https://cdn-images-1.medium.com/max/800/1*N2PuWCZft9noCDu1-2b2Gw.png

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

https://cdn-images-1.medium.com/max/800/0*pubP1_NqHM3qBTXK.png

Расположены внизу так, чтобы пользователь мог легко их найти

https://cdn-images-1.medium.com/max/800/1*6q8WRa5W3wp8UQno1lAs9A.png

Поведение

https://cdn-images-1.medium.com/max/800/1*eKd5FCKx64wu2H4HyEpi_Q.png

Пример

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

https://cdn-images-1.medium.com/max/800/1*LHqkzchcDHhw35oP9m8FRA.png

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

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

https://cdn-images-1.medium.com/max/800/0*Yj3LanbQyOH9cvfW.jpg

Применение

Кнопки-переключатели преимущественно используется как кнопки Вкл/Выкл.

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

  • В группе должно быть как минимум три кнопки-переключателя
  • На кнопке должен быть текст, иконка или и то, и то

https://cdn-images-1.medium.com/max/800/0*VYq99-A5oJVBn_BX.png

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

https://cdn-images-1.medium.com/max/800/0*aPHcAOGuoij7qBlY.gif

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

Пример

В Apple iOS кнопки-переключатели используются для раздела “Настройки”.

https://cdn-images-1.medium.com/max/800/1*VzGr0nea0DSrQJpdo93Oiw.png

4. Прозрачная кнопка (“Кнопка-призрак”)

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

https://cdn-images-1.medium.com/max/800/1*b0GYENHUa8s2JJhAiYNx9w.png

Применение

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

https://cdn-images-1.medium.com/max/800/1*W88LBH-PnkIBs1-4I7wOdQ.png

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

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

https://cdn-images-1.medium.com/max/800/0*UqqY0GSRVrNZRSBD.jpg

Поведение

https://cdn-images-1.medium.com/max/800/0*pGWqBozhId1xpbix.

Пример

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

https://cdn-images-1.medium.com/max/800/1*aUMy2IpuVazdznCDstvRkA.png

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

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

Применение

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

Поведение

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

https://cdn-images-1.medium.com/max/800/0*0fkATH0w_dYIN1xP.gif

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

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

https://cdn-images-1.medium.com/max/800/1*pZHnI3XdRGYWy677nV4Lnw.png

https://cdn-images-1.medium.com/max/800/0*RmVUZW7ZFv-yum84.png

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

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

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

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

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

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

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

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

https://cdn-images-1.medium.com/max/800/1*Ed-VZb5M1J_V1jzXNuyDAw.png

Состояние при фокусе

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

https://cdn-images-1.medium.com/max/800/1*UtyndJobYGq4uHRoWPYpCQ.gif

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

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

https://cdn-images-1.medium.com/max/800/1*XaXLKl8WRNx3Xo4Li5U2gg.gif

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

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

Аргументы за скрытие кнопки:

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

https://cdn-images-1.medium.com/max/800/1*Ir5jXaYBDF3U6-ErLjlO1Q.png

https://cdn-images-1.medium.com/max/800/1*D5Y8ElN29_GoUyZZ07yXiw.png

Аргументы за использование кнопки в отключенном состоянии:

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

https://cdn-images-1.medium.com/max/800/1*5gLxaG0m53GzqK1IE-u_bw.png

Заключение

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

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

Источник перевода