1 7 800x440 - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)

Сегментированный элемент управления – это горизонтальный набор из двух или более сегментов, каждый из которых выполняет функцию кнопки, обычно настраиваемой в качестве переключателя. Сегментированные элементы управления предоставляют тесно связанные варианты выбора, которые влияют на объект, состояние или представление. Как и кнопки, сегменты могут содержать текст или иконки. (Human Interface Guidelines)

Несколько месяцев назад я посмотрел историю звонков на моем iPhone, и неожиданно задумался о компоненте «Сегментированный элемент управления».

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Экран истории звонков в iPhone 11

Что касается сегментированного элемента управления, представленного выше, меня смутило, был ли выбран сегмент «All» или «Missed». Если бы я внимательно посмотрел на него, я бы мог понять это по контуру и угловому радиусу сегмента. И все же, почему мне интуитивно казалось, что был выбран сегмент «All»?

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Другие примеры продуктов Apple, вводящих меня в заблуждение

Я представитель поколения X. В 90-е годы мы слушали музыку на кассетах или компакт-дисках (CD).

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Кассетный аудиоплеер

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Стиральная машинка корейского бренда Gold Star

Иногда кнопка западала, и электроника работала со сбоями.

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

Однако нынешней молодёжи кажется, что кнопка активирована, когда на ней загорается лампочка. Например, кнопка лифта.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Цикл взаимодействия с кнопкой лифта

Другой пример этого разрыва между поколениями – иконка«Сохранить».

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Дискеты

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

Мне было интересно, подобная проблема с кнопкой есть только у людей, имеющих опыт работы со старомодной электроникой или нет. Чтобы удовлетворить свое любопытство, я провел опрос пользователей.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Форма опроса пользователей для исследования сегментированных элементов управления

Результаты опроса были довольно интересными.

Хотя моя гипотеза заключалась в том, что опыт использования гаджетов старшим поколением пользователей повлияет на их восприятие, более половины респондентов выбрали «Label A» в светлой теме и «Label B» в темной.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Результаты опроса пользователей
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Результат опроса пользователей (светлая тема)
png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Результаты опроса пользователей (темная тема)

Эти результаты показывают, что дополнительный слой на объекте привлекает внимание пользователей.

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Сегментированный элемент управления с 4 сегментами

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Сегментированный элемент управления с 2 сегментами

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Примеры вводящих в заблуждение сегментированных элементов управления

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

Шаг 1. Добавьте рекомендуемый слой

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)

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

Шаг 2. Достаточный отступ и угловой радиус на выбранном сегменте

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)

Адекватное пространство для границы и радиуса углов обеспечивает пользователям наглядное различие.

Шаг 3. Визуальная иерархия между двумя сегментами

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)

Умеренное визуальное различие позволяет различать данные варианты. Однако следует быть осторожным иначе можете получить «отключенную» кнопку.

Шаг 4. Добавьте четкую визуальную индикацию (по желанию)

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)

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

Шаг 5. Изучите возвышение (по желанию)

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)

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

P.S. Я хотел бы сказать спасибо моим коллегам из Splunk (и Ueno), друзьям и моей жене, которые помогли мне организовать опрос, давали советы и всячески поддерживали мою первую статью на Medium. ❤️

Если у вас есть лучшее решение, пожалуйста, сообщите. Я всегда открыт для дискуссий.

Спасибо Alexis Lucio.

Свежие вакансии
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
                        RJ Games RJ Games UI Motion Designer / Animator Удаленно Москва
Все вакансии

Оригинал: uxdesign.cc

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

1
Добавить комментарий
Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы

О Доне Нормане, вандализации UX и широком подходе к дизайну

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