Индикатор загрузки: типы индикаторов прогресса и принципы их применения — Офтоп на vc.ru

типы индикаторов прогресса и принципы их применения — Офтоп на vc.ru

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

Индикатор прогресса выполнения задачи является одной из самый популярных форм предоставления системного статуса для пользователя.

Хороший интерактивный дизайн предоставляет обратную связь

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

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

Время ожидания для пользователя начинается сразу с момента инициации действия, и в худшем случае он не получает никакой индикации о том, получила ли система его запрос.

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

Любые действия, такие как щелчок по кнопке или обновление данных в мобильных приложениях путём pull to refresh, должны сопровождаться незамедлительной реакцией.

Используйте индикатор прогресса для любой активности, которая занимает больше одной секунды

Когда приложению требуется от 0,1 до 1 секунды, кажется, что оно просто выполняет действия. Хотя пользователь и замечает небольшую задержку, он остается сфокусированным на текущей задаче. Но если приложение выполняет действие дольше одной секунды, пользователь будет думать, что оно работает медленно.

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

Анимационные прогресс-индикаторы уменьшают негативный эффект ожидания и позволяют удерживать пользовательское внимание (не рекомендуется использовать анимацию для любой активности, которая длиться меньше, чем одна секунда, так как анимация в таком коротком промежутке времени может быть воспринята пользователем как мерцание на экране).

Типы прогресс-индикаторов

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

Бесконечный спинер предупреждает, что система работает над запросом, но при этом не говорит, сколько это займёт времени

Базовое правило: вы можете использовать этот тип индикации для любого быстрого действия (от двух до десяти секунд). Заставлять пользователя смотреть на бесконечный спинер дольше может привести к тому, что пользователь покинет сайт или закроет приложение.

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

Неопределенный индикатор визуализирует сам факт ожидания, тогда как определённый говорит о том, сколько продлится сама операция

Два наиболее популярных типа прогресс-индикаторов

Существует два наиболее популярных типа индикаторов прогресса — петлевая анимация и процентный индикатор.

Петлевая анимация

Из-за того, что большинство вариантов петлевой анимации — это неопределённые формы индикации и используются они в разных типах ожиданий (от малых до больших), этот тип прогресс-индикаторов имеет плохую репутацию у пользователей.

Например, базовый индикатор загрузки в Apple iOS (серый спинер) служит множеству функций, начиная с отображения статуса загрузки устройства, заканчивая загрузкой данных из интернета. Пользователю не нравится смотреть на такой индикатор без точного указания времени ожидания.

Процентный индикатор

Процентный индикатор показывает прогресс выполнения операции от 0% до 100%, и абсолютное значение в нём никогда не уменьшается. И линейный, и круговой индикатор могут быть процентными.

Линейный прогресс-индикатор

Круговой процесс-индикатор

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

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

– Из исследования Якоба Нильсена «О времени отклика системы»

Советы по использованию прогресс-индикаторов

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

Объясняйте пользователю, какие действия выполняет система

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

Skyscanner говорит пользователю, что система ищет лучшие варианты доступных полётов

Предоставляйте приближенное время ожидания для больших задач

Не надо стремиться быть точным, простого предупреждения «Это может занять пять минут» будет достаточно для пользователя и позволит ему не беспокоится о том, что происходит.

Обновление ПО в Apple iOS

Показывайте абсолютный объём работы

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

Когда прогресс не может быть точно оценён, попробуйте использовать номер шага вместо процентного индикатора

Не останавливайте прогресс-бар

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

При худшем раскладе прогресс-бар доходит до отметки 99% и внезапно замирает. Большинство пользователей останутся разочарованы, так как будут считать, что приложение зависло. Для того чтобы не создавать таких ситуаций, следуйте простому правилу — сглаживайте небольшие задержки прогресс-бара путём его непрерывного и плавного движения.

Создайте ощущение быстрого прогресса

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

Отвлекайте пользователей от самого факта ожидания

Креативные прогресс-индикаторы могут сглаживать негативные ощущения от ожидания. Если приложение предлагает пользователю что-то интересное в течение загрузки, это позволяет отвлечь его от самого факта ожидания. Для того чтобы пользователи не заскучали во время долгих операций — отвлекайте их. Например, чем-нибудь веселым.

Или милым.

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

Анимация позволяет отвлечь пользователя от самого факта ожидания

Скелетоны — прекрасная альтернатива традиционным индикаторам прогресса

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

Как заметил в своей статье Люк Вроблевски: «Любые прогресс-индикаторы в сущности сообщают о факте ожидания. Это всё равно что смотреть на идущие часы на стене — когда вы делаете это, кажется, что время идёт медленнее». Как правило, из-за добавления прогресс-индикаторов в пользовательский интерфейс дизайнеры заставляют пользователей смотреть именно на такие «часы».

К счастью, есть хорошая альтернатива для прогресс-индикаторов, которая позволяет предоставлять пользователям поистине отличный UX во время ожидания. И эта техника носит название «Скелетон». Скелетоны (а-ля плейсхолдеры для данных) первоначально представляют собой пустую страницу, данные на которую загружаются в процессе.

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

Популярная блогинг-платформа Medium использует этот трюк, показывая простой wireframe (как плейсхолдер), в то время как данные подгружаются. В дополнение к этому пользователь знакомится со структурой контента на странице.

Medium фокусирует на контексте, который загружается, а не на самом факте загрузки

Выводы

Каким бы быстрым мы не сделали наше приложение или сайт, всегда будут возникать моменты, требующие времени на выполнение. Индикаторы прогресса, такие как спинеры или процентные прогресс-бары, снижают ощущение неопределённости у пользователей и предоставляют им необходимую обратную связь.

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

Когда вы будете выбирать между скелетонами или бесконечным круговым спинером, лучше присмотреться к первому варианту, так как они (скелетоны) позволяют создать ощущение, что процесс загрузки практически мгновенен.

10 креативных индикаторов загрузки — UXPUB

Все хотят сделать это, когда загрузка занимает слишком много времени.

Видимость системного статуса является одним из важнейших принципов дизайна пользовательского интерфейса.

Хороший дизайн взаимодействия обеспечивает обратную связь

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

Анимированный индикатор прогресса – это наиболее распространенная форма предоставления пользователям статуса системы, когда что-то происходит или загружается. Но большинство таких индикаторов выглядят скучно, потому что создатели продукта используют индикаторы загрузки по умолчанию (независимо от того, под какую систему они создают предложение).

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

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

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

В этой статье я хочу изучить десять интересных концепций индикаторов загрузки.

1. Интервью загружается…

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

2. Загрузка рождественских подарков

Выглядит как будто, приложение загружает подарки. Chuan²

3. Очаровательная кошка

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

4. Двойная спираль

Эта анимация загрузки создает эффект 3D-преобразований. Drew Endly

5. Поиск лучших рейсов

Как только пользователи выбирают исходный и конечный пункт полета и нажимают кнопку «Поиск», анимация показывает полет от исходной точки до места назначения. Mark

6. Сохранение данных в облаке

Этот индикатор загрузки основан на метафоре загрузки файла в облако. Это почти буквально вертикальная полоса загрузки. Ben Mettler

7. Оживите процесс загрузки

Эта анимация делает процесс загрузки таким захватывающим, как наблюдение за тем, как кто-то идет по натянутому канату. xjw

8. Прекрасная анимация для экрана-заставки

Красивый дизайн заставки в сочетании с прекрасной анимацией может дать разработчикам приложений несколько лишних секунд, чтобы загрузить все необходимые данные. Behance

9. Потяните, чтобы обновить анимацию

Эта анимация, которую нужно потянуть, чтобы обновить страницу, имеет четкую функциональную цель.

Она соединяет два состояния – до и после обновления. Ramotion

10. Анимация загрузки файлов

Эта анимация – отличный пример плавных переходов в состояние. Галочка в конце уведомляет пользователей о том, что операция прошла успешно. Eddy Gann

Вывод

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

---

Перевод статьи Nick Babich

10 индикаторов загрузки объявлений. Ник Бабич | by Nick Babich

Все хотят сделать это, когда загрузка занимает слишком много времени. Изображение: Gal Shir

Видимость состояния системы — один из важнейших принципов дизайна пользовательского интерфейса.

Хороший дизайн взаимодействия обеспечивает обратную связь

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

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

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

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

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

В этой статье я хочу исследовать десять интересных концепций индикаторов загрузки.

уено. использует время ожидания, чтобы познакомить посетителей со своей командой. Похоже, что приложение загружает подарки. Изображение: Chuan²Вместо того, чтобы использовать счетчик загрузки системы, дизайнеры могут использовать что-то, что вызывает сильные положительные (надеюсь) эмоции. Изображение: Томас Богнер. Эта анимация загрузки создает эффект трехмерных трансформаций. Изображение: Дрю Эндли. Как только пользователи выбирают пункт отправления и пункт назначения рейса и нажимают кнопку «Поиск», анимация показывает полет из пункта отправления в пункт назначения. Изображение: Индикатор загрузки MarkThis основан на метафоре загрузки файла в облако. Вертикальный индикатор выполнения делает это почти буквально. Изображение: Бен Меттлер Эта анимация делает процесс загрузки таким же захватывающим, как наблюдение за тем, как кто-то идет по канату. Изображение: xjwКрасиво оформленный экран-заставка в сочетании с отличной анимацией может дать разработчикам приложений несколько дополнительных секунд времени для загрузки всех необходимых данных. Изображение: BehanceЭта анимация по запросу «обновить» имеет четкое функциональное назначение. Он связывает два состояния — до и после обновления. Изображение: Ramotion. Эта анимация — отличный пример плавного перехода между состояниями. Последняя галочка уведомляет пользователей об успешном выполнении операции. Изображение: Эдди Ганн

Хотя все упомянутые выше эффекты могут улучшить взаимодействие с пользователем, лучше не злоупотреблять ими. То, что кажется забавным и очаровательным в первый раз, может показаться скучным и предсказуемым после 100 раз. Также творческий эффект загрузки не может решить проблему медленной загрузки. Когда пользователи снова и снова видят один и тот же эффект загрузки, вскоре они начнут обвинять приложение в медленном времени загрузки.

Подпишитесь на UX Planet: Twitter | Facebook

Хватит использовать загрузчик, есть кое-что получше | Сулейман Али Шакир

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

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

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

Автор: Тобиас Ахлин на Dribbble

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

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

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

Facebook использует Loading Spinners для изображений и пагинации

Всякий раз, когда я вижу так много Загружающихся Спиннеров, у меня возникает небольшой приступ паники.

Что вам говорит индикатор загрузки? Это означает, что контент в данный момент загружается. Но там написано, сколько загрузилось? Там написано сколько осталось загрузить?

Нет. Не имеет

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

Автор Chanpory Rith на Dribbble

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

Хорошо, давайте предположим, что загрузка GIF действительно завершена и отображается некоторый контент. Задайте себе эти вопросы и дайте мне честный ответ. Я уверен, что вы смотрели достаточно на Loading Spinners, чтобы знать.

Когда вы смотрели на счетчик загрузки, знали ли вы:

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

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

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

Загрузка Спиннеры замедляют загрузку. Период.

Это как часы, которые постоянно тикают. Он показывает время, которое вы тратите впустую, глядя на него. Как тот GIF выше, на который я заставил вас смотреть.

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

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

Это не их вина. Вы не сказали им, чего ожидать в первую очередь!

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

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

Из самого определения слова сюрприз указывает на ’ неожиданность ’ событие. Люди, как правило, имеют поляризующую реакцию на такие события. Это может быть как положительным, так и отрицательным.

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

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

Хорошо, окончательный пользовательский интерфейс имеет низкокачественный дизайн. Но вы поняли.

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

Знаете ли вы? Мы, люди, действительно можем предсказывать время. Это тоже довольно точно!

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

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

То же самое относится и к нашим интерфейсам.

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

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

ПРИМЕЧАНИЕ:
Не слишком увлекайтесь попытками подделки. Чтобы добиться успеха, вашему интерфейсу нужно сочетание реальной и воспринимаемой скорости.

Как правило, у нас есть два варианта обозначения загрузки контента:

1. Конечный индикатор выполнения — если мы можем определить время загрузки
2. Loading Spinner (бесконечный процесс загрузки) — если время загрузки неизвестно внимательно посмотрите на выбор еще раз. Вы понимаете, что здесь нет настоящего выбора?

   Мы не можем использовать конечный индикатор выполнения, потому что мы не можем измерить время загрузки. Кроме того, мы уже знаем, что Loading Spinner никуда не годится.

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

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

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

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

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

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

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

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

   Думаю, я уже достаточно наговорил о том, почему Loading Spinners плохи. Проблема с Spinner заключается в том, что он не дает ощущения прогресса. Хотя, мы можем исправить это.

   Как, спросите вы? Ответ: « Каркасные экраны ».

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

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

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

   LinkedIn недавно начал использовать Skeleton Screens для загрузки.

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

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

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

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

   Использование каркасного экрана дает следующие преимущества:

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

   Я знаю, это причудливый термин. Но это означает постепенную загрузку вашего контента. Люди из веб-дизайна и разработки знают это как « Lazy-loading ».

   Отложить инициализацию объекта до момента, когда он потребуется. — Отложенная загрузка

   Во-первых, выложите голые кости пользовательского интерфейса (экран скелета). Затем загрузите текстовые данные. К настоящему времени пользователь знает, что он получил контент. Наконец, ленивая загрузка изображений. Теперь пользователь понимает, что большая часть контента загружена, а остались изображения.

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

   • Четкое ощущение прогресса
   • Чего ожидать дальше
   • Чего еще ожидать

   Обратите внимание, как Instagram разумно обрабатывает загрузку здесь.

   Загрузка Instagram — постепенная прогрессия

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

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

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

   Skeleton Loading используется в Facebook

   Посмотрите, как Medium справляется с загрузкой.

   Загрузка показана на Medium.com

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

   Один Spinner не отображается от начала до конца! Он отображается только на короткое время, после чего появляется экран скелета.

   СОВЕТ:
   Если время загрузки больше, вы можете ненадолго отобразить индикатор загрузки перед пользовательским интерфейсом Skeleton. Это должно выиграть время для выполнения вашей задачи.

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

   Google сначала отображает основной цвет изображения.

   Progressive Loading в Google Image Search

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

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

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

   Вот общие шаги по прогрессивной загрузке изображений.

   1. Отображение скелетного экрана
   2. Загрузка очень низкокачественной (пиксельной) версии изображения (или заметного цвета)
   3. Загрузка высококачественного изображения в фоновом режиме -quality one

   Обратите внимание, что вы не дали четкого указания, КОГДА задача будет завершена. Точной оценки времени пока нет. Но вы сказали, что доделано и что осталось. Это само по себе явный признак прогресса.

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

   Shimmer от Facebook

   Facebook написал библиотеку Shimmer для Android и iOS.

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

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

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

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

   Как правило, вы должны сообщить пользователю и разрешить ему повторить попытку.

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

   СОВЕТ:
   Попробуйте использовать ‘ Пустые состояния ’. Это позволяет вам обеспечить четкую обратную связь с помощью кнопки «Призыв к действию» (CTA).

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

   Возможность подключения в Android и iOS

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

   Android

   • Используйте закусочную, чтобы обеспечить обратную связь с кнопкой CTA
   • Подключение — Утилита по обработке сети

   IOS — Swift

   • IOS ALERTS — ALERTS ALERTS ALERT ALERT ALERT ALERTARY ALERT ALERTERARY ALERT ALERT ALERTARYS ALERT ALERT ALERTERARYS.