Кнопки в приложениях как называются
рис. 1 Стандартная пара кнопок
диалогового окна, кнопки «ОК»
и «Отмена»
Кнопка (Button) - базовый элемент интерфейса компьютерных программ (рис. 1), принцип действия и вид аналогичны кнопке в технике. При нажатии на кнопку происходит программно связанное с этим нажатием действие либо событие. Описание связанных с кнопкой действий предлагается разработчиком пользователю вместе с документацией к приложению. Для того что бы инициировать событие вызываемое кнопкой необходимо переместить курсор на нажимаемую область кнопки и произвести однократное или двукратное (в зависимости от функциональной спецификации) нажатие на левую кнопку мыши. Простая кнопка имеет два состояния - "нажато" и "отжато". Кнопка может изменять вид в зависимости от состояния и положения курсора или фокуса (например при «нажатии» зачастую визуально имитируется утапливание её в поверхность). Группа кнопок схожей функциональности может быть объединена в единую панель инструментов. Кнопка чаще всего представляют собой ограниченную область прямоугольной выпуклой формы с краткой подписью(или картинкой) того действия, которое может быть произведено по средством её нажатия.
Радиокнопка
Радиокнопка (Radio button), или переключатель — элемент интерфейса, который позволяет пользователю выбрать одну опцию (пункт) из предопределенного набора (группы). Радиокнопки представляют собой элемент круглой (реже — квадратной или ромбовидной) формы, а выбранный элемент выделяется чаще всего точкой внутри. Рядом с кнопкой располагается описание выбираемого элемента. Радиокнопки располагают группами по несколько штук, причём в любой момент выбрана может быть только одна кнопка из группы.
При инициализации приложения какая-либо кнопка из группы, как правило, уже выбрана, но технически возможно оставить не выбранной ни одну. В такое состояние группу радиокнопок привести средствами только самих радиокнопок невозможно.
Управление радиокнопками может совершаться как при помощи мыши, так и с клавиатуры.
Флажок
Флажок (Сheck box) — элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Во включенном состоянии внутри чекбокса отображается отметка (галочка (✓), или реже крестик(×)).
В группе чекбоксов можно сделать выбор нескольких позиций, также обычно существует отдельный флажок чтобы выбрать все элементы или снять выбор со всей группы.
Управление флажками может совершаться как при помощи мыши, так и с клавиатуры.
Список
Список (List box) — элемент графического интерфейса пользователя, который отображает прокручиваемый список с элементами. Позволяет пользователю выбрать один или несколько элементов из списка, как правило с удержанной клавишей Ctrl или Shift, чтобы сделать множественный выбор. Все элементы содержатся в списке статически, но могут быть добавлены и динамически.
Список занимает ограниченную область в интерфейсе где показано только конечное число его элементов. Для того чтобы выбрать не отображенные позиции нужно перемещать ползунок(обычно справа от списка) при помощи мыши или навигацию, нажимая Вниз( ↓ ), Вверх( ↑ ) на клавиатуре.
Дерево
Дерево, иерархический список (Tree view) - элемент графического интерфейса пользователя, который представляет собой совокупность связанных отношениями структуры пиктограмм в иерархическом древе. Каждый элемент чаще всего называют узлом и ветвью, который может иметь несколько подразделов.
Обычно используется для просмотра структуры каталогов (папок) и других подобных элементов, связанных иерархическими отношениями.
Каждый пункт (узел, ветвь) можно развернуть для просмотра подпунктов (если такие существуют), а также свернуть, чтобы их скрыть. Все манипуляции производятся при помощи мыши.
Комбинированный список
Комбинированный список, поле со списком (Combo box) — элемент графического интерфейса пользователя. Cочетание выпадающего списка (раскрывающегося при щелчке мыши) и однострочного текстового поля, которое позволяет пользователю ввести значение вручную или выбрать из списка.
Перемещения в выпадающем списке можно совершать как при помощи мыши так и с клавиатуры. Ввод данных в текстовое поле совершается при помощи алфивитно-цифрового блока клавиатуры.
Поле редактирования
Поле редактирования (Textbox, Edit field) - элемент графического интерфейса пользователя, позволяющее производить ввод и вывод текстовой информации в определённой области интерфейса. Если записанная в поле редактирования информация превышает его размеры, необходимо использовать вертикальную или горизонтальную полосу прокрутки, двигая ползунок вертикально или горизонтально соответственно при помощи мыши. В некоторых интерфейсах для удобного отображения информации можно изменять размеры поля редактирования. Ввод данных в текстовое поле совершается при помощи алфивитно-цифрового блока клавиатуры.
Меню́ (Menu) — элемент интерфейса пользователя, позволяющий выбрать одну из нескольких перечисленных опций программы. В современных операционных системах меню является важнейшим элементом графического интерфейса пользователя.
- пункт меню — отдельные опции приложения;
- пиктограмма, иллюстрирующая действие;
- разделитель (визуально разделяет группы однородных пунктов меню);
- «упор» ограничивает ход сдвига курсора.
Главное меню
Главное меню́ (Сontext menu) — меню, набор позиций предполагаемо используемый пользователем чаще всего. Главное меню занимает в интерфейсе обычно одно из наиболее удобных мест. В большинстве интерфейсов состав меню можно менять при помощи настроек приложения. Главное меню может "всплывать" при нажатии на определённую кнопку либо сразу отображаться при запуске приложения. Для некоторых команд меню могут использоваться специальные сочетания клавиш.
Контекстное меню
Конте́кстное меню́ (Сontext menu) в графическом интерфейсе пользователя — меню, набор команд в котором зависит от выбранного, или находящегося под курсором в момент вызова объекта, а также состояния рабочей среды и программы, в которой этот объект находится — то, что в совокупности представляет собой контекст для этого меню.
Вызов контекстного меню осуществляется как правило по нажатию «контекстной» (правой для правшей) кнопки мыши.
Панель инструментов
Панель инструментов (Toolbar) — элемент графического интерфейса пользователя, предназначенный для размещения на нём нескольких других элементов. Обычно представляет собой горизонтальный или вертикальный прямоугольник, в котором могут быть относительно постоянно размещены такие элементы, как:
- кнопка;
- меню;
- поле с текстом или изображением;
- выпадающий список.
Как правило это элементы, вызывающие часто используемые функции, также доступные из меню окна (которое тоже может находиться на панели). Функции элементов могут обозначаться значками и/или текстом. Если элементы не умещаются на панели, то могут быть добавлены кнопки прокрутки, или меню с этими элементами. Состав и порядок элементов панели можно изменять в опциях приложения.
Строка состояния
Полоса прокрутки
Полоса прокрутки (Scrollbar) - элемент графического интерфейса, предназначенный передвижения содержимого элементов вывода информации, используется чтобы переместить скрытую информацию в видимую область с помощью ползунка (slider). Полоса прокрутки обычно располагается справа или внизу другого элемента интерфейса.
Чтобы спроектировать правильное взаимодействие, нам нужно взглянуть на историю и происхождение физических кнопок – прямого предшественника компонента интерфейса, который сегодня широко используется во всех цифровых продуктах. Кнопки потрясающие. Прикосновение пальца приводит в движение прибор, автомобиль или систему, даже, если пользователь не понимает лежащие в основе их работы механизмы или алгоритмы. В своей книге «Power Button» Рэйчел Плотник прослеживает истоки современной культуры использования кнопок и описывает, как нажатие кнопок стало средством цифрового управления, обещающее легкость, компактность и надежность.
«Вы нажимаете кнопку, а мы делаем все остальное», – так, посредством броского и четкого слогана, Kodak обратились к потенциальным покупателям своих фотоаппаратов.
Это очаровывает пользователей даже сегодня. Мгновенное удовлетворение от того, что все происходит благодаря простому прикосновению. Несмотря на то, что тонны новых бытовых приборов и других устройств переходят на сенсорное управление, физические кнопки не скоро исчезнут, а сформированные ими поведенческие привычки влияют на интуитивно понятный и простой в использовании дизайн кнопок.
Кнопки vs Ссылки
Кнопки сообщают о действиях, которые пользователи могут выполнять. Они обычно размещаются в интерфейсе в таких местах, как: диалоговые окна, формы, панели инструментов и т. д. Различие между кнопками и ссылками имеет значение:
Состояние кнопки сообщает ее статус пользователю
Создание правильных взаимодействий и стилей для ваших кнопок является одной из наиболее важных частей процесса. Каждое состояние должно иметь четкие аффордансы, которые отличают его от других состояний и окружающего макета, но не должны радикально изменять компонент или создавать много визуального шума.
Normal — сообщает, что компонент интерактивен и включен.
Focus — сообщает, что пользователь выделил элемент, используя клавиатуру или другой метод ввода.
Hover — сообщает, когда пользователь навел курсор на интерактивный элемент.
Active — Активное или нажатое состояние сообщает о том, что пользователь нажал на кнопку.
Progress/Loading — используется, когда действие не выполняется немедленно и сообщает, что компонент находится в процессе завершения действия.
Disabled — сообщает, что компонент в настоящее время не является интерактивным, но может быть включен в будущем.
Кнопки бывают разных цветов, форм и размеров
Наиболее распространенными являются прямоугольные кнопки с закругленными углами, которые легко идентифицировать и которые хорошо смотрятся рядом с полем ввода. Выбор правильного стиля для кнопки будет зависеть от цели, платформы и рекомендаций. Вот некоторые из самых популярных вариаций стиля:
Стили сообщают о важности действия
Стили в основном используются для отличия более важных действий от менее важных. Создайте иерархию действий, которая будет направлять пользователя там, где есть множество вариантов. Обычно у вас может быть одна заметная кнопка (этот стиль часто называется «основной»), несколько средних «второстепенных» и слабо заметных «третичных» действий.
Иногда нет кнопки «по умолчанию»
Как правило, вы хотите сделать кнопкой «по умолчанию» (использовать основные стили) наиболее часто выбираемую кнопку, и перевести ее в сфокусированное состояние. Это поможет большинству пользователей быстрее выполнять свои задачи и направит их в правильном направлении.
Исключение составляют случаи, когда все варианты одинаково важны или действие особенно опасно. В таких случаях вы хотите, чтобы пользователи явно выбирали кнопку, а не случайно.
Не заставляйте меня думать
«Не заставляй меня думать» – это название книги юзабилити-инженера Стива Круга. Один из многих моментов, которые он затрагивает – насколько важно сделать интерфейс понятным для пользователей, а не создавать головоломки или лабиринты. Опираясь на многолетний опыт использования различных устройств и других продуктов, мы сформировали определенное ожидание, как кнопки выглядят и функционируют. Значительное отклонение от того, что считается «стандартным», вызовет задержку и замешательство у пользователей.
Избегайте использования одного и того же цвета для интерактивных и не интерактивных элементов. Если интерактивные и не интерактивные элементы имеют один и тот же цвет, людям будет трудно понять, где нажимать.
Согласованность повышает скорость и точность
«Согласованность – это один из самых мощных принципов юзабилити: когда вещи всегда ведут себя одинаково, пользователям не нужно беспокоиться о том, что произойдет»
– Якоб Нильсен
Согласованность повышает скорость и точность, помогает избежать ошибок. Создайте предсказуемость, которая поможет пользователям чувствовать контроль и способность достичь своих целей в вашем продукте. При создании первичного, вторичного и третичного стилей постарайтесь найти ряд общих элементов, таких как цвет, форма и т. д. Постарайтесь не только быть последовательными внутри своей дизайн-системы, но и учитывайте платформу, для которой проектируете.
Сделайте кнопки достаточно большими для надежного взаимодействия
Нажатие кнопки должно быть простой задачей, и, если пользователь не может успешно нажать на кнопку или по ошибке нажмет на соседний элемент, это приведет к отрицательному опыту и потере времени.
Для большинства платформ рассмотрите возможность создания сенсорных целей как минимум 48 x 48 dp. Сенсорная цель такого размера дает физический размер около 9 мм, независимо от размера экрана. Рекомендуемый целевой размер для сенсорных элементов составляет не менее 7–10 мм.
Для кнопок с иконками убедитесь, что цель касания выходит за пределы визуальных границ элемента. Это относится не только к мобильным устройствам или планшетам, но и к таким устройствам ввода, как компьютерная мышь.
Проектируйте для доступности
Эту рекомендацию следует применять для любого компонента. Размер целевой области был одним из факторов, влияющих на доступность. К другим факторам относятся размер шрифта, цвет и контраст. Существует множество инструментов, которые помогут вам легко проверить, как работают ваши компоненты.
Дизайнеры должны тесно сотрудничать с командами разработчиков, чтобы убедиться, что кнопки работают с программами чтения с экрана. Роль кнопки должна использоваться для кликабельных элементов, которые запускают ответ при активации пользователем. Добавление role=”button” приведет к тому, что элемент отобразится для программы чтения с экрана, как элемент управления кнопками.
Жесты становятся достаточно широко распространенными
Жесты позволяют пользователям взаимодействовать с приложением с помощью касания. Использование касания в качестве альтернативного способа выполнения задачи может сэкономить время и дать тактильный контроль. Хотя некоторые жесты, такие как свайп для запуска контекстных действий, двойной тап, чтобы поставить лайк или долгое нажатие, с каждым днем все шире используются, они все еще не очень заметны для обычного пользователя. Я бы предложил использовать их в качестве альтернативного способа выполнения действия для более продвинутых пользователей.
Хорошая метка кнопки приглашает пользователей действовать
То, что говорят ваши кнопки, так же важно, как и то, как они выглядят. Использование неправильной метки может запутать пользователей, привести к потере времени и, возможно, к большим ошибкам.
Хорошая метка кнопки приглашает пользователей действовать. Лучше всего использовать глаголы и пометить кнопку тем, что она на самом деле делает. Как будто кнопка спрашивает пользователя: «Вы хотите (добавить в корзину)?» или «Хотите (подтвердить заказ)?».
Ok/Cancel или Cancel/Ok? Оба варианта хороши
Оба варианта – идентичны, и дизайнеры могут часами спорить о своих предпочтениях.
- Размещая на первом месте действие OK, вы поддерживаете естественный порядок чтения. Это может помочь сэкономить время, если мы знаем, что, скорее всего, именно это и выберет пользователь. Windows ставит ОК на первое место.
- Размещая кнопку OK в конце, вы улучшаете юзерфлоу. Кто-то может поспорить, что OK, как кнопка «Следующий», переместит пользователя вперед. Если поставите OK в конце, вы поможете пользователям оценить все варианты, прежде чем предпринимать действия, и поможете избежать ошибок и поспешных решений. Apple ставит ОК на последнее место
Любой из вариантов имеет аргументы в свою пользу, и ни один из этих вариантов не приведет к катастрофическим последствиям для юзабилити. Я в основном ставлю ОК в списке действий на последнее место. Например, в диалоговом окне (возможно, потому что я преимущественно использую Mac).
Отключенные кнопки – отстой
Все бывали в такой ситуации. Вы застревали на экране на несколько секунд или минут, пытаясь выяснить, почему ваш прогресс заблокирован отключенной кнопкой и, что вам нужно сделать, чтобы оживить ее. Отключенные элементы управления используются, чтобы указать, что компонент в настоящее время не является интерактивным, но может быть включен в будущем. Отключенные кнопки используются потому, что удаление кнопки из ее исходного местоположения и ее раскрытие в более позднем контексте может запутать пользователей.
Я предлагаю, по возможности, избегать отключенных кнопок. Лучше, чтобы они всегда были включенными, и, если пользователи не предоставили необходимую информацию, просто выделите пустые поля или покажите уведомление.
О каких компонентах вы хотели бы узнать в следующей статье? Дайте знать в комментариях.
Итак, в этой статье мы рассмотрим:
- Кнопки действия
- Общие стили кнопок
- Выбор цвета и стиля кнопки
- Состояния кнопок и обратная связь
- Надпись кнопки
- Сенсорные цели
- Размещение кнопок
- Кнопка доски почета
- Заключительные мысли
1. Кнопки действия
В этом разделе мы рассмотрим иерархию кнопок и язык, на котором они общаются. Действия кнопок определяются не тем, как они выглядят (хотя пользователи должны иметь возможность понять по внешнему виду, что обозначает та или иная кнопка), а скорее тем, как они используются.
1. Кнопки призыва к действию (CTA/C2A)
Кнопка призыва к действию, в зависимости от ситуации, обычно побуждает пользователей зарегистрироваться/купить сейчас/залогиниться и т.д. Такие кнопки нужно использовать там, где платформа хочет настоятельно предложить действие, которое следует сделать пользователю.
Кнопка призыва к действию.
Для призыва к действию мне нравится использовать округлые кнопки, так как они достаточно эффективно привлекают внимание.
2. Первичное действие
Хотя кнопки призыва к действию и первичного действия могут выглядеть одинаково, я бы хотел их разделить. В то время как кнопки CTA выполняют свою функцию, первичные кнопки должны быть сильным визуальным индикатором, который поможет пользователю осуществить путешествие. Такие кнопки следует использовать в ситуациях, когда пользователь хочет «Завершить», «Начать», «Далее» и так далее.
Кнопка первичного действия.
Для кнопок этого типа я использую простые прямоугольные кнопки с округлыми краями.
3. Вторичное действие
Два варианта вторичных действий рядом с первичными.
Для данных кнопок рекомендуется использовать контурные кнопки или текстовые ссылки.
4. Третичное действие
Третичные кнопки обычно используются для разных действий. Например, когда действие важно, но может не соответствовать тому, что пользователь хочет сделать в данный момент. Это может быть кнопка «добавить друга», «изменить», «добавить новое» или «удалить», при условии, что эти действия не первичные.
Третичные кнопки в разных формах.
Проще говоря, для этого нужно использовать менее заметные стили кнопок.
2. Общие стили кнопок
Сплошные кнопки
Сплошная кнопка.
Контурные и призрачные кнопки
Контурная кнопка (слева) и призрачная кнопка (справа).
Закругленные кнопки
Закругленная кнопка.
Примечание: Расположенные рядом закругленные кнопки выглядят ужасно. Каждый раз, когда вы располагаете рядом несколько закругленных кнопок, где-нибудь плачет UI дизайнер.
FAB (плавающая кнопка действия)
Текстовая ссылка
Оформление текстовых ссылок.
Когда дело касается цвета, большинство сайтов используют синий, так как он наиболее идентифицируем как ссылка.
- Вариант 1: размер иконки соответствует высоте заглавных букв.
- Вариант 2: размер иконки намного больше высоты строки.
Предупреждение: Если значок лишь немного больше высоты заглавных букв, он будет выглядеть негармонично.
Кнопка-значок
На кнопке-значке нет надписи, присутствует только иконка. Благодаря этому они экономят много места в интерфейсе. Также они позволяют размещать на небольшом пространстве и другие кнопки-значки.
Кнопки-значки в разных стилях.
Предупреждение: Если вы разрабатываете продукт для плохо разбирающихся в компьютерах людей, используйте кнопку с надписью. Особенно для кнопок с более абстрактным содержанием.
Иконка рядом с текстовой ссылкой
Некоторые текстовые ссылки могут дополняться иконкой. Обычно они не выходят за высоту строки.
Кнопки ссылки с иконками.
3. Выбор цвета и стиля кнопки
При дизайне кнопок необходимо учитывать несколько факторов.
1. Цвет
Во время дизайна продукта вы всегда должны думать о людях недостатками. Чтобы убедиться, что цвета доступны каждому, вы можете использовать онлайн-сервис для проверки контрастности. Вот тот, который я использую.
Разноцветные кнопки.
Кроме того, при выборе цветовой палитры следует учесть язык цвета. Так, как несогласованность контекста и цвета может вызвать путаницу.
Кнопки «Удалить», «Просмотреть предупреждения», «Сохранить» и «Еще».
Например, зеленая кнопка «Удалить» собьет с толку любого пользователя, как и красная «Сохранить».
2. Закругление углов
Кнопки с разными настройками радиуса скругления.
Примечание: как упоминалось ранее, не располагайте несколько закругленных кнопок рядом, поскольку это режет глаз.
3. Тень
Тень на кнопке создает ощущение, будто кнопка находится за пределами страницы, и это действительно привлекает внимание. Тени также могут быть использованы для обозначения различных состояний. Material Design использует тень очень органично, делая кнопку «ближе» при наведении курсора.
Кнопки с разными настройками тени.
4. Стиль надписи
Стиль надписи зависит от шрифта и от того, насколько легко его читать. При выборе шрифта убедитесь, что он разборчивый.
Кнопки с разными стилями надписей.
Вот несколько простых способов сделать шрифт читабельным:
- Лучше использовать заглавные буквы в начале каждого предложения или капитализировать начальные буквы всех слов в предложении, чем делать все буквы заглавными. (Хотя Material Design использует кнопки со всеми заглавными буквами).
- Убедитесь, что цвет надписи выделяется на фоне кнопки. В этом поможет этот инструмент.
- Выбирая шрифт убедитесь, что он разборчивый и достаточно большой. Также шрифт должен быть средней плотности.
5. Вертикальный отступ
Размер кнопки играет большую роль в доступности интерфейса. Большинство неопытных дизайнеров скажут что-то вроде «Кнопки должны иметь высоту 36 пикселей». Это не лучшее решение, особенно для веб-дизайна. Всегда нужно учитывать высоту строки используемого вами шрифта и добавлять к нему единицу измерения. Например: «Надпись моей кнопки имеет высоту строки 20 пикселей, а отступ по вертикали 8 пикселей».
Кнопки с разным вертикальным отступом.
Спросите зачем? Существует две причины:
6. Горизонтальный отступ
Первый вариант:
Выровняйте ширину кнопки по сетке. Это хороший способ, который позволяет сохранить все кнопки одинаковой длины. Однако это ограничивает количество слов, которые вы можете использовать.
Кнопки, ширина которых определяется сеткой.
Второй вариант:
Настройка отступа по бокам. Я обычно устанавливаю некий стандарт минимальной ширины кнопки, чтобы не было очень маленьких кнопок. Хотя этот способ дает возможность вместить любое количество текста, кнопки могут получиться очень неровными.
Кнопки, ширина которых определяется отступом и длиной надписи.
4. Состояния кнопок и обратная связь
Состояния кнопок позволяют пользователю узнать, может ли он кликнуть или уже это успешно сделал. Также следует помнить, что кнопка может иметь несколько состояний. Например, она может быть «активной» и «зависать» одновременно.
1. Активное и неактивное состояние
Активная и неактивная кнопка.
2. Hover & hover off (навести курсор/убрать курсор)
На десктопных устройствах кнопка должна иметь разные состояния, чтобы пользователь знал, что на нее можно нажать. Также анимация может побудить пользователя к нажатию. Обычно состояние «hover off» противоположно состоянию «hover on», но это не обязательно.
Кнопка, реагирующая на наведение курсора.
Примечание: Состояния наведения никогда не будут видны на планшете и мобильном телефоне, потому что пальцы не могут «зависать». Поэтому если вы разрабатываете приложение, не беспокойтесь об этом состоянии.
3. Фокус внимания
Если у пользователя слабо развита мелкая моторика, возможно придется использовать навигацию в виде вкладок. Для того чтобы показать, что кнопка вкладки «кликабельна», но еще не нажата, должно быть состояние «фокуса».
4. Нажатие кнопки
Кнопка, демонстрирующая состояние нажатия.
5. Нажатая кнопка
Кнопки нуждаются в нажатом состоянии, чтобы указать пользователю, что они были нажаты.
Кнопка, демонстрирующая состояние нажатой.
5. Надпись кнопки
1. Использование глаголов
2. Шрифт
Вы также должны решить, какой вариант шрифта использовать. Вот некоторые общие рекомендации:
- Все буквы заглавные, например, «СЛЕДУЮЩИЙ РАЗДЕЛ». Я использую их для более профессиональных платформ.
- Капитализация начальных букв всех слов в предложении, например, «Следующий Раздел». Я стараюсь ее не использовать, так как текст становится трудночитаемым. Что касается тона, это нечто среднее между профессиональным и разговорным тоном.
- Капитализация начальной буквы только первого слова в предложении, например, «Следующий раздел». Я использую ее для более дружественных или разговорных платформ.
- Все буквы строчные, например, «следующий раздел». Я очень редко использую надписи со строчными буквами. Наверное, это самый неофициальный выбор из существующих.
3. Последовательность
При выборе надписей для кнопок убедитесь, что вы сохраняете последовательность. Вот несколько вещей, которые следует сделать в начале проекта:
- Выберите количество слов: Одно, два или более слов на кнопку;
- Выберите регистр: Капитализация начальной буквы только первого слова в предложении, капитализация начальных букв всех слов в предложении, все буквы заглавные, или все буквы строчные;
- Структура надписи: Например, «глагол» + «существительное» или просто «глагол» и так далее.
6. Сенсорные цели
Размер кнопки для настольных приборов
Поскольку курсор на рабочем столе меньше, чем палец на сенсорном экране, вы можете сделать кнопки намного меньше.
Пользователю никогда не должен искать кнопку, поэтому вы должны определить правильную иерархию и навигацию для вашего интерфейса.
Размер кнопки для сенсорного экрана
Исследование MIT Touch Lab показало, что часть пальца, используемая для прикосновения к экрану, составляет 8–10 мм, поэтому минимальный целевой размер должен быть 10 мм или больше.
Итак, какого размера нужно делать кнопки? Вот что говорят эксперты:
Material Design считает, что цель касания должна быть 48dp x 48dp с 8dp между точками касания.
7. Размещение кнопок
Спорное положение первичной кнопки
Если бы вы располагали 2 кнопки рядом, на какой стороне находилась бы первичная кнопка?
Две позиции для первичных и вторичных кнопок.
Вариант A показывает первичную кнопку слева. Основным аргументом является то, что пользователь первым делом смотрит налево.
Вариант B показывает первичную кнопку справа. Используется для того чтобы пользователь сначала увидел дополнительную кнопку. Таким образом, он осведомлен о возможных вариантах и может сделать выбор. Элементы, расположенные справа, также указывают на продолжение.
8. Кнопка доски почета
В том разделе я хочу отметить некоторые крутые принципы дизайна и систем. Мне нравятся кнопки Material Design System именно потому, что их принципы действительно хорошо продуманы.
Кнопка Material Design System
Ни один разговор о кнопках не будет полным без упоминания Material Design. Их работа над кнопками и то, как они взаимодействуют с другими компонентами в системе, заслуживает внимания.
Просмотрите их раздел о кнопках здесь.
А также информацию о плавающих кнопках действий можно просмотреть тут.
9. Заключительные мысли
Создать интерфейс без кнопок нереально. Они выполняют одну из самых важных функций, именно поэтому кнопки заслуживают особого внимания. Потратьте время, чтобы понять, как они работают и как их правильно использовать. Только так вы сможете создать максимально комфортный интерфейс для ваших пользователей.
В процессе создания форм дизайнеру часто приходится решать, какой элемент интерфейса использовать для обозначения выбора. Конечно, у всех есть свои наработанные принципы. И тем не менее, есть несколько моментов, которые стоит учесть при подборе элемента выбора.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Наиболее распространенными элементами выбора являются чекбоксы, переключатели, радиокнопки и выпадающие списки. Каждый из них при правильном использовании работает просто отлично. В этой статье мы поговорим о чекбоксах и переключателях.
Чекбоксы
Мы используем чекбоксы, когда есть список опций, из которых пользователь может выбрать любое количество: хоть ни одной, хоть одну, хоть несколько. Иными словами, каждый чекбокс существует независимо от остальных чекбоксов в списке, а выбор одной опции не снимет флажок с остальных.
Переключатели
Элемент интерфейса “переключатель” символизирует настоящий переключатель, при помощи которого можно что-то выключить или включить.
Обычно переключатели используются для обозначения действия (например, запуск или прекращение чего-то). Так, например, работает выключатель света:
Используйте стандартные визуальные представления
Чекбокс должен выглядеть как небольшой квадратик, в котором (если его выбирают) появляется небольшая галочка или крестик.
Переключатель должен выглядеть, как тумблер включения/выключения.
Здорово, если момент взаимодействия будет сопровождаться понятным визуальным фидбэком. Небольшая анимация — важный штрих, который делает взаимодействие более эффективным. Это особенно важно на мобильных устройствах, где элементы управления должны казаться осязаемыми, хотя и находятся под слоем стекла.
Располагайте списки вертикально
Постарайтесь делать вертикальные списки, чтобы каждый пункт был в отдельной строке. Это справедливо как для переключателей, так и для чекбоксов. Если вы все-таки решили использовать горизонтальный лейаут, обратите внимание на расстояния между кнопками/чекбоксами и лейблами: должно быть понятно, к какой кнопке относится каждый лейбл. Ниже — пример плохой работы с расстояниями.
Текущее состояние переключателя нужно указывать не на нем, а за его пределами
При проектировании переключателей постарайтесь избежать путаницы с текущим состоянием. Для примера возьмем переключатель из iOS 6 и рассмотрим состояние ON с голубой заливкой.
Как понять, переключатель сейчас в состоянии ON или его нужно передвинуть, чтобы перевести на ON? “ON” — это состояние (прилагательное) или действие (глагол)? Не ясно.
Не нужно путать пользователей: очень важно разграничить действие и состояние. А за счет подсветки текущего состояния дизайн можно сделать еще удобнее:
Используйте в названиях полей утвердительные формулировки
Названия полей должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” — в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило.
Пусть чекбокс “включается” по клику на лейбл
У всех чекбоксов есть лейблы, но не у каждого есть тег <label>. Чекбоксы маленькие, и поэтому, согласно закону Фиттса, по ним бывает сложно попасть. Расширьте целевую зону — дайте возможность нажимать не только на чекбокс, но и на лейбл (или любой другой дополнительный текст).
Используйте чекбоксы для изменения настроек; не используйте для обозначения действия
Представим себе опцию, которая подразумевает только два возможных варианта. Что использовать в этом случае: переключатель или чекбокс? Основное отличие в том, что чекбокс означает статус, а переключатель — действие. Можете представить себе реальный выключатель — какое действие он выполняет в вашей ситуации? Если картинка сложилась, можете смело использовать для этой опции переключатель.
Посмотрите на пример ниже. Понятно, что переключатель сети Wi-Fi находится в положении “on”. А вот чекбокс немного смущает. Пользователю приходится думать, включен ли Wi-Fi или поставить галочку, чтобы включить его.
Обеспечьте обратную связь от взаимодействия с переключателем/чекбоксом
А вот с переключателями все наоборот. Когда пользователь двигает переключатель, он ожидает немедленных изменений. Мы привыкли к этому в реальной жизни: когда щелкаешь выключателем, сразу загорается свет.
А чекбоксы отлично работают в ситуациях, когда нужно сделать несколько промежуточных шагов, чтобы изменения вступили в силу.
Выбирая элементы интерфейса, будьте последовательны и предсказуемы. Следуйте стандартам дизайна — и вашим пользователям будет проще понять, как работает тот или иной элемент. В свою очередь, нарушение принципов дизайна делает интерфейс хрупким и непредсказуемым — словно что угодно может случиться без предупреждения.
Если вам понравилась статья и перевод, дайте нам знать — нажмите ♡
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Скулкина и Ринат Шайхутдинов.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Читайте также: