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