Шпаргалки UI дизайнера: создание кнопок – Сей-Хай

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

Итак, в этой статье мы рассмотрим:

1. Кнопки действия
2. Общие стили кнопок
3. Выбор цвета и стиля кнопки
4. Состояния кнопок и обратная связь
5. Надпись кнопки
6. Сенсорные цели
7. Размещение кнопок
8. Кнопка доски почета
9. Заключительные мысли

1. Кнопки действия

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

1. Кнопки призыва к действию (CTA/C2A)

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

 

Кнопка призыва к действию.

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

2. Первичное действие

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

Кнопка первичного действия.

Для кнопок этого типа я использую простые прямоугольные кнопки с округлыми краями.

3. Вторичное действие

Вторичные кнопки – это кнопка «Назад» возле первичной кнопки «Далее». Или кнопка «Отмена» возле кнопки «Подтвердить». Вторичные кнопки – это альтернатива первичного действия, которое мы предоставляем пользователям.

Два варианта вторичных действий рядом с первичными.

Для данных кнопок рекомендуется использовать контурные кнопки или текстовые ссылки.

4. Третичное действие

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

Третичные кнопки в разных формах.

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

2. Общие стили кнопок

В этом разделе мы рассмотрим общие стили кнопок. Стиль – это просто эстетика кнопки, а не то как ее следует использовать.

Сплошные кнопки

Все просто, сплошные кнопки – это кнопки со сплошной заливкой.

Сплошная кнопка.

Контурные и призрачные кнопки

Контурные кнопки – это кнопки без заливки. Несмотря на то, что они часто используются взаимозаменяемо, контурные кнопки обычно светлого цвета (с темным контуром и текстом), а кнопки-призраки – темного цвета (со светлым контуром и текстом).

Контурная кнопка (слева) и призрачная кнопка (справа).

Закругленные кнопки

Закругленные кнопки – это кнопки, у которых радиус углов максимально скруглен.

Закругленная кнопка.

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

FAB (плавающая кнопка действия)

Плавающие кнопки действий – это продуманное дизайнерское решение, популярное в Google Material Design. Хотя они могут выглядеть как кнопка со значком, фактически они используются для первичного действия на экране.

Кнопка FAB.

Текстовая ссылка

Текстовые ссылки – это очень простой тип кнопок. Есть несколько способов показать, что надпись является ссылкой. Это может быть цвет, подчеркивание, положение ссылки, или просто сам текст (например, «Читать дальше»).

Оформление текстовых ссылок.

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

Кнопка “значок с надписью”

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

Кнопка “значок с надписью”

Самое сложное в работе с такими кнопками – найти правильное соотношение иконки и шрифта.

• Вариант 1: размер иконки соответствует высоте заглавных букв.
• Вариант 2: размер иконки намного больше высоты строки.

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

Кнопка-значок

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

Кнопки-значки в разных стилях.

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

Иконка рядом с текстовой ссылкой

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

Кнопки ссылки с иконками.

3. Выбор цвета и стиля кнопки

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

1. Цвет

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

Разноцветные кнопки.

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

Кнопки «Удалить», «Просмотреть предупреждения», «Сохранить» и «Еще».

Например, зеленая кнопка «Удалить» собьет с толку любого пользователя, как и красная «Сохранить».

2. Закругление углов

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

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

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

3. Тень

Тень на кнопке создает ощущение, будто кнопка находится за пределами страницы, и это действительно привлекает внимание. Тени также могут быть использованы для обозначения различных состояний. Material Design использует тень очень органично, делая кнопку «ближе» при наведении курсора.

Кнопки с разными настройками тени.

4. Стиль надписи

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

Кнопки с разными стилями надписей.

Вот несколько простых способов сделать шрифт читабельным:

1. Лучше использовать заглавные буквы в начале каждого предложения или капитализировать начальные буквы всех слов в предложении, чем делать все буквы заглавными. (Хотя Material Design использует кнопки со всеми заглавными буквами).
2. Убедитесь, что цвет надписи выделяется на фоне кнопки. В этом поможет этот инструмент.
3. Выбирая шрифт убедитесь, что он разборчивый и достаточно большой. Также шрифт должен быть средней плотности.

5. Вертикальный отступ

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

Кнопки с разным вертикальным отступом.

Спросите зачем? Существует две причины:

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

6. Горизонтальный отступ

Первый вариант:

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

Кнопки, ширина которых определяется сеткой.

Второй вариант:

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

Кнопки, ширина которых определяется отступом и длиной надписи.

4. Состояния кнопок и обратная связь

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

1. Активное и неактивное состояние

Активное состояние – это когда кнопка «кликабельна». Хотя это покажется очевидным, важно отметить, что кнопка может быть неактивна, если пользователь не выполнил необходимые шаги. Например, если не введено имя и адрес электронной почты, пользователь не сможет нажать кнопку «Подтвердить».

Активная и неактивная кнопка.

2. Hover & hover off (навести курсор/убрать курсор)

На десктопных устройствах кнопка должна иметь разные состояния, чтобы пользователь знал, что на нее можно нажать. Также анимация может побудить пользователя к нажатию. Обычно состояние «hover off» противоположно состоянию «hover on», но это не обязательно.

Кнопка, реагирующая на наведение курсора.

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

3. Фокус внимания

Состояние фокуса довольно сложно для понимания. Так что самый простой способ объяснить – показать его в действии.

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

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

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

4. Нажатие кнопки

Нажатие кнопки – это состояние, когда курсор или палец пользователя удерживает кнопку. Когда пользователь отпускает свой палец или курсор, кнопка выглядит как нажатая.

Кнопка, демонстрирующая состояние нажатия.

5. Нажатая кнопка

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

Кнопка, демонстрирующая состояние нажатой.

5. Надпись кнопки

1. Использование глаголов

Большинство кнопок содержат глаголы для указания того, что кнопка будет делать, например, «Сохранить», «Опубликовать», «Редактировать». Хотя «Назад» и «Далее» не являются глаголами, в контексте интерфейса они работают одинаково. Мне нравится использовать структуру “глагол” + “существительное”. Так действие звучит более инструктивно, например, «Сохранить сообщение», «Следующий шаг» и так далее.

2. Шрифт

Вы также должны решить, какой вариант шрифта использовать. Вот некоторые общие рекомендации:

1. Все буквы заглавные, например, «СЛЕДУЮЩИЙ РАЗДЕЛ». Я использую их для более профессиональных платформ.
2. Капитализация начальных букв всех слов в предложении, например, «Следующий Раздел». Я стараюсь ее не использовать, так как текст становится трудночитаемым. Что касается тона, это нечто среднее между профессиональным и разговорным тоном.
3. Капитализация начальной буквы только первого слова в предложении, например, «Следующий раздел». Я использую ее для более дружественных или разговорных платформ.
4. Все буквы строчные, например, «следующий раздел». Я очень редко использую надписи со строчными буквами. Наверное, это самый неофициальный выбор из существующих.

3. Последовательность

При выборе надписей для кнопок убедитесь, что вы сохраняете последовательность. Вот несколько вещей, которые следует сделать в начале проекта:

1. Выберите количество слов: Одно, два или более слов на кнопку;
2. Выберите регистр: Капитализация начальной буквы только первого слова в предложении, капитализация начальных букв всех слов в предложении, все буквы заглавные, или все буквы строчные;
3. Структура надписи: Например, «глагол» + «существительное» или просто «глагол» и так далее.

6. Сенсорные цели

Размер кнопки для настольных приборов

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

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

Размер кнопки для сенсорного экрана

Исследование MIT Touch Lab показало, что часть пальца, используемая для прикосновения к экрану, составляет 8–10 мм, поэтому минимальный целевой размер должен быть 10 мм или больше.

Итак, какого размера нужно делать кнопки? Вот что говорят эксперты:

Material Design считает, что цель касания должна быть 48dp x 48dp с 8dp между точками касания.

7. Размещение кнопок

Спорное положение первичной кнопки

Если бы вы располагали 2 кнопки рядом, на какой стороне находилась бы первичная кнопка?

Две позиции для первичных и вторичных кнопок.

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

Вариант B показывает первичную кнопку справа. Используется для того чтобы пользователь сначала увидел дополнительную кнопку. Таким образом, он осведомлен о возможных вариантах и может сделать выбор. Элементы, расположенные справа, также указывают на продолжение.

8. Кнопка доски почета

В том разделе я хочу отметить некоторые крутые принципы дизайна и систем. Мне нравятся кнопки Material Design System именно потому, что их принципы действительно хорошо продуманы.

Кнопка Material Design System Кнопка изображения от Material Design.

Ни один разговор о кнопках не будет полным без упоминания Material Design. Их работа над кнопками и то, как они взаимодействуют с другими компонентами в системе, заслуживает внимания.

Просмотрите их раздел о кнопках здесь.

А также информацию о плавающих кнопках действий можно просмотреть тут.

9. Заключительные мысли

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

Источник: UXDesign

Читайте также:

Почему для презентации UX всегда нужно использовать интерактивные прототипы

Концепция дизайна UX: разделение ленты Instagram на группы

10 примеров по-настоящему качественного UX, который помогает изучать пользователей

UX Дизайн кнопок: Лучшее применение, форма и расположение | by Writes

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

Подумайте о том, как дизайн переплетается с аффордансом. Как пользователи определяют элемент, как кнопку? Используйте форму и цвет что бы заставить элемент выглядеть, как кнопка.Так же хорошенько подумайте о размере точки соприкосновения и наполнении. Размер кнопки так же играет ключевую роль, помогая пользователю определить назначение элемента. На разных платформах можно найти рекомендации по минимальному размеру точки соприкосновения. Результаты исследований MIT Touch Lab показали, что средние размеры подушечек пальцев составляют в среднем от 10 до 14мм, а размеры кончиков пальцев от 8 до 10мм, делая тем самым размер 10х10мм подходящим минимумом для размера точки соприкосновения.

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

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

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

Обозначьте кнопки их действием. Точно укажите что произойдет после ее нажатия.

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

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

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

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

Будьте последовательны в создании элементов контроля интерфейса что бы пользователь мог распознать и идентифицировать элементы пользовательского интерфейса как кнопки.

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

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

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

Поднятые кнопки лучше выделяются, чем плоские. Пример для приложения Android.

Плоские кнопки должны только заполнятся цветом при нажатии. Главное преимущество плоских кнопок — они меньше отвлекают от контента.

В диалогах (чтобы объединить действие кнопки с контентом диалог). Плоская кнопка.

В тулбарах

Расположите их снизу, что бы пользователь сразу их нашел

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

3. Переключатель

Такая кнопка позволяет пользователю изменять опцию между двумя (или более) положениями.

Самые простые переключатели используются в настройках в качестве кнопки вкл\выкл.

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

• Иметь по крайней мере три переключателя в группе
• Быть помечены текстом, иконкой или и тем, и другим

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

• Очень важно правильно подобрать иконку к кнопке. Я подробно об этом рассказал в статье «Иконки, как часть отличного опыта взаимодействия». Пример Apple iOS использует переключатели для раздела настроек.

• 4. Призрачные кнопки

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

Использование

• Использование призрачных кнопок для призыва к действию — не самая лучшая идея. На примере Bootstrap видно, что кнопка «Скачать» выглядит так же, как и основной логотип, что может запутать пользователя.

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

• Поведение
• Обычное состояние (слева), и состояние в фокусе (справа).

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

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

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

Парящие кнопки используются для способствования действию.

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

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

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

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

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

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

-Это кнопка, или нет? Теперь придется кликнуть, что бы это понять…

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

Главное правило этого состояния — кнопка должна выглядеть как кнопка в нормальном состоянии.

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

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

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

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

Плюсы скрытия кнопки:

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

Плюсы использования неактивного состояния:

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

Заключение

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

Источник

Дизайн кнопок. Все, что вы хотели узнать

12 советов о дизайне кнопок в интерфейсе

1. Различайте кнопки и ссылки. У них разное предназначение. Их схожесть в интерфейсе будет путать пользователя.

2. Продумайте варианты состояния кнопок. Активна ли она, будет ли подсвечиваться при наведении? Поймёт ли пользователь, что кнопка сработала? – это те вопросы, на которые стоит ответить заранее.

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

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

5. Решите, точно ли нужно пользователям действие «по умолчанию». Иногда такой вариант может привести к ошибкам пользователей и, как следствие, негативу в сторону продукта.

6. Применяйте стандарты при проектировании элементов. Таким образом пользователю не нужно сильно задумываться над взаимодействием и терять время (и нервы).

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

8. Сделайте достаточно большие кнопки. Лучший вариант – от 48х48 dp, что обеспечит в реальных параметрах оптимальный размер – 9 мм.

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

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

11. Не беспокойтесь о порядке размещения кнопок «Оk» и «Отмена». В любом случае они будут работать одинаково.

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

Дизайн кнопки для сайта: рекомендации веб-дизайнера

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

Пропорции кнопок для сайта

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

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

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

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

На мой взгляд, наиболее удачные пропорции:

• Надпись на кнопке, к примеру: 16px;
• Отступ сверху и снизу: 16px;
• Отступ справа и слева: 16px или по 32px.

Выравнивание текста в кнопке

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

Как выровнять надпись в кнопке по центру?

Для выравнивания надпись зажмите клавишу Shift и выделите два слоя в панели слоев (слой с надписью и слой с фоном). Далее выберите инструмент «Перемещение V» и на верхней панели нажмите по очереди две кнопки «Выравнивание центров по вертикали» и «Выравнивание центров по горизонтали».

Если у вас надпись на кнопке заглавными буквами то все будет отлично, но если первая буква заглавная, а остальные прописные то необходимо надпись отпустить на 1-2 пикселя вниз, проверьте линейкой. Также учтите, что если текст написан как блочный и у вас останется пустое место снизу, сверху или сбоку надпись выровняется не по центру.

Радиус скругления углов

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

Также бывают и другие нюансы, например, плохое сочетание цвета фона кнопки и надписи. Что в свою очередь приводит к плохой читабельности.

Надеюсь, этот небольшой материал по созданию кнопок для сайта будет вам полезен.

Все, что вам нужно знать о дизайне кнопок в интерфейсе

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

Чтобы спроектировать правильное взаимодействие, нам нужно взглянуть на историю и происхождение физических кнопок – прямого предшественника компонента интерфейса, который сегодня широко используется во всех цифровых продуктах. Кнопки потрясающие. Прикосновение пальца приводит в движение прибор, автомобиль или систему, даже, если пользователь не понимает лежащие в основе их работы механизмы или алгоритмы. В своей книге «Power Button» Рэйчел Плотник прослеживает истоки современной культуры использования кнопок и описывает, как нажатие кнопок стало средством цифрового управления, обещающее легкость, компактность и надежность.

«Вы нажимаете кнопку, а мы делаем все остальное», – так, посредством броского и четкого слогана, Kodak обратились к потенциальным покупателям своих фотоаппаратов.

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

Кнопки vs Ссылки

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

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

Состояние кнопки сообщает ее статус пользователю

7 дней дизайн-перезагрузки

Мощнейние спикеры, самое дружелюбное дизайн-комьнити и желание делать клевый дизайн.
Скидка 10% по промокоду UXPUB

Присоединиться

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

Normal — сообщает, что компонент интерактивен и включен.

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

Hover — сообщает, когда пользователь навел курсор на интерактивный элемент.

Active — Активное или нажатое состояние сообщает о том, что пользователь нажал на кнопку.

Progress/Loading — используется, когда действие не выполняется немедленно и сообщает, что компонент находится в процессе завершения действия.

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

Кнопки бывают разных цветов, форм и размеров

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

Стили сообщают о важности действия

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

Иногда нет кнопки «по умолчанию»

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

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

Не заставляйте меня думать

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

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

Согласованность повышает скорость и точность

«Согласованность – это один из самых мощных принципов юзабилити: когда вещи всегда ведут себя одинаково, пользователям не нужно беспокоиться о том, что произойдет»

– Якоб Нильсен

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

Сделайте кнопки достаточно большими для надежного взаимодействия

Нажатие кнопки должно быть простой задачей, и, если пользователь не может успешно нажать на кнопку или по ошибке нажмет на соседний элемент, это приведет к отрицательному опыту и потере времени.

Для большинства платформ рассмотрите возможность создания сенсорных целей как минимум 48 x 48 dp. Сенсорная цель такого размера дает физический размер около 9 мм, независимо от размера экрана. Рекомендуемый целевой размер для сенсорных элементов составляет не менее 7–10 мм.

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

Проектируйте для доступности

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

Дизайнеры должны тесно сотрудничать с командами разработчиков, чтобы убедиться, что кнопки работают с программами чтения с экрана. Роль кнопки должна использоваться для кликабельных элементов, которые запускают ответ при активации пользователем. Добавление role=”button” приведет к тому, что элемент отобразится для программы чтения с экрана, как элемент управления кнопками.

Жесты становятся достаточно широко распространенными

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

Хорошая метка кнопки приглашает пользователей действовать

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

Хорошая метка кнопки приглашает пользователей действовать. Лучше всего использовать глаголы и пометить кнопку тем, что она на самом деле делает. Как будто кнопка спрашивает пользователя: «Вы хотите (добавить в корзину)?» или «Хотите (подтвердить заказ)?».

Избегайте использования «Да», «Нет» или слишком общих меток, таких как «Отправить».

Ok/Cancel или Cancel/Ok? Оба варианта хороши

Оба варианта – идентичны, и дизайнеры могут часами спорить о своих предпочтениях.

• Размещая на первом месте действие OK, вы поддерживаете естественный порядок чтения. Это может помочь сэкономить время, если мы знаем, что, скорее всего, именно это и выберет пользователь. Windows ставит ОК на первое место.
• Размещая кнопку OK в конце, вы улучшаете юзерфлоу. Кто-то может поспорить, что OK, как кнопка «Следующий», переместит пользователя вперед. Если поставите OK в конце, вы поможете пользователям оценить все варианты, прежде чем предпринимать действия, и поможете избежать ошибок и поспешных решений. Apple ставит ОК на последнее место

Любой из вариантов имеет аргументы в свою пользу, и ни один из этих вариантов не приведет к катастрофическим последствиям для юзабилити. Я в основном ставлю ОК в списке действий на последнее место. Например, в диалоговом окне (возможно, потому что я преимущественно использую Mac).

Отключенные кнопки – отстой

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

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

О каких компонентах вы хотели бы узнать в следующей статье? Дайте знать в комментариях.

7 основных правил проектирования кнопок

Дизайн и проектирование лучших кнопок

PS: Я хочу убедиться, что мой контент доступен, как можно большему количеству читателей. Если вам понравилась статья, не стесняйтесь поддержать автора на  Patreon https://www.patreon.com/tarasbakusevych.

советы по созданию, типы и состояния / Хабр

Ник Бабич разработчик, UX/UI специалист написал заметку в блоге UX Planet про

UX-дизайн кнопки: советы по созданию, типы и состояния

. Наша команда выполнила перевод данной статьи

Кнопки – это самый обычный, «повседневный» элемент дизайна взаимодействия. Именно поэтому на них нужно обратить особое внимание, ведь кнопки являются важнейшим элементом, обеспечивающим беспрепятственное взаимодействие в сети и приложениях. Мы обсудим типы и состояния кнопок — эту информацию нужно знать, чтобы создавать эффективные кнопки и совершенствовать опыт пользователя.

Советы по созданию кнопок

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

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

Очень тщательно продумайте размер зоны прикосновения и внутреннего поля. Размер кнопок также помогает пользователю понять, что это за элемент. Каждая платформа дает свои рекомендации в отношении минимального размера зоны прикосновения. Результаты исследования, проведенного MIT Touch Lab, показали, что средний размер для прикосновения подушечками пальцев составляет 10-14 мм, а для кончиков пальцев — от 8 до 10 мм, при этом наиболее оптимальный минимальный размер зоны прикосновения будет 10Х10 мм.

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

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

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

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

Надписи

Надписи на кнопках должны означать действие, которое выполняет кнопка. Четко опишите, что произойдет при ее нажатии.

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

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

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

Форма кнопки

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

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

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

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

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

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

Применение

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

Поведение

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

Пример

Объемные кнопки выделяются на фоне плоских. Пример приведен для приложения Android.

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

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

Применение

В диалоговых окнах (чтобы соблюсти единство действия кнопки и контента)

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

Расположение снизу, чтобы пользователь быстрее их нашел

Поведение

Пример

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

3. Переключатель

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

Применение

Почти все переключатели применяются в качестве кнопок Вкл\Выкл.

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

· В группе должно быть не менее трех кнопок

· На кнопках должен быть текст, иконка или и то, и другое.

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

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

Пример

В Apple iOS переключатели использованы в разделе «Настройки».

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

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

Применение

Пожалуй, не стоит использовать контурные кнопки для призыва к действию. Вот, посмотрите на Bootstrap. Контурная кнопка «Скачать» ничем не отличается от главного логотипа, что может запутать пользователей.

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

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

Поведение

Пример

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

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

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

Применение

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

Поведение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Преимущества скрытой кнопки:

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

Преимущества использования неактивного состояния:

• Показать возможность действия. Даже если кнопка не используется, пользователь знает, что действие возможно. Можно даже сделать подсказку и объяснить критерии использования.

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

Заключение

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

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

Основные виды кнопок пользовательского интерфейса

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

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

Данный пост является переводом этой статьи от Tubik Studio.

Что такое кнопка в интерфейсе?

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

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

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

Далее, рассмотрим типы кнопок, наиболее широко применяемых в мобильных и веб-интерфейсах.

Кнопка призыва к действию CTA (Call-To-Action)

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

Технически CTA-кнопка может быть реализована разными способами, но она должна поддерживается текстом с определенным призывом. Ее главное отличие от всех других кнопок вокруг – способность привлекать внимание. Она заметно выделяется на странице/экране и стимулирует пользователей к выполнению необходимых действий.

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

Текстовая кнопка

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

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

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

Этот изящный дизайн разработан для онлайн-магазина модной одежды. Как видите, интерактивная часть интерфейса основана на текстовых ссылках. Здесь лишь один объект с призывом к действию (Shop new arrivals) представлен легко распознаваемой кнопкой, а все остальные в хедере и вкладках — отличаются только текстом о предложениях магазина. Такой подход к оформлению поддерживает легкий и минималистский дизайн веб-страницы.

Кнопка с выпадающим списком

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

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

Кнопка «Гамбургер»

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

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

Активные пользователи интернета заранее знают, что кнопка-гамбургер скрывает различные категории или дополнительный контент, и им не нужны объяснения/подсказки по поводу этой функции. Она заметно освобождает пространство, делая интерфейс еще более минималистским и легким + экономится место для других важных деталей макета. С ее помощью возможно реализовать адаптивный дизайн со скрытыми навигационными элементами и интерфейсом, который гармонично выглядит на разных устройствах.

Аргументы против гамбургер-меню основаны на том, что оно может сбивать с толку людей, которые не так часто посещают веб-сайты – их может ввести в заблуждение знак, выглядящий слишком абстрактно. Это в свою очередь вызовет проблемы с навигацией и станет причиной формирования неудачного опыта при посещении сайта. Таким образом, решение об использовании кнопки-гамбургера следует принимать лишь после исследования целевой аудитории и определения ее возможностей и потребностей.

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

Кнопка-плюс

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

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

Кнопка с выбором вариантов

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

В пример показано приложение Travel Planner, где центральным интерактивным элементом на панели вкладок является кнопка-плюс (рассмотренная в предыдущем пункте), позволяющая человеку добавить новую экскурсию или новую услугу к определенному туру. Однако, чтобы упростить работу, она преобразуется в набор доп.кнопок, соответствующих определенным типам контента. Это дает возможность посетителю в самом начале сделать правильный выбор и быстро найти нужный экран.

Кнопка «Поделиться»

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

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

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

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

Призрачная кнопка

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

В качестве примера представлена форма логина и регистрации приложения ресторана. Здесь вы видите 3 типа кнопок:

1. основная CTA-кнопка представлена заполненным элементом как наиболее простой способ быстрой регистрации;
2. призрачная — обеспечивает доступ к менее известному варианту;
3. текстовая — в виде ответа на вопрос выделена цветом и интегрирована в строку внизу экрана.

Подобный подход в дизайне помогает реализовать четкую иерархию интерактивных объектов/элементов на экране.

Плавающая кнопка действия (FAB)

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

• выполнять обычное целевое действие (открывать новое письмо электронной почты; открывать экран для добавления фото или видео; выполнять поиск нужного контента в галерее и т. д.)
• показать дополнительные доступные действия
• трансформироваться в другие UI-элементы.

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

В этом примере для приложения Travelersdiary для взаимодействия имеются: панель управления в нижней части экрана, FAB-кнопка и прокручиваемый список.

Факторы, определяющие эффективность дизайна кнопок UI

Размер

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

Лидеры рынка часто в своих руководствах дают рекомендации по размерам, например:

• Apple считают, что размер кнопок CTA в мобильном интерфейсе должен быть не менее 44х44 пикселей;
• Microsoft рекомендует значение = 34х26 пикселей.

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

Цвет

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

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

Форма

Если речь идет о Call To Action элементах, то они обычно имеют форму прямоугольника. Она помогает ясно понять, что кнопка является кликабельной и интерактивной + пользователи привыкли воспринимать объект прямоугольной формы как кнопку.

Рекомендуется проектировать CTA-кнопки с закругленными углами – они помогают направить взгляд внутрь и привлечь внимание к тексту. Безусловно, выбранная форма должна гармонично сочетаться с общей стилистической концепцией веб-страницы или экрана мобильного приложения.

Местоположение

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

Текст

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

Например:

Ниже представлен дизайн целевой страницы сайта дошкольного учреждения.

Рассмотрим все кнопки, используемые на странице:

• Основная Call To Action кнопка приглашает посетителей присоединиться, она мгновенно привлекает внимание: дизайнер использовал прямоугольную форму с закругленными краями. Яркий цвет кнопки контрастирует с фоном и визуально связывает ее с анимационным hero image изображением – самым заметным визуальным элементом на странице. Поддерживающий CTA-текст набран заглавными буквами и легко читаемым шрифтом.
• В хедере размещены 4 текстовые кнопки, которые помогают пользователям перейти к самым важным разделам контента на веб-сайте.
• В левой части хедера находится хорошо заметная дополнительная CTA-кнопка, которая позволяет уже зарегистрированным юзерам входить в свои учетные записи.
• Кнопки «Поделиться» имеют круглую форму и не слишком резко контрастируют с фоном – их легко увидеть, но при этом они не отвлекают внимание от основных объектов.

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

Дизайн кнопок для веб-сайтов и мобильных приложений

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

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

Дизайн кнопок, которые помогают пользователям с небольшой помощью Justinmind

Загрузите бесплатную версию

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

Основные правила дизайна кнопок

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

1. Сделайте его интерактивным

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

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

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

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

2. Упростите поиск и прогнозирование

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

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

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

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

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

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

3. Сообщите пользователям, что делает каждая кнопка. Не заставляйте их угадывать.

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

Текст внутри кнопки не нужно ограничивать «ОК» и «Отмена». Фактически, ваше удобство использования улучшится, если отложить эти общие термины в сторону и сосредоточиться на действии, которое выполняет каждая кнопка. Наличие кнопок с надписью «Удалить навсегда» или «Отменить бронирование» может гарантировать, что ваши пользователи понимают каждую кнопку, и даже повысить удобство использования, уменьшив вероятность ошибок пользователей.

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

4. Размер имеет значение: есть кнопки, на которые люди могут нажимать

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

Размер вашей кнопки особенно важен для мобильного дизайна. Слишком большая кнопка приведет к визуально заряженному экрану, в то время как слишком маленькая кнопка не может быть нажата обычным пальцем.В 2003 году Touch Lab Массачусетского технологического института опубликовала исследование, которое показало, что большинство кончиков пальцев имеют ширину 8–10 мм.

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

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

5. Не используйте кнопку для всего.

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

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

Дизайн кнопок

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

6. Всегда предоставляйте обратную связь или рискуйте гневом пользователя

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

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

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

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

Дизайн мобильных кнопок в приложениях для Android и iOS

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

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

1. Придерживайтесь основных принципов дизайна пользовательского интерфейса

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

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

Когда «касание» является основным методом ввода для вашего мобильного приложения, принципы материального дизайна Android рекомендуют, чтобы цели касания были не менее 48 x 48 точек на дюйм и не менее 8 точек на дюйм (или более) между ними. Это необходимо для обеспечения сбалансированной плотности информации и удобства использования.

С точки зрения формы, это действительно зависит от того, для чего вы проектируете. Например, в дизайне пользовательского интерфейса Android плоские и выпуклые кнопки материала должны иметь высоту 36dp, минимальную ширину 88dp и радиус угла 2dp (плоский) / иметь высоту по умолчанию 2dp (поднятый).

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

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

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

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

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

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

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

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

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

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

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

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

4. Поощряйте пользователей визуальной обратной связью в дизайне кнопок пользовательского интерфейса.

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

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

Изменение цвета кнопки покажет пользователям, что их действие было принято. Тонкая анимация и движение сообщат о намерении кнопки и побудят пользователя выполнить этот щелчок — счастливый пользователь, счастливых вас!

Тестирование дизайна кнопок

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

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

Мы всегда выступаем за создание быстрых каркасов базовых элементов вашего продукта и начинаем проверять, имеет ли смысл навигационная и информационная архитектура.Вооружившись каркасом, вы можете начать какое-либо пользовательское тестирование, чтобы ответить на основные вопросы, например:

• Могут ли пользователи найти все основные функции?
• Сколько времени в среднем у них уходит на каждую функцию?
• Понимают ли пользователи, как каждая функция соотносится с другими в важных вопросах?
• Логична ли навигация для пользователей?

Когда дело доходит до тонкой настройки дизайна кнопок, возможно, немногие методы столь же полезны, как A / B-тестирование. Особый фаворит среди маркетологов для кнопок CTA, этот вид тестирования заключается в тестировании двух разных версий одной и той же кнопки и сравнении их эффективности.Если ваша команда хочет протестировать множество различных дизайнов кнопок одновременно, многовариантное тестирование может быть более быстрым и практичным вариантом.

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

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

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

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

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

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

Этот набор пользовательского интерфейса уже предустановлен в Justinmind, но если хотите, обратите внимание на компоненты библиотеки Web Wireframing.

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

Вы можете узнать больше о наборе пользовательского интерфейса Bootstrap во всей его красе в нашем специальном посте.

Kendo UI kit — это забавный инструмент, который всегда в вашем распоряжении. На нем есть кнопки всех размеров, как основных, так и дополнительных.Благодаря нескольким вариантам размера создание вашего следующего UX-дизайна будет намного проще и быстрее с Kendo. Не говоря уже о том, что нам просто нравится дизайн кнопок на группе кнопок!

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

Заставьте посетителей нажимать на ваши кнопки

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

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

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

Анатомия идеальной кнопки

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

Анатомия пуговицы

Чего следует избегать при разработке кнопки

Кнопки, не похожие на кнопки

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

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

• Квадратная кнопка с заливкой
• Круглая кнопка с заливкой
• Круглая кнопка с заливкой и тенями
• Кнопка с контуром / призраком

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

Примеры распространенных дизайнов кнопок

Расплывчатые или вводящие в заблуждение надписи на кнопках

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

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

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

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

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

— Якоб Нильсен

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

Кнопки дизайна, которые имеют такие состояния, как:

• Основное состояние — кнопка интерактивна и готова к использованию
• Активно — Пользователь нажал кнопку
• Hoover — Курсор помещен над интерактивным элементом
• Сфокусирован — Кнопка была выделена с помощью клавиатура
• Выполняется — Действие обрабатывается
• Отключено — Кнопка не интерактивна

Различные состояния кнопок

Неподходящий дизайн кнопок

«Последовательность — один из самых действенных принципов удобства использования: когда все работает одинаково, пользователям не нужно беспокоиться о том, что произойдет.»- Якоб Нильсен

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

Согласованный и несовместимый дизайн кнопок

Использование слишком большого количества кнопок

«Практическое правило для UX: больше возможностей, больше проблем.”

— Скотт Бельски, директор по продуктам

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

Иерархия кнопок и действия

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

CTA

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

Общие CTA включают кнопки веб-сайтов, такие как UXPin, у которых есть очень заметная кнопка CTA «Присоединяйтесь бесплатно» с высокой цветовой контрастностью.

Отличная кнопка CTA

Психология, лежащая в основе эффективной копии кнопки CTA

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

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

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

Используйте точный язык : Не допускайте ошибок в интерпретации. Не говорите «Удалить», если «Удалить» было бы гораздо лучше.

Используйте язык, подтверждающий действие пользователя. : Используйте слова, которые определяют действие, которое пользователь собирается предпринять, например «Опубликовать», а не просто «Отправить». Это устраняет неуверенность и дает пользователю уверенность в своих действиях.

Используйте императивы : Императивы превращают фразы в команды. Они сокращают количество слов на копии кнопки, облегчая чтение. Вместо «Да, создать мою учетную запись» просто используйте «Создать учетную запись».

Основные действия

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

Вторичные действия

Вторичные действия — это альтернативы первичным действиям. Они включают кнопки «назад» и «отмена». Эти кнопки веб-сайта должны иметь меньшую визуальную заметность, чтобы снизить риск ошибки и побудить к позитивным первичным действиям.

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

Третичные действия

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

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

Рекомендации по стилям, цвету и дизайну кнопок

Форма кнопки

Лучшая практика для формы веб-кнопок — использовать квадратные кнопки или квадратные кнопки с закругленными краями.Эти формы кнопок рекомендуются, потому что пользователи могут легко распознать их как кнопки.

Существуют и другие формы кнопок, которые можно использовать, но их следует использовать осторожно, поскольку некоторые пользователи могут их не распознать. В их числе:

Круглые кнопки : это кнопки с закругленными краями.

Пуговица круглая

Кнопки-призраки / линии : это кнопки без сплошной заливки. Их лучше всего использовать для второстепенных действий.

Кнопка линии

Плавающие кнопки действий (FAB) : Эта кнопка используется для основных действий.

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

Кнопки с пиктограммами и ярлыками : Эти кнопки имеют как пиктограмму, так и ярлык.

Значок и кнопка с надписью

Кнопки с пиктограммами : Поскольку эти кнопки не имеют ярлыков, их легко складывать друг с другом.

Значок кнопки

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

Цветовые палитры

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

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

Язык цвета

Размещение кнопок и макет страницы

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

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

Размещение кнопок

Дизайн кнопок с лучшими инструментами пользовательского интерфейса

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

13 последних и лучших дизайнов кнопок, которые нельзя пропустить в 2018 году

Кнопки

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

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

ОК! Вот 13 последних и лучших практик кнопок , которые вы не можете пропустить в 2018 году. И надеюсь, они могут вас как-то вдохновить:

1. FAB Microinteraction

* Дизайнер: Mayur Kshirsagar

* Основные моменты: Очень круто плавать Кнопка навигации и хорошо продуманный дизайн навигации Circle

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

* Что вы можете узнать:

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

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

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

2. Интерактивный дизайн кнопок ввода

* Дизайнер ： Knarik & Robert

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

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

* Что вы можете узнать:

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

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

3. Микровзаимодействие для кнопки печати

* Дизайнер: Quovantis

* Основные моменты: используйте «кнопку + анимацию», чтобы более наглядно показать функции кнопок

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

* Что вы можете узнать:

Добавьте яркую анимацию к вашим кнопкам на основе различных меток кнопок, функций и сценариев

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

4. Микровзаимодействие

* Дизайнер ： Альваро Сечилла

* Основные моменты: привлекательные эффекты наведения для кнопок

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

* Что вы можете узнать:

Оптимизируйте дизайн кнопок с богатыми эффектами наведения или взаимодействия

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

5. Кнопка / загрузчик динамической загрузки

* Дизайнер: ali said

* Особенности: идеальное сочетание кнопок загрузки и индикаторов выполнения

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

* Что можно узнать:

Улучшите дизайн кнопок загрузки с помощью правильной анимации загрузки

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

6. Анимация скользящей кнопки

* Дизайнер: Serhad iletir

* Основные моменты: умная скользящая кнопка и цветовой градиент

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

* Что вы можете узнать:

Улучшение скользящих кнопок с изменением цвета, непрозрачности, формы и многих других визуальных свойств

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

7.Microinteraction 04

* Дизайнер: Alvaro Secilla

* Основные моменты: материализуйте кнопку CTA в сочетании функций и функций кнопок

Microinteraction 04 придает кнопке CTA материализованный вид, динамичный скейтборд вместе с этикеткой, которая гласит «Изучите новые приемы», которые позволяют пользователям более интуитивно и четко понимать функции и особенности этой кнопки. И такие дизайнерские стратегии действительно вдохновляют и заслуживают подражания в вашем дизайне.

* Что вы можете узнать:

Создайте материализованный вид кнопок, чтобы их было легче понять

8. Чехлы для кнопок сенсорного экрана

* Дизайнер: Халил Ханна

* Основные моменты : Упростите дизайн кнопок с помощью изменения цвета, значков и фоновых фотографий

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

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

* Что вы можете узнать:

Оптимизируйте свое веб-приложение с помощью упрощенного, но не утомительного дизайна кнопок

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

9. Poodle Switch

* Дизайнер: Ванесса Браун

* Выделение: симпатичная скользящая кнопка и творческие переходы между 2D и 3D эффектами

Poodle Switch показывает симпатичные скользящие кнопки с великолепными визуальными эффектами. Кнопка со значком милого пуделя трансформируется из 2D в 3D в процессе скольжения от одного конца к другому. А вместе с изменением текстовой метки кнопок, весь дизайн становится действительно интуитивно понятным, чтобы пользователи четко знали функции этой кнопки.

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

* Что вы можете узнать:

Улучшите дизайн кнопок веб / мобильных приложений с помощью 3D / 2D и скользящих эффектов

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

10. Меню

* Дизайнер: Олег Фролов

* Особенности: Уникальный переключатель / кнопки меню

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

* Что вы можете узнать:

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

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

11. Может ли кто-нибудь нажать на нее

* Дизайнер: Мехди Махдлоо

* Основные моменты: Очень заманчивая микрокопия

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

* Что вы можете узнать:

Добавьте привлекательную микрокопию на свой веб-сайт / кнопки мобильного приложения

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

12. Элементы пользовательского интерфейса

* Дизайнер: Мэтт Бонини

* основные моменты: отличное сочетание кнопок-призраков и плоских кнопок

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

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

* Что вы можете узнать:

Улучшите дизайн своего веб-сайта / приложения с помощью кнопок-призраков и плоских кнопок

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

13. Реалистичные кнопки

* Дизайнер: Тоби Сантасо

* Основные моменты: реалистичные кнопки и крутой светящийся эффект

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

* Что вы можете узнать:

Добавьте реалистичные кнопки, чтобы усилить ощущение знакомства

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

Mockplus поможет вам легко и быстро создать и протестировать дизайн кнопок веб / мобильных приложений

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

Однако проблема в том, что вы просто не знаете, какой инструмент прототипирования подойдет вам лучше всего? Не волнуйтесь! Mockplus , более простой и быстрый инструмент для создания прототипов с мощными функциями, станет вашим лучшим выбором для тестирования и улучшения дизайна кнопок вашего веб-сайта / мобильного приложения:

Step1. Создавайте различные кнопки с разными компонентами кнопок

Каждому веб-сайту / мобильному приложению требуется множество кнопок с разным внешним видом, формами и стилями.Это, безусловно, потребует, чтобы используемый инструмент прототипирования мог предлагать пользователям больше возможностей или функций для создания всех необходимых типов кнопок для оптимизации дизайна их интерфейсов. Mockplus предлагает множество компонентов кнопок для дизайнеров:

* Используйте компоненты «Button» для создания основных кнопок, например кнопки CTA

* Используйте компоненты «Icon Button» для создания кнопок с иконками

* Используйте «Icon and Label» компоненты для создания кнопок со значками и метками

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

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

Шаг 2. Добавьте кнопки со специальными фоновыми фотографиями с помощью компонентов «Изображение»

Вам нужно добавить несколько хорошо продуманных фоновых фотографий, чтобы создать уникальный дизайн для ваших кнопок? В Mockplus для этого можно легко использовать компоненты «Кнопка» и «Изображение» вместе.

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

Шаг 3. Добавьте заманчивую микрокопию с компонентами «Этикетка» и «Текстовая область»

Заманчивая микрокопия играет важную роль в привлечении внимания пользователей и побуждении их щелкнуть мышью. С Mockplus вы можете легко добавить компоненты «Ярлык» и «Текстовая область», чтобы настроить идеальный текст для дизайна ваших кнопок.

Шаг 4. Сохранение, повторное использование и совместное использование стилей кнопок с помощью «Component Style»

В дизайне веб-сайтов / мобильных приложений дизайнеры часто повторно используют стили различных кнопок.Это не только экономит драгоценное время дизайнеров, но и позволяет им улучшить внешний вид. В Mockplus вы можете использовать « Component Style » для свободного сохранения, повторного использования и обмена стилями кнопок одним щелчком мыши.

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

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

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

Шаг 6. 8 способов протестировать и поделиться дизайном кнопок

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

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

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

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

Заключение

Итак, как важный элемент веб-приложения или мобильного приложения, кнопки также могут быть сложными, даже если они могут выглядеть очень простыми и незамысловатыми. Вот почему опытный дизайнер UX / UI всегда должен пытаться создавать разные кнопки разными способами, основываясь на разных функциях, сценариях и многом другом.

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

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

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

Как создавать лучшие кнопки — Smashing Magazine

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

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

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

Дополнительная литература по SmashingMag:

Сделать кнопки похожими на кнопки

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

Больше после прыжка! Продолжить чтение ниже ↓

Форма

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

Windows 95 при первом запуске: обратите внимание, что каждая кнопка, включая знаменитую кнопку «Пуск», имеет прямоугольную форму.Изображение предоставлено Википедией. (Большой превью)

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

Здесь плавающая кнопка действия (FAB), которая представляет основное действие в приложении Android, имеет форму значка в кружке.

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

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

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

Нет ничего плохого в творчестве и экспериментировании, но сохраняйте целостность дизайна. (Превью в большом разрешении)

Тени и блики

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

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

Кнопки с четкой маркировкой

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

Четкие и отчетливые этикетки

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

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

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

Метка кнопки должна точно указывать, что произойдет, когда пользователь ее нажмет. Изображение предоставлено: Amazon

Положите кнопки, где пользователи могут их найти

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

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

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

Изображение предоставлено Apple. (Большой превью)

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

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

Упростите взаимодействие с кнопками для пользователей

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

Размер и набивка

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

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

Когда касание используется в качестве основного метода ввода для вашего приложения или сайта, вы можете положиться на исследование MIT Touch Lab, чтобы выбрать правильный размер для ваших кнопок. Это исследование показало, что средний размер подушечек пальцев составляет от 10 до 14 мм, а кончиков пальцев — от 8 до 10 мм, что делает 10 мм x 10 мм оптимальным минимальным размером сенсорной мишени. Когда мышь и клавиатура являются основными методами ввода, размеры кнопок можно немного уменьшить, чтобы обеспечить плотный пользовательский интерфейс.

10 мм x 10 мм — хороший минимальный размер сенсорной мишени.Изображение предоставлено: uxmag

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

Вот пример заполнения между кнопками. Изображение предоставлено: Material Design. (Большой превью)

Обеспечьте визуальную обратную связь

Это требование не касается того, как кнопка изначально выглядит для пользователя; речь идет об опыте взаимодействия с элементом пользовательского интерфейса.Обычно кнопка не является объектом с одним состоянием. Он имеет мультисостояния, и , обеспечивающий визуальную обратную связь для пользователей, чтобы указать, что текущее состояние должно быть задачей высшего приоритета. Эта полезная иллюстрация из Material Design показывает, как передать различные состояния кнопок:

Убедитесь, что вы учитываете наведение, нажатие и активное состояние кнопки. Изображение предоставлено: Material Design. Эта анимация показывает поведение кнопки в действии. Изображение предоставлено Behance. (Превью в большом разрешении)

Визуальное выделение наиболее важных кнопок

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

Кнопка призыва к действию

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

Если мы посмотрим на пользовательский интерфейс Gmail, то интерфейс очень простой и почти одноцветный, за исключением кнопки «Отправить». Как только пользователи заканчивают писать сообщение, они сразу же замечают эту красивую синюю кнопку.

Добавление одного цвета к пользовательскому интерфейсу в оттенках серого просто и эффективно привлекает внимание.

То же правило работает для веб-сайтов. Если вы посмотрите на пример Behance ниже, первое, что привлечет ваше внимание, — это кнопка с призывом к действию «Зарегистрироваться». Цвет и положение в данном случае важнее текста.

На фоне выделяется самая важная кнопка призыва к действию. (Превью в большом разрешении)

Визуальные особенности основных и дополнительных кнопок

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

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

Обратите внимание, что основное действие усиливается по цвету и контрасту. Изображение предоставлено Apple. (Превью в большом разрешении)

Контрольный список дизайна кнопок

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

• Опознают ли пользователи ваш элемент как кнопку? Подумайте о том, как дизайн передает аффорданс. Сделайте кнопку похожей на кнопку (для этого используйте размер, форму, тени и цвет).
• Содержит ли ярлык кнопки четкое сообщение о том, что произойдет после нажатия? Часто лучше назвать кнопку, объясняя, что она делает, чем использовать общий ярлык (например, «ОК»).
• Может ли ваш пользователь легко найти кнопку? Место на странице, где вы размещаете кнопку, так же важно, как ее форма, цвет и метка на ней. Учитывайте путь пользователя по странице и размещайте кнопки так, чтобы пользователи могли их легко найти или ожидать.
• Если у вас есть две или более кнопок в вашем представлении (например, диалоговое окно), имеет ли кнопка с основным действием самый сильный визуальный вес? Проведите четкое различие между двумя вариантами, используя для каждой кнопки разный визуальный вес.

Если посмотреть на визуальное различие для кнопки «Отправить», она должна визуально преобладать над другой кнопкой. Изображение предоставлено: Lukew

, Заключение

.

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

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

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

Рекомендуемая литература

Эта статья является частью серии UX-дизайна, спонсируемой Adobe. Недавно представленное приложение Experience Design предназначено для быстрого и гибкого процесса проектирования UX, создания прототипов интерактивной навигации, а также их тестирования и обмена — все в одном месте.Вы можете ознакомиться с другими вдохновляющими проектами, созданными с помощью Adobe XD, на Behance, а также посетить блог Adobe XD, чтобы оставаться в курсе и быть в курсе. Adobe XD часто обновляется новыми функциями, и, поскольку он находится в общедоступной бета-версии, вы можете загрузить и протестировать его бесплатно.

(мс, иль, аа)

7 основных правил дизайна кнопок. Ник Бабич | Автор: Ник Бабич

Изображение: Gal Shir

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

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

Но как пользователи понимают, является ли определенный элемент интерактивным или нет? Они используют предыдущий опыт и визуальные обозначения, чтобы прояснить значение объекта пользовательского интерфейса.Вот почему так важно использовать соответствующие визуальные обозначения (такие как размер, форма, цвет, тень и т. Д.), Чтобы элемент выглядел как кнопка. Визуальные обозначения имеют важную информационную ценность — они помогают создать аффордансов в интерфейсе.

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

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

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

Не думайте, что что-то в вашем пользовательском интерфейсе очевидно для ваших пользователей.

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

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

Используйте знакомый дизайн кнопок

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

• Кнопка с заливкой с квадратными границами
• Кнопка с заливкой и закругленными углами
• Кнопка с заливкой с тенями
• Кнопка-призрак

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

Не забывайте о пробеле

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

Как пользователь, вы не можете сказать, коробка это или кнопка.

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

Максимально используйте традиционные макеты и стандартные шаблоны пользовательского интерфейса

Обычное размещение кнопок улучшает их обнаружение. Благодаря стандартному макету пользователи легко поймут назначение каждого элемента — даже если это кнопка без сильных указателей.Сочетание стандартного макета с чистым визуальным дизайном и большим количеством пробелов делает макет более понятным.

Не играйте со своими пользователями в игру по нажатию кнопки

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

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

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

Расплывчатый ярлык «ОК» не слишком много говорит о кнопке действия.

Непонятно, что означают «ОК» и «Отмена» в этом диалоговом окне.Большинство пользователей спросят себя: «Что происходит, когда я нажимаю« Отмена »?»

Никогда не создавал диалоговое окно или форму, которые состояли бы только из двух кнопок «ОК» и «Отмена».

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

«Удалить» поясняет, что делает кнопка для пользователей. Потенциально опасное действие «Отключить карту» в этом интерфейсе окрашено в красный цвет.Изображение: Ramotion

Размер кнопки должен отражать приоритет этого элемента на экране. Большая кнопка означает более важное действие.

Назначить приоритет кнопкам

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

Dropbox использует размер и цветовой контраст, чтобы привлечь внимание пользователя к кнопке с призывом к действию «Попробовать Dropbox Business бесплатно».

Сделайте кнопки удобными для мобильных пользователей

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

Слева: кнопка нужного размера. Справа: кнопки слишком маленькие. Изображение: исследование Apple

MIT Touch Lab показало, что в среднем подушечки пальцев составляют от 10 до 14 мм, а кончики пальцев — от 8 до 10 мм. Таким образом, минимальный размер мишени для касания составляет 10 x 10 мм.

Источник изображения: uxmag

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

Пользовательский интерфейс — это разговор с вашими пользователями

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

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

Слишком много кнопок.

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

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

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

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

Эта кнопка переводится в индикатор выполнения, чтобы продемонстрировать текущее состояние операции.Изображение: Colin Garven

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

Спасибо!

Подписаться на UX Planet: Twitter | Facebook

Первоначально опубликовано на babich.biz

Дизайн кнопок для Интернета — Руководство и примеры на 2020 год

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

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

Почему кнопки важны в UX?

По данным Якоба Нильсена и Nielsen Norman Group, пользователи читают примерно 20-28% веб-страницы при поиске информации, а Nielsen считает, что 20% более вероятны.И эксперты прогнозируют, что в наши дни продолжительность нашего внимания даже короче, чем у золотой рыбки — около 8,25 секунды.

Итак, где кнопки вписываются в это уравнение?

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

Веб-кнопки по годам

Как мы знаем, веб-дизайн сильно изменился за десятилетия. Загроможденные страницы с текстом и изображениями, анимированные гифки «в стадии разработки» и навигация по i-frame ушли в прошлое. Хотите прогуляться во времени? Взгляните на это ностальгическое путешествие по прошлому Интернета.

Как и Интернет в целом, веб-кнопки также изменили свое лицо и стиль. Серые кнопки с градиентами и закругленными краями господствовали почти десять лет назад благодаря смартфонам, таким как Apple iPhone, доминирующим в мире дизайна.

Когда плоский дизайн стал популярным в веб-мире в 2012 и 2013 годах, кнопки начали терять закругленные углы, тени и градиенты. Смартфоны, такие как Android и iPhone, также начали подбирать тенденции плоского дизайна.

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

Хотите узнать больше об эволюции веб-кнопок? Посмотрите этот график с примерами из Dribbble.

Разработка полезных состояний кнопок

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

Дизайн кнопки в ее различных состояниях так же важен, как и ее внешний вид.

Учитывайте состояния кнопок, такие как :

Активные или отключенные кнопки

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

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

Кнопки с фокусом

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

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

Кнопки состояния наведения

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

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

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

Кнопки, выбранные как ползунки

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

Рекомендации по дизайну веб-кнопок

Дизайн — это лишь часть того, что делает кнопку хорошей кнопкой в ​​Интернете. И действительно, в отношении дизайна не так много правил, если он доступен, согласован и работает для ваших пользователей. Но прошли те времена, когда текст «щелкните здесь» и кнопкам не хватало единообразного стиля и подхода. Учтите эти рекомендации при разработке веб-кнопок в 2020 году.

Соответствуйте своему дизайну и задокументируйте его

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

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

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

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

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

Не полагайтесь только на значки как на кнопки

Иконки могут быть отличными, если они являются частью принципов вашего бренда. При правильном использовании они могут быть четкими и преодолевать языковые барьеры. Однако будьте осмотрительны в использовании значков.

По словам Авроры Харли из Nielsen Norman Group, «понимание значка пользователем основано на предыдущем опыте. Из-за отсутствия стандартного использования для большинства значков текстовые метки необходимы для передачи значения и уменьшения двусмысленности.”

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

Используйте четкую и доступную копию

Легкая для понимания копия кнопки не означает, что вы должны воскресить «нажмите здесь». Доступные ссылки должны, прежде всего, описывать, куда ведет ссылка. Например, если кнопка ведет к загружаемой форме, копия в кнопке должна отражать это.

Короче говоря, глаголы — например, «Отправить», «Отправить», «Начать работу» — лучше всего подходят для кнопок с действием.

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

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

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

При разработке

учитывайте размеры (и досягаемость) кнопок.

Знаете ли вы, что средняя человеческая мужская рука имеет длину 7,6 дюйма и размах 3,5 дюйма? Может быть, нет, но вы можете захотеть узнать, почему это важно.

Размер кнопок — и место их попадания на экраны смартфонов и мобильных устройств — во многом влияет на UX.

• Если кнопка находится слишком далеко от одной стороны экрана, пользователь не сможет дотянуться до нее большим пальцем
• Если кнопка слишком мала, ее может быть трудно нажать большим или большим пальцем
• Плохая контрастность может затруднить просмотр кнопок и, следовательно, затруднить эффективное нажатие на них на мобильных устройствах

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

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

Доступность важна и для кнопок

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

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

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

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

Измерьте влияние кнопок

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

Но как именно можно эффективно протестировать кнопки на своем веб-сайте?

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

Бесплатные инструменты, такие как Google Analytics или Google Tag Manager, можно быстро и легко настроить для отслеживания обеих версий вашего CTA или кнопки для достижения наилучших результатов.

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

Кнопки эффективны при правильном использовании

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

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

3 простых совета по дизайну кнопок UX

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

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

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

Чтобы лучше обслуживать пользователей, мы разрабатываем наши кнопки в соответствии с тремя принципами дизайна:

Принципы

1. Идентифицируемый
2. В поисках
3. прозрачный

1. Идентифицируемый

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

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

Размер

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

Дизайн кнопок должен не только радовать глаз, но и иметь тактильный смысл для пользователя. В приведенном ниже примере мы видим, насколько проще пользователям взаимодействовать с большими кнопками. Следовательно, кнопки должны иметь размер касания не менее 38 на 38 пикселей.

Форма

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

2. Найти

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

В приведенных ниже примерах размещение призыва к действию на одном уровне с левой является более прямым и лучше сочетается с расположением входных данных. Этот шаблон простых для поиска кнопок с упором на доступность в цифровом формате и удобство для пользователей был применен при создании сайта San Jose Water.

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

3. Прозрачный

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

Цвет

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

Микроскопия

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

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

Иерархия

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

В приведенном ниже примере кнопки Добавить еще и Призыв к действию имеют одинаковый стиль и расположены близко друг к другу. Это, скорее всего, запутает пользователей и приведет к тому, что они выберут не ту кнопку, поскольку визуально они недостаточно отличаются друг от друга. Изменение дополнительной кнопки Добавить еще кнопку в выделенный стиль, также известную как «кнопка-призрак» со значком плюса, и добавление фона к разделу основной кнопки Призыв к действию делает различные функции более понятными для пользователя.

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

Тип

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

Текст

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

Призрак

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

Переключить

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

Плавающий

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

Заказать

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

Состояние

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

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

Обратная связь

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

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

Анимация встряхивания при ошибке, популяризированная Apple на устройствах iOS, является хорошим примером дизайна обратной связи:

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

Заметка о темных узорах

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

Другие темные узоры гораздо более вредны, например, кнопки отказа, которые добавляют в корзину товары, которые вы не собирались покупать. Эти шаблоны заслуживают отдельной публикации в блоге. На данный момент не забывайте ставить пользователей на первое место и вызывать темные узоры, когда вы их видите. Если вы в Твиттере, вы можете опубликовать примеры и упомянуть @darkpatterns или использовать хэштег #darkpatterns, чтобы привлечь внимание к этим неэтичным практикам.

Следующие шаги

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