Прислушиваясь к советам от Google: как оформлять кнопки в интерфейсе

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

Содержание:
1. Виды кнопок в интерфейсе
2. Выбор типа кнопки
3. Состояния кнопок
4. Размеры кнопок
5. Формы кнопок
6. Текст на кнопках
7. Акценты в кнопках
8. Расположение кнопок
9. Вывод

---

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

Виды кнопок в интерфейсе

Выделю шесть наиболее распространенных типов кнопок и детальнее расскажу о каждом из них:

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

• Контурные кнопки. Их еще называют ghost buttons — «призрачные кнопки». У них нет заливки, а есть только обводка. Чаще всего такой тип кнопок используется для второстепенных действий вроде отмены или возвращения назад. Но это могут быть и главные действия. Например, на сайте Mozilla на первом экране сразу две контурные кнопки для целевых задач. Хотя ниже на странице можно встретить и залитые кнопки.

• Текстовые кнопки. Некоторые дизайнеры говорят: «Это не кнопки, это — ссылки». Ведь они выглядят, как текст без визуально выделенной рамки. Но между этими понятиями все же есть разница. Ссылка ведет на другую страницу, а кнопка отвечает за выполнение действия. Сегодня текстовые кнопки особо часто встречаются в мобильных интерфейсах и приложениях на iOS и Android. Например, в модальных окнах обоих ОС используются только текстовые кнопки. Хотя и на сайтах они тоже часто встречаются.

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

• Сплит-кнопки. Это составные кнопки с несколькими действиями. Чаще всего такое решение используется в приложениях и сервисах для экономии места и при наличии равноправных действий. Например, на Vimeo есть кнопка «Новое видео». При нажатии на нее раскрывается меню: загрузить или создать новое видео. Со сплит-кнопками вы также могли иметь дело в Skype или Figma. В последнем случае даже выбор шейпов — это, по сути, кнопка. Когда пользователь наводит курсор на элемент, он видит изменение состояния данного элемента, и ему выпадает список доступных функций: прямоугольник, овал и т.д.

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

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

Типов кнопок много, но какой лучше использовать? Об этом спорить можно долго.

Мне же нравится совет Google: стоит ориентироваться на частоту их использования в интерфейсе и отталкиваться от количества действий для пользователя.

То есть если на одном экране представлено одно действие, выбирайте залитую кнопку. Если на экране можно сделать 27 действий, то нельзя ставить 27 залитых кнопок. Так вы распыляете внимание человека. В таком случае для разных действий надо будет подбирать разные типы кнопок.

Рассмотрим каталог на Rozetka. Нельзя каждой карточке добавить кнопку «Купить» — это перебор. Следует определить самое важное действие. В каталоге — это поиск товара, поэтому залитая кнопка одна — «Найти». Если покупатель перейдет в карточку, там уже есть залитая зеленая кнопка «Купить». Да, рядом с карточкой есть иконка корзины, но она неприметная. Ведь здесь множество других действий: сравнение, избранное, разделы, цены, отзывы, топ продаж, суперцена. Все выделить попросту невозможно.

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

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

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

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

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

Normal. Обычное состояние кнопки. Указывает, что элемент активен и готов ко взаимодействию с пользователем.

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

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

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

Hover. Еще одно состояние выделения элемента — не по нажатию кнопок на клавиатуре, а по наведению курсора. Обратите внимание: это не то же самое, что Focus. Hover реагирует на наведение, а не на нажатие. Обычно это состояние изображают с затемнением или высветлением родного цвета кнопки.

Active. Фактически это состояние нажатия самой кнопки. Целей у такого режима несколько. Во-первых, самой кнопке может понадобиться активное состояние. Например, в графическом редакторе вы нажимаете на кнопку с прямоугольником и рисуете, и при этом кнопка все время в «активном» виде. Во-вторых, Active нужен для подтверждения самого нажатия. Да, обычный человек кликнул и даже не заметил этого состояния кнопки, оно исчезает быстро. Но если пользователь нажмет кнопку мышкой и будет держать ее, то изменение будет заметным.

Progress/Loading. Это состояние говорит о выполнении процесса, запущенного пользователем. Оно пригодится для систем с не самым быстрым по техническим причинам реагированием на клики. Пока запрос отправляется на сервер, обрабатывается и возвращается, пользователю надо показать: в данный момент что-то происходит. Именно за это и отвечает это состояние кнопки.

Disabled. Состояние для недоступной по какой-то причине кнопки. Может понадобиться, например, когда пользователю нужно заполнить несколько полей на сайте, прежде чем перейти к следующей странице. Пока условие не будет выполнено, кнопка некликабельна. Некоторые дизайнеры считают, что в такой ситуации кнопка может иметь вид Normal. Но при невыполнении всех условий система выдает ошибку в виде «Заполните все поля». Такое решение тоже имеет право на жизнь.

Только нужно учитывать: иногда юзер не понимает, что кнопка неактивна и почему она такая. В этом случае ему приходится навести на нее курсор, а системе затем надо показать tooltip из серии «Чтобы кнопка стала доступной, заполните поля 1, 2, 3».

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

Размеры кнопок

При проектировании интерфейсов нередко упоминают закон Фиттса. Он гласит: время достижения цели прямо пропорционально дистанции до цели и обратно пропорционально размеру цели.

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

Поэтому корректнее говорить: 40 пикселей — это кликабельная область. То есть кнопку можно сделать маленькой, но область для нажатия должна быть больше самой кнопки. Благодаря этому пользователь при наведении курсора сможет нажать на кнопку, не целясь именно в текст или небольшой символ.

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

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

Формы кнопок

А теперь попробуйте определить лучшую из приведенных ниже форм кнопок. По узнаваемости паттерна безусловный лидер — вариант №1. Но на самом деле при выборе формы кнопки следует исходить из задачи, которую она должна решать.

Приведу пример сайта с портфолио одной дизайн-студии. Дизайнеры явно устали от стандартных прямоугольных кнопок. В этом случае курсор меняется при наведении на объект и, по сути, сам становится кнопкой. Такая кнопка является иконочной (в виде глаза) и означает «Посмотреть».

Можно привести и другой пример: здесь курсор при наведении на интерактивный элемент превращается в круглую кнопку «View».

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

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

Текст на кнопках

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

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

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

Давайте посмотрим на этот сайт по продаже ножей. У магазина появилась модель Half Dome и текст на кнопке гласит: «Встречайте Half Dome». Но непонятно, что это значит. Пользователь добавит нож в корзину или попадет на страницу продаж? А может, перейдет на YouTube для просмотра видео о новинке? В итоге человек не понимает, что сейчас произойдет.

Или же другой пример — обратите внимание здесь на кнопку — большую, квадратную, со стрелкой. Это привлекает внимание, но… Есть еще «во-вторых»: текст «Начать инвестировать». Что это значит? Пользователь может задаться множеством вопросов: куда инвестировать, как это работает, куда я перейду после нажатия на кнопку, у меня сейчас деньги со счета спишутся или что? Важно, чтобы человек по кнопке точно понимал, что произойдет после клика.

Акценты в кнопках

И снова предлагаю выбрать лучшую пару кнопок. «Пропустить» или «Зарегистрироваться» — какой вариант оформления предпочли бы вы?

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

Да, часто бизнес четко ставит задачу: нужны регистрации. Но лучше позволить пользователям выбирать, чего они хотят. Например, Nike на своем сайте сообщает: «Мы запускаем голосование. Можно зарегистрироваться или узнать больше». Кнопки равнозначны, выбор — за человеком.

Схожая ситуация у Apple на странице их часов. Тут одинаково оформленные текстовые кнопки с иконкой: «Узнать больше» и «Купить». Заказчики часто просят сделать огромную красную кнопку «Купить». Apple же предлагает пользователю самостоятельно принять решение о покупке.

Мне лично нравится, как в Apple на Mac OS показывают приоритетность для пользователя. При попытке удалить файл из корзины они подсвечивают кнопку «Отмены». Да, они приняли решение, на чем акцентировать внимание пользователя, но это действие необратимо. Хоть и пользователь сам нажал на удаление, он должен понимать, какие будут последствия. Таким образом дизайнеры помогают человеку предотвратить выполнение необратимого действия.

Расположение кнопок

В завершении еще один пример-загадка. Здесь представлены кнопки «Сохранить» и «Отмена», у них одинаковый приоритет. Вопрос в расположении: какая кнопка должна стоять раньше?

На самом деле, единственно правильного ответа нет. Исследовательская группа Nielsen Norman Group, соучредитель которой и придумал термин UX, доказала, что эти решения равнозначные. В одном случае можно поставить вперед действие, за которым пользователь обратился к системе. В другом — дать возможность сначала ознакомиться с опциями.

Вывод

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

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

Читайте также: Как создавать кнопки в Bootstrap: гайд по настройке цветов и размеров