Содержание
- Удалите вложенные формы из digital-продуктов
- UX вещей. Netflix
#915. Удалите вложенные формы из digital-продуктов
Removing Nested Modals From Digital Products
Визуальное представление вложенных модальных окон. Источник
Что такое вложенное модальное окно?
Модальное окно — это диалоговое окно, которое при появлении перекрывает основной контент на экране и заставляет пользователя выполнить лишнее действие для возврата. Вложенное модальное окно — это когда два или более модальных окна накладываются друг на друга.
Почему следует избегать вложенных модальных окон
Сложно быстро выйти из потока
Пользователи должны чувствовать контроль над тем, что они делают на сайте. Вложенные модальные окна усложняют информацию, поскольку она накладывается друг на друга — и выйти из нового потока одним щелчком мыши уже не получится. Если пользователь попадает во вложенные модальные окна и хочет вернуться к основному потоку, он должен сидеть и закрывать каждое модальное окно. Это заставляет пользователя вновь возвращаться к экранам, которые ему не нужны, и создаёт бесполезный опыт.
Продвижение медцентров и клиник: три кейса о SEO, TikTok и Instagram*
Как получить измеримые результаты в фарммаркетинге.
Показываем на примерах →
Спецпроект
Схема пути пользователя с вложенными модальными окнами. Источник
Вводит в замешательство
Вложенные модальные окна добавляют ещё один уровень сложности и, в целом, пользователю тяжелее понять результаты своих действий. Например, пользователям придется только догадываться, что произойдёт, если они нажмут кнопку «Назад». Более того, даже многие браузеры не знают, как обрабатывать вложенные модальные окна.
Пример на видео ниже с сайта Dribbble кнопка. Кнопка «Назад» закрывает скрытое модальное окно и ещё ломает кнопку «Закрыть» на верхнем модальном окне.
Nested Modal Bug from Joseph Mueller on Vimeo.
Малоиспользуемое пространство
Большинство модальных окон обычно используют немного места на экране. Google-документы согласно Material Design предполагают, что «полноэкранные диалоги предназначены только для мобильных устройств. На планшете или компьютере используйте модальное диалоговое окно». Пространство за пределами модальных окон лучше использовать для более ценных компонентов. Для устройств с небольшими экранами и экранным пространством это особо актуально.
Когнитивная нагрузка увеличивается
Мы все хотим, чтобы наши пользователи могли сосредоточиться на своей текущей задаче. Мы понимаем, что процесс должен быть максимально упрощен. Когда переменных и потоков слишком много, это может вызвать затруднения и утомить пользователя. Если пользователю нужно открыть модальное окно, а затем другое, это, вероятно, знак того, что происходят более серьезные проблемы с вашей информационной архитектурой. Всегда старайтесь, чтобы опыт был как можно более плавным; потому что время и внимание пользователя обычно не на вашей стороне.
Что можно использовать вместо?
Бесконечное модальное окно
В таком виде модальные окна не складываются в кучу, а объединяет их в новый поток. Это решение очень полезно для мобильных устройств, поскольку имитирует то, как пользователь может вернуться/закрыть окно в приложениях.
Боковая панель
Если необходимо отобразить много контекстного контента и горизонтальное пространство не занято, то боковая панель может стать правильным решением. В уже приведенном выше видео о Dribbble обратите внимание, что информация о посте отображается через вложения модальных окон. Если бы Dribbble использовал боковую панель, это решило бы их проблему.
Встроенное раскрывающееся окно
У вас немного вертикального пространства? Встроенное раскрывающееся окно — отличное решение для маленьких экранов или для оптимизации использования.
Всплывающее окно
Используйте всплывающее окно, чтобы дать дополнительный контекст элементу на экране. Всплывающие окна могут отображать более сложные функции, и у пользователей меньше ожиданий от них, чем от раскрывающихся списков.
Модальное окно с вкладками
Это эффективный способ четко упорядочить контент для пользователя и добавить удобства при навигации.
Настройка контента
Иногда одна только настройка UX-шаблонов окон не может исправить вложенные модальные окна. Вот несколько предложений для конкретного контента, которые следует взять во внимание, если вы возьметесь менять поток.
-
Следует ли превратить модальное окно в страницу и добавить в основной поток?
-
Можете ли вы расположить информацию на странице так, чтобы сфокусировать на ней внимание?
-
Следует ли разделить какую-то страницу на несколько страниц?
-
Перепроверьте опыт, специально созданный для другой платформы, чтобы убедиться, что он по-прежнему работает на новой платформе.
Как модальные окна должны интегрироваться в идеальный поток?
Оптимальный модальный обратный поток. Источник
Вывод: Пользователи должны беспрепятственно перемещаться по приложению. Когда пользователь проходит через последовательность экранов, он мысленно строит линейный путь слева направо. Подумайте: кнопка назад указывает влево, а кнопка вперёд — вправо? Когда пользователю нужно выполнить второстепенную задачу, он делает метафорический «шаг в сторону», чтобы сосредоточиться на новой задаче, добавляя модальное окно поверх основного потока. Завершив вторичную задачу, пользователь возвращается к основному потоку в том же месте.
Перевели, чтобы вы сэкономили час-другой.
#913. UX вещей, эпизод 1. Netflix
The UX of Things Ep.1 — Netflix
Источник
Знаете ли вы, что Netflix начинался как сайт проката DVD ещё в 1997 году? :–)
Источник
По состоянию на октябрь 2020 года Netflix обслуживает более 195 миллионов платных подписчиков с операционным доходом в 1,2 миллиарда долларов. Скорее всего, в офисах Netflix происходит довольно много обсуждений UX-стратегии.
Как это чувствуется
На Netflix мы либо хотим найти что-то новое, чтобы посмотреть, либо продолжить то, что начали, либо позволить Netflix порекомендовать нам, что смотреть дальше.
Искать самим по заголовку — не вариант. Мы идём в жары. И там ничего не находим.
А Netflix не даёт рекомендаций. Точнее, не так. Рекомендации Netflix не основаны на качестве самих фильмов или отзывах пользователей. Они основаны на нашей истории просмотров и на том, что сам Netflix считает хорошим.
Отзывы пользователей
Нет ничего лучшего для понимания хорош фильм или нет, чем отзывы пользователей. Представьте, если бы Amazon или App Store были без отзывов. Отзывы пользователей — самый важный показатель, на который мы можем положиться при покупках. Отзывы пользователей лучше всего отражают продукт, особенно когда отзывов много.
Одно «но»: на Amazon вы тратите деньги, а на Netflix вы тратите время. Время дороже :–)
Раньше у Netflix были хотя бы рейтинги, но они решили удалить их в 2018 году, потому что тролли намеренно «бомбили» неудачные заголовки сериалов.
Мало кто любит сервис Netflix. Такое ощущение, что мы просматриваем App Store, не имея возможности видеть и читать отзывы пользователей, но зато с промовидео, воспроизводимыми при прокрутке.
Отзывы пользователей: решение
Если вы смотрите Netflix из браузера, это расширение позволит вам видеть рейтинги IMDB и Rotten Tomatoes в пользовательском интерфейсе Netflix.
Это выглядит так.
Источник
Представим, что Netflix решил показывать рейтинги по умолчанию. Если бы они сделали это, было бы довольно сложно продвигать сериал с очень низким рейтингом и называть его «рекомендованным к просмотру».
Функция автозапуска
Ещё один момент, с которым Netflix намеренно не работает — это функция автовоспроизведения.
Netflix автоматически воспроизводит трейлеры к сериалам, нравится вам это или нет. Неудивительно, что эта функция вызывает раздражение у слишком многих пользователей. Но, видимо, для Netflix преимущества явно перевешивают недостатки.
Это как если бы сервис Netflix был веб-сайтом, и они бы нажимали кнопку регистрации за вас, так что вам даже не приходилось бы делать это.
Функция автозапуска: решение
Это функция запускалась по умолчанию в течении десяти лет, и, наконец, в этом году, после многочисленных жалоб, Netflix уступил. Теперь мы можем выключить его самостоятельно в настройках.
Для этого:
1. Войдите в свою учётную запись Netflix в браузере.
2. Нажмите на свой профиль в правом верхнем углу и выберите «Управление профилями».
3. Выберите профиль, настройки которого хотите изменить.
4. Вы должны найти «Элементы управления автозапуском» и изменить настройки.
Одно только это изменение сильно повлияло на UX Netflix. Но несмотря на то, что они сделали это изменение возможным, большинство пользователей так никогда и не найдут этот параметр.
Вывод: хорошая новость в том, что мы можем справиться с двумя этими неудобствами. Плохая новость в том, что большинство пользователей никогда этого не сделает, ведь настроек по умолчанию придерживаются большинство из них. Скорее всего, лишь небольшое количество пользователей действительно кастомизируют Netflix в веб-браузере.
Перевели, чтобы вы смогли сэкономить часок.
Хэй-хэй! Пятница же! Хоп-хэй-лалалэй всем!
Читать по теме: Ланч-тайм: краткий перевод свежих статей о Digital (все выпуски)
Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.
Источник: