Отображение состояния системы входит в десятку фундаментальных стандартов юзабилити, оставаясь одним из наиболее важных и универсальных принципов UI-дизайна.
Прогресс-индикаторы внедряются с целью своевременного предоставления обратной связи о функционировании системы/интерфейса. Согласно теории интеракции Нормана (Norman's interaction theory), эти элементы также должны помогать юзерам оценивать состояние системы.
Одной из наиболее часто используемых форм обратной связи о работе системы является анимированный индикатор прогресса — этот элемент отображает загруженность системы/ресурса при обработке информации или загрузке данных.
Сегодня мы предлагаем вашему вниманию перевод статьи Кейти Шервин (Katie Sherwin), специалиста юзабилити NNG (Nielsen-Norman Group, группа Нильсена-Нормана), в которой она рассказала о различных типах индикаторов прогресса и представила рекомендации по их применению.
Сила обратной связи — дайте пользователям почувствовать, что вы их слышите
Прогресс-индикаторы не являются одним из последних трендов веб-дизайна, однако их внедрение гарантировано улучшает пользовательский опыт — получая обратную связь на свои действия, пользователи убеждаются, что система приняла их запрос и обрабатывает его.
К сожалению, большинство сайтов и систем не отображают информацию о состоянии процесса, пока он не завершится — это раздражает пользователей, поскольку они не знают, выполняется ли их команда и работает ли система вообще. Более того, неосведомленность о состоянии системы является причиной повторных заказов и множества лишних кликов.
Высокая скорость загрузки является общим требованием для всех ресурсов, но иногда серверы обрабатывают данные дольше обычного, и исправить это нельзя даже за счет их модернизации. В таких случаях потребителей следует осведомить, что система работает и их команда выполняется. Если загрузка требует больше 10 секунд, рекомендуется указывать примерное время до ее окончания — в противном случае, многие пользователи попросту не станут ждать.
В качестве примера обратной связи о состоянии системы Кейти рассказала о своем звонке в Калифорнийский департамент транспорта (DMV, Department of Motor Vehicles):
- Предсказуемо, Шервин осведомили, что все операторы заняты.
- Через несколько минут было включено сообщение о том, что Кейти все еще на линии.
- Следующая запись гласила, что примерное время ожидания составляет 15-20 минут — это позволило специалисту NNG заняться своими делами без опасения пропустить очередь.
- По истечении 15 минут Кейти было предложено оставить контактный номер, чтобы оператор смог связаться с ней, когда освободится. Более того, Шервин уверили, что она не потеряет свое место в очереди.
Используемые DMV инструменты обратной связи облегчили ожидание соединения с оператором — Кейти не только осведомляли о состоянии ее звонка, но и предложили удобную альтернативу ожиданию. К слову, внедрение подобной системы удержания обходится гораздо дешевле, чем расширение штата call-центра.
Индикаторы загрузки осведомляют пользователей, что системе требуется больше времени на выполнение команды (каковой может быть загрузка файла, установление обновления и т. д.) и отображают примерное время ожидания.
Чтобы понятно донести свойства этих элементов, Кейти описала их преимущества, проведя параллель со звонком в Калифорнийский департамент транспорта:
- Индикаторы устраняют сомнения пользователей о корректности работы системы, отображая ее состояние — это было достигнуто при помощи сообщения о занятости операторов.
- Данные элементы предоставляют объект, наблюдение за которым облегчает ожидание — при удержании звонка таковым является музыка.
- Они располагают пользователей к ожиданию, отображая некий процесс — Шервин осведомили, что все представители департамента заняты, и что оператор освободится в течение 15 минут, посему она была готова подождать.
- Индикаторы прогресса ослабляют чувство времени, так как пользователи, концентрируясь на обратной связи, уделяют меньше внимания самому процессу ожидания — слушая музыку, специалист NNG забыла, как утомительно ждать соединения с оператором.
Целью одного из исследований, проведенных в университете Небраски-Линкольна (University of Nebraska-Lincoln), было определение времени, на протяжении которого пользователи готовы ждать загрузки сайта. Одной группе респондентов была представлена версия страницы с индикаторами прогресса (анимированной полосой загрузки), а второй — без.
В результате те, кому отображалась веб-страница с индикатором, были более удовлетворены пользовательским опытом и ждали в среднем в 3 раза дольше, чем те, кому не был показан элемент обратной связи.
Анимированные индикаторы загрузки
Несмотря на то, что скорость цифрового соединения увеличивается с каждым годом, проблема медленно загружающихся ресурсов до сих пор актуальна. А как известно, низкая производительность веб-сайтов раздражает посетителей и нередко становится причиной их ухода.
Расположенность пользователей к ожиданию загрузки определяется несколькими факторами:
- Срочность и сложность цели визита.
- Контекст использования ресурса — посетитель, спешащий загрузить важный проект, покинет ресурс с большей вероятностью, чем тот, кто сидит в социальной сети, дабы убить время.
- Соответствие ожиданиям, основанным на предыдущем опыте взаимодействия с ресурсом или выполнения аналогичного процесса.
Маркетологи не в силах повлиять на эти факторы, однако, следуя представленным ниже рекомендациям, могут значительно увеличить готовность пользователей к ожиданию:
Всегда отображайте некую обратную связь
Поскольку ожидание начинается сразу же после выполнения действия (например, клика на CTA-элемент), система должна моментально показать, что запрос принят и обрабатывается: например, может измениться цвет кнопки, на которую кликнул юзер, или появиться полоса загрузки.
Статичность интерфейса после отправки запроса воспринимается многими пользователями как ошибка, поэтому они зачастую пробуют выполнить команду повторно, что, в свою очередь, может привести к отрицательным последствиям.
Отображайте прогресс любого процесса, тянущегося дольше 1 секунды
Внимание пользователей начинает рассеиваться после нескольких секунд ожидания, что может привести к их уходу. Посему для отображения прогресса процессов, чья продолжительность дольше секунды, следует использовать циклическую анимацию или процентный индикатор.
Далее мы ознакомимся с разными типами индикаторов и рекомендациями по их применению.
1. Циклическая анимация
Графический элемент с циклической анимацией указывает на то, что система работает, но не дает информации о примерном времени ожидания загрузки.
Такие элементы стоит использовать для отображения статуса процессов, длящихся от 2 до 10 секунд. Если использовать циклическую анимацию для запросов, обрабатывающихся меньше секунды, то она вызовет эффект трения — пользователей смутит внезапное появление и исчезновение непонятного элемента.
С точки зрения веб-разработки, использовать циклическую анимацию в оформлении всех индикаторов довольно соблазнительно, поскольку для этого не требуется вычислять продолжительность загрузки. Тем не менее циклической анимацией не рекомендуется отображать обработку процессов, длящихся больше 10 секунд — отсутствие информации о прогрессе подтолкнет пользователей к уходу. Более того, по такому графическому элементу нельзя определить, работает ли система, что также увеличивает возможность прекращения цифровой интеракции.
Участник одного юзабилити теста ждал загрузки страницы онлайн-издания больше 15 минут, а в конечном счете оказалось, что произошла ошибка и приложение требовалось перезапустить. Очевидно, что реальный пользователь не станет ждать так долго.
Добавление к индикаторам текстовых обозначений (например, «Загрузка комментариев») также может увеличить их эффективность.
Стоит заметить, что циклическая анимация не подходит для отображения прогресса загрузки данных с серверов, поскольку качество соединения, влияющее на скорость работы, неподконтрольно разработчикам. По стандартам, данные должны загружаться не дольше 2 секунд, однако этот показатель не всегда достижим.
2. Процентные индикаторы
Индикаторы, отображающие прогресс в процентах, являются наиболее информативным типом анимированной обратной связи. Эти элементы позволяют пользователям рассчитать примерное время ожидания (что дает им возможность решить, будут они ждать или нет), максимально устраняют неопределенность относительно продолжительности обработки данных и ослабляют чувство времени.
Круги и горизонтальные столбцы, которые заполняются от 0 до 100%, являются примерами такого типа прогресс-индикаторов.
Как правило, процентные индикаторы следует использовать для процессов, длящихся от 10 секунд — визуальный элемент, отображающий постепенное завершение обработки, успокаивает и располагает к ожиданию. Однако эти элементы можно использовать для отображения статуса процессов, требующих меньше 10 секунд, если таковые связаны с обработкой файлов или реестра, поскольку посетители понимают, что система работает с определенным количеством записей.
К анимированным процентным индикаторам рекомендуется добавлять текст (например, «Загружено файлов: 17 из 50»), а к индикаторам длительных процессов — кнопку отмены, на случай, если пользователь не захочет ждать. К слову, отсутствие элемента отмены лишает юзеров контроля над системой, что вредит пользовательскому опыту.
Процентные индикаторы создают представление о продолжительности процесса, что делает изменения скорости прогресса более заметными, а это, в свою очередь, положительно влияет на пользовательский опыт. Однако пользователей раздражает, если индикатор заполняется слишком быстро, а затем, когда остается несколько процентов до завершения, останавливается — это сводит положительное влияние обратной связи на нет.
Многие дизайнеры и разработчики, внедряющие индикаторы загрузки, сталкиваются с проблемой вычисления скорости выполнения процессов. Чтобы справиться с этой задачей, придерживайтесь следующих рекомендаций:
- Настройте анимацию так, чтобы индикатор начал заполняться медленно, а по мере приближения к завершению загрузки скорость увеличивалась — это не создаст у посетителей завышенных ожиданий касательно производительности сайта. Всегда лучше превзойти ожидания клиентов, нежели разочаровать их.
- Стоит заметить, что эта рекомендация актуальна только для индикаторов загрузки — исследования показали, что прогресс-индикаторы опросов, скорость заполнения которых снижается по мере прохождения, понижают показатель отказов.
- Указывайте примерное, не точное время ожидания — в некоторых случаях, загрузка наверняка продлится дольше указанного времени, что негативно повлияет на доверие потребителей.
- Простого текста вроде «Это займет примерно минуту» или «Осталось примерно 3 минуты» достаточно для информирования и удержания пользователей. Также добавляйте к указанному значению нескольких лишних секунд на случай непредвиденных задержек.
- Вместо отображения общего прогресса, в некоторых случаях оптимально отображать количество выполненных и оставшихся этапов — посетители не будут точно знать, сколько займет выполнение того или иного шага, однако количество этапов поможет им сформировать примерное представление и привлечет к завершению процесса или ожиданию его окончания.
3. Статичные прогресс-индикаторы
Статичные индикаторы, примером которых может быть текст «Подождите, результаты загружаются» без каких-либо анимированных элементов, являются неэффективными. Подобные индикаторы не отображают информацию о прогрессе системы и состоянии ее работы, посему их стоит заменять на динамические.
4. Предупреждения
Наихудший способ предотвратить случайные повторные заказы и лишние клики — добавить к CTA-кнопке предупреждение по типу «Повторное нажатие может привести к повторному заказу». Во-первых, любые угрозы противоречат базовым стандартам положительного пользовательского опыта, а во-вторых, подобные предупреждения попросту неэффективны, поскольку на них крайне редко обращают внимание.
Текст предупреждения: «Не кликайте дважды!».
Рекомендации ресурсам, целевой аудиторией которых являются дети
В ходе исследования «Дети во Всемирной сети» (Children on the Web), специалисты NNG столкнулись с множеством долго загружающихся интерактивных инструментов и игр.
С целью сделать экран загрузки занимательным и вовлекающим, дизайнеры часто размещают видео-контент и мини-игры, дабы пользователям было чем себя занять в процессе ожидания. Однако подобные доработки приносят больше вреда, чем пользы, так как дети зачастую не отличают реальную игру от процесса загрузки и не понимают, почему прервалась интеракция.
Кейти представила несколько советов о том, как сохранить интерес юных пользователей, не отвлекая их от основного занятия:
- Всегда используйте заметные процентные индикаторы, чтобы детям было понятно, что система грузится. Дети, как и взрослые, хотят знать, работает ли система и как долго она будет грузиться.
- Убедитесь в том, что промежуточная анимация не заслоняет индикатор и не похожа на игровой процесс.
- Используйте увлекательные и простые анимации, релевантные основной активности — таковые наиболее эффективны для удержания внимания и облечения ожидания.
Заключение
Предоставление обратной связи — одно из руководящих требований позитивного пользовательского опыта. Открыто и прозрачно отображая время, требуемое для загрузки, дизайнеры могут устранить неосведомленность пользователей о состоянии системы и увеличить время, которое они готовы потратить на ожидание.
Циклические индикаторы следует использовать для процессов, длящихся 2-9 секунд, а процентные — для задержек, длящихся больше 10 секунд. Но поскольку оценить продолжительность загрузки можно не всегда, вам стоит увеличить задержку отображения процесса, требующего больше 10 секунд. Чем выше нестабильность времени загрузки, тем ниже должен быть минимальный порог отображения точного прогресса.
Эффективные прогресс-индикаторы располагают пользователей к ожиданию и положительно влияют на впечатление о сайте/приложении.
Высоких вам конверсий!
По материалам nngroup.com
