Главное Свежее Вакансии   Проекты
😼
Выбор
редакции
564 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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


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

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

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


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

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

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

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

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


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

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

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

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


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

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

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

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


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

Состояние И


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


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


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

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


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


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

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


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

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


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

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


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


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

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


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


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

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


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


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

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

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

Источник

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
Алексей Rox
С этими тумблерами часто не понятно, в каком положении они вкл., а в каком выкл. Без сопровождения цветом (зелёный/красный) или бледности (бледный - выкл, контратсный - вкл.) точно не скажешь.

Вот в статье тумблер в каком положении соответствует поставленной галочке? Я бы поставил на белое, но не уверен: синий уж слишком выделяется -- то ли говорит, что "вот он я, активируй меня", то ли "обрати внимание, я активирован".

Неоднозначно.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.