Лучшие практики для PWA UI/UX¶
Добро пожаловать на 29-й день серии статей 30 Days of PWA! В сегодняшней статье мы рассмотрим некоторые из лучших практик, о которых следует помнить, продумывая пользовательский опыт и интерфейс PWA.
Соображения, связанные с отзывчивостью¶
При разработке PWA есть несколько моментов, о которых следует подумать не только для того, чтобы пользовательский интерфейс адаптировался к тому устройству, на котором находится пользователь, будь то мобильный, планшетный или настольный компьютер. В предыдущей статье мы рассмотрели режимы отображения и то, как можно сделать PWA более похожим на приложение. Эти режимы отображения важно учитывать, когда вы думаете об отзывчивости вашего PWA.
Когда пользователь находится на мобильном или планшетном компьютере, какую часть пользовательского интерфейса браузера вы хотите отобразить, если вообще хотите? Повлияет ли ваше решение на пользовательский интерфейс PWA? Например, если вы хотите, чтобы ваш PWA отображался в полноэкранном режиме, убедитесь, что есть возможность вернуться назад с текущей страницы, поскольку в этом режиме кнопка "Назад" в браузере не предусмотрена.
Как должна отображаться версия для настольных компьютеров в автономном режиме вне браузера? Хотите ли вы, чтобы она была максимально похожа на приложение? Рассмотрите возможность применения Window Controls Overlay для настройки строки заголовка вашего PWA.
Независимо от выбранного режима отображения рассмотрите, как каждый из них влияет на отображение PWA на мобильных, планшетных и настольных компьютерах, и оцените, как это отразится на пользовательском интерфейсе.
Сосредоточение и обновление контента¶
Прогрессивные веб-приложения по своей сути представляют собой более эффективные способы предоставления опыта, причем этот опыт связан не только с техническими характеристиками, но и с тем, как быстро пользователи могут найти то, что им нужно. PWA Starbucks — отличный пример сфокусированного опыта, оптимизированного для мобильного заказа. Главное меню предлагает нам три основные опции: "Меню", "Вознаграждения" и "Подарочные карты".
Остальное содержимое сайта деприоритизировано и размещено в нижней части. Он по-прежнему доступен, но не мешает выполнению основной задачи, ради которой пользователи приходят на сайт: заказать кофе.
Определите, за какими ключевыми задачами и контентом приходят пользователи в ваше приложение, и оптимизируйте его под эти сценарии, чтобы упростить их задачу. Сосредоточьтесь на уменьшении нагромождений в пользовательском интерфейсе, особенно в мобильных версиях из-за меньшего размера экрана. Например, приложение Twitter на настольном компьютере имеет две боковые панели. В мобильной версии навигация перемещается в нижнюю часть, а боковая панель "Что происходит" становится интегрированной во вкладку поиска, при этом основной акцент в приложении делается на временной шкале.
Дополнительно продумайте, как предложить пользователям установить последнюю версию PWA, если в нем произошли изменения, особенно если они повлияют на то, что они видят в приложении. Выделите это на фоне остального пользовательского интерфейса, чтобы пользователи сразу заметили призыв к обновлению и могли начать свое путешествие по вашему приложению с самой последней версией, не прерываясь на обновление в процессе его использования.v
Поддерживать пользователей в автономном режиме¶
Самое замечательное в PWA — это их способность сохранять некоторую функциональность (или всю, в зависимости от возможностей PWA), когда они находятся offline без подключения к Интернету. Однако в зависимости от функциональных возможностей ключевые части PWA могут не работать в автономном режиме, поэтому необходимо продумать, что будут видеть пользователи, когда страница перейдет в автономный режим.
Типичное сообщение "страница не работает" или "нет соединения" не позволит пользователям оставаться в приложении и не использует возможности PWA в автономном режиме. Подумайте о том, каким будет опыт работы в автономном режиме. Какой контент можно будет обслуживать и взаимодействовать с ним в автономном режиме, а если основного контента нет, то что можно поставить вместо него, чтобы не было сообщения об ошибке?
Если вам интересно узнать о некоторых стратегиях работы в автономном режиме, обратите внимание на пост о надежности, опубликованный в начале этой недели.
Сделайте взаимодействие плавным¶
Производительность и скорость имеют решающее значение при оценке пользовательского опыта любого сайта. Если вы находитесь на сайте и нажимаете на какую-либо кнопку, а навигация приводит вас к экрану, который медленно загружается, это может вызвать разочарование, особенно без каких-либо признаков того, что страница загружается. Обеспечьте переходные состояния, например, покажите скелетный пользовательский интерфейс во время загрузки контента. Это обеспечивает предварительный просмотр пользовательского интерфейса в ожидании загрузки реального пользовательского интерфейса. Это также указывает на то, что что-то происходит, и обеспечивает лучшие впечатления, чем просто загрузчик или индикатор выполнения. Переход от скелетного пользовательского интерфейса к реальному происходит более плавно и настраивает пользователей на то, чего следует ожидать от страницы.
Однако бесшовность и ощутимая производительность зависят не только от пользовательского интерфейса PWA, некоторые задачи, которые необходимо решить пользователям, могут быть ускорены с помощью определенных функций. Например, при оформлении заказа сделайте доступными такие функции, как автозаполнение и веб-платежи, чтобы пользователи могли быстро заполнить данные. Это уменьшает трение и позволяет быстрее завершить задачу. Подобный опыт оставляет хорошее впечатление и заставляет пользователей возвращаться к вашему PWA.
Согласование дизайна с платформой¶
Наконец, ваш PWA должен ощущаться как приложение для конкретной платформы, поэтому применение таких функций, как Window Controls Overlay, поможет добиться такого эффекта. Также можно использовать такие компоненты, как Fluent, для PWA на базе Windows. Благодаря тому, что PWA-функции соответствуют конкретной платформе, пользователи получают привычный опыт работы на своем устройстве.