Опубликовано: 10 ноября 2016 г.
На качество сетевого соединения может влиять ряд факторов, таких как:
- Плохое покрытие сети провайдера.
- Экстремальные погодные условия.
- Перебои с электроснабжением.
- Вход в постоянные «мертвые зоны», например, в здания со стенами, которые блокируют сетевые соединения.
- Вход во временные «мертвые зоны», например, при поездке на поезде и проезде через туннель.
- Ограниченное по времени подключение к Интернету, как в аэропортах или отелях.
- Культурные традиции, требующие ограниченного или нулевого доступа в Интернет в определенное время или в определенные дни.
Ваша цель как разработчика — обеспечить хороший опыт, который снизит влияние изменений в подключении.
Решите, что показывать пользователям при плохом сетевом подключении.
Первый вопрос, который следует задать, — как выглядит успешное и неудачное сетевое соединение для вашего приложения. Успешное подключение — это нормальное состояние работы вашего приложения в сети. Сбой подключения включает в себя как поведение приложения в автономном режиме, так и в сетях с задержками.
Чтобы определить, как действовать в случае сбоя соединения, задайте себе следующие важные вопросы UX:
- Сколько времени вам требуется, чтобы определить успешность или неудачность соединения?
- Что вы можете сделать, пока решается вопрос об успехе или неудаче?
- Что делать, если соединение не устанавливается?
- Как вы сообщаете пользователю, что происходит?
Информировать пользователей о состоянии
Сообщите пользователю о состоянии приложения и о действиях, которые он может предпринять в случае сбоя сети. Например, уведомление может содержать следующее:
Похоже, у вас плохое сетевое соединение. Не волнуйтесь! Сообщения будут отправлены, как только сеть восстановится.
Информируйте пользователей об улучшениях соединения
Способ уведомления пользователя об улучшении сетевого соединения зависит от вашего приложения. Приложения, отдающие приоритет текущей информации, например, отслеживающие погоду или фондовый рынок, должны автоматически обновляться и сообщать об этом пользователю как можно скорее.
Мы рекомендуем сообщать пользователю об обновлении вашего веб-приложения «в фоновом режиме», используя визуальную подсказку, например, элемент уведомления в стиле Material Design. Это включает в себя обнаружение как присутствия сервис-воркера, так и обновления его управляемого контента. Пример кода этой функции можно увидеть здесь.
Одним из примеров является Chrome Platform Status , который отправляет пользователю уведомление об обновлении приложения.
Некоторые приложения всегда могут показывать время последнего обновления. Например, это особенно полезно для конвертеров валют.
Новостные приложения могут показывать уведомление о новом контенте, информирующее пользователя о касании. Автоматическое обновление статьи может привести к тому, что пользователи потеряют свою страницу.
Обновите пользовательский интерфейс, чтобы отразить текущее контекстное состояние.
Каждый элемент пользовательского интерфейса может иметь собственный контекст и поведение, которые меняются в зависимости от того, требуется ли ему успешное соединение. Примером может служить сайт электронной коммерции, который можно просматривать офлайн, но при этом цены и кнопка «Купить» недоступны до восстановления соединения.
Другие формы контекстных состояний могут включать данные. Например, финансовое приложение Robinhood использует цвет и графику, чтобы сообщать пользователю об открытии фондового рынка. Весь интерфейс становится белым, а затем серым, когда рынок закрывается. Когда стоимость акций растёт или падает, каждый отдельный виджет акций становится зелёным или красным в зависимости от его состояния.
Объясните пользователю, что такое офлайн-модель.
Большинство пользователей привыкли к постоянному подключению к сети. Вам необходимо объяснить им, что меняется в вашем приложении при его отсутствии. Расскажите им, где хранятся большие объёмы данных, и предоставьте настройки для изменения поведения по умолчанию. Используйте несколько компонентов дизайна пользовательского интерфейса (таких как информативный язык, значки, уведомления, цвета и изображения) вместе, чтобы донести эти идеи, вместо того, чтобы полагаться на один элемент дизайна, например, на значок, чтобы рассказать всю историю.
Обеспечить возможность автономного использования по умолчанию
Если вашему приложению не требуется много данных, кэшируйте их по умолчанию. Пользователи могут испытывать всё большее раздражение, если доступ к данным возможен только через сетевое подключение.
Постарайтесь сделать работу максимально стабильной. Нестабильное соединение делает ваше приложение ненадёжным. Приложение, которое уменьшает последствия сетевых сбоев, радует своих пользователей.
Новостные сайты могут выиграть от автоматической загрузки и сохранения последних новостей, например, экономя трафик, загружая только текст, чтобы пользователь мог читать сегодняшние новости без подключения к Интернету. Вы можете адаптировать это поведение к поведению пользователя, отдав приоритет загрузке новостных категорий, которые он просматривает чаще всего.
Информировать пользователя, когда приложение отключено
При первой загрузке веб-приложения оно должно сообщать пользователю, готово ли оно к работе в автономном режиме. Для этого можно использовать виджет, который кратко информирует о выполнении операции в виде сообщения в нижней части экрана, например, о завершении синхронизации раздела или загрузки файла.
Убедитесь, что используемый вами язык подходит вашей аудитории, и используйте одни и те же формулировки во всех случаях, где это применимо. Неспециалисты часто неправильно понимают слово «офлайн», поэтому вместо этого используйте язык действий, понятный вашей аудитории.
Сделайте функцию «сохранить для офлайн» очевидной в интерфейсе
Если приложение использует большой объём данных, убедитесь, что есть переключатель или закрепление для добавления элемента для использования в автономном режиме. Автоматическая загрузка файлов должна выполняться только в том случае, если пользователь специально запросил это в меню настроек. Убедитесь, что интерфейс закрепления или загрузки очевиден для пользователя и не скрыт другими элементами интерфейса.
Примером может служить музыкальный проигрыватель, требующий больших файлов. Пользователь знает о связанных с этим расходах на передачу данных, но может также захотеть использовать проигрыватель офлайн. Загрузка музыки для последующего прослушивания требует от пользователя предварительного планирования, поэтому, вероятно, стоит рассказать ему об этом во время адаптации.
Уточните, что доступно офлайн
Чётко определите, какие параметры вы предоставляете. Возможно, вам потребуется отобразить вкладку или настройку для «офлайн-библиотеки» или индекса контента , чтобы пользователь мог видеть, что хранится на его устройстве и что нужно сохранить. Убедитесь, что настройки лаконичны и чётко указывают, где хранятся данные и кто имеет к ним доступ.
Показать фактическую стоимость действия
Многие пользователи отождествляют возможность офлайн-доступа с «загрузкой». Пользователи в странах, где сетевое подключение регулярно прерывается или отсутствует, часто делятся контентом с другими пользователями или сохраняют его для использования офлайн, когда есть подключение.
Пользователи тарифных планов иногда избегают загрузки больших файлов из-за опасений по поводу стоимости, поэтому вы можете также отображать соответствующую стоимость, чтобы пользователи могли сравнить стоимость конкретного файла или задачи. Например, вышеупомянутое музыкальное приложение может определить, подключен ли пользователь к тарифному плану, и показать размер файла, чтобы пользователь мог увидеть стоимость.
Помогите предотвратить взломы
Пользователи часто взламывают систему, не осознавая этого. Например, до появления облачных веб-приложений для обмена файлами пользователи часто сохраняли большие файлы и прикрепляли их к электронным письмам, чтобы продолжить редактирование с другого устройства. Хороший пользовательский интерфейс решает проблему, которую пытаются решить пользователи, не вовлекаясь во взлом. Например, предоставьте возможность делиться большими файлами между устройствами, вместо того чтобы делать прикрепление больших файлов к электронным письмам более удобным для пользователя.
Сделайте так, чтобы опыт можно было переносить с одного устройства на другое
При проектировании с учётом нестабильной сети старайтесь синхронизироваться сразу же после улучшения соединения, чтобы обеспечить переносимость. Например, представьте, что приложение для путешествий теряет сетевое соединение во время бронирования. Когда соединение восстанавливается, приложение синхронизируется с учётной записью пользователя, позволяя ему продолжить бронирование на настольном компьютере и обеспечивая бесперебойную работу.
Сообщите пользователю, в каком состоянии находятся его данные. Например, можно показать, синхронизировано ли приложение. По возможности информируйте пользователя об этом, но старайтесь не перегружать его слишком большим количеством сообщений.
Создавайте инклюзивный дизайн-опыт
При проектировании UX-интерфейса стремитесь к инклюзивности, используя осмысленные дизайнерские приемы, простой язык, стандартную иконографию и содержательные изображения, которые направляют пользователя к выполнению действия или задачи, не мешая ему.
Используйте простой и понятный язык.
Хороший UX — это не только дизайн интерфейса. Он включает в себя путь пользователя по вашему приложению и всё, с чем он сталкивается на этом пути, включая язык, используемый приложением для описания этого пути. При описании компонентов пользовательского интерфейса или состояния приложения избегайте технического жаргона. Слово «офлайн» часто недостаточно понятно, чтобы объяснить пользователю, что делает ваше приложение.
Используйте несколько устройств дизайна для создания доступного пользовательского опыта
Используйте язык, цвет и визуальные компоненты для отображения статуса или изменения состояния. Использование только цвета для отображения состояния может быть сложно для восприятия пользователями или даже совершенно недоступно для пользователей с нарушениями зрения. Кроме того, поскольку в веб-дизайне элементы для людей с нарушениями зрения часто оформляются в серый цвет, использование серого интерфейса для обозначения офлайн-доступа приложения может вызвать путаницу в отношении того, что приложение может делать в офлайн-режиме, особенно если для отображения состояния используется только цвет.
Чтобы избежать недопонимания, сообщайте пользователю о состояниях приложения несколькими способами, например, с помощью цвета, меток и компонентов пользовательского интерфейса.
Используйте значки, которые передают смысл
Обязательно используйте содержательные текстовые подписи к значкам. Одни значки могут сбивать с толку, особенно учитывая, что концепция «офлайн» в интернете появилась относительно недавно. Среди других примеров запутанных значков — использование дискеты для обозначения кнопки «сохранить», что может быть бессмысленно для молодых пользователей, которые никогда не видели дискеты, а также значок меню «гамбургер».
При добавлении значка автономного режима следуйте отраслевым стандартам визуального оформления (если таковые имеются) и предоставьте текстовую подпись и описание. Например, значок загрузки можно использовать для обозначения сохранения в автономном режиме, а значок синхронизации — для действия, включающего синхронизацию. Будьте осторожны, используя значки для отображения статуса, которые могут быть интерпретированы как действие сохранения или загрузки.
Для большего вдохновения обратитесь к набору иконок Material Design .
Используйте скелетные макеты и другие механизмы обратной связи
Пока ваше приложение загружает контент, покажите пользователю, что оно загружается, чтобы у него не возникло мысли о сбое. Один из способов сделать это — использовать скелетный макет — каркасную версию приложения, которая отображается во время загрузки контента. Также рассмотрите возможность использования интерфейса предварительной загрузки с текстовой меткой, сообщающей пользователю о загрузке приложения, или плавно пульсирующей анимации каркаса, чтобы создать ощущение, будто приложение загружается. Это убедит пользователя в том, что что-то происходит, и поможет избежать повторных отправок или ненужных обновлений.
Покажите состояние действия, предоставляя обратную связь. Например, если пользователь редактирует документ офлайн, рассмотрите возможность изменить дизайн обратной связи так, чтобы она визуально отличалась от той, что была при работе онлайн, но при этом отображала, что файл «сохранён» и синхронизируется при наличии сетевого подключения. Это информирует пользователя о работе вашего приложения и убеждает его в том, что его задача или действие сохранены, что может повысить его уверенность при использовании вашего приложения.
Не блокируйте контент
В некоторых приложениях пользователь может инициировать действие, например, создание нового документа. Некоторые приложения пытаются подключиться к серверу для синхронизации нового документа и для демонстрации этого отображают навязчивое модальное окно загрузки, занимающее весь экран. Это может сработать, если у пользователя стабильное сетевое подключение, но если сеть нестабильна, пользователь не сможет избежать этого действия, поэтому пользовательский интерфейс блокирует любые другие действия.
Избегайте сетевых запросов, блокирующих контент. Позвольте пользователю продолжить работу с вашим приложением и поставьте задачи в очередь, которые будут выполнены и синхронизированы после улучшения соединения.
Дизайн для следующего миллиарда
Во многих регионах распространены некачественные устройства, подключение к интернету нестабильно, а для многих пользователей данные чрезвычайно дороги. Заслужите доверие пользователей, обеспечивая прозрачность и экономию трафика. Подумайте о том, как помочь пользователям с плохим соединением и упростить интерфейс для ускорения выполнения задач. Всегда спрашивайте разрешения пользователей, прежде чем загружать контент с большим объёмом данных.
Предлагайте варианты с низкой пропускной способностью для пользователей с медленным подключением. Предоставляйте ресурсы меньшего размера при медленном сетевом подключении или предлагайте возможность выбора ресурсов высокого или низкого качества.
Заключение
Обучение играет ключевую роль в офлайн-UX, поскольку пользователи с ним не знакомы. Чтобы помочь им освоиться, попробуйте создать ассоциации со знакомыми понятиями, например, объясните, что загрузка для последующего использования — это то же самое, что и офлайн-данные.
При проектировании для нестабильных сетевых подключений помните следующие рекомендации:
- Проектирование с учетом успешного, неудачного и нестабильного сетевого соединения.
- Данные могут быть дорогими, поэтому будьте внимательны к пользователю.
- Для большинства пользователей во всем мире технологическая среда практически полностью мобильна.
- Устройства начального уровня широко распространены: с ограниченным объёмом памяти, хранилища и вычислительной мощности, маленькими дисплеями и низким качеством сенсорного экрана. Убедитесь, что производительность является частью процесса проектирования.
- Разрешите пользователям просматривать ваше приложение, когда они не в сети.
- Информируйте пользователей об их текущем состоянии и об изменениях в состояниях.
- Если вашему приложению не требуется много данных, попробуйте включить режим офлайн по умолчанию.
- Если приложение содержит большой объем данных, объясните пользователям, как его можно загрузить для использования в автономном режиме.
- Сделайте так, чтобы опыт можно было переносить между устройствами.
- Используйте язык, значки, изображения, типографику и цвет вместе, чтобы донести идеи до пользователя.
- Предоставьте заверения и обратную связь, чтобы помочь пользователю.