Дизайн кнопок для сайта: от истории и до правильного создания

Кнопки в веб-дизайне

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

Все просто, кнопки размечают какую-либо область, чтобы я мог на нее нажать. По существу, именно на кнопках мы применяем основные атрибуты языка дизайна так, что потом это оказывает свое влияние на более сложные компоненты. Ниже я представил 12 уроков, которые я выучил, исходя из работы с первичными (primary button), вторичными (secondary button) кнопками, а также другими типами кнопок.

Первичные кнопки

№1. Определитесь со стилистикой системы

Кнопки – чистейшее атомарное выражение визуального стиля системы. Кнопка состоит из трех неразрывных атрибутов так называемой «большой тройки» — цвет, шрифт и иконография. В кнопках также нужно учитывать пространство: внутренний padding (в частности слева и справа от надписи) и внешний margin (влияющий на другие элементы). Кнопки могут даже затрагивать такие атрибуты, как скругление (или border-radius) и подъем (или box-shadow).

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

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

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

Вывод: Примите кнопки, как основное представление стилистики системы. Еще лучше если вы задаете кнопку, как набор переменных: цвет, размер, пространство и т.д.

№2. Определите стилистику слов

К нашему счастью кнопки с надписью «Click Here» ушли в прошлое. Но вопросы остаются открытыми: Какой длины должен быть текст кнопки? Стоит ли делать подписи в повелительном наклонении (Сохрани или Закрой)? Нужно ли к глаголу Сохранить добавлять тип объекта (Документ)? Существуют ли какие-либо предпочтения в написании подписей для общих действий? Нужно ли кнопки связывать как-то с брендом… или нет?

Вывод: Найдите в сети гайды с набором готовых кнопок. Список подходящих слов и редакторских стандартов можно найти в руководствах типа Voice и Tone. Кнопки – отличный пример внедрения новых стандартов.

№3. Инвертируйте цвета кнопок если изменяется фон

Большинство кнопок хорошо работают на белом фоне. А будет ли кнопка видна на фотографии или более темном фоне? Можете ли вы разместить кнопку на светлом нейтральном фоне? Хорошо ли видна кнопка на любом фоне? Можете ли вы сменить цвет первичной кнопки?

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

№4. Одна первичная кнопка на странице, если только действие не повторяется

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

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

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

№5. Спроектируйте и создайте все виды взаимодействия с кнопкой

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

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

№6. Создавайте кнопки устойчивые к внесению изменений

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

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

Вторичные кнопки

№7. Вторичная кнопка ≠ отключенная кнопка

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

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

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

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

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

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

№8. Остерегайтесь призрачных кнопок

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

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

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

Другие типы кнопок

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

№9. Изменяйте размер кнопок

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

Вывод: Предоставляйте заказчику возможность настраивать размер кнопок: делать их как больше, так и меньше. Чтобы пользователь мог изменить кнопку обычным переключением класса. Используйте запоминающиеся имена – Puffy, Micro – а не просто Large и Small.

№10. Отделяйте кнопки и ссылки

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

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

№11. Добавьте в кнопки разнообразия

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

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

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

№12. Сделайте так, чтобы кнопки идеально работали друг с другом

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

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

Используйте тег button только для кнопок

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

Автор: Nathan Curtis

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

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

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

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

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

Веб-дизайн.

Быстрый старт

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

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

Дизайн кнопок для сайта — правила красивого оформления и расположения кнопки заказа и отправить на главной

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

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

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

Делайте интерфейс предсказуемым

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

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

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

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

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

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

Четыре правила оформления кнопок

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

1. Говорите, что надо сделать

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

Например: «Отправить», «Добавить в корзину», «Оформить заказ», «Купить» или «Сравнить».

2. Показывайте результат нажатия кнопки

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

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

3. Группируйте правильно

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

4. Выделяйте кнопки, ответственные за действие

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

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

Старайтесь сделать так, чтобы действия на сайте было легко совершать

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

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

Думайте за покупателей!

Закажи юзабилити-тестирование прямо сейчас

Заказать

Дизайн кнопки сайта — PT-Blog.ru

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

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

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

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

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

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

Размер кончика пальца среднего пользователя равен 8-10 мм в поперечнике. Это значит, что минимально допустимый размер кнопки должен составлять минимум 10х10 мм.

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

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

Цвет очень важен

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

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

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

Размер кнопки имеет еще большее значение

Сделайте ее большой!

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

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

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

Размещение кнопки – ключевой фактор

Где именно на сайте должна располагаться кнопка? Существует ли место на макете, при размещении на котором кнопки, она соберет больше кликов?

В большинстве случаев, расположение кнопки зависит от контента сайта.

• В конце формы;
• Справа от призыва к действию;
• В нижней части страницы или экрана;
• Расположена под сообщением.

Сосредоточьтесь на контрасте

Как и во всем веб-дизайне, в проектировании кнопок, контраст также имеет огромное значение.

Вот, о чем необходимо помнить при проектировании кнопки:

• Цвет
• Размер
• Размер элементов
• Форма, сочетающаяся с фоном
• Прозрачность или анимация
• Тени или градиенты

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

Когда дело касается кнопок, существует только две формы, которые вы должны рассмотреть:

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

Подскажите пользователю, что нужно сделать

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

Примеры:

• Нажмите здесь
• Создать аккаунт
• Попробуйте бесплатно
• Добавить в корзину
• Прочитать подробнее

Добавьте кнопкам визуальной значимости

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

Заключение

Вы начали переосмысливать ваш способ дизайна кнопок?

Вы считаете, что сможете спроектировать кнопки, которые привлекут больше кликов?

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

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

Современный веб-дизайн сконцентрирован на контенте, интерфейс-удобствах – с акцентом на достижение целей. Контурный дизайн кнопок сейчас в моде. По внешнему виду это полые внутри, кликабельные элементы без заливки, т.е. прозрачные (иногда полупрозрачные) кнопки. Прозрачные кнопки (ghost buttons) ожидаемо будут в трендах последующие года. Популярностью кнопки-призраки обязаны плоскому дизайну и минималистичной направленности веба. Активное применение призрачных кнопок началось с популяризацией фул-скрин бэкграундов и полупрозрачных фонов. С позиции веб-разработки, такой растущий интерес объяснить можно расширением возможностей HTML5/ CSS3 для их создания. Неизбитый тренд привлекает внимание посетителей, а эффект новизны можно использовать для реализации самых оригинальных идей.

Прозрачные кнопки в веб-дизайне. Особенности

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

• Грамотно подобрать бэкграунды (фото, текстуры, паттерны…) и максимально использовать их ключевые преимущества
• Добиться заметности кнопок: необходим цветовой контраст & эффект, который обозначит кликабельность
• Удобно расположить, распределив пространство экрана и структурировав информацию
• Придать кнопкам эстетичный вид
• Позаботится о хорошей читабельности подписей

С целью повышения заметности, контурные кнопки делают большего размера или размещают «в центре внимания». Аналогично укрупнению контент-блоков в минимализме, это можно считать частью тенденции к простоте, с чистым дизайном и удобством пользования (UX). Для надписей на кнопках хорошо подходят легкие начертания какого-либо шрифта из серии Sans serif. Прозрачная кнопка, не замечаемая пользователями, может ухудшать UX и юзабилити. Надо сразу признать: кнопки-призраки подойдут не каждому сайту. Но если вы решили удивить своих посетителей модным дизайном — поаккуратнее с выбором фото-бэкграунда /фоновой картинки /полупрозрачности окна-врезки (плашки) и цвета контура или подписи призрачной кнопки.  Вспомните регулировку экрана: от монохромного (черно-белого) – до насыщенного цветного. Удачное цветосочетание с контурными веб-элементами складывается из этих же контрастов: светлого с темным, насыщенного цветом с монохромным.

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

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

Alemans Design

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

Roidna

Пример современного дизайна сайта, использующего технологии: HTML5, CSS3, Responsive Design; популярные тренды: плоский дизайн, Fullscreen, красивая графика с элементами геометрии. Интуитивно понятный интерфейс с несколькими меню и грамотной логической структурой. Система навигации позволяет начать путешествие по сайту с контурной кнопки и пользоваться кнопками-стрелками клавиатуры. Применение тренда для адаптивного сайта дало очевидные преимущества – чистый дизайн с минимумом цветов и удобными для сенсорного экрана кнопками.

We are Heckford

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

Iconpr 

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

Cher Ami

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

Campus Bubble

Персидский зелёный (persian green) и светло-апельсиновый – основные цвета палитры начальной страницы, используемые для фонового видео с контурными кнопками. Очень удачное цветосочетание – как для привлечения внимания, так и для создания дружелюбной атмосферы. Желто-оранжевые янтарные оттенки, побуждая к активности, мобилизуют на выполнение задачи – помогают сконцентрироваться, запомнить материал, способствует творческой работе и т.д. Любой оттенок бирюзового составляют зеленый и голубой – цвета, которые считаются улучшающими умственную деятельность. Campus Bubble — сайт разработчика эффективных технологий обучения студентов и для дизайна подходят такие стимулирующие и психологические тенденции цветов.

Phoenix-M

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

Контурные элементы в дизайне веб-страниц

Постоянно развивающиеся мобильные технологии диктуют для всего веб-дизайн сообщества свои правила. Пользователи тачскрин устройств, сталкиваясь с проблемами, напоминают о своих пожеланиях к дизайну и качеству сайтов. Так, появилась необходимость приспосабливать веб-интерфейсы под Retina экраны. Стиль дизайна с контурной графикой – это, всего лишь попытка адаптироваться к меняющимся условиям. Хотите насытить сайт микроэлементами и видите, как они теряются среди прочего содержимого? Дополнительные грани контуров (при достаточном контрасте) сделают их заметнее. Простота обнаружения четкой графики, на подсознательном уровне, снимает различные тревоги неуверенного пользователя.

Marqana 

Интерактивные эффекты кнопок и ультратонких иконок на фоне видео. Это сразу привлекает внимание. Рубленый шрифт хорош для «пестрых» бэкграундов, с межстрочным интервалом легче воспринимается фраза, а выделение цветом задает визуальную иерархию по Z- принципу. Целевая страница точно передает суть деятельности фирмы, тут же предлагая связаться со специалистом (GET QUOTE).

Theme Fuse

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

Themes Kingdom

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

C. A. Pauwels

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

Rowing Dock

Известно, что продающий текст надо иллюстрировать. Благодаря тематичным фотографиям слайдера, контурным рисункам и надписи на кнопке «VIEW PRICING DETAILS» — сразу становится понятен смысл предлагаемого сервиса. А необычайная выразительность фотоснимков и интерактивные анимационные эффекты графических элементов, создают впечатление реальности.

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

Evolve Wealth

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

Rays Restaurants

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

The Cooking Academy

При нескольких видах кнопок в дизайне – «призрачные» могут выполнять второстепенные действия: перемещать по логическим областям страницы или эффектно переворачивать контент-блоки (Vertical Flip).

World Backup Day

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

LITTLE FLYERS

Уменьшающийся с прокруткой липкий плавающий header, плавающий заголовок с кнопками в одном блоке… Контурные элементы (иконки, кнопки) вписываются в эту концепцию экономии места на сайте. Плавная заливка ghost-кнопок компенсирует их призрачную малозаметность. Эффект не только для красоты и контраста — реализуется схема Z-паттерна (Z принцип быстрого просмотра) с максимальным привлечением внимания к кнопке с призывом к действию.

Креативные дизайнерские решения

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

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

Для бэкграунда обычно используются: слой 50% -го затемнения общего фона, абстрактный / естественный пейзаж или фото обстановки, классический темный стилизованный фон, сочные цвета и насыщенные оттенки (Flat дизайн), текстуры. Можно комбинировать изображения с видео, различным образом изменять внешний вид кнопки, а эффект анимации применять, как при наведении, так и с потерей фокуса курсора мыши и т.д.

Prosto Super

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

Nizuka

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

La pierre qui tourne 

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

FNSZ

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

Harbr

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

Visage

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

Urban Influence

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

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

Space Junk

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

 Braastad

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

Adam Hartwig

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

Cappen 

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

Призрачные CTA-кнопки (кнопки призыва к действию)

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

• Кнопки-призраки с призывами к действию прямым обращением («Заказать», «Отложить») способны оказывать положительное влияние на конверсию и продажи
• Легко оформлять сайт с кнопками нужной длины, улучшая пользовательский интерфейс, за счёт коротких информативных фраз-заголовков — чётко обозначающих контекст выполняемых действий
• Даже с небольшим укрупнением кнопок, дизайн сайта может стать более эргономичным
• Выгодно использовать легкость зонирования пространства на странице для уменьшения времени обнаружения кнопки-призыва
• Отвести пользовательское внимание на окружение, подчеркивающее стильность продукта/товара — в некоторых случаях, это может быть оправдано
• Задействовать потенциал интерактивных эффектов. Выбрать тот, который будет стимулировать конверсию

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

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

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

Storq

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

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

Eye Heart World

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

1. НotSpot (активные точки)
2. Сдвоенные кнопки листания вперед / назад
3. Контурные кнопки с эффектом 100%-й заливки

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

Misha Nonoo

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

Baxter of California 

Baxter of California, это пример современного адаптивного интернет-магазина с чистым и минималистичным Flat дизайном. Оптимизированный для сенсорного ввода пользовательский интерфейc начинается с уникального меню навигации.

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

Humanz Studioz

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

Kommadrei

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

Enjoy Aiia

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

Isadora Design

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

В заключение

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

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

Тренды веб-дизайна: кнопки-призраки | YAGLA

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

Что это — катастрофа в пользовательском опыте или эффективный веб-дизайн — вы узнаете в этой статье.

Кнопки-призраки: за и против

Чем они отличаются от обычных кнопок CTA?

• Тонкий контур
• Прозрачный фон
• По размеру больше обычных кнопок
• Тонкий шрифт
• Как правило, цвет контура и шрифта одинаковый — белый или черный.

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

Текст: «Мы считаем, что digital-платформы должны вдохновлять и улучшать мир».

Призыв к действию: «Посмотреть нашу работу».

Благодаря простому дизайну они не перегружают страницу и облегчают восприятие. 

А вот отечественный пример – проект ПоюForYou:

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

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

Текст: «Доброе утро! Персонализация digital-опыта для ваших клиентов».

Призыв к действию: «Узнать больше», «Попробовать бесплатно».

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

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

A/B тест

Предмет тестирования — кнопка призыва к действию на главной странице сайта агентства digital-маркетинга Fresh Egg.

Вот оригинальный дизайн с розовой кнопкой:

Текст: «Мы работаем с потрясающими брендами».

Призыв к действию: «Посмотреть нашу работу».

Вариант с прозрачной кнопкой:

Инструмент тестирования — Optimize 360. Выборка — 10 тысяч визитов.

Результат — минус 20% по числу кликов CTA при втором варианте. Тест подтвердил ожидания: яркие кнопки привлекают больше внимания.

Клик-тест

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

На скриншоте — карта кликов, цветами отмечены области на странице, куда пользователи чаще кликали в поисках кнопки CTA:

Текст: Джон Стюарт «Розовая вода».

Призыв к действию: «Купить билеты».

На 3 сайтах с минималистичным дизайном измеряли количество «ошибок» (когда пользователи кликали мимо) и среднее время клика кнопки.

Клик-тест №1 (Rosewater)

Клик-тест №2 (Gorilla)

Текст: «Большой опыт».

Призыв к действию: «Далее».

Клик-тест №3 (Integra)

Текст: «3D визуализация».

Призыв к действию: «Получить демонстрационные материалы».

В первой таблице — коэффициенты «ошибок»:

Во второй — среднее время на клик (в секундах):

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

Для кнопок-призраков коэффициент ошибок выше, а времени на клик больше.

Тест на внимание

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

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

Показатель обычной кнопки составил 60%, кнопки-призрака — 38%.

В таблице — показатели внимания всех вариаций, а также средние по кнопкам-призракам и обычным кнопкам:

Кнопки-призраки проиграли по всем показателям во всех вариациях.

Заключение

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

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

Статья подготовлена по материалам conversionxl.com.

Советы по грамотному дизайну кнопок СТА

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

CTA для предоставления покупателям информации о стоимости картин (Isabel Design).

Когда дело доходит до заключения сделки, эти приемы обычно связаны с использованием CTA (call-to-action = призыв к действию) — это кнопки, которые предлагают купить, кликнуть, скачать или зарегистрироваться.

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

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

Почему CTA так важны?

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

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

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

• Электронные письма, в которых применяются CTA, увеличивают количество просмотров на 371% и количество продаж на 1 617% [источник]

• Страницы на Facebook, где используются кнопки CTA, имеют в 2,85 раза больше просмотров [источник]

• Усовершенствовав дизайн CTA, фирма Brafton, которая занимается контент-маркетингом, всего за месяц увеличила доход на 83% [источник]

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

5 видов CTA

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

Можно разбить CTA на пять основных категорий:

Навигация

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

Главная страница сайта Kvell акцентирует внимание пользователей на кнопке «Discover» (Узнать больше) — чтобы клик по ней стал первым действием на сайте . Но при этом, чтобы не ограничивать посетителей в выборе, в углу также разместили менее заметные иконки меню.

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

Локальные действия («Добавить в корзину», «Завершить покупку», «Заполнить опрос», и т.д.)

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

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

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

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

Подписка

Vogue показывает недавно появившуюся тенденцию использовать всплывающие окна, которые предлагают подписаться на рассылку с помощью e-mail.

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

Репост в социальные сети

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

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

Вовлечение (комментарии, лайки, отзывы, и т.д.)

Даже Amazon прибегает к кнопкам СТА для получения отзывов.

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

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

Внешний вид

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

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

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

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

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

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

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

Ваши СТА должны быть ясными и четкими, но они также должны гармонировать с остальной частью страницы. Не забывайте: эти кнопки должны призывать посетителей после просмотра страницы пойти и сделать то, что вы больше всего от них хотите. Представьте, что кнопки являются своеобразной «воронкой» для ваших продаж. Это не значит, что СТА обязаны перехватывать все внимание на себя — скорее, необходимо выстроить все остальные элементы так, чтобы они в итоге приводили пользователя к CTA.

Лучше всех это объяснил Нил Патель, который обнаружил, что размещение СТА на первом экране уменьшило уровень кликабельности на 17%. Он объяснил это тем, что контент веб-сайта должен плавно приводить к СТА, особенно в случае с деловым предложением (объясним ниже). Только подумайте, насколько безрезультатны будут действия продавца, который начнет уговаривать вас купить что-то, не объяснив до этого, зачем это вам нужно.

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

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

Головная компания Red Bull — T.C. Pharmaceuticals — умело применяет приемы СТА. Цветовое решение для опции «Узнать больше» и применение «призрачной» кнопки «Посмотреть товары» показывает, что они предлагают пользователям нажать кнопки по порядку.

Текст

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

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

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

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

Эффективный дизайн сайта: CTA-кнопки

Еще во время планирования будущего сайта нужно учитывать принципы оформления так называемых СТА кнопок. Дословно это «call to action». Несложно догадаться, что такая кнопка призывает к какому-то действию на сайте: заказать, купить, скачать и так далее. Дело в том, что некоторые дизайнеры не придают этому элементу должного внимания, а зря. Ведь это значительно повышает эффективность готового проекта.

 

 

 

 

Для чего нужна кнопка СТА?

 

 

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

 

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

 

 

 

Какими бывают кнопки СТА?

 

 

В зависимости от типа кнопки «Call to action» выбирается и ее оформление. Ниже собраны самые распространенные виды, которые отвечают за определенное действие.

 

 

1. Скачивание

 

 

Кнопка «Скачать» предлагает пользователю воспользоваться определенным продуктом. Чтобы он решился на это действие, желательно предоставить некоторую дополнительную информацию. Например, размер файла и его версию. Нелишним будет и фотография или скриншот содержимого. В качестве примера можно привести шаблон Moneyapp, где пользователь уже знает, что ему предлагается, а кнопками служат иконки AppStore и Google Play.

 

 

 

 

2. Добавление в корзину

 

 

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

 

 

 

 

3. Узнать подробности

 

 

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

 

 

 

4.Связаться

 

 

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

 

 

 

5. Подписка

 

 

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

 

 

 

Принципы оформления СТА кнопок

 

 

 

1. Свободное пространство

 

 

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

 

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

 

— Расположите СТА кнопку так, чтобы вокруг нее было свободное пространство в достаточном количестве, а остальное наполнение сайта не было нагроможденным.

 

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

 

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

 

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

 

 

 

 

2. Цвет и размер

 

 

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

 

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

 

Herman Scheer – как раз отличный пример. Нежные тона фона отлично контрастируют с темно-синей СТА кнопкой.

 

 

 

 

3.. Текстовое наполнение

 

 

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

 

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

 

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

 

 

 

 

4. Дополнительные сведения

 

 

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

 

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

 

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

 

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

 

 

 

 

5. Форма, изображение и оформление в целом

 

 

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

 

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

 

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

 

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

 

— Чем проще и понятнее изображение, тем эффективнее и легче воспринимается призыв на кнопке.

 

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

 

На сайте 3D ручки Lix Pen обе СТА кнопки дублируются соответствующими изображениями: просмотр видео – привычным треугольником, а заказ товара – магазинной тележкой.

 

 

 

 

6. Приоритетность

 

 

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

 

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

 

 

 

 

Главная цель сайта – это добиться от посетителя определенного действия. Именно поэтому от малюсенькой СТА кнопки зависит очень многое. Так что пренебрегать ею вовсе не стоит. Чем больше принципов оформления этого элемента вы примите во внимание, тем больше шансов, что вы добьетесь от клиента желаемого действия. Готовы применить знания на практике? Тогда настало время создать свой сайт.

 

 

> Создать сайт

 

Дизайн кнопок для Интернета — Руководство и примеры на 2020 год

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

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

В этой статье мы обсудим :

1. Почему кнопки важны в UX?
2. Веб-кнопки через годы
3. Разработка полезных состояний кнопок
4. Рекомендации по дизайну веб-кнопок
5. Измерьте воздействие ваших кнопок
6. Кнопки мощные при правильном использовании

Почему кнопки важны в UX?

По данным Якоба Нильсена и Nielsen Norman Group, пользователи читают примерно 20-28% веб-страницы при поиске информации, а Nielsen считает, что 20% более вероятны.И эксперты прогнозируют, что в наши дни продолжительность нашего внимания даже короче, чем у золотой рыбки — около 8,25 секунды.

Итак, где кнопки вписываются в это уравнение?

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

Веб-кнопки через годы

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

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

Когда плоский дизайн стал популярным в веб-мире в 2012 и 2013 годах, кнопки начали терять закругленные углы, тени и градиенты. Смартфоны, такие как Android и iPhone, также начали подбирать тенденции плоского дизайна.

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

Хотите узнать больше об эволюции веб-кнопок? Посмотрите этот график с примерами из Dribbble.

Разработка полезных состояний кнопок

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

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

Учитывать состояния кнопок, например :

Активные или отключенные кнопки

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

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

Кнопки с фокусировкой

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

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

Кнопки состояния наведения

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

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

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

Выбранные кнопки как ползунки

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

Рекомендации по дизайну веб-кнопок

Дизайн — это лишь часть того, что делает кнопку хорошей кнопкой в ​​Интернете. И действительно, в отношении дизайна не так много правил, если он доступен, согласован и работает для ваших пользователей. Но прошли те времена, когда текст «щелкнул здесь» и кнопкам не хватало единообразного стиля и подхода. Учтите эти рекомендации при разработке веб-кнопок в 2020 году.

Соответствуйте своему дизайну и задокументируйте его

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

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

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

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

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

Не полагайтесь только на значки как на кнопки

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

По словам Авроры Харли из Nielsen Norman Group, «понимание значка пользователем основано на предыдущем опыте. Из-за отсутствия стандартного использования для большинства значков текстовые метки необходимы для передачи значения и уменьшения двусмысленности.”

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

Используйте четкую и доступную копию

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

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

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

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

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

При разработке

учитывайте размер (и досягаемость) кнопок.

Знаете ли вы, что средняя человеческая мужская рука имеет длину 7,6 дюйма и размах 3,5 дюйма? Может быть, нет, но вы можете знать, почему это важно.

Размер кнопок — и место их попадания на экраны смартфонов и мобильных устройств — во многом влияет на UX.

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

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

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

Доступность важна и для кнопок

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

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

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

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

Измерьте воздействие ваших кнопок

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

Но как именно можно эффективно протестировать кнопки на своем веб-сайте?

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

Бесплатные инструменты, такие как Google Analytics или Google Tag Manager, можно быстро и легко настроить для отслеживания обеих версий вашего CTA или кнопки для достижения наилучших результатов.

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

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

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

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

Сделайте дизайн кнопок «кликабельным» | от Glovory Design

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

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

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

Сделайте так, чтобы она выглядела «на месте»

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

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

Сделайте его визуально дифференцированным по основным и второстепенным действиям

Страница входа в систему в Twitter dekstop

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

Упростите поиск

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

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

Фото Чарльза Делувио на Unsplash

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

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

Размер имеет значение

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

Фото Бена Колде на Unsplash

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

Не делайте одну кнопку для всего.

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

Фото из UX Store на Unsplash

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

Заключение

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

Искусство дизайна кнопок пользовательского интерфейса веб-сайта: 10 тенденций и советов

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

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

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

1. Будьте проще

Все сводится к классической фразе теории дизайна: «Сохраняйте простоту, глупость (или глупость, если хотите)».

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

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

2. Обеспечьте хороший контраст

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

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

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

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

3. Используйте цвет

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

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

4. Микрокопия с записью, вызывающая ожидания

Не делайте этой ошибки: кнопка со словами «Нажмите здесь».(Насколько это спам?)

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

Эта информация может помочь завоевать доверие пользователей и повысить конверсию с помощью действий / взаимодействий, которые пользователи считают желательными.

5.Взаимодействие с тонкой анимацией

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

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

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

6. Сделайте достаточно большим, чтобы коснуться

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

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

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

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

Есть несколько общих стилей кнопок, с которыми все знакомы. Воспользуйтесь одним из них.

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

8. Поместите в ожидаемое место

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

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

9. Не забывайте отзывы

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

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

10. Используйте кнопки намеренно

Слишком много кнопок создают хаос.

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

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

Заключение

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

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

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

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

Что такое кнопка?

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

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

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

Кнопка CTA

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

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

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

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

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

Кнопка раскрывающегося списка

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

Процесс взаимодействия с приложением

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

Кнопка для гамбургера

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

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

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

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

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

Кнопка Plus

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

Сменная кнопка

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

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

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

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

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

Кнопка-призрак

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

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

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

В Material Design кнопка с плавающим действием (сокращенно FAB) — это кнопка, которая представляет основное действие на экране приложения.Как правило, это кнопка с круглым значком, расположенная над другим содержанием страницы. Эта кнопка обычно дает мгновенный доступ к основным или популярным действиям, которые пользователи выполняют с приложением. В зависимости от дизайна и информационной архитектуры мобильного приложения FAB может:

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

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

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

Факторы эффективного дизайна кнопок

Размер. Размер — это один из основных способов информирования пользователей о важности элемента макета и построения иерархии компонентов.Привлекательная и эффективная кнопка с призывом к действию должна быть достаточно большой, чтобы ее можно было быстро найти, но не слишком большой, чтобы не испортить структуру макета. Лидеры рынка часто дают рекомендации по правильному размеру кнопок в своих руководствах. Например, Apple утверждает, что призывы к действию в мобильном пользовательском интерфейсе должны быть не менее 44Х44 пикселей, а Microsoft рекомендует 34Х26 пикселей. Если вы разрабатываете для мобильных устройств, требования к различным типам кнопок могут быть довольно строгими, поэтому внимательно изучите рекомендации, чтобы минимизировать риски отклонения приложения из-за плохого дизайна пользовательского интерфейса.

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

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

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

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

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

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

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

Полезные статьи

Лучшие практики для дизайна заголовков веб-сайтов

Глоссарий UI / UX-дизайна: элементы навигации

Призыв к вниманию. Мощный дизайн кнопки CTA

7 советов по улучшению мобильного взаимодействия

Take It Easy: советы по упрощению пользовательских интерфейсов

Визуальная иерархия: эффективная организация содержимого пользовательского интерфейса

Гештальт-теория для UX-дизайна: принцип близости

Гештальт-теория для эффективного UX: принцип подобия

UX Design: как сделать веб-интерфейс сканируемым

---

Добро пожаловать, чтобы увидеть дизайны Tubik на Dribbble и Behance

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

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

Кнопки

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

Здесь возникает вопрос: как мы, дизайнеры, можем улучшить наши кнопки и сделать их лучше? Чтобы ответить на этот вопрос, давайте сначала рассмотрим различные типы кнопок, которые вы можете найти, и их соответствующее использование в интерфейсе.

ТЕКСТОВЫЕ КНОПКИ

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

Текст кнопки под кратким описанием в Evernote.
Посмотрите, как кнопка, даже если мысль — это просто текст, подразумевает действие
со стрелкой вправо.

КНОПКИ ПРИЗРАКА

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

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

КНОПКИ ПОДЪЕМ

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

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

ПЕРЕКЛЮЧЕНИЕ КНОПОК

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

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

ПЛАВАЮЩАЯ КНОПКА

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

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

ПРИНЦИПЫ ДЛЯ УЛУЧШЕНИЯ КНОПОК

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

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

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

Плохой и хороший дизайн кнопки. Какой из них вам более знаком?

Использовать визуальные идентификаторы

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

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

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

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

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

Окей, что?

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

Лучше, правда? Теперь все понятно.

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

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

Взаимодействие кнопки с обратной связью при нажатии и отпускании.
Фото: Вадим Громов

Заключение Кнопки

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

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

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

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

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

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

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

Форма

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

Трехмерная кнопка

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

Кнопка с плоским дизайном

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

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

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

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

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

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

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

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

Размер

Следующим элементом, который следует учитывать при разработке кнопки, является ее размер. Дизайнеры UX должны проверить, насколько велика кнопка по сравнению с другими элементами на экране, и убедиться, что кнопки достаточно удобны для взаимодействия. Google’s Material Design рекомендует, чтобы сенсорная цель была не менее 48 пикселей в ширину и 48 пикселей в высоту.В соответствии с рекомендациями Apple по пользовательскому интерфейсу iPhone минимальный целевой размер должен составлять 44 x 44.

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

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

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

• Положительное — подтверждение выбранного действия. Эта кнопка должна иметь самый высокий контраст.

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

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

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

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

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

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

Размещение

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

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

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

Советы по дизайну кнопок

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

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

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

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

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

Как сделать так, чтобы ваши кнопки выглядели потрясающе

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

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

1. Яркие и жирные кнопки:

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

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

2. Держите кнопки большими:

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

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

3. Совместите кнопки с темой:

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

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

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

4. Используйте цветовой контраст:

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

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

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

5. Обратите внимание на детали:

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

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

6. Не забывайте о состояниях кнопок:

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

1. Кнопка включения / выключения:

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

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

2. Кнопка в фокусе:

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

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

3. Состояние при наведении:

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

4. Выбранная кнопка:

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

7. Имейте единый дизайн и задокументируйте его:

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

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

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

8. Следите за размером и досягаемостью кнопок:

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

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

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

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

9. Понять фактор доступности:

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

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

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