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

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

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

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

Самое важное

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

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

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

Знакомое = хорошее

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

Люди сразу будут идентифицировать этот элемент, как кнопку

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

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

Разбор кнопки

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

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

Отступы и выравнивание

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

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

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

Подходящий размер

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

Золотая середина для мобильных кнопок –

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

Хорошие примеры

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

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

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

Закругленные углы

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

Выравнивание иконок

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

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

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

Баланс краев

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

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

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

Вывод

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

Не забывайте:

• Сделайте вашу кнопку похожей на кнопку
• Центрируйте метку по центру, как вертикально, так и горизонтально
• Выставите правильные отступы внутри кнопки
• Если вы используете иконку, выберите правильный размер и выровняйте ее
• Установите радиус границы в зависимости от того, где будет использоваться кнопка
• А затем проверьте, сочетается ли этот радиус с другими элементами на экране.
• Выберите правильный размер! Чем больше кнопка, тем проще ее использовать. Это касается и десктопных приложений!

Удачи!

Это отрывок из бесплатной главы моей будущей книги. Скачать всю главу в виде PDF-файла можно здесь.

600+ удивительных PSD исходников кнопок и разных UI элементов для веб — дизайнера

Здравствуйте, дорогие читатели блога beloweb.ru. В этот замечательный вечер мне очень хочется представить Вам подборку в которой Вы сможете найти более 600 PSD исходников кнопок, а также нескольких UI элементов, а именно скролинги, поля для поиска, часы, подсказки и ещё множества замечательных, а самое главное совершенно бесплатных вещей для Веб мастеров и дизайнеров.

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

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

Классные PSD исходники кнопок и регуляторов

Не плохой набор переключателей для веб дизайнера.

Скачать исходники

Полосатые кнопки для сайта

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

Скачать исходники

Большие 3d кнопки для подписки

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

Скачать исходники

PSD Кнопки — иконки для тёмных сайтов

Отличные кнопки минималистического стиля для сайтов с тёмным или чёрным дизайном.

Скачать исходники

Отличный PSD набор голубых кнопок

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

Скачать исходники

PSD набор разных кнопок для сайта

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

Скачать исходники

PSD исходники клавиатурных кнопок на сайт

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

Скачать исходники

PSD набор социальных кнопок для сайта

Удивительный набор для Вашего сайта классных кнопок социальных закладок с тёмным оформлением.

Скачать исходники

Исходники кнопок для выпадающего меню

С помощью этих PSD исходников кнопок для сайта можно сделать замечательное выпадающее меню в тёмном стиле.

Скачать исходники

Светлый Ui набор на сайт

Несколько кнопок, звёзд для рейтинга, а также бегунки для скролинга.

Скачать исходники

Металлические кнопки социальных закладок

Не плохой PSD набор кнопок закладок в металлическом цвете.

Скачать исходники

Удивительных набор PSD исходников для дизайнера

Множество отличных кнопок, полей для поиска и ещё нескольких важных и отличных вещей для создания красивого сайта.

Скачать исходники

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

Очень красиво нарисованные кнопки социальных закладок для сайта.

Скачать исходники

Красивые кнопки для навигации

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

Скачать исходники

Кнопки включить и выключить

PSD набор состоящий из 3 красивых тёмных кнопок.

Скачать исходники

4 красивых кнопок

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

Скачать исходники

Светлый UI набор разных элементов

В этом наборе Вы найдёте множество классных вещей для разработки сайта.

Скачать исходники

Тёмные PSD исходники UI элементов

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

Скачать исходники

Красивые кнопки «Подписаться» (Follow)

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

Скачать исходники

Очень красивые и светлые кнопки

Замечательный PSD набор светлых кнопок доступных с множеством расцветок.

Скачать исходники

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примеры:

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

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

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

Заключение

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

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

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

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

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

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

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

Как создать кнопку: 7 советов, чтобы на нее кликнули

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

Они повсюду: на электронной почте, домашних страницах, различных сайтах, контактных формах и корзинах интернет-магазинов. Большинство из 4 000 000 000 страниц в сети имеют навигационные кнопки.

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

1. Использование слов-побудителей

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

Получается, что, кнопки без глаголов, типа:

• Подписка на рассылку;
• Загрузка описания;
• Дополнительная информация.

… Станут более действенными, когда будет добавлен глагол…

• Подписаться на рассылку;
• Скачать описание;
• Узнать больше.

2. Ваша кнопка соответствует тесту «WYLTIWLT» (Would You Like То? I Would Like То)

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

• Хотели бы вы [текст на кнопке]? (Would You Like То?)
• Я хотел бы [текст кнопки] (I Would Like То).

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

Если текст в кнопке «Посмотреть ваши результаты», то, если задать вопрос, получается «Вы хотели бы посмотреть ваши результаты?» и «Я хотел бы посмотреть ваши результаты». Второй вариант здесь не очень подходит, поэтому данный текст не пройдет тест. Этот быстрый способ убедиться в том, что текс на каждой кнопке, начинающийся с глагола, работает от лица маркетолога, a также от лица посетителя сайта. Кстати, каждая кнопка на Фейсбук со словом-действием проходит данный тест!

Такой метод был предложен Джонатаном Ричардсом, который создал эту аббревиатуру: WYLTIWLT.

3. Я или Вы: от первого или от второго лица?

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

Кнопку c местоимением от 1 лица («Создать мою учетную запись») нажимали на 24% посетителей больше, чем на кнопку c местоимением от 2 лица («Создать вашу учетную запись»). Разработчики говорят o том, что надписи в кнопке c местоимением от 1 лица работают лучше, так как они говорят за посетителя, совершающего действие, то есть, от человека, который держит мышь или нажимает на экран.

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

4. Используйте цвета, которые контрастируют c другими элементами

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

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

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

 

 

5. Сделайте кнопку большого размера

Актуально для пользователей смартфонов и планшетов. Пользователю должна быть предоставлена возможность комфортно нажимать на кнопку, как co смартфона, так и c планшета. Следовательно, размер кнопки должен быть соответствующим человеческому пальцу. Компания Apple рекомендует минимальный размер кнопок 44×44 пикселей, но исследования компании МIT Touch Lab показывают, что в среднем размер указательного пальца составляет (если перевести на пиксели) 45×57.

Это связано c тем, что кончик пальца имеет не округлую, а овальную форму. А большой палец несколько больше. Если предполагается, что кнопку будет нажиматься большим пальцем (если, к примеру, она будет располагаться в нижней части приложения для планшета), ее можно сделать шире: 45×72 пикселей.

6. Уменьшите уровень вовлечения («Начать шоппинг» вместо «Купить сейчас»)

Ряд действий ведет к взятию на себя бо́льших обязательств, чем другие. Так же и с кнопками – некоторые из них означают больше обязательств. Они могут вызывать разные психологические реакции и доставлять больше беспокойства. Если кнопка-действие побуждает посетителя потерять время или деньги, то он c меньшей вероятностью кликнет по ней. Протестированы языки кнопок для двух «Начать тест» и «Прочитать обзор». Вторая кнопка получила на 124% больше кликов.

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

 

 

7. Создавайте кнопки на основе кода, а не графики

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

У графических кнопок есть ряд проблем.

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

Кнопки на основе кода подобных проблем не создают. Можно создавать отличные кнопки с помощью НTML и СSS, и поэтому нет ни одного весомого довода, почему лучше делать графические кнопки. Кнопки, созданные на основе НTML или СSS, иногда называют «пуленепробиваемые», потому что они отображаются везде, в том числе и в email.

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

 

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

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

Элементы навигации сайта — как сделать сайт удобнее для пользователей, советы по дизайну

Евгения Черешкова, автор, редактор, SEO-копирайтер

Яндекс, Google и другие поисковые системы поднимают в ТОП запросов те сайты, где пользователь проводит больше времени. Поисковые роботы анализируют поведение пользователя, оценивают, насколько ему удобно «путешествовать» по сайту.

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

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

Содержание

Меню

Меню на одностраничном сайте

Выделенный пункт меню

«Хлебные крошки»

Логотип

Индикатор загрузки страницы

Содержание статьи

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

Кнопка «Наверх»

Ссылки на другие статьи

Перелинковка

Баннеры

Иконки соцсетей

Меню

Лаконичное или развернутое

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

• «О студии»,
• «Портфолио»,
• «Цены»,
• «Услуги»
• «Контакты»,
• «Блог».

Лаконичное меню на сайте дизайн-студии Lines

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

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

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

Виды меню

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

Статичное меню вверху страницы

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

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

Пример статичного меню на сайте архитектурного бюро VArchitects

Фиксированное меню

Похоже на статичное, только остается на экране, если пользователь прокручивает страницу вниз.

Фиксированное меню на сайте студии «Технологии дизайна». На скриншоте середина страницы, а пункты остались в поле зрения

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

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

Фиксированное меню в боковой колонке на сайте студии DesignNika

Микс статичного и фиксированного меню

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

Пример можно посмотреть на главной странице интернет-магазина BasicDecor:

Вверху страницы остается статичное меню с переходом на информационные страницы и в каталоге

Прокрутите страницу вниз: пункты исчезнут и останется логотип, строка поиска, кнопки пользовательского меню

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

«Гамбургер»

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

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

Меню-«гамбургер» на сайте дизайнера Филиппа Старка

За лаконичными полосками скрывается целая страница с пунктами меню

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

Многоуровневое меню

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

Многоуровневое меню на сайте студии «Мечты сбываются»

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

Меню на одностраничном сайте

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

Индикаторы местоположения

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

Пример лендинга с индикаторами навигации на сервисе онлайн-конструкторов Tilda

Выделенный пункт меню

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

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

Пункты меню подсвечиваются на сайте студии TeseiaDeco

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

«Хлебные крошки»

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

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

Переход с логотипа на главную страницу

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

Индикатор загрузки страницы (прелоадер)

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

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

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

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

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

Содержание статьи

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

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

Кнопки с важным действием

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

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

Студия Lines поставила наверх главной страницы кнопку с предложением узнать стоимость дизайн-проекта

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

Кнопка «Наверх» («To top»)

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

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

Кнопка «Наверх» в каталоге товаров BasicDecor

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

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

В журнале Dezeen пользователи в конце каждой статьи видят рекомендации: прочитать больше статей и посмотреть видео по теме

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

Переход по ссылкам внутри сайта (перелинковка)

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

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

Еще один вариант перелинковки — установка ссылок на разделы сайта с превью статей:

При наведении на превью открывается дополнительная ссылка, ведущая в раздел «Архитектура»

Баннеры

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

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

Иконки с переходом на соцсети или шерингом

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

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

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

Превью статьи со ссылкой на сайт появляется в его ленте или сторис в соцсети

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

Когда вы хотите доработать или заказать свой сайт

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

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

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

1. Какие пункты нужны пользователям в главном меню. Здесь инициатива исходит от владельца сайта. Подумайте, какие пункты нужны вашим клиентам.
2. Вид меню, которым удобнее пользоваться на вашем портале:
   • статичное,
   • фиксированное,
   • микс статичного и фиксированного,
   • «гамбургер»,
   • многоуровневое.
3. Подсветка текущего пункта меню. Об этом нужно сказать разработчикам. Графический дизайнер продумывает, как именно должен подсвечиваться пункт.
4. Индикаторы местоположения на лендинге. Если вы считаете, что они нужны, обсудите с подрядчиками дизайн и функциональность.
5. Попросите программистов сделать переход с логотипа на главную страницу сайта.
6. «Хлебные крошки» нужны на многоуровневых сайтах. Например, вы ведете блог со множеством разделов или у вас большое портфолио, работы разделены на рубрики. Помогите пользователю сориентироваться. Попросите разработчиков поставить «хлебные крошки».
7. Индикаторы загрузки страницы обсуждаются с разработчиками.
8. Обсудите с программистами возможность автоматической подгрузки содержания статьи. Попросите продумать возможность отключать содержание в статьях, где оно не нужно. С графическим дизайнером обсудите местоположение и внешний вид.
9. Дизайн и местоположение кнопок с призывом к действию. Ориентируйтесь на вашу целевую аудиторию и собственные цели. Нужен ли вам звонок в студию, заявка на разработку дизайн-проекта, заполненный бриф. Обсудите с дизайнером вид и расположение таких кнопок. Помните, их не должно быть много, они должны выделяться из общего дизайна, но не выглядеть навязчиво.
10. Кнопка «Наверх» устанавливается разработчиками.
11. Возможность подгружать превью статей внизу публикации. Это может быть автоматическая подгрузка, например, последних трех—пяти публикаций. Но тогда вы не сможете управлять, какие статьи подтягивать. Другой вариант попросить разработчика, чтобы он сделал возможным выбирать такие статьи.
12. Возможность перелинковки, расположение групп ссылок — сбоку, напротив соответствующего абзаца и/или под разделом. В дальнейшем вы сами будете устанавливать ссылки в своей статье. С разработчиками нужно обсудить, как это сделать.
13. Вряд ли вы захотите все время видеть один и тот же баннер на сайте. Попросите разработчиков сделать блок, куда вы сможете подгружать баннеры. Местоположение обсуждается с дизайнером.
14. Место расположения иконок с переходом на ваши группы в соцсетях продумайте с дизайнером.
15. Иконки соцсетей с возможностью расшаривания. Они должны автоматически появляться для каждой статьи — попросите это сделать разработчиков.

———————-

Смотрите также по теме:

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

Как сделать сайт на Tilda. Подборка обучающих материалов

Тексты на сайте дизайн-студии: как писать, чтобы читали

Архитектура статьи: как сделать текст интереснее с помощью верстки

Как зарегистрировать адрес своего сайта

————————————————————————

Евгения Черешкова,

редактор, автор, SEO-копирайтер

Помогаю сделать контент интереснее и понятнее для читателя.

Сайт textforbusiness.ru

Telegram, WhatsApp: +7(903)000-47-04

Skype, email: [email protected]

Дизайн кнопок веб-сайта: 7 примеров, которые меняют

Опубликовано: 2021-07-20

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

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

Что делает кнопку веб-сайта с высокой конверсией?

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

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

Вот некоторые из наиболее распространенных характеристик и элементов дизайна, которые делают кнопки веб-сайтов с высокой конверсией.

1. Кнопка выглядит интерактивной, и все кнопки выглядят как кнопки.
2. Кнопка контрастирует с фоном
3. Кнопка появляется в логическом или ожидаемом месте
4. Кнопка связана с четким и информативным призывом к действию, и пользователи легко понимают, что делает кнопка.
5. Размер кнопки подходит для платформы.
6. Кнопка не загромождена другими элементами или функциями на экране.

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

10 дизайнов кнопок на веб-сайтах, которые преобразуются

Evernote

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

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

понедельник

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

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

Брукс Бегущий

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

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

Sentiment.io

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

Почему это работает : ярко-красный цвет, который компания Sentiment выбрала для этой кнопки с призывом к действию, хорошо контрастирует с белым фоном и не позволяет посетителям этой страницы пропустить. Нам также нравится, как фраза «Более 1000 просмотров и подсчет» может вызвать FOMO (страх упустить) и стимулировать взаимодействие с пользователем. Используемый здесь призыв к действию также информативен и убедителен — пользователи точно знают, что они получат, нажав на кнопку.

Демио

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

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

Zendesk

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

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

Spotify

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

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

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

Резюме

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

Da Button Factory — Бесплатный генератор кнопок CTA

Что случилось со старой «фабрикой Da Button Factory»?

Da Button Factory была приобретена ClickMinded! Инструмент был обновлен и останется бесплатным. Теперь это генератор кнопки с призывом к действию для наших студентов, изучающих цифровой маркетинг, которые учатся писать в блоге, способствующие конверсии.

Мы рекомендуем вам использовать последние версии Chrome, Firefox, Edge или Safari для использования этого инструмента. У вас могут возникнуть проблемы, если вы используете Internet Explorer — в этом случае просто загрузите один из рекомендуемых браузеров.

Как добавить кнопку к веб-сайту, электронной почте или сообщению в социальных сетях

Есть несколько способов сделать это.

Вариант №1: Загрузить файл изображения кнопки

Это самый простой способ. Просто выберите нужный тип файла и нажмите кнопку загрузки.

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

Вариант № 2: Реализуйте кнопку как HTML + CSS

Da Button Factory также является бесплатным генератором кнопок CSS.Этот вариант требует немного больше знаний HTML и CSS, но в результате веб-страница или электронное письмо будут работать быстрее (поскольку нет необходимости загружать изображение).

Для этого создайте элемент HTML, например «div» или «button», напишите копию CTA и назначьте ей класс. В этом примере мы назовем класс my-cta-button.

Затем скопируйте код CSS, предоставленный инструментом в разделе «Встроить», и добавьте его либо в свой файл CSS, либо на страницу с помощью тегов «style».

Вот и все! Теперь вы разработали и реализовали свою собственную кнопку HTML.

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

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

1. Используйте выделяющийся дизайн кнопок. Убедитесь, что между текстом кнопки и фоном, а также между кнопкой и фоном страницы достаточно контраста.
2. Сообщите своим пользователям, что они получают, нажав на ваш CTA. Вместо того, чтобы использовать что-то общее, например «Нажмите здесь», сделайте описательный текст, например «Купить сейчас» или «Загрузить».
3. При написании CTA-копии используйте от первого лица. Лучше использовать «Просмотреть мою учетную запись» вместо «Просмотреть свою учетную запись».
4. Сделайте ваш CTA-текст кратким и по существу. Избегайте создания излишне многословных призывов к действию.
5. Сделайте свое предложение более привлекательным, включив такие термины, как «Сейчас», «Бесплатно» или «Сохранить». Например, «Загрузите СЕЙЧАС», «Получите БЕСПЛАТНУЮ электронную книгу» или «Сэкономьте 10 $».

Ваша очередь

Da Button Factory от ClickMinded — это онлайн-производитель кнопок, который позволяет быстро и бесплатно создавать красивые, высококонвертируемые кнопки CTA для веб-сайтов, почтовых кампаний или сообщений в социальных сетях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Сохраняйте простоту

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

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

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

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

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

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

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

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

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

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

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

4. Напишите микрокопию, вызывающую ожидания

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

Советы, передовой опыт и вдохновение

Создайте кнопку призыва к действию, которая преобразует: Советы, передовой опыт и вдохновение

Ваш браузер не поддерживается и, возможно, не очень удобен.

Дизайн в деталях.

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

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

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

Dribbble / Эмма Симпсон

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

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

01. Сделайте ее видимой: размер

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

Upwork.com

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

02. Сделайте это видимым: цвет

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

TheLeanStartup.com

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

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

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

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

Dribbble / Крис Браукмюллер

04. Учитывайте контраст

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

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

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

1stwebdesigner.com

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

05. Выберите подходящую позицию

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

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

Dribbble / Mohiuddin Parekh

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

01. Обращайтесь к пользователю напрямую

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

Dribbble / Роб Шлегель для рабочего стола

02. Создайте ощущение срочности

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

Dribbble / James McDonald

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

03. Начните разговор

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

Dribbble / Flioh!

Dribbble / Рой Барбер

04. Будьте краткими и простыми

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

Blinksale.com

05. Добавьте визуальные подсказки

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

Dribbble / Matthew Morek

06. Не подтверждайте позор

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

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

Примеры из практики: что вы можете узнать из A / B-тестирования

Многие веб-дизайнеры используют метод, называемый A / B-тестированием, для сравнения эффективности двух различных подходов к проектированию и сбора данных о том, как они работают.Те, у кого есть ноу-хау, могут сами настроить тест или воспользоваться инструментами, подобными перечисленным здесь. Ребята из ContentVerve.com поделились несколькими проведенными ими исследованиями по кнопкам с призывом к действию. Хотя то, что работает для одного веб-сайта, не обязательно будет работать для другого (вот почему важно тестирование), давайте рассмотрим несколько и посмотрим, сможем ли мы извлечь какие-либо общие указатели.

01. Цвет кнопки:

ContentVerve.com

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

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

ContentVerve.com

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

02. Формулировка кнопки

ContentVerve.com

Четкое и конкретное представление того, чего пользователи должны ожидать от нажатия кнопки (что мы также обсуждали ранее в разделе «Делайте это кратко и просто»), по-видимому, помогает посетителям расслабиться и дает им уверенность в процессе взаимодействия с веб-сайтами.Это определенно то, что, казалось, произошло в этом тесте, который изменил формулировку на кнопке с «Получить членство» на более конкретную «Найдите свой тренажерный зал и получите членство», добавив сначала часть «Найди свой тренажерный зал», поскольку это первый шаг в процессе оформления заказа. Результаты были впечатляющими: количество кликов увеличилось на 200+ процентов. Вывод? Создавайте ценность для пользователей, объясняя, что именно произойдет (или что они получат), когда они нажмут кнопку.

Подводя итог…

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

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

Выразите себя с помощью самой простой в мире программы дизайна.

Навигация по нижнему колонтитулу

---

© 2021 Все права защищены, Canva ^®

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

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

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

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

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

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

Форма

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

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

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

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

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

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

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

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

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

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

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

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

Размер

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

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

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

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

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

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

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

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

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

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

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

Размещение

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

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

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

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

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

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

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

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

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

10 распространенных ошибок при создании кнопок веб-сайта | by Trista liu

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

Иногда дизайнеры допускают несколько ошибок при создании веб-кнопок.Вот 10 распространенных ошибок, когда дизайнеры UI / UX создают кнопки для веб-сайтов.

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

Сделайте кнопки БОЛЬШИМИ! Когда вы создаете кнопки веб-сайта, вы должны убедиться, что люди могут видеть кнопки «заказать сейчас», если вы действительно хотите, чтобы они нажимали на них.

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

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

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

Лучшие материалы для дизайна UI / UX бесплатно

ЗАГРУЗИТЬ

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

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

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

Если пользователям необходимо щелкнуть кнопку, им следует сообщить функции кнопки перед тем, как щелкнуть ее. Звучит очевидно, не правда ли? Не для всех:

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

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

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

Чтобы узнать больше:

The Ultimate Guide — Разница между удобством использования и пользовательским интерфейсом

Что можно и чего нельзя делать при ориентированном на пользователя дизайне

Четыре распространенных ошибки UX и как их эффективно избежать

Дизайн кнопок Лучший Практики — Руководство по UX-дизайну

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

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

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

Кнопки

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

В большинстве случаев существует 5 основных типов кнопок UX;

• Текст,
• Призрак,
• приподнятый,
• Toggle и
• Плавающие кнопки действий.

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

Так что давайте копаться!

Не делать предположений

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

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

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

Позаботьтесь о размещении

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

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

Отличить первичную от вторичной

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

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

Вспомогательные кнопки действий могут быть теми, которые требуют менее важных действий; например, переход на следующую страницу, нажав кнопку «Далее», или отмена процесса, нажав кнопку «Отмена» и т. д.

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

Избегайте наличия более одной кнопки основного действия

Это само собой разумеется.

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

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

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

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

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