как сделать кнопки в приложении по-настоящему удобными / Хабр
Вам точно знакомо это чувство, у которого нет названия, — смесь фрустрации и раздражения, когда используешь приложение с плохим интерфейсом. Ну, когда ты понимаешь, что нужно очень аккуратно нажать кнопку на сенсорном экране вот здесь, чтобы всё заработало.
Представьте, что вы создали интерфейс, в котором этой проблемы просто не существует. Интерфейс, который позволяет снизить число ошибок, выполнять команды быстрее и, в конечном счете, делает продукт лучше.
Это вполне реально. И вот как это сделать.
Ты подвел меня в последний раз, IOS 9
Я постоянно сталкивался с этой проблемой в iOS 9 на панели управления музыкой на заблокированном экране. Всегда, когда бы я ни пытался на ходу переключить трек, я не мог сделать это с первой, второй, а то и третьей попытки. Зато я случайно врубал громкость на максимум или вообще нажимал на паузу.
В конечном счете, плохой интерфейс заставил меня изменить привычки – я стал просто избегать его.
Это абсолютный провал — интерфейс, созданный только для того, чтобы экономить мое время, в конце концов заставил меня потратить гораздо больше времени.
Каким-то чудом панель управления музыкой в iOS 9 нарушила ключевое правило пользовательского интерфейса. Но какое?
К счастью, в новой iOS 10 дизайн изменили. Более крупные элементы управления. Шире площадь для нажатия. Информация о том, кто же поет у меня в наушниках, — крупнее. Другими словами, процент неточных нажатий на ходу значительно снизился. Почему? Наука знает ответ на этот вопрос.
Чему могут научить 120 миллионов нажатий
В 2006 исследователи университета Оулу, Финляндия и университета Мэриленд, Колледж Парк объединились. Они собирались выяснить оптимальный размер кнопки для использования смартфона одной рукой.
Они протестировали два сценария. В первом участники совершали одно действие (например, запустить приложение, поставить галочку или переключить трек). Во втором — цепочку действий, например, ввести номер телефона.
Исследователи работали с кнопками разного размера для каждого сценария. Они выяснили, что процент ошибок значительно увеличивается, если диаметр кнопки для разового действия меньше 9.2 миллиметров, а для повторяющегося — 9.6 миллиметров.
Любопытно, что во время последовательной работы на экране процент ошибок был стабильным при размере кнопки от 9.6 миллиметров до 11.5 миллиметров. Подробнее об этом — чуть дальше.
График 4: Средний процент ошибок для кнопок разного диаметра
Пять лет спустя исследователи из двух немецких институтов провели похожее исследование. Они планировали найти оптимальный размер для кнопки на тачскрине.
Для своего эксперимента ученые создали игру для Android. Её скачали 100 000 раз, и она зафиксировала более 120 миллионов касаний экрана. Геймплей был очень простым: игроки с помощью тапов ловили плавающие по всему экрану круги разных размеров.
Проанализировав все касания, ученые обнаружили, что на кругах диаметром 15 миллиметров и меньше количество промахов увеличивалось, а после 12 миллиметров вообще резко увеличивалось.
А по мишеням диаметром меньше 8 миллиметров игроки промахивались почти в 40% случаев!
Как ни странно, это исследование заодно говорит о незначительном увеличении точности попаданий, если цель пользователя больше 12 мм.
Есть множество других подобных исследований, которые можно привести в пример, включая рекомендованные размеры элементов в гайдлайнах Apple, Google или Microsoft (вернемся к ним позже). Но давайте сперва обратимся к прадедушке всех этих стандартов — закону Фиттса.
Предыстория
Создатели продуктов просто обязаны пользоваться результатами тяжких трудов своих предшественников. Пол Фиттс, психолог из университета Огайо, в 1954 году разработал принцип, который позже станет известен как закон Фиттса. Он стал основой взаимодействия человека и компьютера.
Закон Фиттса в общем смысле — это модель того, сколько времени требуется, чтобы положить руку на объект. Грубо говоря, чем объект ближе и больше, тем проще и быстрее человек способен это сделать.
Фиттс создал математическую модель. А если мы применим её для тачскринов, то выясним, сколько времени потребуется, чтобы поместить палец на участок экрана, если мы знаем размер участка и дистанцию до него.
Так выглядит первоначальная формула: MT = a + b log2(2A/W). В ней:
- MT = время, которое займет движение
- a,b = параметры, которые зависят от ситуации
- A = расстояние движения от начала до середины цели
- W = ширина мишени вдоль оси движения
Я не математик, но все, что я читал об этой модели, говорит, что логарифмическая часть функции очень важна. Когнитивист и соавтор книги «Mind Hacks» Том Стэффорд очень точно суммирует важность логарифма:
«Хотя суть этой формулы банальна (большие объекты легче выбрать), самое интересное в ней — точная математическая характеристика, а также то, что эта характеристика включает логарифмическую функцию, — это означает, что форма взаимосвязи между размером и временем реакции изогнута так, что даже небольшое увеличение размера для небольших объектов делает их гораздо более достижимыми (в то время как незначительное увеличение размера для больших объектов почти не повлияет на результат).
Еще более любопытно, что современные исследования снова и снова подтверждают это утверждение. В тех двух работах, которые я упоминал выше, после определенного размера кнопки (около 12-15 мм) никаких принципиальных изменений в точности попадания не происходило.
А теперь самая приятная часть. Как применить эти знания в дизайне интерфейсов?
Улучшаем интерфейс с помощью закона Фиттса
Используя закон Фиттса в качестве основы, а также принимая во внимание исследования, процитированные в начале, вы можете создавать действительно дружелюбные интерфейсы.
Сначала посмотрим на рекомендации размера кнопок из двух исследований выше:
- 9.2 x 9.2 миллиметров
- 9.6 x 9.6 миллиметров
- 12 x 12 миллиметров
- 15 x 15 миллиметров
- Apple: 44 x 44 точек
- Google: 48 x 48 dp + 8dp или больше для отступа = 56 x 56 dp
- Microsoft: 9 x 9 миллиметров + 2 миллиметра на рекомендуемый отступ с обеих сторон = 13 x 13 миллиметров
Ох, как привести к одному знаменателю все эти единицы измерения?
Нам необходимо конвертировать миллиметры в пиксели, а пиксели в точки. Так как у пикселей по определению нет стандартного измерения, придется использовать формулу, которая учитывает количество пикселей на дюйм для каждого отдельного дисплея.
Пиксели = PPI*(.03937 дюймов на мм*мм)
Допустим, что мы используем iPhone 7 с Retina-дисплеем. Согласно Apple, PPI для дисплея iPhone 7 составляет 326. Все, что осталось, — подставить нужное значение:
Пиксели=336*(.03937 дюймов на мм*мм)
Предположу, что многие из вас работает в Sketch, поэтому давайте переведем результаты в точки. У iPhone 7 плотность пикселей составляет 200%, так что нам просто нужно разделить полученное число на два, чтобы в масштабе х1 все отображалось корректно.
(Запутались? Вот отличная статья о том, почему лучше разрабатывать дизайн в масштабе х1).
Дальше, после того как мы сконвертировали все размеры, давайте сравним, как они будут смотреться на дисплее iPhone 7. Заодно я указал стандарты кнопок главных игроков на рынке и ключевые размеры из упомянутых мной исследований:
Подольем масла в огонь. Интересно, какие же были размеры у тех самых кнопок с экрана музыки в iOS 9 и iOS 10? Пересекаются ли они с какими-нибудь значениями из исследований?
Смотрите-ка! В iOS 10 Apple увеличил размер кнопок с 7 до 12.8 миллиметров! Полностью совпадает с рекомендациями в гайдлайнах Microsoft.
Как сделать тач-интерфейс по-настоящему удобным
Согласно исследованиям MIT Touch Lab, средний размер подушечки пальца у человека составляет 10-14 миллиметров, а кончик пальца — от 8 до 10 миллиметров. Думаю, мы вполне можем вывести «закон размера идеальных кнопок в идеально удобном интерфейсе»:
Хороший интерфейс основан на элементах размером не менее 10 миллиметров, а в идеале около 13 миллиметров, что укладывается в стандарты Microsoft.
Оставаясь в пределах этих границ, вы точно сможете создавать интерфейсы, которые помогут пользователям минимизировать ошибки, выполнять задачи быстрее и в итоге долго и счастливо жить вместе с вашим приложением.
Почему текстовые кнопки вредят юзабилити мобильных приложений
Стандарты юзабилити кнопок для мобильных приложений выше, чем для десктопных. При меньшем размере экрана и сенсорной навигации мобильные кнопки должны легко нажиматься, читаться и распознаваться. Большинство сплошных кнопок соответствуют этому стандарту, в то время как текстовые кнопки лишь изредка. Прежде чем использовать текстовые кнопки в своем приложении, вот что вы должны знать.
Текстовые кнопки труднее нажимать
Палец больше, чем курсор мыши. Пользователям неудобно размещать его на более мелкой цели. Палец закрывает текст кнопки без визуальной подсказки, подтверждающей зарегистрировано ли действие. Если текстовая метка достаточно длинная, пользователь получит небольшую визуальную подсказку, но ее недостаточно, чтобы убедиться, что цель достигнута.
Небольшой размер текстовых кнопок заставляет пользователей прицельно двигать пальцем, чтобы «поразить» цель. Большая точность требует больше усилий от пользователей. Они должны следить за своим пальцем и целью, чтобы убедиться, что нажимают текстовую кнопку.
Отсутствие прямых краев затрудняет определение границ и усложняет наведение на кнопку. Сплошные кнопки не имеют подобной проблемы, потому что имеют большую цель нажатия и прямые края.
Текстовые кнопки, написанные только заглавными буквами, труднее читать
Чтобы решить проблему с нажатием текстовых кнопок, некоторые дизайнеры делают их в верхнем регистре. Система Google Material Design поддерживает этот стиль кнопок, однако, он имеет свои недостатки.
Текстовая кнопка, написанная заглавными буквами, имеет более ровные края и большую цель. Но это незначительные улучшения, поскольку цель становится лишь немного больше, а стиль текста снижает его читабельность.
Текст, написанный заглавными буквами сложнее читать, особенно пользователям, страдающим дислексией.
Пользователи полагаются на форму букв, чтобы идентифицировать слова. Прописные буквы не имеют контрастных восходящих и нисходящих элементов, что затрудняет чтение слов с первого взгляда.
Текстовые кнопки сложнее распознать
Разница между текстовыми кнопками и текстом заключается только в цвете. Это затрудняет распознавание текстовых кнопок, особенно для пользователей, страдающих от цветовой слепоты. Без четкой формы пользователи скорее всего не заметят текстовые кнопки и пропустят призыв к действию.
Что использовать вместо текстовых кнопок
Многие используют текстовые кнопки для вторичного действия, чтобы показать, что кнопка имеет более низкий приоритет. Но есть и лучшие способы сделать это, не вредя юзабилити мобильного приложения.
Контурная кнопка
Один из способов – поместить контур вокруг текстовой метки, чтобы сделать контурную кнопку. Это делает границу кнопки видимой, что дает пользователям большую и более понятную цель нажатия.
Отсутствие сплошного фона не позволяет ей конкурировать с основным призывом к действию. Легкий, но видимый контур идеально подходит, чтобы не конкурировать с текстовой меткой.
Светлые кнопки
Другой альтернативой текстовым кнопкам является нанесение текстовой метки на светлые кнопки. Светлая кнопка показывает различие между границей кнопки и фоном, при этом не конкурируя с основным призывом к действию. Оттенок кнопки должен почти сливаться с фоном, но при этом сохранять достаточный контраст для заметности.
Она имеет больший визуальный вес
Контурная и светлая кнопки хорошо подходят для второстепенных действий. Но светлая кнопка имеет немного больший визуальный вес и ее удобнее нажимать. Фон кнопки дает пальцу твердую цель нажатия, в отличии от тонкого контура.
Когда текстовые кнопки уместно использовать
Бывают случаи, когда имеет смысл использовать текстовые кнопки.
Вместо того, чтобы использовать их для вторичных действий, используйте их для третичных действий. Пользователи редко совершают третичные действия, и они не требуют много внимания. Первичные и вторичные действия более важны, поэтому им нужно больше визуального веса.
Другой случай, когда текстовые кнопки имеют смысл – это когда пользователям нужна помощь в принятии действий. Используйте текстовые кнопки, когда вам нужно предоставить пользователям контекстную информацию, чтобы помочь им выбрать лучший вариант. Текстовые кнопки не позволяют пользователям воспринимать помощь, как призыв к действию, поскольку они не конкурируют с другими кнопками.
Не злоупотребляйте текстовыми кнопками
Легко добавить множество текстовых кнопок в интерфейс, потому что их проектирование не требует особых усилий. Но следствием этого являются разочарованные пользователи, у которых возникают проблемы с чтением, распознаванием и нажатием ваших кнопок. Не ленитесь и не злоупотребляйте текстовыми кнопками.
Ваши призывы к действиям могут содержать текст, но они всегда должны выглядеть и ощущаться как кнопки.
Перевод статьи Anthony
основных типов кнопок в пользовательском интерфейсе | by tubik
Кнопки являются одними из самых популярных интерактивных элементов пользовательского интерфейса. Более того, они жизненно важны для создания надежных взаимодействий и положительного пользовательского опыта. Сегодня, продолжая серию постов глоссария UI/UX, мы собрали здесь определения и примеры широко используемых типов кнопок, которые мы ежедневно видим на веб-сайтах и в мобильных приложениях.
Кнопка — это интерактивный элемент, который позволяет получить ожидаемую интерактивную обратную связь от системы после выполнения конкретной команды. По сути, кнопка — это элемент управления, который позволяет пользователю напрямую общаться с цифровым продуктом и отправлять необходимые команды для достижения определенной цели. Например, это может быть задача отправить электронное письмо, купить продукт, загрузить какие-то данные или часть контента, включить плеер и множество других возможных действий.
Одна из причин, почему кнопки так популярны и удобны для пользователя, заключается в том, что они эффективно имитируют взаимодействие с объектами в физическом мире.
Кнопки современного пользовательского интерфейса действительно разнообразны и могут служить множеству целей. Типичные и часто используемые кнопки, которые представляют собой интерактивную зону, обычно четко выделенную для видимости и имеющую определенную геометрическую форму и часто поддерживаемую текстом, поясняющим, какое действие будет выполняться с помощью этой кнопки. Дизайнерам приходится тратить немало времени и сил на создание эффектных и заметных кнопок, естественно вписывающихся в общую стилистическую концепцию, но достаточно контрастных, чтобы выделяться в макете.
Давайте посмотрим, какие типы кнопок широко используются в мобильных и веб-интерфейсах.
Кнопка призыва к действию (CTA) — это интерактивный элемент пользовательского интерфейса, цель которого — побудить пользователя совершить определенное действие.
Это действие представляет собой конверсию для конкретной страницы или экрана (например, покупка, контакт, подписка и т. д.), другими словами, оно превращает пассивного пользователя в активного. Таким образом, технически это может быть любой тип кнопки, который поддерживается текстом призыва к действию. Что отличает ее от всех других кнопок на странице или экране, так это ее привлекательный характер: она должна привлекать внимание и побуждать пользователей к выполнению необходимых действий.
Вот домашняя страница сайта электронной коммерции, продающего книги для детей. На показанном слайде в качестве цели страницы указано одно основное действие: заставить пользователя подписаться на общий доступ к списку рассылки. Итак, кнопка разработана как один из самых заметных элементов макета, чтобы пользователь мог сразу увидеть, как выполнить действие, как только он или она захочет это сделать.
Здесь терминология понятна: это кнопка, представленная фрагментом текста. Это означает, что копия не интегрирована ни в какую фигуру, заполненную вкладку или что-то в этом роде.
Так что это не похоже на кнопку в нашем стандартном понимании этого явления в физическом мире. Копия является его единственным визуальным презентатором. Тем не менее, это живой элемент управления, который позволяет пользователям взаимодействовать с интерфейсом. Вы также можете видеть, что эти кнопки помечены цветом или подчеркнуты. Кроме того, используемые в шапке веб-сайта текстовые кнопки связывают пользователя с основными разделами контента веб-сайта — и в этом случае они никак не отмечены, поскольку все (или большинство) элементы в зоне шапки по умолчанию интерактивны. Текстовые кнопки обычно используются для создания дополнительных интерактивных зон, не отвлекая от основных элементов управления или элементов CTA.
Элегантный дизайн веб-сайта модного магазина. Как видите, интерактивная часть макета основана на текстовых кнопках. Только основной элемент CTA представлен в виде легко декодируемой кнопки. Все остальные имеют только копирование как в заголовке, так и во вкладках для предложений.
Такой подход поддерживает общий легкий и минималистичный стиль веб-страницы.
Кнопка раскрывающегося списка, при нажатии на которую отображается раскрывающийся список взаимоисключающих элементов. Вы часто можете встретить этот тип в кнопке настроек. Когда пользователь выбирает один из вариантов в списке, он обычно помечается как активный, например, цветом.
Процесс взаимодействия с приложением HealthCare показывает кнопки, открывающие списки сведений, которые врач может добавить к конкретному счету: при нажатии кнопки открывается раскрывающийся список параметров. Как только вы выберете один из них, большая кнопка исчезнет, оставив выбранный вариант, и маленькую кнопку с плюсом на случай, если вы захотите еще раз просмотреть список.
Это кнопка, скрывающая меню. Когда вы нажимаете или касаетесь его, меню расширяется. Этот вид меню (и кнопка тоже) получил такое название из-за своей формы, состоящей из трех горизонтальных линий, которые выглядят как типичный гамбургер хлеб-мясо-хлеб.
Сегодня это широко используемый интерактивный элемент веб- и мобильных макетов; тем не менее, споры о его плюсах и минусах все еще горячие.
Активные интернет-пользователи, регулярно посещающие различные веб-сайты, по умолчанию знают, что эта кнопка скрывает различные категории содержимого веб-сайтов, поэтому этот трюк не нуждается в дополнительных пояснениях и подсказках. Что хорошо, гамбургер-меню освобождает пространство, делая интерфейс более минималистичным и воздушным; с точки зрения функциональности это экономит много места для других важных элементов макета. Дополнительными преимуществами можно назвать отзывчивый и адаптивный дизайн, скрывающий элементы навигации и делающий интерфейс гармоничным на разных устройствах.
Аргументы против гамбургер-меню основаны на том факте, что этот элемент дизайна может сбивать с толку людей, которые не посещают веб-сайты регулярно, и могут быть введены в заблуждение знаком с высоким уровнем абстракции. Это может негативно повлиять на навигацию и стать причиной плохого пользовательского опыта.
Итак, решение о применении кнопки-гамбургера должно приниматься после исследования пользователей и определения возможностей и потребностей целевой аудитории.
Хотя гамбургер-меню по-прежнему вызывает споры в современном веб-дизайне и дизайне приложений, они часто используются.
Вот пример веб-сайта, использующего функциональность гамбургер-меню. Это позволяет скрыть расширенное меню опций, чтобы сосредоточить внимание пользователя на впечатляющих визуальных эффектах и основной информации.
При нажатии или касании кнопки «плюс» пользователь может добавить новый контент в систему. В зависимости от типа приложения это может быть новая запись, контакт, местоположение, заметка, элемент в списке — все, что является базовым действием для цифрового продукта. Иногда, нажав на эту кнопку, пользователи сразу переходят в модальное окно создания контента, в других случаях есть еще и средний этап, когда им даются дополнительные возможности на выбор и делают добавление контента более целенаправленным.
Эта кнопка открывает различные параметры после нажатия или касания. Это еще один способ настроить правильный поток взаимодействий, не перегружая экран, что особенно важно для мобильных интерфейсов с ограниченным пространством на экране.
Вот приложение Travel Planner: центральным интерактивным элементом панели вкладок является кнопка «плюс», позволяющая пользователю добавить новую поездку или новый элемент в конкретную поездку. Чтобы упростить работу, кнопка расширена до набора кнопок, обозначающих определенные типы контента, чтобы пользователь мог сделать выбор в начале и попасть на нужный экран.
Учитывая высокую популярность социальных сетей, чатов и электронной почты, эти кнопки упрощают процесс подключения контента приложения или веб-сайта к социальным профилям пользователя. Кнопка этого типа позволяет поделиться контентом или достижением непосредственно с учетными записями в социальных сетях. Чтобы связь была понятной, она представлена значками, которые имеют фирменный знак определенных социальных сетей и легко узнаваемы.
Довольно часто сейчас, если расшаривание не является ключевым действием, ожидаемым от пользователя на странице, они все равно не помечаются как кнопки (никаких дополнительных фигур, цветовой маркировки, подчеркивания и т. д.) — вы видите только иконки, но они интерактивный. Такой подход поддерживает минимализм и эффективное использование негативного пространства. Это также позволяет пользователям сосредоточиться на основных функциях, но всегда видеть признаки быстрого доступа к своим профилям в социальных сетях.
Вот элегантный и минималистичный корпоративный сайт строительной компании. В левом нижнем углу главной страницы вы можете увидеть значки корпоративных социальных аккаунтов. Они легко заметны, но хорошо сбалансированы, чтобы не отвлекать внимание от основной навигации и кнопки CTA.
Призрачная кнопка — это прозрачная кнопка, которая выглядит пустой. Поэтому его еще называют «пустым», «полым» или даже «голым». Его визуальная узнаваемость как кнопки обычно обеспечивается формой, окаймленной довольно тонкой линией вокруг копии кнопки.
Этот тип кнопок помогает установить визуальную иерархию в случае, если есть несколько элементов CTA: основной CTA представлен в виде заполненной кнопки, а второстепенный (все еще активный) представлен в виде кнопки-призрака.
Вот экран регистрации в приложении ресторана. Он имеет кнопки трех разных типов: основной CTA представлен заполненной кнопкой, которая предлагает самый популярный и простой способ быстрой регистрации; кнопка-призрак предлагает доступ к менее популярной опции; текстовая кнопка встроена в следующую строку в качестве ответа на вопрос и отмечена цветом. Такой подход помогает выстроить прочную визуальную иерархию кнопок на экране.
В Material Design плавающая кнопка действия (сокращенно FAB) — это кнопка, которая представляет основное действие на экране приложения. Как правило, это кнопка с круглым значком, приподнятая над другим содержимым страницы. Эта кнопка обычно дает мгновенный доступ к важным или популярным действиям, которые пользователи выполняют с приложением.
В зависимости от дизайна и информационной архитектуры мобильного приложения FAB может:
- выполнить типичное основное действие (открыть экран нового письма, открыть экран добавления фото или видео контента, найти нужный контент в галерее и т.д.)
- показать дополнительные действия
- преобразовать в другие элементы пользовательского интерфейса .
Положение FAB на экране обычно определяется фактором высокой видимости и может варьироваться в зависимости от общей концепции дизайна экранов приложения. Эмпирическое правило состоит в том, чтобы использовать только один FAB на экран, не больше, чтобы избежать потери концентрации.
Вот поток взаимодействий для дневника путешественников с использованием нижней панели приложений, перекрывающихся FAB и тканого списка изображений.
Размер
Размер — это один из основных способов проинформировать пользователей о важности элемента макета и построить иерархию компонентов. Привлекательная и эффективная кнопка призыва к действию должна быть достаточно большой, чтобы ее можно было быстро найти, но не слишком большой, чтобы не испортить структуру макета. Лидеры рынка часто дают рекомендации по правильному размеру кнопок в своих рекомендациях. Например, Apple говорит, что CTA в мобильном интерфейсе должны быть не менее 44Х44 пикселей, а Microsoft рекомендует 34Х26 пикселей. Если вы разрабатываете дизайн для мобильных устройств, требования к различным типам кнопок могут быть довольно строгими, поэтому внимательно изучите рекомендации, чтобы свести к минимуму риски отклонения приложения из-за плохого дизайна пользовательского интерфейса.
Чтобы некоторые кнопки были легко заметны, а некоторые второстепенны, очень важно выбрать правильный цвет. Дело в том, что настроение и поведение человека тесно связаны с визуальным окружением, и цвет в этом аспекте является одним из самых мощных инструментов. Очень важно помнить при выборе цветов для CTA: кнопки и цвета фона должны хорошо контрастировать, чтобы кнопка быстро выделялась среди других компонентов пользовательского интерфейса.
Форма Что касается кнопок CTA, то они часто выглядят как горизонтальные прямоугольники. Причина в том, что вы хотите, чтобы эта кнопка была интерактивной и кликабельной, и люди привыкли воспринимать эту форму как кнопку. Кроме того, рекомендуется создавать призывы к действию со скругленными углами, поскольку считается, что они указывают внутрь кнопки, привлекая внимание к тексту. Конечно, такое решение принимается в том случае, если форма гармонично сочетается с общей стилистической концепцией, выбранной для страницы или экрана мобильного приложения.
Расположение кнопок имеет решающее значение для создания прочной визуальной иерархии и четкой навигации. Если они расположены в местах, где глаза пользователей не могут их уловить, другие визуальные аспекты, такие как цвет и размер, могут работать неэффективно. Дизайнеры должны изучить наиболее сканируемые области и разместить кнопки основных функций на пути пользователя.
Копия Мощная микрокопия кнопки обычно короткая, но последовательная, чтобы быстро привлечь внимание пользователей. Его часто пишут заглавными буквами, чтобы сделать текст еще более привлекательным в макете. Впрочем, это и не обязательно, решение принимается исходя из общей концепции дизайна, типографики и настроения текстового сообщения.
Вот дизайн целевой страницы детского сада. Давайте рассмотрим все кнопки, используемые на странице:
- основная кнопка CTA , приглашающая посетителей присоединиться, сразу заметна: дизайнер использовал закругленную прямоугольную кнопку с заливкой цвета, контрастирующего с фоном, но задающего визуальную связь с анимированное изображение героя, самый заметный визуальный элемент на странице. Текст СТА дается простым читаемым шрифтом с заглавными буквами
- в заголовке есть 4 текстовых кнопки , которые соединяют пользователей с важными разделами контента на веб-сайте.
- В левой части шапки находится вторичная кнопка CTA , которая быстро сканируется и позволяет уже зарегистрированным пользователям входить в свои аккаунты.
- Кнопки «Поделиться» размещены в круглых формах, но не имеют слишком большого цветового контраста, чтобы их было легко найти, но не отвлекали пользователей от основного призыва к действию.
Очевидно, что существует больше типов кнопок, которые можно обсудить и проверить в примерах дизайна пользовательского интерфейса. Итак, продолжим обзор в наших следующих постах, не пропустите обновления.
Рекомендации по дизайну шапки веб-сайта
Глоссарий дизайна UI/UX: элементы навигации
Призыв к вниманию. Мощный дизайн кнопки CTA
7 советов по улучшению взаимодействия с мобильными устройствами
Не спешите: советы по созданию пользовательских интерфейсов, экономящих усилия
Визуальная иерархия: эффективная организация контента пользовательского интерфейса
Гештальт-теория для дизайна UX: принцип близости
Гештальт-теория для эффективного UX: принцип сходства
UX-дизайн: как сделать веб-интерфейс сканируемым
03
03 написано Марина Яланска для Блог Tubik
Добро пожаловать, чтобы проверить дизайн и искусство Tubik через:
- Tubik Website
- Dribbble
- Behance
- Tubik Arts
Buttons — Menus and actions — Components — Human Interface Guidelines — Design
Кнопка инициирует мгновенное действие.
Универсальные и легко настраиваемые кнопки позволяют людям выполнять задачи в вашем приложении простыми и знакомыми способами. Как правило, кнопка сочетает в себе три атрибута, чтобы четко передать ее функцию:
- Стиль. Визуальный стиль, основанный на размере, цвете и форме.
- Содержание. Символ (или значок интерфейса), текстовая метка или и то, и другое, которые отображаются на кнопке для обозначения ее назначения.
- Роль. Определенная системой роль, определяющая семантическое значение кнопки и влияющая на ее внешний вид.
В дополнение к универсальным кнопкам многие распространенные стили кнопок, такие как «Информация», «Закрыть» и «Добавить контакт», обеспечивают привычное поведение во всей системе. Существует также множество компонентов, похожих на кнопки, которые имеют различный внешний вид и поведение для конкретных случаев использования, таких как переключатели, всплывающие кнопки и сегментированные элементы управления.
Передовой опыт
Когда кнопки легко узнаваемы и понятны, приложение кажется интуитивно понятным и хорошо спроектированным.
Сделайте кнопки удобными для выбора. На сенсорном экране кнопки должны иметь цель нажатия не менее 44×44 точек, чтобы вместить кончик пальца. На всех экранах важно предусмотреть достаточно места вокруг кнопки, чтобы люди могли визуально отличить ее от окружающих компонентов и контента, независимо от того, используют ли люди сенсорный ввод, указатель или систему, которая расширяет кнопку, когда она находится в фокусе.
Убедитесь, что каждая кнопка четко указывает на ее назначение. Кнопка всегда содержит текстовую метку или символ (или значок интерфейса) — а иногда и то и другое — чтобы помочь людям предсказать, что она делает.
Стиль
Системные кнопки предлагают ряд стилей, которые поддерживают обширную настройку, обеспечивая при этом встроенные состояния взаимодействия, поддержку специальных возможностей и адаптацию внешнего вида.
iOS и iPadOS имеют четыре стиля кнопок, каждый из которых доступен в трех размерах. Каждая комбинация размера и стиля имеет различный уровень визуальной значимости, помогая вам представить иерархию действий в вашем приложении.
Вы можете настроить системную кнопку для использования любой комбинации стиля и размера. По умолчанию системная кнопка использует угловой радиус определенного размера и акцентный цвет вашего приложения. При необходимости вы можете изменить эти атрибуты — в дополнение к атрибутам, управляющим макетом контента и наличием индикатора активности — в конфигурации вашей кнопки.
Используйте закрашенную кнопку для наиболее вероятного действия в представлении. Заполненный стиль визуально наиболее заметен, поэтому он помогает людям быстро определить действие, которое они, скорее всего, захотят. В то же время избегайте использования слишком большого количества заполненных кнопок в представлении. Слишком много заполненных кнопок может увеличить когнитивную нагрузку, потому что люди должны тратить время на сравнение нескольких вероятных вариантов, прежде чем сделать выбор.
Используйте стиль, а не размер, чтобы визуально выделить предпочтительный вариант из множества вариантов. Когда вы используете кнопки одинакового размера, чтобы предложить два или более вариантов, вы сигнализируете, что варианты образуют согласованный набор вариантов выбора. Если вы хотите выделить предпочтительный или наиболее вероятный вариант в наборе, используйте более заметный стиль кнопки для этого параметра и менее заметный стиль для остальных.
Содержимое
Создайте содержимое кнопки, которое поможет людям мгновенно понять, что делает кнопка. Если значок интерфейса подходит для вашей кнопки, рассмотрите возможность использования существующего или настроенного символа SF. Чтобы использовать текст, создайте короткую метку, кратко описывающую, что делает кнопка. Используя заглавные буквы, рассмотрите возможность начала метки с глагола, чтобы передать действие кнопки — например, кнопка, которая позволяет людям добавлять товары в свою корзину, может использовать метку «Добавить в корзину».
Включайте дополнительный текст под меткой, только если он содержит полезную информацию. Дополнительный текст использует меньший размер текста, чем метка, показывая, что информация является вторичной по отношению к действию кнопки. Например, вы можете добавить текст для обновления кнопки «Добавить в корзину» с указанием количества товаров в корзине. Избегайте написания подзаголовка, который больше объясняет, что делает кнопка; убедитесь, что кнопка, содержащая представление, метку или изображение, стиль и роль, предоставляет всю информацию, необходимую людям для понимания ее действия.
Настройте кнопку для отображения индикатора активности, когда вам нужно предоставить отзыв о действии, которое не завершается мгновенно. Отображение индикатора активности внутри кнопки может сэкономить место в пользовательском интерфейсе и четко указать причину задержки. Чтобы прояснить, что происходит, вы также можете настроить кнопку так, чтобы рядом с индикатором активности отображалась другая метка. Например, метка «Оформить заказ» может измениться на «Оформить заказ…», пока отображается индикатор активности. Когда возникает задержка после того, как люди нажали или коснулись настроенной вами кнопки, система отображает индикатор активности рядом с исходной или альтернативной меткой, скрывая изображение кнопки, если оно есть.
Роль
Системная кнопка может иметь одну из следующих ролей:
- Обычная. Нет конкретного значения.
- Первичный. Эта кнопка является кнопкой по умолчанию — кнопкой, которую чаще всего выбирают люди.
- Отмена. Кнопка отменяет текущее действие.
- Разрушительный. Кнопка выполняет действие, которое может привести к уничтожению данных.
Роль кнопки может оказывать дополнительное влияние на внешний вид, который вы настраиваете. Например, система использует полужирный текст для метки основной кнопки, тогда как деструктивная кнопка использует красный цвет.
Назначьте основную роль кнопке, которую чаще всего выбирают люди. Когда основная кнопка реагирует на клавишу возврата, это позволяет людям быстро подтвердить свой выбор. Кроме того, когда кнопка находится во временном представлении — например, листе, редактируемом представлении или предупреждении — назначение ей основной роли означает, что представление может автоматически закрываться, когда люди нажимают «Ввод».
Не назначайте основную роль кнопке, выполняющей деструктивное действие, даже если это действие является наиболее вероятным выбором. Из-за визуальной заметности люди иногда выбирают основную кнопку, не прочитав ее сначала. Помогите людям избежать потери контента, назначив основную роль неразрушающим кнопкам.
Информация о платформе
Никаких дополнительных рекомендаций для iOS, iPadOS или tvOS.
macOS
Несколько конкретных типов кнопок уникальны для macOS.
Кнопки
Стандартный тип кнопки в macOS известен как кнопка . Вы можете настроить кнопку для отображения текста, символа, значка интерфейса, изображения или комбинации текста и изображения. Кнопки могут действовать как кнопки по умолчанию в представлении, и вы можете их подкрасить.
Используйте кнопку с изменяемой высотой только тогда, когда вам нужно отобразить высокое содержимое или содержимое переменной высоты. Кнопки с изменяемой высотой поддерживают те же конфигурации, что и обычные нажимные кнопки — и они используют тот же радиус угла и отступы содержимого — поэтому они выглядят совместимо с другими кнопками в вашем интерфейсе. Если вам нужно представить кнопку, содержащую две строки текста или высокий значок, используйте кнопку с изменяемой высотой; в противном случае используйте стандартную кнопку. Руководство для разработчиков см. в статье NSBezelStyleRegularSquare.
Добавлять многоточие к заголовку, когда кнопка открывает другое окно, представление или приложение. Во всей системе многоточие в заголовке управления сигнализирует о том, что люди могут вводить дополнительные данные. Например, кнопки «Изменить» на панели «Автозаполнение» в настройках Safari содержат многоточие, потому что они открывают другие представления, позволяющие пользователям изменять значения автозаполнения.
Рассмотрите возможность включения загрузки пружины. В системах с трекпадом Magic Trackpad пружинная загрузка позволяет людям активировать кнопку, перетаскивая выбранные элементы на нее и принудительно нажимая, то есть нажимая сильнее, не отпуская выбранные элементы. После принудительного нажатия люди могут продолжать перетаскивать элементы, возможно, для выполнения дополнительных действий.
Кнопки градиента
Кнопка градиента инициирует действие, связанное с представлением, например добавление или удаление строк в таблице.
Кнопки градиента содержат символы или значки интерфейса, а не текст, и их можно настроить так, чтобы они вели себя как нажимные кнопки, переключатели или всплывающие кнопки. Кнопки появляются в непосредственной близости от связанного с ними представления — обычно внутри или под ним — поэтому люди знают, на какое представление влияют кнопки.
Используйте кнопки градиента на виде, а не в рамке окна. Кнопки градиента не предназначены для использования на панелях инструментов или в строках состояния. Если вам нужна кнопка на панели инструментов, используйте элемент панели инструментов.
Предпочтительно использовать символ в кнопке градиента. SF Symbols предоставляет широкий спектр символов, которые автоматически получают соответствующую окраску в состоянии по умолчанию и в ответ на действия пользователя.
Избегайте использования меток для добавления кнопок с градиентом. Поскольку кнопки градиента тесно связаны с конкретным представлением, их назначение обычно понятно без описательного текста.
Руководство для разработчиков см. в разделе NSBezelStyleSmallSquare.
Кнопки справки
Кнопка справки появляется в представлении и открывает справочную документацию по конкретному приложению.
Кнопки справки — это круглые кнопки одинакового размера со знаком вопроса. Руководство по созданию справочной документации см. в разделе Предложение помощи.
Используйте кнопку системной справки, чтобы отобразить справочную документацию. Люди знакомы с внешним видом стандартной кнопки справки и знают, что при нажатии на нее открывается содержимое справки.
По возможности откройте раздел справки, относящийся к текущему контексту. Например, кнопка справки на панели «Правила» в настройках Mail открывает руководство пользователя Mail с разделом справки, в котором объясняется, как изменить эти настройки. Если никакой конкретный раздел справки не относится непосредственно к текущему контексту, откройте верхний уровень справочной документации вашего приложения, когда люди нажимают кнопку справки.
Не более одной кнопки справки на окно. Несколько кнопок справки в одном контексте затрудняют прогнозирование результата нажатия одной из них.
Разместите кнопки справки там, где люди ожидают их найти. Используйте следующие места для руководства.
| Стиль просмотра | Расположение кнопки справки |
|---|---|
| Диалоговое окно с кнопками закрытия (например, OK и Отмена) | Нижний угол, противоположный кнопкам увольнения и совмещенный с ними по вертикали |
| Диалог без кнопок закрытия | Нижний левый или нижний правый угол |
| Окно или панель настроек | Нижний левый или нижний правый угол |
Используйте кнопку справки в представлении, а не в рамке окна. Например, не размещайте кнопку справки на панели инструментов или в строке состояния.
Избегайте отображения текста, представляющего кнопку справки. Люди знают, что делает кнопка справки, поэтому им не нужен дополнительный описательный текст.
Кнопки изображения
Кнопка изображения появляется в представлении и отображает изображение, символ или значок интерфейса. Вы можете настроить кнопку изображения, чтобы она действовала как нажимная кнопка, переключатель или всплывающая кнопка.
Используйте кнопку изображения в представлении, а не в рамке окна. Например, не размещайте кнопку с изображением на панели инструментов или в строке состояния. Если вам нужно использовать изображение в качестве кнопки на панели инструментов, используйте элемент панели инструментов. См. Панели инструментов.
Добавьте около 10 пикселей отступа между краями изображения и краями кнопки. Края кнопки изображения определяют область клика, даже если они не видны. Включение заполнения гарантирует, что щелчок регистрируется правильно, даже если он находится не точно в пределах изображения. Как правило, избегайте включения системной рамки в кнопку изображения; руководство для разработчиков см. в разделе isBordered.
Если вам нужно добавить метку, поместите ее под кнопкой изображения. Дополнительные указания см. в разделе Этикетки.
watchOS
Используйте кнопки, которые занимают всю ширину экрана. Кнопки во всю ширину выглядят лучше и удобнее для нажатия. Если две кнопки должны иметь одно и то же горизонтальное пространство, используйте одинаковую высоту для обеих и используйте изображения или короткие текстовые заголовки для содержимого каждой кнопки.
Используйте одинаковую высоту для вертикальных стопок однострочных и двухстрочных текстовых кнопок. Насколько это возможно, используйте кнопки одинаковой высоты для визуальной согласованности.
Использовать заданный системой радиус скругления углов. Система определяет значения углового радиуса, которые обеспечивают единый визуальный стиль во всех приложениях и усиливают интерактивность кнопок. В Apple Watch Series 4 и более поздних версиях значения углового радиуса различаются в зависимости от того, находится ли кнопка в представлении с прокруткой или без прокрутки.