Состояние И против состояния ИЛИ


19.10.2020 Время чтения - 6 минут 1677

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

Это происходит из-за отсутствия опыта или понимания паттернов проектирования.

Огромное количество проблем зачастую связанны с состоянием «И», а также с состоянием «ИЛИ».

Определение:

  1. в состоянии И пользователь может выбрать несколько вариантов
  2. состояние ИЛИ — предполагает только один вариант из нескольких предложенных.

Также не забывайте про желание придерживаться четвертой эвристики Нормана Нильсена.

Последовательность и стандарты

Пользователи не должны задаваться вопросом, означают ли разные слова, ситуации или действия одно и то же. 

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

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

Пример замешательства

Ниже представлена вступительная настройка параметров приложения, состоящая из трёх экранов с выбором настроек, на каждом из которых пользователю следует выбрать интересующие его настройки. Как вы могли заметить, на всех трёх экранах используются «согласованные» селекторы.

Видите ли вы проблему?

wireframe where all options are identically highlighted, without use of radio buttons or tick boxes or other selector pattern

Дизайнер создал для своего приложения общее состояние «on focus», попросту выделенное состояние селектора.

Хотя селектор един во всем продукте, некоторые из этих экранов задают вопрос «И», а некоторые — вопрос «ИЛИ». И основной проблемой является то, что нет точного визуального отображения состояния, из-за чего и появляется все эта путаница.

Из-за последовательного использования одного и того же селектора, пользователь не видит разницы между состояниями

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

Последовательность может вызвать путаницу

В данном примере произошло так, что план UX-дизайнера по согласованию экранов попросту уничтожил соответствующую визуальную доступность.

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

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

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

Инновации также могут вызвать путаницу

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

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

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

Последовательность под другим именем

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

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

Да, это звучит чертовски очевидно, но вы будете удивлены, как часто первые наброски нарушают эти правила.

Так что же делать?

Прежде чем переходить к решениям, давайте рассмотрим, что мы знаем о шаблонах проектирования, селекторах и когнитивной психологии. Давайте посмотрим на состояния И/ИЛИ.

Состояние И

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

example of tick box design

Второй вариант подразумевает под собой использование переключателей:

пример дизайна переключателя слайдера

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

Состояние ИЛИ

Когда пользователя просят выбрать ТОЛЬКО ОДИН элемент из нескольких, принято использовать селективные кнопки.

пример дизайна радиокнопки

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

Также следует указать значение по умолчанию, такое как «нет» или «другое».

Другой вариант, который можно использовать, — это раскрывающийся список:

пример выпадающего дизайна

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

Состояние ВКЛ/ВЫКЛ

Еще один нюанс, которому стоит уделить внимание —  состояния ВКЛ/ВЫКЛ. Как и состояние ИЛИ, это сценарий, в котором пользователь может выбрать только одно из двух.

Примером этого могут быть маркетинговые разрешения —  вы их либо включаете, либо выключаете.

Стандартное решение — это использование одной галочки:

галочка с текстом «да!  Я хочу, чтобы вы что-то делали с моими данными »

Также есть и альтернатива — один тумблер:

тумблер с текстом «получать уведомления»

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

А что там с нашим исследованием?

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

Если мы оглянемся на исходный вариант, то увидим эффект фокусировки или выделения. Добавив этот эффект, мы реализуем еще один уровень доступности.

  • Галочка или кнопка отвечает на вопрос И/ИЛИ;
  • Выделение работает как контейнер, тем самым усиливая эффект;
  • Также снижает потенциальную когнитивную нагрузку;
  • Повышает общую согласованность селекторов в этой дизайн-системе;
  • Делает внешний вид менее безобразным

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

Есть несколько простых шагов, чтобы правильно настроить селекторы.

  1. Знайте свои шаблоны проектирования — будь то селекторы или что-то еще. Знание общепринятых шаблонов проектирования даст вам базовое понимание вашей работы.
  2. Используйте библиотеку примеров — и продолжайте её обновлять. Всегда ищите новые или альтернативные решения и концепции проектирования.
  3. Если вы собираетесь изменить существующий шаблон, сперва протестируйте его — эксперименты являются основой основ в работе над UX. Ведь приведенный вами аналог может быть совершенно непригодным для использования и будет отталкивать пользователей.

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

Источник

Читайте также: Дизайн и парадокс выбора