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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 дизайн кнопок это узнаваемость и ясность. Думайте о вэбе или приложении как о беседе, начатой занятым пользователем. Кнопка играет критическую роль в этой беседе.

Источник

Шпаргалки 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, который помогает изучать пользователей

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

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

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

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

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

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

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

Предстоящие воркшопы

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

Предстоящие воркшопы

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

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

• Кнопка с фоном и квадратными углами
• Кнопка с фоном и закругленными углами
• Кнопка с фоном и тенью
• Прозрачная кнопка

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

Не забывайте о свободном пространстве

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

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

2. Размещайте кнопки там, где пользователи ожидают их найти

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

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

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

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

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

3. Кнопки с подписью

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

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

Неясная подпись «ОК» не говорит о действии, совершаемом кнопкой

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

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

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

Подпись «Удалить» четко сообщает пользователям о действииПотенциально опасное действие ‘Заблокировать карту’ окрашено в красный цвет. Изображение: Ramotion

4. Правильно подбирайте размер кнопки

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

Установите приоритетность кнопок

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

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

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

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

Слева: Кнопки подходящего размера. Справа: Кнопки слишком мелкие. Изображение: Apple

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

Изображение: uxmag

5. Позаботьтесь о порядке

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

Интерфейс – это разговор с вашими пользователями

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

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

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

7. Обеспечение визуального или звукового фидбека при взаимодействии

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

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

Пользовательский интерфейс обеспечивает визуальный фидбек, который фиксирует нажатие кнопки. Изображение: Vadim Gromov

Для некоторых операций, таких как загрузка, стоит не только подтвердить ввод, но и показать текущее состояние процесса.

Эта кнопка преобразуется в индикатор прогресса, чтобы продемонстрировать текущее состояние операции. Изображение: Colin Garven

Вывод

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

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

Ник Бабич разработчик, 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 дизайн кнопок это узнаваемость и ясность. Думайте о сайте или приложении как о беседе, начатой занятым пользователем. Кнопка играет критически важную роль в этой беседе.

Дизайн кнопок для фокуса, стандартного отображения и других состояний: примеры работы

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

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

1. По умолчанию

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

Также важно выбирать цвета с адекватным контрастом для большинства пользователей. Я использую приложение Contrast для тестирования моих проектов на соответствие WCAG 2.0:

2. Фокус

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

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

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

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

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

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

3. Раскрытие / Переключение / Выбор

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

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

4. Отключенные кнопки

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

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

5. Состояния наведения и активное

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

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

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

Теперь мы можем знать, какие эффекты будут пересекаться с другими состояниями:

Мы также знаем достаточно, чтобы изящно переходить между этими состояниями и подчеркивать их через цвет, масштаб и анимацию:

Это только верхушка айсберга…

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

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

Автор: Tyler Sticka

Источник: //cloudfour.com/

Редакция: Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

Типы кнопок UX и передовые методы

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

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

Общие типы кнопок UX

Кнопки

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

«Лучший способ обозначить кнопку — использовать визуальные подсказки».

Текстовые кнопки

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

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

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

Пуговицы приподнятые

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

Кнопки переключения

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

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

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

Вот пример кнопок с плавающим действием в Material Design (через Material Design).

Лучшие практики кнопки UX

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

Размер

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

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

Цвет

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

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

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

«Сделать пуговицу размером не менее 10 мм x 10 мм — отличное место для начала».

Форма

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

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

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

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

Размещение

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

Микроскопия

Микрокопия кнопки

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

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

По теме: Хорошая копия UX не обязательно должна быть короткой

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

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

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

Кнопки являются фундаментальным компонентом любого дизайна 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 (поднятый).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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, чтобы привлечь внимание к этим неэтичным практикам.

Следующие шаги

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

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

Сила прикосновения — эволюция дизайна кнопок (с инфографикой)

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

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

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

Была ли когда-нибудь кнопка столь широко известна, как кнопка Staples Easy Button?

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

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

Рычаги голосовых команд — Краткая история кнопок

Это может шокировать, но история кнопки относительно коротка и насчитывает 130–140 лет.За дополнительными сведениями мы обращаемся к Биллу Деруши, главному дизайнеру продуктов Zendesk.

Блог Деруши Push Click Touch содержит увлекательные детективные работы, которые проливают свет на извилистую предысторию кнопок и их интеграции в общество. Но настоящая жемчужина для дизайнеров и фанатиков кнопок — это его доклад « History of the Button ».

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

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

Так легко сделать это с помощью леденца — эта реклама RCA от декабря 1953 года продвигает удобство использования кнопок.

• В то же время кнопочные панели использовались для управления очень сложными машинами и автоматизированными системами, и росло ощущение, что взаимодействие с кнопками требует специальной подготовки.В популярной культуре кнопки даже изображались как излишне сбивающие с толку и вызывающие угнетение рабочей среды.
• В 1970-е годы в быстрорастущем мире домашних видеоигр появились простые кнопочные контроллеры, а кнопки заняли свое место в нашей психологии игры.
• К 1980-м годам виртуальные кнопки появились внутри компьютерных интерфейсов. Этими кнопками по-прежнему нужно было управлять с помощью физической кнопки (компьютерной мыши), и компании-разработчики программного обеспечения приложили все усилия, чтобы объяснить, как пользователи должны с ними взаимодействовать.
• С бумом доткомов 1990-х годов мы познакомились с новой формой кнопки — кнопкой без кнопок. В сети любой графический элемент (текст, значок, фотография и т. Д.) Может стать интерактивной ссылкой. Примерно в то же время, в 2000-х годах, технология сенсорных экранов становилась все более и более продвинутой. С выпуском первого iPhone в 2007 году поверхностные сенсорные кнопки начали стремительный рост в сторону повсеместного распространения.
• Сегодня мы находимся где-то между эпохами. Физических кнопок предостаточно, сенсорные кнопки более популярны, чем когда-либо, а примеры интерактивности без кнопок расширяются до ранее игнорируемых объектов, пространств и мест.

Пользовательские интерфейсы с голосовым управлением, такие как Amazon Echo Dot (Alexa), позволяют заглянуть в будущее интерактивности без кнопок.

Простота — цель дизайна кнопок

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

• • •

Дополнительная литература в блоге Toptal Design:

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

Что такое кнопка пользовательского интерфейса?

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

Почему важен призыв к действию?

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

Каковы ключевые элементы пользовательского интерфейса?

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

Что такое состояния кнопок?

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

Что такое сфокусированное состояние?

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

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

Об авторе

Ник Бабич — разработчик, технический энтузиаст и любитель UX. Последние 10 лет он проработал в индустрии программного обеспечения, специализируясь на … Больше о Ник ↬

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

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

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

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

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

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

Форма

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

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

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

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

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

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

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

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

Shadows and Highlights

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

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

Четко обозначьте кнопки

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

Ясные и отчетливые ярлыки

Ярлыки на элементах интерфейса, вызывающих действие, таких как кнопка, всегда должны быть связаны с тем, что они будут делать для пользователя. Пользователи будут чувствовать себя более комфортно, когда они поймут, что 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. (Большой превью)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

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

(ms, il, aa)

Дизайн кнопок за годы — временная шкала Dribbble

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

В этой статье я прослежу восьмилетнюю историю дизайна веб-кнопок на основе Dribbble.

Хронология кнопок Dribbble

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

Нажмите кнопку выше, чтобы просмотреть временную шкалу Dribbble.

2009

В этом году Интернет отмечает свое 40-летие, и первые «выстрелы» появляются на Dribbble. В оформлении кнопок преобладает оттенок серого. Нежные градиенты, закругленные углы и тени присутствуют почти в каждом дизайне кнопок. Эта эстетика относится к встроенным системным кнопкам.

Войцех Добри, Дэн Седерхольм, Джош Брайант, Дриббл, Сара Парментер, Мэтью Смит.

2010

Год создания Instagram. Форма кнопок кардинально не меняется, но есть гораздо больше цветов, больше деталей (например, внутренних теней) и гораздо больше декоративной типографии.

Войцех Добрый, Морган Аллан Кнутсон, Трой Бергланд, Клаудиу Чоба, Лиам Маккей, Джаред Кристенсен.

2011

В этом году состоится премьера

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

Войцех Добри, Жюльен Ренвой, Клаудиу Чоба, Миган Фишер, Джош Хемсли, Джонатан Морейра.

2012

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

Войцех Добрый, Эдуардо Сантос, Майк | Creative Mints, Майкел Луманс, Ян Коллинз, Давид Либерадски.

2013

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

Войцех Добрый, Космин Капитану, Эдди Лобановский, Джонатан Морейра, Рики Таноне.

2014

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

Войцех Добри, Эрик Хоффман, Рамиль Дерогонгун, Мейсон Ярнелл, Колин Гарвен, Билл С. Кенни.

2015

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

Войцех Добрый, Виктор Эриксон, Лео Люнг, Георгий Васягин, Хоанг Нгуен, Джошуа Крон.

2016

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

Войцех Добрый, Анастасия Андрийчук, Глеб Кузнецов, Гани Прадита, Кристофор Чебан, Бен Минго.

2017

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

Бен Клайн, Антон Ахейчанка, Вера Войшвило, Георгий Васягин, Гани Прадита.

Что дальше?

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

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

• • •

Дополнительная литература в блоге Toptal Design:

.