Далее текст от лица автора
В этой статье представлены практические рекомендации на тему дизайна кнопок. Они помогут избежать распространённых проблем, связанных с удобством использования и доступностью.
Я работаю дизайнером уже почти двадцать лет и проектировал кнопки для многих проектов. Но кажется, я никогда не уделял достаточное количество времени тому, чтобы детально разобраться в дизайне кнопок. Только недавно я понял, что допускал некоторые распространенные ошибки в их оформлении (и не только я).
Если вы достанете свой телефон, откроете несколько приложений и просмотрите несколько веб-сайтов, то наверняка сразу увидите множество кнопок. Могу поспорить, что у большинства из них есть недочёты, которые создают потенциальные риски для удобства использования и доступности. Даже крупные компании и опытные дизайнеры проектируют множество проблемных кнопок. Поэтому я собрал несколько коротких и практических советов по дизайну кнопок, чтобы вы могли избегать этих проблем и создавать самые лучшие кнопки.
Во-первых, мы рассмотрим дизайн широко распространённых кнопок и определим, какие у них есть проблемы. Я буду использовать объективные принципы проектирования интерфейса и избегать любых субъективных мыслей, основанных на эстетике или «чутье». Я также не буду углубляться в код, потому что сначала нам предстоит многое сделать в области дизайна. В заключение я дам несколько лучших практических рекомендаций по дизайну кнопок.
Распространенные ошибки при проектировании кнопок
В дизайн-системах большинства проектов для кнопок дизайнеры применяют три стиля: главная кнопка, вторичная и третичная. Кнопки показывают действия разной степени важности и поэтому имеют чёткую визуальную иерархию. В этой статье мы сравним группы, которые включают кнопки, выполненные во всех трёх стилях.
Ниже я выделил проблемы с оформлением некоторых типичных кнопок. Эти проблемы представляют собой потенциальный риск для удобства использования, поэтому по возможности избегайте их. По крайней мере, мы стремимся к соответствию требованиям доступности WCAG 2.0 уровня AA, поскольку это наиболее распространённый стандарт и хороший ориентир для начала работы над дизайном кнопок.
Группа кнопок 1
![](https://sun9-69.userapi.com/impg/Vv9oP0W9pycoYz_nmYVmPRFcYEZjp2sY6bUHjg/nB-2DURy91o.jpg?size=1360x232&quality=96&sign=fb671c49c0cf1fd8e210c65b96f70e5f&type=album)
Чтобы помочь людям со слабым зрением различать компоненты интерфейса (например, границы полей формы для заполнения, кнопки и вкладки), сделайте так, чтобы коэффициент контрастности цветов был не менее 3:1. Декоративные стили, которые не нужны для выделения компонентов интерфейса, могут иметь более низкий коэффициент контрастности.
В данном примере коэффициент контрастности заливки вторичной кнопки («Secondary») по отношению к фону составляет менее 3:1. Это слишком мало для того, чтобы люди со слабым зрением могли чётко видеть форму кнопки. Кто-то может возразить, что заливка вторичной кнопки — декоративная и ей необязательно соответствовать коэффициенту контрастности 3:1, чтобы быть доступной. Но я считаю, что заливка необходима для того, чтобы пользователь мог идентифицировать вторичную кнопку как интерактивный элемент. Без заливки это просто обычный синий текст, единственной характеристикой которого является цвет. Мы можем добавить обводку к вторичной кнопке, чтобы решить эту проблему.
Группа кнопок 2
![](https://sun9-1.userapi.com/impg/baX42pGr9h43p3Dvjw6TLA_tPi1QQgnrJanbgw/Se3oyhkuIqw.jpg?size=1360x233&quality=96&sign=02e0c4c8ec9f61316852501257fe0ae6&type=album)
Как правило, светло-серый — цвет неактивных кнопок. В этом примере пользователь может ошибочно принять вторичную кнопку за неактивную из-за заливки светло-серого цвета. Не используйте светло-серые кнопки, чтобы избежать возможной путаницы. Так будет безопаснее. Я бы также посоветовал по возможности не применять неактивные кнопки, но это тема другой статьи.
Группа кнопок 3
![](https://sun9-33.userapi.com/impg/mNdU6WVP63XCW22FMm2_CiimRKKOV4yYxW6T0g/5s1LfSbz7Ws.jpg?size=1360x233&quality=96&sign=49c8ab2a798830ccdd9927ac8e8958c2&type=album)
Для того, чтобы широкая аудитория могла прочитать мелкий текст (18 px и меньше), коэффициент контрастности цветов должен составлять не менее 4,5:1. Проблемы со стилями кнопок в этом примере:
- Коэффициент контрастности текста вторичной кнопки слишком низкий, а должен быть не менее 4,5:1, чтобы обеспечить доступность восприятия
- Главная («Primary») и вторичная кнопки конфликтуют из-за схожего стиля и недостаточного контраста. Это нарушает визуальную иерархию, и пользователю будет непонятно, какое действие наиболее важное. Поскольку у кнопок одинаковый стиль, для того, чтобы они чётко отличались друг от друга, необходимо применить коэффициент контрастности, равный не менее 3:1
Группа кнопок 4
![](https://sun9-45.userapi.com/impg/XR52kpV3lb8otpIikU-xDLn39geTbdPvTM1Wdw/EjfTbkcCYa0.jpg?size=1360x233&quality=96&sign=942860f2f5380c07dd44728d6e4bf431&type=album)
В этом примере у стилей кнопок есть проблемы, аналогичные тем, которые мы рассмотрели в предыдущем примере:
- Пользователь может ошибочно принять вторичную кнопку за неактивную из-за её заливки светло-серого цвета
- Коэффициент контрастности текста вторичной кнопки слишком низкий, а чтобы обеспечить доступность восприятия, он должен быть не менее 4,5:1
- Главная и вторичная кнопки также конфликтуют из-за схожего стиля и недостаточного контраста
Группа кнопок 5
![](https://sun9-71.userapi.com/impg/yU6FIst5hiU6_kVPohpwVJF0I8bDlNMZ2v3fag/O2ibXY8xAzs.jpg?size=1360x233&quality=96&sign=aeb329926a46158d7287fc1da1501f67&type=album)
Слабовидящие пользователи будут с трудом различать эти кнопки, потому что их стили слишком похожи. Коэффициент контрастности между кнопками — единственный способ отличить их друг от друга, но в данном случае он слишком низкий (контрастность должна быть не менее 3:1). Кнопки должны иметь чёткую визуальную иерархию, которая зависит не только от цвета.
Группа кнопок 6
![](https://sun9-47.userapi.com/impg/sgNucy6KcFDukxbUxlTM-h2ZlFiSEoF98jmWSQ/b8r8860UE5c.jpg?size=1360x232&quality=96&sign=73e63a717d7c40c5388afd10315902c6&type=album)
Здесь присутствуют те же проблемы со стилями кнопок, что и в примере выше:
- Стили кнопок слишком похожи по контрасту и стилю, поэтому слабовидящие люди не смогут отличить их друг от друга
- Коэффициент контрастности обводки третичной кнопки («Tertiary») должен быть не менее 3:1, чтобы пользователи без труда считывали её и чётко идентифицировали как интерактивный элемент
Группа кнопок 7
![](https://sun9-73.userapi.com/impg/7U1PMisQTeo68GgTLJ_PFiQAxFEVI0p4nXd3kw/4avk5kb3nWE.jpg?size=1360x233&quality=96&sign=710dd0862207bcfee25e7c1dc0752458&type=album)
Когда речь идёт о доступности, полагайтесь не только на цвет. Важно, чтобы все пользователи могли различать элементы интерфейса, включая тех, кто страдает дальтонизмом.
В данном примере третичная кнопка недоступна для восприятия, поскольку её цвет — единственный индикатор того, что она интерактивная. Это означает, что люди, которые страдают дальтонизмом, не смогут отличить ее от обычного текста.
В некоторых случаях контекст, расположение и близость третичной кнопки к другим кнопкам помогут пользователям отличить её от обычного текста, но всё-таки существует риск, что такое оформление может привести к путанице.
Группа кнопок 8
![](https://sun9-58.userapi.com/impg/xZyw8l76ab13MILriSCPj19NoGhqw3xZnxfWOw/lSy-tZqv5kg.jpg?size=1360x233&quality=96&sign=70cc7a2f2ec55c49f4b69dbb2814bb0a&type=album)
У каждой детали дизайна интерфейса должно быть логическое назначение. Почему в этом примере формы главной и вторичной кнопок отличаются? Эти кнопки действуют по-разному? Избегайте непоследовательных форм кнопок, так как они могут привести путанице.
Группа кнопок 9
![](https://sun9-21.userapi.com/impg/rW7wSiwFKrOX7NrNi-sT13CxQ2PBc4Vpsp31Zg/TZ7KmlT7C20.jpg?size=1360x233&quality=96&sign=6b067019cf538fc7cdb6cb338db12991&type=album)
С помощью визуальной иерархии мы передаём относительную важность элементов интерфейса. Три стиля кнопок указывают на важность каждого действия, чтобы люди понимали, что делать дальше. Проблемы со стилями кнопок в этом примере:
- Непонятная визуальная иерархия, поскольку главная и вторичная кнопки имеют одинаковый визуальный вес
- Коэффициент контрастности заливки вторичной кнопки ниже 3:1. Это слишком мало для того, чтобы люди с ослабленным зрением чётко увидели форму кнопки
Советы по дизайну кнопок
Исходя из вышеперечисленных ошибок в дизайне кнопок, давайте рассмотрим несколько коротких практических советов. Они помогут правильно проектировать удобные и доступные для восприятия кнопки:
- Придерживайтесь чёткой визуальной иерархии в дизайне кнопок, которая зависит не только от цвета
- Используйте коэффициент контрастности между цветом кнопки и цветом фона вокруг неё, равный не менее 3:1, чтобы люди могли идентифицировать её как интерактивный элемент
- Применяйте коэффициент контрастности текста кнопки, равный не менее 4,5:1, чтобы он отвечал требованиям доступности WCAG 2.0 уровня AA
- Если вы сделали кнопки в одинаковом стиле, придерживайтесь коэффициента контрастности между ними, равного не менее 3:1, чтобы люди с ослабленным зрением могли отличить их друг от друга
- Проектируйте достаточно большую область нажатия (не менее 48 px), чтобы пользователи могли с лёгкостью нажимать на кнопки
- Убедитесь, что между кнопками достаточно места, чтобы люди по ошибке не нажали не ту кнопку. Как правило, для перестраховки я использую интервал, равный 16 px
Предложение по улучшению дизайна кнопок
Я предлагаю использовать следующие стили кнопок. Пользователи знакомы с ними, они доступны для восприятия и имеют чёткую визуальную иерархию, которая зависит не только от цвета.
![](https://sun9-72.userapi.com/impg/QD2N6JgBW5IPaXCP0uAyQ8gAjVGY5c8aJQWLCw/jKu8O8xWTKE.jpg?size=1360x233&quality=96&sign=ff53b38db797e2cfb776e4d5ff1c6ce6&type=album)
Как вы могли заметить, третичная кнопка похожа на текстовую ссылку, но действительно ли это проблема? Традиционно текстовые ссылки предназначены для перехода куда-либо, а кнопки — для выполнения действия. Многие не знают об этой схеме взаимодействия и, конечно, не ожидают её увидеть. Поэтому я не думаю, что нам нужно придерживаться этой схемы. Просто убедитесь, что кнопки закодированы как кнопки, а ссылки — как ссылки, независимо от того, как они выглядят. Это поможет избежать проблем с доступностью для программ чтения с экрана.
В примере ниже вы видите баннер, где важные ссылки призыва к действию выглядят как кнопки. Такое оформление позволяет сделать их более заметными и создать более чёткую визуальную иерархию.
![](https://sun9-7.userapi.com/impg/PJbPQDO41IejV0sVhd829FnpUxuc1Cs7J-dv5A/HrtrABcAOtQ.jpg?size=1360x511&quality=96&sign=c8bca0bf7f323ac093fa87d6184e2b90&type=album)
![](https://sun9-24.userapi.com/impg/Q99KgnGZa-jdUiVrMLrtZH5TGV9flzHhewb5zw/aTuMtNZ_7cU.jpg?size=1360x510&quality=96&sign=b315a7f4d9f07b0b0948f00965879d30&type=album)
В примере ниже мы видим диалоговое окно с сообщением. В нём есть три кнопки, оформленные в разных стилях. Несмотря на то, что третичная кнопка выглядит как ссылка, в данном контексте понятно, что нажатие на неё приведёт к выполнению действия, а не к переходу на другую страницу.
![](https://sun9-40.userapi.com/impg/FAOAq6OZR6hswR15YZvMo-crq37uunY72b2VbA/JxEjLvynO6Q.jpg?size=1360x680&quality=96&sign=bbab37e0327681d2e1095faaaa4b4ebb&type=album)
Я не утверждаю, что такой дизайн кнопок — единственно верный способ их оформления. Тем не менее он довольно безопасный и определённо убережёт вас от многих рисков, связанных с юзабилити и доступностью, которые мы обсудили в этой статье.
Обсуждение
Похожее
10 примеров прозрачности в дизайне мобильных приложений
Логотипы, разработанные Полом Рэндом и его биография
Собираем портфолио на Readymag. Шаг пятый — мобильная версия и публикация