UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Уменьшение неоднозначности в дизайне сегментированных элементов управления (Segmented Controls)
Редакція
Редакція

Опубліковано

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

#ux

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

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

Call history screen on iPhone 11

Экран истории звонков в iPhone 11

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

Другие примеры продуктов Apple, вводящих меня в заблуждение

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

A cassette tape player

Кассетный аудиоплеер

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

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

A Korean brand Gold Star electric washer

Стиральная машинка корейского бренда Gold Star

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

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

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

An interaction cycle with an elevator button

Цикл взаимодействия с кнопкой лифта

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

Floppy disks

Дискеты

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

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

User survey form for Segmented Control research

Форма опроса пользователей для исследования сегментированных элементов управления

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

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

User survey results

Результаты опроса пользователей

User survey result (light theme)

Результат опроса пользователей (светлая тема)

User survey result (dark theme)

Результаты опроса пользователей (темная тема)

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

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

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

A segmented control with 4 segments

Сегментированный элемент управления с 4 сегментами

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

A segmented control with 2 segments

Сегментированный элемент управления с 2 сегментами

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

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

Examples of misleading segmented controls

Примеры вводящих в заблуждение сегментированных элементов управления

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

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

Add a featured layer

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

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

Sufficient padding and corner radius on the selected segment

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

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

Visual hierarchy between two segments

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

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

Add a clear visual indication

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

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

Explore elevation

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

A complete example with step1 to step5.

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

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

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

Спасибо Alexis Lucio.


Перевод статьи uxdesign.cc

Топ коментарі (0)