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

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

В статье мы рассмотрим, как правильно использовать состояние И, а также состояние ИЛИ.

Источник

H Locke

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Больше интересных разборов ищите в нашем блоге и телеграм-канале.