Кнопки в дизайне интерфейсов: эволюция стиля и рекомендации

Original author: Nick Babich
  • Translation


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

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

Эволюция стиля


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


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



Диалоговое окно Windows 95 использовало толстые тени и подсветку для создания трёхмерного эффекта, помогавшего пользователям определять визуальную иерархию и распознавать интерактивные элементы.



Скевоморфические кнопки


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



Плоские кнопки


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





Но если всё плоское, как понять, где кнопки?

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

Почти плоский дизайн и «плавающие» кнопки


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

Приложение Maps от Google – пример правильного применения ПАК. В основном пользователи получают от карт маршрут, поэтому есть смысл в том, что ПАК именно этим и занимается.



Ещё один пример использования ПАК в UI – это Evernote. Несмотря на почти плоский дизайн, приложение использует едва видимые тени в плашке навигации и плавающую кнопку.



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


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



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



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



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


Перед тем, как начать работать над собственными кнопками, нужно подумать о том, как дизайн приглашает пользователя к работе с ним. Как пользователи понимают, что элемент является кнопкой? Вам, скорее всего, нужно:
• Чтобы кнопки выглядели, как кнопки (Форма).
• Чтобы пользователю было проще с ними работать (Размер и отступ).
• Подписать кнопки (Ярлыки).
• Использовать цветовой контраст для призыва к действию (Цвет).

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

Форма


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

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



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



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


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

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



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



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

Отступы. Расстояние между кнопками разделяет элементы управления и даёт им возможность «дышать».



Ярлыки


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

В примере можно увидеть диалоговое окно, появляющееся, когда пользователь закачивает файл в Dropbox через веб-приложение. Сообщение предлагает одну кнопку с надписью «Офигенно!». И это название может смутить пользователей, потому что совершенно непонятно, к чему приведёт нажатие на неё.



Цвет


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


Заключение


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

Всем спасибо!
Support the author
Share post

Comments 25

    +9
    > Но всегда в сторону улучшения распознавания и ясности.
    Если говорить откровенно, то последние годы кнопки развивались (по большей части) в сторону ухудшения ясности.
      +1
      Ладно кнопки, но вот переключатели стали просто ужасными. И чем дальше, тем хуже, каждый раз кажется, что хуже некуда, и каждый раз дизайнеры находят, как совершить невозможное и ухудшить ещё.
      +16
      Возможно, некоторые помнят кнопки вот такими
      image

      Возможно, даже такими
      image

      Но…

      Интерфейс, в котором удобно и быстро можно сделать нужное пользователю гораздо важнее того, как кнопки оформлены.
        +1
        Тоже сразу вспомнил эту кнопку с тенью из TP.
        Макось шикарна — плоский дизайн, все контрастно, стильно и современо
          +1
          Долго пытался увидеть макось, увидел в итоге на непонятном графике слово macbook.

          Всё-таки на картинке Linux, а огромная буква X — логотип X Window System, графической подсистемы, которая используется до сих пор.
          +1
          А мы и вот такие ещё помним:
          image
            +2
            Поддерживаю.
            С современными тенденциями очень часто сейчас приходится догадываться или долго искать где вообще находятся кнопки…
              0
              Я их помню еще такими:
              image
              +1

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

                –1
                Потомучто это полка с товарами. И ничего больше. Как они еще должны выглядеть.
                  0
                  Возможно потому что, что бы хорошо продавать, они не должны выглядеть прекрасно :) Еще одна возможная причина — сайт достаточно древний, тогда это был шикарный дизайн, сейчас они не могут его кардинально менять, потому что за эти годы люди привыкли к такому интерфейсу и основная масса не любит, когда им что то меняют без их согласия.
                    0
                    Интересно было бы взглянуть на лучшую альтернативу или современную, в плане дизайна, разумеется.
                    0
                    Потому что это забугорный дизайн, который скорее всего делали индусы по аутсорсу. Тут мелькала статья как люди пытались делать интернет-магазин джинсов с помощью индусов (самых натуральных, а не фольклорных) и какие они им в итоге шаблоны замонстрячили сорвав все сроки, как выразился автор что-то типа из вселенной фильма «Чужие».
                    0
                    Спасибо за публикацию, очень своевременно встретилась :)
                    Не могли бы вы приложить линк на оригинал?
                      +1
                      Согласен.

                      В дизайне Хабра половина важных данных о статье и реакций на неё выше статьи, половина — ниже.

                      Постоянно приходится вспоминать или искать где инфа или действия, куда скроллить надо-то. И всё равно чаще решается скроллингом наугад.
                        0
                        Особенно интуитивное поле поиска доставляет…
                        +3
                        Т.к. тип этой публикации — «Перевод», то ссылка есть в низу страницы, сразу после текста.
                          0
                          Спасибо :)
                            +2
                            Хоть и знаю это, но всё равно каждый раз очень долго ищу. Просто шедевр юзабилити.
                          +4
                          Плоские кнопки без теней самое неудачное, что было в истории кнопок. Вроде в какой-то статье приводился пример метро-дизайна Windows и было показано как теряется плоская кнопка среди интерфейса. Так что абсолютно плоские кнопки, есть абсолютное зло которое нужно немедленно уничтожать с помощью святой инквизиции. Так же неплохо применить «железную деву» к еретику решившему их использовать в интерфейсе :D
                            +1
                            Плоский дизайн должен сдохнуть. И больше никогда не использоваться. iOS > 7 — отвратительно выглядит в убогом плоском дизайне. То, что телефоны покупают, ничего не значит и мало что говорит о дизайне.
                              0
                              ИМХО: плоский дизайн не сдохнет.
                              У него есть одна очень хорошая перспектива — вируальная реальность. Это именно то место, где наложение плоских объектов интерфейса (кнопок, например) на объемную среду будет работать выгодно за счет визуального различия двух сред.
                                0
                                Вот когда будет виртуальная реальность, тогда пусть живёт, а сейчас он должен сдохнуть.
                              0
                              DISAGREE и AGREE в скрине с Google по-моему вообще не кнопки. И не ссылки.
                                0
                                Интересно будет посмотреть, как эволюционируют кнопки в интерфейсах, когда вырастут и будут преобладать пользователи, которые никогда не видели и не пользовались кнопочным калькулятором, вокруг которых большая часть техники — уже с сенсорным управлением, вплоть до выключателей освещения и смыва унитаза.

                                Only users with full accounts can post comments. Log in, please.