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

Если вы хотите погрузиться в эту тему самостоятельно, читайте материал нашего друга — Ника Бабича, главного редактора UX Planet. Мы перевели и адаптировали его для вас.
5 июля 2018
главный редактор UX Planet


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

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

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

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

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

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

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

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

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

Привычное размещение кнопок упрощает пользовательский путь. Используйте стандартные лейауты, чтобы пользователи понимали назначение каждого элемента интерфейса даже без специальных подсказок. Сочетание стандартных лейаутов, чистого визуального дизайна и достаточного пространства в интерфейсе делает интерфейс более понятным.
Не играйте с пользователями в игру «найди кнопку».
Совет: Протестируйте ваш дизайн. Пользователям, которые заходят на вашу страницу, должно быть с первого раза понятно, где находится нужная им кнопка.
03
Текст на кнопке должен отражать её основную функцию
Кнопки с обобщенным или некорректным названием могут запутать ваших пользователей. Пишите на кнопках только то, что они действительно делают. В идеале название должно полностью отображать функцию кнопки.

Пользователи должны понимать, что произойдет, если они кликнут на ту или иную кнопку. Простой пример: представьте, что вы случайно активировали функцию удаления и на экране появилось сообщение, как на картинке ниже.
Расплывчатое «OK» не дает четкого понимания, что произойдет после клика на кнопку.
Непонятно, что обозначают кнопки «OK» и «ОТМЕНИТЬ». Большинство пользователей задумаются: «Что же все таки произойдет, если я нажму на кнопку "ОТМЕНИТЬ"»?
Не делайте так, чтобы модальное окно состояло только из двух опций: «OK» или «ОТМЕНИТЬ».
Вместо кнопки «OK» лучше использовать кнопку «УДАЛИТЬ». Так пользователям будет понятно, что делает кнопка. Если удаление является потенциально опасным действием, кнопку можно сделать красной, чтобы предупредить пользователей.
Кнопка «УДАЛИТЬ» ясно показывает, какое действие будет совершено.
О потенциально опасном действии «Заблокировать карту» информирует кнопка красного цвета.
04
Уделите особое внимание размеру кнопок
Размер кнопок должен отображать важность элементов, размещенных на экране. Чем больше кнопка, тем важнее должно быть действие, которое она выполняет.
Определите, какие кнопки важные, а какие нет

Сделайте так, чтобы самая важная кнопка выглядела самой важной. Она должна выделяться. Увеличьте её размер (чем больше кнопка, тем важнее она выглядит) и используйте контрастный цвет, чтобы привлечь внимание пользователей.
Dropbox использует размер и цвет, чтобы создать контраст и привлечь внимание пользователей к кнопке «Попробовать Dropbox Business бесплатно».
Создавайте кнопки удобные для касания

Во многих мобильный приложениях кнопки недостаточно большие. Это приводит к тому, что пользователи не могут ими воспользоваться.
Слева: кнопки достаточного размера. Справа: кнопки слишком маленькие
В MIT Touch Lab (Массачусетский технологический институт) провели исследование, которое показало, что площадь подушечки пальца среднестатистического человека составляет 10-14 мм, а площадь кончика пальца составляет 8-10 мм. То есть, оптимальный размер кнопки — 10х10 мм.
05
Уделите внимание расположению кнопок
Расположение кнопок должно отображать диалог между пользователем и интерфейсом. Подумайте, в какой последовательности пользователи будут взаимодействовать с интерфейсом, и расположите кнопки соответственно.
Интерфейс — это диалог с вашими пользователями.
Например, как разместить кнопки «Назад» и «Вперед»? Логично было бы предположить, что кнопка «Вперед» должна располагаться справа, а кнопка «Назад» — слева.
06
Не злоупотребляйте количеством кнопок
Данная проблема является типичной для многих приложений и сайтов. Когда вы предоставляете слишком много вариантов, пользователи не выбирают ни один из них. При дизайне продумайте, на какие действия вы хотите сподвигнуть пользователей.
07
Сделайте визуальный или аудиофидбек после взаимодействия
Кликая или нажимая на кнопку, пользователи ожидают получить обратную связь. В зависимости от типа операции, это может быть визуальный или аудиофидбэк. Когда его нет, пользователи могут решить, что система не получила запрос, и будут снова и снова нажимать на кнопку. Это затруднит пользовательский опыт.

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

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

Вы научитесь:

- Создавать интерактивные прототипы на основе бумажных прототипов
- Использовать современные инструменты прототипирования
- Анализировать работоспособность прототипа
- Обнаруживать и устранять проблемы в дизайне
- Детализировать и улучшать дизайн прототипа

Начните прямо сейчас: не откладывайте свои достижения в долгий ящик, курс уже запустился, так вы можете начать учиться прямо сейчас!




Хотите создавать не только удобные, но и красивые интерфейсы?
Понравилось? Поделитесь с друзьями