Подобрать наименее раздражающий тип загрузки для сайта или приложения18.06.2018 11:35

Перевод материала разработчика интерфейсов Майкла Фредерика Зитлова о недостатках в индикаторах прогресса.

Сколько сложностей вы хотели бы создать для своих пользователей? Конечно — нисколько. Но при использовании веб-приложений пользователям в какой-то момент придётся ждать результатов.

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

Кейти Шервин

специалист по UX

Ожидание — это боль. Никто не любит очередей в парке развлечений.

Если ожидание неизбежно, нужно сделать всё возможное, чтобы уменьшить болезненные ощущения пользователей. Например, Disney экспериментировал с «интерактивными очередями». Не то что бы это лучшее решение, но хотя бы какое-то.

В веб-дизайне есть что-то похожее: индикатор прогресса (индикатор выполнения или индикатор процесса).

Далее будут перечислены семь кругов ада: от менее болезненных индикаторов до самых невыносимых.

Первый круг ада: точные показатели

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

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

Второй круг ада: почти точные показатели

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

Например, запрос серверу займёт 20% времени, поиск — 70%, сортировка результатов — 2%, выдача результатов — 8%. В итоге большую часть времени пользователь смотрит на индикатор, заполненный на 20%, который неожиданно «прыгает» чуть-чуть, и затем процесс завершён.

Третий круг ада: троббер, вводящий в заблуждение

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

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

Крис Харрисон

доцент в Университете Карнеги — Меллон

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

Ниже три моих любимых примера.

Обман восприятия №1: визуальное усиления

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

UX-дизайнеры должны держать баланс между этим приёмом и дизайном приложения или бренда.

Обман восприятия №2: текстовые обновления

Можно показывать пользователям текст (правдивый или ложный) о статусе выполнения задачи.

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

Smashing Magazine

журнал о веб-дизайне

Дизайн Adobe — хороший пример. Посмотрите на строку «Reading brushes…» («считывание кисточек»). У Adobe десятки подобных статусов в зависимости о того, как долго загружается программа на устройстве пользователя.

Обман восприятия №3: юмор

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

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

Четвёртый круг ада: бесконечный индикатор прогресса

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

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

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

Пользователи обратят внимание на изменение в скорости, и это повлияет на уровень их удовлетворённости: если шкала заполняется быстро только для того, чтобы зависнуть на последних процентах, пользователь разочаруется, и от индикатора прогресса не будет никакой пользы

Кейти Шервин

специалист по UX

Пятый круг ада: троббер

Он есть во всех приложениях.

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

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

Кейти Шервин

специалист по UX

Шестой круг ада: статичный текст

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

Это не сильно отличается от бесконечно повторяющейся анимации. Но статический текст ещё вдобавок и неподвижен. Пользователям может показаться, что приложение зависло или сломалось. Nielsen Norman Group призывает отказаться от статичных индикаторов прогресса.

Седьмой круг ада: пустота

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

Кейс: индикатор прогресса от Connections

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

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

Визуальное усиление, подходящее дизайну нашего бренда: в режиме ожидания шкала переливается справа налево, а загрузка проходит быстро слева направо. Анимация сменяется чаще, чем установлено по умолчанию (Bootstrap, я обращаюсь к тебе), поэтому кажется, что она проходит быстрее, чем на самом деле.
Текстовые статусы: мы используем пару десятков текстовых статусов («Загрузка базы данных», «Установление соединения» и тому подобные). Они показываются с интервалом в 2–4 секунды, поэтому кажется, что они отображают реальное положение дел.
Юмор: если поиск результатов занимает больше 12 секунд (иногда неизбежная ситуация), наши текстовые статусы становятся смешнее и необычнее. Мы надеемся, что пользователю никогда не понадобится ждать так долго. Но если такое всё же случится, мы стараемся уменьшить чувство беспокойства с помощью юмора.

Ожидание — боль

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

#дизайн