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