Улучшить кнопка: 5 советов по улучшению дизайна кнопок. Основы UI дизайна

Содержание

5 советов по улучшению дизайна кнопок. Основы UI дизайна

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

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

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

Привет, кнопка

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

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

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

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

Будь то сохранение, оформление счета или загрузка- кнопки повсюду.

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

Начнем с анатомии кнопки

У кнопок есть несколько определяющих характеристик.

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

Сама фигура может иметь острые или полностью закругленные углы, задаваемые значением border-radius (или corner-radius в некоторых инструментах).

Метка на кнопке обычно текстовая, иногда с иконкой.

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

Теперь, когда вы знаете основы

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

1.

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

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

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

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

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

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

2. Размер

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

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

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

В эпоху сенсорных экранов мы обычно измеряем их типичным размером кончика пальца по отношению к плотности экрана. При масштабе 1x квадрат размером от 44 до 48 точек становится комфортным для нажатия. Некоторые приложения, такие как Tinder, экспериментировали с увеличением кнопок призыва к действию до 50 точек (высота) и отметили довольно хорошие результаты. Конечно, вы не можете увеличить кнопку слишком сильно, но стоит попробовать размер в 50–60 точек.

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

3. Выравнивание — это все!

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

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

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

4. Работайте над тенями

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

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

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

5. Читабельные метки

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

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

Статьи из серии:

Часть 1: Заливки и границы. Основы UI дизайна

Часть 2: Все, что вам нужно знать о фигурах и объектах. Основы UI дизайна

Часть 3: Тени и размытие. Основы UI дизайна

Часть 4: Экраны и плотность пикселей. Основы UI дизайна

Часть 5: С чего начать проектирование мобильного приложения. Основы UI дизайна

Часть 6: 5 советов по улучшению дизайна кнопок. Основы UI дизайна

Вперед, нажимайте кнопки!

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

Перевод статьи uxdesign.cc

6 универсальных способов улучшить кнопки CTA — Лидзавод

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

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

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

1 – Размер кнопки

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

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

2 – Цвет

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

Перестарались — эти кнопки корзины сливаются с фонами

3 – Текст

Люди покупают с эмоцией, но дополняют ее логикой.

Вот почему кнопки «купить срочно» являются отличным способом склонить покупателей к импульсивной покупке.

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

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

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

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

Эта кнопка Buy Now на Appsumo производит впечатление, что их заказ будет сразу оформлен

4 – Спецэффект

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

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

• Скошенные края (чтобы кнопка будто висела над страницей)

• Градиенты

• Падающие тени

• Стрелы или другие маленькие значки

• Кредитная карта / эмблемы PayPal (чтобы создать доверие и безопасность)

• Изменение цвета кнопки при наведении

5-Положение на странице

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

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

Кнопка ‘Try it Fee’ StereoPill на главном экране, вероятно, привлекает больше внимания, чем ниже стоящая “Узнать больше”

6-Пробелы

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

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

План действий

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

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

• Выберите Ваш текст – сообщите, что получит при клике пользователь

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

• Всегда тестируйте! Кнопки призыва к действию – только один из многих аспектов Вашего сайта, который Вы можете протестировать через A/B.

Перевод материала https://www.crazyegg.com/blog/test-call-to-action-buttons/

Новости

Статьи на финансовые темы

Как получить двойную выгоду от финансовых офферов
Мануал от LEADS. su: как лить на финансовые офферы через свой сайт
Как стать крутым арбитражником с финансовыми офферами? Лайфхаки от Leads.su

Школа CPA

Присоединяйся

How To Design Better Buttons — Smashing Magazine

10 минут чтения
UX, Дизайн, Навигация, Программы, Удобство использования, Рекламный контент
Поделиться в Twitter, LinkedIn

Об авторе

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

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

Если вы хотите немного по-новому заняться созданием прототипов и каркасов собственных проектов, вы можете бесплатно загрузить и протестировать Adobe XD .

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

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

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

Больше, чем просто красиво: как изображения улучшают взаимодействие с пользователем
Улучшенный дизайн интерфейса: логины, меню, переключатели …
Шаблоны проектирования: когда можно нарушать правила

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

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

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

Форма

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

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

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

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

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

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

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

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

(Большое превью)

Тени и блики

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

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

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

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

Четкие и четкие метки

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

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

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

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

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

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

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

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

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

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

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

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

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

Размер и отступы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

Улучшение дизайна кнопок. Альтернативы плохому дизайну кнопок… | Эндрю Койл

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

Чтение: 4 мин.

30 июня 2020 г.

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

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

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

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

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

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

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

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

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

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