Ланч-тайм 298: краткий
перевод свежих статей о digital
В номере: вон вложенные формы из digital-продуктов и UX вещей — Netflix
915
Удалите вложенные формы из digital-продуктов
Removing Nested Modals From Digital Products
Визуальное представление вложенных модальных окон
Что такое вложенное модальное окно?
Модальное окно — это диалоговое окно, которое при появлении перекрывает основной контент на экране и заставляет пользователя выполнить лишнее действие для возврата. Вложенное модальное окно — это когда два или более модальных окна накладываются друг на друга.
Модальное окно — это диалоговое окно, которое при появлении перекрывает основной контент на экране и заставляет пользователя выполнить лишнее действие для возврата. Вложенное модальное окно — это когда два или более модальных окна накладываются друг на друга.
Почему следует избегать вложенных модальных окон
Сложно быстро выйти из потока
Пользователи должны чувствовать контроль над тем, что они делают на сайте. Вложенные модальные окна усложняют информацию, поскольку она накладывается друг на друга — и выйти из нового потока одним щелчком мыши уже не получится. Если пользователь попадает во вложенные модальные окна и хочет вернуться к основному потоку, он должен сидеть и закрывать каждое модальное окно. Это заставляет пользователя вновь возвращаться к экранам, которые ему не нужны, и создает бесполезный опыт.
Пользователи должны чувствовать контроль над тем, что они делают на сайте. Вложенные модальные окна усложняют информацию, поскольку она накладывается друг на друга — и выйти из нового потока одним щелчком мыши уже не получится. Если пользователь попадает во вложенные модальные окна и хочет вернуться к основному потоку, он должен сидеть и закрывать каждое модальное окно. Это заставляет пользователя вновь возвращаться к экранам, которые ему не нужны, и создает бесполезный опыт.
Схема пути пользователя с вложенными модальными окнами
Вводит в замешательство
Вложенные модальные окна добавляют еще один уровень сложности и, в целом, пользователю тяжелее понять результаты своих действий. Например, пользователям придется только догадываться, что произойдет, если они нажмут кнопку «Назад». Более того, даже многие браузеры не знают, как обрабатывать вложенные модальные окна.
Пример на видео ниже с сайта Dribbble кнопка. Кнопка «Назад» закрывает скрытое модальное окно и еще ломает кнопку «Закрыть» на верхнем модальном окне.
Вложенные модальные окна добавляют еще один уровень сложности и, в целом, пользователю тяжелее понять результаты своих действий. Например, пользователям придется только догадываться, что произойдет, если они нажмут кнопку «Назад». Более того, даже многие браузеры не знают, как обрабатывать вложенные модальные окна.
Пример на видео ниже с сайта Dribbble кнопка. Кнопка «Назад» закрывает скрытое модальное окно и еще ломает кнопку «Закрыть» на верхнем модальном окне.
Малоиспользуемое пространство
Большинство модальных окон обычно используют немного места на экране. Google-документы согласно Material Design предполагают, что «полноэкранные диалоги предназначены только для мобильных устройств. На планшете или компьютере используйте модальное диалоговое окно «. Пространство за пределами модальных окон лучше использовать для более ценных компонентов. Для устройств с небольшими экранами и экранным пространством это особо актуально.
Когнитивная нагрузка увеличивается
Мы все хотим, чтобы наши пользователи могли сосредоточиться на своей текущей задаче. Мы понимаем, что процесс должен быть максимально упрощен. Когда переменных и потоков слишком много, это может вызвать затруднения и утомить пользователя. Если пользователю нужно открыть модальное окно, а затем другое, это, вероятно, знак того, что происходят более серьезные проблемы с вашей информационной архитектурой. Всегда старайтесь, чтобы опыт был как можно более плавным; потому что время и внимание пользователя обычно не на вашей стороне.
Большинство модальных окон обычно используют немного места на экране. Google-документы согласно Material Design предполагают, что «полноэкранные диалоги предназначены только для мобильных устройств. На планшете или компьютере используйте модальное диалоговое окно «. Пространство за пределами модальных окон лучше использовать для более ценных компонентов. Для устройств с небольшими экранами и экранным пространством это особо актуально.
Когнитивная нагрузка увеличивается
Мы все хотим, чтобы наши пользователи могли сосредоточиться на своей текущей задаче. Мы понимаем, что процесс должен быть максимально упрощен. Когда переменных и потоков слишком много, это может вызвать затруднения и утомить пользователя. Если пользователю нужно открыть модальное окно, а затем другое, это, вероятно, знак того, что происходят более серьезные проблемы с вашей информационной архитектурой. Всегда старайтесь, чтобы опыт был как можно более плавным; потому что время и внимание пользователя обычно не на вашей стороне.
Что можно использовать вместо?
Бесконечное модальное окно
В таком виде модальные окна не складываются в кучу, а объединяет их в новый поток. Это решение очень полезно для мобильных устройств, поскольку имитирует то, как пользователь может вернуться/закрыть окно в приложениях.
В таком виде модальные окна не складываются в кучу, а объединяет их в новый поток. Это решение очень полезно для мобильных устройств, поскольку имитирует то, как пользователь может вернуться/закрыть окно в приложениях.
Боковая панель
Если необходимо отобразить много контекстного контента и горизонтальное пространство не занято, то боковая панель может стать правильным решением. В уже приведенном выше видео о Dribbble обратите внимание, что информация о посте отображается через вложения модальных окон. Если бы Dribbble использовал боковую панель, это решило бы их проблему.
Если необходимо отобразить много контекстного контента и горизонтальное пространство не занято, то боковая панель может стать правильным решением. В уже приведенном выше видео о Dribbble обратите внимание, что информация о посте отображается через вложения модальных окон. Если бы Dribbble использовал боковую панель, это решило бы их проблему.
Встроенное раскрывающееся окно
У вас немного вертикального пространства? Встроенное раскрывающееся окно — отличное решение для маленьких экранов или для оптимизации использования.
У вас немного вертикального пространства? Встроенное раскрывающееся окно — отличное решение для маленьких экранов или для оптимизации использования.
Всплывающее окно
Используйте всплывающее окно, чтобы дать дополнительный контекст элементу на экране. Всплывающие окна могут отображать более сложные функции, и у пользователей меньше ожиданий от них, чем от раскрывающихся списков.
Используйте всплывающее окно, чтобы дать дополнительный контекст элементу на экране. Всплывающие окна могут отображать более сложные функции, и у пользователей меньше ожиданий от них, чем от раскрывающихся списков.
Модальное окно с вкладками
Это эффективный способ четко упорядочить контент для пользователя и добавить удобства при навигации.
Это эффективный способ четко упорядочить контент для пользователя и добавить удобства при навигации.
Настройка контента
Иногда одна только настройка UX-шаблонов окон не может исправить вложенные модальные окна. Вот несколько предложений для конкретного контента, которые следует взять во внимание, если вы возьметесь менять поток.
- Следует ли превратить модальное окно в страницу и добавить в основной поток?
- Можете ли вы расположить информацию на странице так, чтобы сфокусировать на ней внимание?
- Следует ли разделить какую-то страницу на несколько страниц?
- Перепроверьте опыт, специально созданный для другой платформы, чтобы убедиться, что он по-прежнему работает на новой платформе.
Как модальные окна должны интегрироваться в идеальный поток?
Оптимальный модальный обратный поток
Вывод: Пользователи должны беспрепятственно перемещаться по приложению. Когда пользователь проходит через последовательность экранов, он мысленно строит линейный путь слева направо. Подумайте: кнопка назад указывает влево, а кнопка вперед — вправо? Когда пользователю нужно выполнить второстепенную задачу, он делает метафорический «шаг в сторону», чтобы сосредоточиться на новой задаче, добавляя модальное окно поверх основного потока. Завершив вторичную задачу, пользователь возвращается к основному потоку в том же месте. Перевели, чтобы вы сэкономили час-другой.
916
UX вещей. 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. Такое ощущение, что мы просматриваем AppStore, не имея возможности видеть и читать отзывы пользователей, но зато с промо-видео, воспроизводимыми при прокрутке.
Отзывы пользователей: решение
Если вы смотрите Netflix из браузера, это расширение позволит вам видеть рейтинги IMDB и Rotten Tomatoes в пользовательском интерфейсе Netflix.
Это выглядит так.
Как это чувствуется
На Netflix мы либо хотим найти что-то новое, чтобы посмотреть, либо продолжить то, что начали либо позволить Netflix порекомендовать нам, что смотреть дальше.
Искать самим по заголовку — не вариант. Мы идем в жары. И там ничего не находим.
А Netflix не дает рекомендаций. Точнее, не так. Рекомендации Netflix не основаны на качестве самих фильмов или отзывах пользователей. Они основаны на нашей истории просмотров и на том, что сам Netflix считает хорошим.
Отзывы пользователей
Нет ничего лучшего для понимания хорош фильм или нет, чем отзывы пользователей. Представьте, если бы Amazon или App Store были без отзывов. Отзывы пользователей — самый важный показатель, на который мы можем положиться при покупках. Отзывы пользователей лучше всего отражают продукт, особенно когда отзывов много.
Одно но: на Amazon вы тратите деньги, а на Netflix вы тратите время. Время дороже :)
Раньше у Netflix были хотя бы рейтинги, но они решили удалить их в 2018 году, потому что тролли намеренно «бомбили» неудачные заголовки сериалов.
Мало кто любит сервис Netflix. Такое ощущение, что мы просматриваем AppStore, не имея возможности видеть и читать отзывы пользователей, но зато с промо-видео, воспроизводимыми при прокрутке.
Отзывы пользователей: решение
Если вы смотрите Netflix из браузера, это расширение позволит вам видеть рейтинги IMDB и Rotten Tomatoes в пользовательском интерфейсе Netflix.
Это выглядит так.
Представим, что Netflix решил показывать рейтинги по умолчанию. Если бы они сделали это, им было бы довольно сложно продвинуть сериал с таким низким рейтингом и назвать его «рекомендованным к просмотру».
Функция автозапуска
Еще одно место, с которым Netflix намеренно не работает — это функция автовоспроизведения.
Netflix автоматически воспроизводит трейлеры к сериалам, нравится вам это или нет.
Неудивительно, что эта функция вызвала раздражение у слишком многих пользователей. Видимо, для Netflix преимущества явно перевешивают недостатки.
Это как если бы сервис Netflix был веб-сайтом, они бы нажимали кнопку регистрации для вас, так что вам не приходилось делать это.
Функция автозапуска: решение
Это была функция по умолчанию в течение десяти лет, и, наконец, в этом году, после бесчисленных жалоб, Netflix уступил. Теперь мы можем выключить его самостоятельно в настройках.
Для этого:
1. Войдите в свою учетную запись Netflix в браузере.
2. Нажмите на свой профиль в правом верхнем углу и выберите «Управление профилями».
3. Выберите профиль, настройки которого хотите изменить.
4. Вы должны найти «Элементы управления автозапуском» и изменить настройки.
Одно только это изменение сильно повлияло на UX Netflix. Несмотря на то, что они сделали это изменение возможным, большинство пользователей все же никогда не найдут этот параметр.
Функция автозапуска
Еще одно место, с которым Netflix намеренно не работает — это функция автовоспроизведения.
Netflix автоматически воспроизводит трейлеры к сериалам, нравится вам это или нет.
Неудивительно, что эта функция вызвала раздражение у слишком многих пользователей. Видимо, для Netflix преимущества явно перевешивают недостатки.
Это как если бы сервис Netflix был веб-сайтом, они бы нажимали кнопку регистрации для вас, так что вам не приходилось делать это.
Функция автозапуска: решение
Это была функция по умолчанию в течение десяти лет, и, наконец, в этом году, после бесчисленных жалоб, Netflix уступил. Теперь мы можем выключить его самостоятельно в настройках.
Для этого:
1. Войдите в свою учетную запись Netflix в браузере.
2. Нажмите на свой профиль в правом верхнем углу и выберите «Управление профилями».
3. Выберите профиль, настройки которого хотите изменить.
4. Вы должны найти «Элементы управления автозапуском» и изменить настройки.
Одно только это изменение сильно повлияло на UX Netflix. Несмотря на то, что они сделали это изменение возможным, большинство пользователей все же никогда не найдут этот параметр.
Вывод: хорошая новость в том, что мы можем справиться с двумя этими неудобствами. Плохая новость в том, что большинство пользователей никогда этого не сделает. Настройки по умолчанию — это то, чего придерживаются пользователи. Скорей всего, что лишь небольшое количество пользователей изучают настройки Netflix в веб-браузере. Перевели, чтобы вы смогли сэкономить часок.
Хэй-хэй! Пятница же! Хоп-хэй-лалалэй всем!