Подобрать наименее раздражающий тип загрузки для сайта или приложения
Перевод материала разработчика интерфейсов Майкла Фредерика Зитлова о недостатках в индикаторах прогресса.
Сколько сложностей вы хотели бы создать для своих пользователей? Конечно — нисколько. Но при использовании веб-приложений пользователям в какой-то момент придётся ждать результатов.
Ожидание — это боль. Никто не любит очередей в парке развлечений.
Если ожидание неизбежно, нужно сделать всё возможное, чтобы уменьшить болезненные ощущения пользователей. Например, Disney экспериментировал с «интерактивными очередями». Не то что бы это лучшее решение, но хотя бы какое-то.
В веб-дизайне есть что-то похожее: индикатор прогресса (индикатор выполнения или индикатор процесса).
Далее будут перечислены семь кругов ада: от менее болезненных индикаторов до самых невыносимых.
Первый круг ада: точные показатели
Здесь речь идёт об индикаторе прогресса, который точно показывает статус выполнения задачи. Его сложно сделать хорошо, и он требует много дополнительного кода. Подобный индикатор отлично подходит пользователям, но всё равно относится к одному из кругов ада, потому что никто не любит ждать (вне зависимости от того, как точно определено время ожидания).
Определить точное время ожидания сложно. Разработчики пытались решить эту проблему десятилетиями. Если вы UX-специалист, пытающийся достичь подобного результата, ваша команда может спросить, как можно достигнуть похожего эффекта без затраты стольких усилий.
Второй круг ада: почти точные показатели
Многие приложения могут приблизительно предсказать время ожидания. Индикатор прогресса может изменяться рывками, показывая разные стадии выполнения задачи. Это не лучший вариант, потому что время, потраченное на разные стадии, может сильно различаться, что создаёт эффект «прыгающего» индикатора прогресса.
Например, запрос серверу займёт 20% времени, поиск — 70%, сортировка результатов — 2%, выдача результатов — 8%. В итоге большую часть времени пользователь смотрит на индикатор, заполненный на 20%, который неожиданно «прыгает» чуть-чуть, и затем процесс завершён.
Третий круг ада: троббер, вводящий в заблуждение
Троббер — индикатор загрузки, который анимируется асинхронно с процессом выполнения. Использование троббера позволяет убедить пользователя, что загрузка идёт быстрее, чем на самом деле.
Играть с восприятием пользователей можно на точных и почти точных индикаторах прогресса. Но нужнее всего это на третьем круге ада и ниже, где прогресс не измеряется и ожидание может быть намного неприятнее.
Ниже три моих любимых примера.
Обман восприятия №1: визуальное усиления
Не все дизайны индикаторов прогресса равносильны. Некоторые выглядят так, будто загружаются быстрее других. Крис Харрисон исследовал этот феномен, сталкивая разные дизайны друг с другом.
UX-дизайнеры должны держать баланс между этим приёмом и дизайном приложения или бренда.
Обман восприятия №2: текстовые обновления
Можно показывать пользователям текст (правдивый или ложный) о статусе выполнения задачи.
Дизайн Adobe — хороший пример. Посмотрите на строку “Reading brushes…” («считывание кисточек»). У Adobe десятки подобных статусов в зависимости о того, как долго загружается программа на устройстве пользователя.
Обман восприятия №3: юмор
Исследования показали, что юмор эффективен против чувства беспокойства. Сообразительные компании, как, например, Southwest Airlines, часто используют юмор в ситуациях, где возможно возникновение чувства тревоги.
Ожидание отклика от приложения — это, безусловно, подобная ситуация, и юмор может быть отличным способом уменьшить чувство беспокойства. Лучше всего это подходит для приложений, общающихся с потребителями напрямую. В некоторых общеорганизационных приложениях юмор может быть не к месту.
Четвёртый круг ада: бесконечный индикатор прогресса
Сначала индикатор загрузки движется быстро, затем замедляется и, наконец, кажется, что он остановился навсегда.
Это довольно жестоко по отношению к пользователям, хотя у разработчиков, возможно, были добрые намерения. Они разработали индикатор прогресса, который по существу является троббером, но выглядит как шкала загрузки. Она замедляется, когда на выполнение команды нужно больше времени, невероятно медленно ползёт по асимптоте, пока команда не будет выполнена (если она вообще будет выполнена) — и только после этого шкала загрузки заполняется.
Для разработчиков это математически красивое решение. К сожалению, пользователи ненавидят его.
Пятый круг ада: троббер
Он есть во всех приложениях.
Это просто повторяющиеся анимации. Тробберы показывают пользователям, что приложение работает над командой, но заставляют их ждать слишком долго, и пользователи отменяют команду. Тробберы лучше использовать в командах, на выполнение которых требуется мало времени. Если при этом использовать обманы восприятия, то тробберы могут подняться на два круга вверх. В противном случае они останутся тут.
Шестой круг ада: статичный текст
Такое можно увидеть на государственных сайтах или в приложениях, у которых не так много конкурентов на рынке.
Это не сильно отличается от бесконечно повторяющейся анимации. Но статический текст ещё вдобавок и неподвижен. Пользователям может показаться, что приложение зависло или сломалось. Nielsen Norman Group призывает отказаться от статичных индикаторов прогресса.
Седьмой круг ада: пустота
Никакого индикатора прогресса. Просто приложение с неизменным интерфейсом. Приложение усердно работает над командой в фоновом режиме, пока разочарованный пользователь сидит в замешательстве и молится о том, чтобы это всё поскорее закончилось.
Кейс: индикатор прогресса от Connections
Веб-приложение для управления страховкой Connections иногда оставляло пользователей в седьмом круге ада. Моя цель была перейти хотя бы в третий круг.
Мы использовали индикатор прогресса, на создание которого нас вдохновил YouTube. Индикатор находится в верхней части страницы и показывает прогресс обработки базы данных. Это троббер, но мы использовали несколько трюков для обмана восприятия, чтобы снизить уровень тревоги наших пользователей.
- Визуальное усиление, подходящее дизайну нашего бренда: в режиме ожидания шкала переливается справа налево, а загрузка проходит быстро слева направо. Анимация сменяется чаще, чем установлено по умолчанию (Bootstrap, я обращаюсь к тебе), поэтому кажется, что она проходит быстрее, чем на самом деле.
- Текстовые статусы: мы используем пару десятков текстовых статусов («Загрузка базы данных», «Установление соединения» и тому подобные). Они показываются с интервалом в 2-4 секунды, поэтому кажется, что они отображают реальное положение дел.
- Юмор: если поиск результатов занимает больше 12 секунд (иногда неизбежная ситуация), наши текстовые статусы становятся смешнее и необычнее. Мы надеемся, что пользователю никогда не понадобится ждать так долго. Но если такое всё же случится, мы стараемся уменьшить чувство беспокойства с помощью юмора.
Ожидание — боль
Ожидание — это больное место каждого приложения. Надеюсь, я смог показать, что UX и дизайн могут улучшить ситуацию. Не заставляйте пользователей страдать. Возможно, в вашем приложении нельзя сделать точный показатель прогресса, но с помощью креативности можно снизить боль от ожидания.
UX дизайнерам нужно поучиться у Microsoft, там уже давно всё придумали:
Комментарий недоступен
В этом плане, в Майкрософт мало что изменилось. Даже их собственный Визуал Студио не всегда говорит, что о чём-то задумался.
Прогресс-бары - действительно частая боль пользователей и разработчиков. Мои друзья на днях обратили внимание, что обновленный дизайн веб-версии Gmail работает медленнее, чем старый дизайн. Возможно, время загрузки и осталось прежним, но из-за анимации конвертика и нового "прогресс-бара" кажется, что скорость загрузки действительно упала. Я в шутку на коленке сделал Chrome-расширение, которое отображает в процессе загрузки Gmail ползущую улитку. Нам в офисе эта улитка поднимает настроение - попробуйте, может и вам поднимет :)
https://chrome.google.com/webstore/detail/snail-on-gmail-loading-pa/pdgocdodfbhknhekledldkbdmdofggic?hl=ru
Выглядит примерно так:
текст без учета точек отцентруйте
Ну или можно перестать ебать мозги с реактами — писать фронт нормально и индикаторы загрузки мгновенно отомрут :)
HTML 4.1, CSS2 и js только для смены тайтла страницы, как в девяностых?
Нет, только bundle.js на 100 мегабайт и бекенд на ноде с 128 гиг ОЗУ
это какой-то особый вид бдсм?
Это норма жизни у фронтовиков.
они шо, конченые?
-\_:)_/-
Комментарий удален модератором