Прекратите использовать спиннеры — есть кое что получше

Перестаньте использовать эти скучные колёса загрузки в своих пользовательских интерфейсах. Серьёзно. Это ухудшает опыт использования вашего приложения сильнее, чем вы можете подумать. Вам может показаться, что колесо загрузки является решением ваших проблем с загрузкой контента. Но я хочу вам доказать, что это не так.

Вы, возможно, используете какие-то другие причудливые индикаторы загрузки. Но и они не лучше.

Почему спиннеры не работают

Долгое время мы следуем или подвергаемся влиянию жёстких правил языков дизайна. Я вас в этом не обвиняю.

Ключ к мудрости — это постоянно и часто задавать вопросы. Сомнение ведёт нас к вопросу, а вопрос — к правде. — Пьер Абеляр

Колесо загрузки — один из самых используемых индикаторов процесса загрузки в UI дизайне. Но у него есть недостатки, которые стоит пересмотреть.

После того, как смотрел на столько загрузочных индикаторов…

1. Никакого прогресса

О чем говорит вам загрузочное колесо? Оно обозначает, что контент загружается. Но сообщает ли оно, как много уже загрузилось и сколько ещё осталось?

Нет. Более того, это сложно определить, иначе мы бы использовали прогресс бар, верно?

2. Период неопределенности

Как долго вы на это смотрели? Ожидали ли вы загрузки какого-либо контента? Простите за разочарование. Ок, предположим, что GIF полностью загрузился и появляется какое-то содержимое. Задайте себе эти вопросы и ответьте честно:

• Когда вы смотрели на колесо загрузки, знали ли вы, сколько времени осталось до завершения?
• Как много содержимого загрузилось?
• Как много осталось загрузить?

Мы просто сидим и смотрим на индикатор загрузки. Надеясь, что он скоро загрузится, без ответа на эти три вопроса.

Более того, сетевое соединение может быть нестабильным. Поэтому мы никогда не можем быть уверены, что контент вообще загружается.

3. Более медленное восприятие

Колёса загрузки заставляют загрузку казаться дольше. Точка.

Это как постоянно тикающие часы. Они показывают вам время, которое вы потратили, смотря на них. Как та гифка сверху, на которую я заставил вас смотреть.

4. То, что дальше — сюрприз

До того, как все загрузится, знаете ли вы, что ожидать на экране? Спорю, что нет. Вы можете даже удивиться, когда интерфейс и контент появятся.

Подумайте о своих пользователях. До полной загрузки у них нет ни малейшего представления о том, чего ждать. Держу пари, что они будут удивлены. И это не их вина. Вы не сказали им, чего ожидать с самого начала.

Сюрприз — это не всегда хорошо.

Сюрприз — неожиданный или удивительный факт, событие и т.д.

Само определение говорит о том, что сюрприз — это что-то неожиданное. На такие события у людей обычно противоположные реакции: позитивная или негативная.

Сюрпризы не всегда положительно влияют на людей. Если это не их день рождения. Это зависит от восприятия человека. Следовательно, здесь находится проблема.

Взгляните на оба изображения. Могли ли бы вы сказать, что интерфейс справа в итоге будет выглядеть так? Уверен, что нет.

Да, финальный интерфейс на правой картинке — прототип. Но вы поняли мою точку зрения.

Я специально не брал примеры из существующих приложений, потому что мы все знаем, как они выглядят. В знакомом приложении вы уже знаете, как будет выглядеть интерфейс, до его загрузки.

5. Эмоции влияют на наше ощущение времени

Люди довольно точно могут предсказывать время. Но под влиянием наших эмоций, чувство времени сильно изменяется.

Мы все это испытывали: время летит, когда мы заняты чем-то приятным, и оно ползет, когда мы делаем то, что ненавидим. Даже когда вам скучно и вы смотрите на часы в ожидании любимого ТВ-шоу. Время идет еще медленнее.

То же самое работает и для наших интерфейсов.

Ваш контент может загружаться не так долго. Но эта загрузка может показаться пользователю дольше, чем на самом деле. Мы не можем изменить, как люди воспринимают время, но мы можем изменить, что они воспринимают. Мы можем убедить их в том, что наше приложение быстрее, чем есть на самом деле.

Примечание: Не слишком увлекайтесь имитированием. Вашему интерфейсу для успеха нужна комбинация реальной и воспринимаемой скорости.

Иллюзия выбора

Обычно у нас есть два варианта обозначения загрузки содержимого:

1. Конечный прогресс бар — если мы знаем точное время загрузки.
2. Бесконечный спиннер — если время точно не известно.

Давайте еще раз взглянем на опции. Вы понимаете, что здесь нет настоящего выбора?

Мы не можем использовать конечную шкалу, потому что не можем измерить время. Также мы знаем, что в колесе загрузки нет ничего хорошего.

Хороший индикатор прогресса

Хороший индикатор не должен включать в себя те минусы, о которых я упомянул выше. Вот список этих критериев:

1. Дает немедленную обратную связь.
2. Обеспечивает ощущение времени (сколько прошло и сколько осталось).
3. Устраняет сомнения (постепенный прогресс показывает людям, что приложение работает).

Немного доказательств

Некоторые из вас не поверят в то, что я сказал. На вашем месте я бы тоже себе не поверил. В конце концов, где доказательства? Действительно ли вредят индикаторы загрузки? Кто это испытывал?

Считайте, что вам повезло. Вы можете научиться на чужих ошибках.

Приложение Polar для iOS настоятельно рекомендует избегать колес загрузки.

Polar получили много жалоб на то, что их приложение медленно работает. Они были вызваны как раз работой спиннеров в приложении.

С индикаторами прогресса мы заставили людей смотреть на часы. В результате время замедлилось, как и наше приложение. Мы сфокусировались на индикаторе, а не на прогрессе, для того, чтобы дать вам ощущение движения к цели вместо простого ожидания. — Polar

Я думаю, что достаточно сказал о том, почему колеса загрузки плохие. Главная проблема — отсутствие прогресса. Однако мы можем это исправить.

Как? Ответ — “экраны-скелеты”.

Экраны-скелеты вам в помощь

В отличие от колес загрузки, когда интерфейс показывается целиком, экран-скелет позволяет загружать UI постепенно.

Это значит, что каркас интерфейса появляется в первую очередь. Затем загруженное содержимое постепенно проявляется.

Скелет экрана — это по сути пустая страница, на которой постепенно загружается информация. — Люк Вроблевски

LinkedIn недавно стали использовать экраны-скелеты при загрузке.

 

Такие интерфейсы смещают внимание пользователей. Они заставляют их ориентироваться на прогресс, а не на время ожидания. Экраны-скелеты визуально сообщают пользователям, чего им ожидать от интерфейса. Он дает им подсказку о том, что произойдет дальше и создает ощущение постепенного процесса.

Чаще всего он влияет на восприятие людей: сайт кажется быстрее, чем он есть на самом деле. Помните, что мы делаем интерфейсы для использования настоящими людьми. Мы должны дать им ощущение скорости.

Чем больше система дает информации о времени ожидания, тем более удовлетворен пользователь. — Как улучшить восприятия времени ожидания во взаимодействии человека и компьютера.

У экрана-скелета есть следующие преимущества:

• Помогает людям воспринимать ваш экран, как более быстрый
• Устраняет сюрпризы
• Постепенная загрузка интерфейса — ясная индикация прогресса
• Точно показывает, что загрузилось и что еще нужно загрузить

Постепенное развитие

Я знаю — это забавный термин. Он означает постепенную загрузку вашего содержимого. Ребята из веб-дизайна и разработки называют его “ленивой загрузкой”.

Ленивая загрузка — откладывание инициализации объекта до момента необходимости.

Сначала — основа интерфейса. Затем загрузите текстовые данные: пользователь будет знать, что он получает контент. Затем загружайте изображения.

Так вы дадите пользователям:

• Чувство прогресса
• Понимание, что ожидать дальше
• Что осталось ждать

Смотрите, как Instagram умно справляется с загрузкой:

Сначала он недолго показывает загрузочное колесо. Затем он показывает основу интерфейса. Это экран-скелет или Placeholder. Он обозначает места, где затем появится контент.

Также заметьте, что текст уже размещен на экране. Наконец, на третьем скриншоте, изображения появляются на своих местах.

Вот некоторые веб-сайты, которые используют экраны-скелеты для загрузки.

 

Вы можете поспорить, что эти веб-сайты используют колеса загрузки. Но обратите внимание, как они это делают.

Начало и конец не обозначаются одним индикатором. Колесо загрузки показывается на короткий период, за ним следует каркас экрана.

Подсказка Если ваше время загрузки дольше, вы можете ненадолго показать колесо загрузки перед скелетом UI. Это может дать вашему заданию немного больше времени для завершения.

Прогрессивная загрузка изображений

Вы можете применить постепенную загрузку к изображениям. Например, ее используют Medium и Google. Google сначала показывает основной цвет изображения.

Medium действует немного по-другому. Веб-сайт использует изображение с маленьким количеством пикселей и размывает его. Затем он загружает более качественное изображение для того, чтобы его заменить интересным анимированным переходом.

Я уверен, что вы видели хотя бы один из приведенных примеров. Может быть, вы не знали, как это называется.

Последовательность шагов для прогрессивной загрузки изображений:

• Покажите скелет экрана
• Загрузите размытое изображение в очень низком качестве (или его основной цвет)
• Загрузите высококачественный фон
• Замените изображение более высококачественным

Обратите внимание, что вы не знаете, когда закончится загрузка. Нет никакой оценки времени. Но вы можете знать, что закончено и что еще осталось. Это ясное обозначение прогресса.

Экраны-скелеты на Android и iOS

Многие из примеров таких интерфейсов — это сайты. Но как сделать это на мобильных платформах? Все это не стоило читать, если бы я не дал вам подсказку для этого.

Shimmer от Facebook

 

Facebook выпустил библиотеку под названием Shimmer для Android и iOS. Она работает, как скелет UI от Facebook для загрузки контента. Мерцающая анимация показывает, что в данный момент контент загружается. Вы можете использовать эту библиотеку для создания каркасов экранов загрузки в своих приложениях.

Исправление сбоев с экранами-скелетами

Нет никакой гарантии, что запрос будет выполнен успешно. Поэтому мы не можем предполагать, что если контент загружается, то он загрузится до конца. Есть шанс, что из-за ошибок с соединением загрузка прервется.

Предположим, что вы начали загружать содержимое, появился экран-скелет, затем соединение неожиданно пропадает. Как вы справитесь с этим?

Вам нужно проинформировать пользователя и предложить попробовать ещё раз.

Помните, что обратная связь — это хороший интерактивный дизайн и позитивный пользовательский опыт.

Пустые состояния появляются, когда содержимое не может быть показано.

Подсказка: Рассмотрите возможность использования “пустых состояний”. Это позволит вам обеспечить понятную обратную связь с помощью кнопки призыва к действию (CTA).

Все началось с простого парадокса: Дизайн нового приложения Uber

Коннективити в Android и iOS

Вот пара ресурсов, которые помогут вам справляться с проблемами подключения.

Android:

• Используйте Snackbar для обратной связи с помощью CTA-кнопки.
• Connectivity — утилита для управления сетью.

iOS-Swift:

• iOS Alerts — коллекция библиотек для оповещений.
• Reachability — управление сетью.

Итог

Приложения становятся умнее. Люди начинают понимать, что спиннеры вредят их UX. Следовательно, пришло время понять и вам.

Экраны-скелеты привносят прогресс в загрузку вашего интерфейса. Такая обратная связь улучшает пользовательский опыт и уменьшает неуверенность. Более того, людям захочется подождать немного дольше.