Ожидание, как правило, является чрезвычайно неприятным
занятием, это непродуктивно, скучно и даже напряженно.
Итак, должна ли скорость загрузки страниц стать вашим основным приоритетом? Если вы поступите таким образом, вам придется отказаться от многих особенностей, обогащающих ваш UX дизайн, таких как интерактивная графика, видеоклипы или изображения в высоком разрешении.
Какое решение проблемы? Сделайте ожидание приятным. Или, по
крайней мере, сделайте его более эффективным, менее скучным и напряженным. Вот
пять техник, которые помогут вам справиться с этой задачей:
1. Планировать стратегию ожидания отклика программы
Ожидание становится невыносимым, когда вы не знаете, как
долго еще вам придется ждать. Понимание этого факта может побудить вас
демонстрировать вашим пользователям шкалу прогресса каждый раз, когда вы
заставляете их ожидать. Однако, не торопитесь.
Согласно мнению «короля юзабилити» Якоба Нильсена,
существует 3 варианта временного лимита загрузки, о которых вам следует знать:
- · Если на ответ страницы требуется 0,1 секунды, пользователи воспринимают это как «момент» и вам не нужно ничего делать, чтобы продемонстрировать им результат.
- · Если ответ происходит в течении 1 секунды, пользователи заметят задержку. Тем не менее, обратная связь в этом случае вам по прежнему не нужна.
- · Если ответ занимает более 10 секунд, вы будете терять внимание пользователей. Либо вы можете чем-нибудь их отвлечь, или сказать им сколько времени еще это займет, чтобы они могли переключиться на другую задачу.
Эти временные лимиты широко известны. Тем не менее, стоит
отметить наличие множества вариантов между 1 и 10 секундами. Что если ответ
занимает 4 секунды? А что, если 9?
Как выяснили исследователи университета Карнеги-Меллон,
демонстрация пользователям строки состояния загрузки, создавала ощущение более
длительного ожидания, в случаях, когда задача занимала менее 5 секунд.
Оказывается, строка состояния (являясь великолепным инструментом для управления
ожиданием) обращает внимание пользователей на время ожидания ответа.
Принимая во внимания этот факт, мы рекомендуем использовать
строку состояния в случаях, предполагающих более, чем 5 секундное время
ожидания загрузки.
2. Чем больше
обновлений, тем лучше
Интересно, что выбирая между быстрой длинной линией загрузки
и медленной короткой линией, большинство пользователей предпочитает длинную
линию. Нам нравится чувствовать, будто мы постоянно достигаем определенного
прогресса. (Чтобы проверить эту теорию, спросите себя что бы вы предпочли:
проехать 30 миль, делая периодические остановки, либо 100 миль по пустынному
шоссе).
Именно по этой причине отметки и прочие символы на строке
состояния, которые часто замирают на месте, менее желательны, чем знаки,
которые беспрерывно обновляются.
Вы можете создать иллюзию более быстрого времени загрузки,
используя пульсирующую строку отсчета. Изучая влияние на пользователей пяти
различных типов шкалы состояния, Крис Харрисон и его коллеги обнаружили, что
они могут увеличить скорость загрузки на 11% (для восприятия пользователей), просто
используя строку загрузки, которая меняла свою расцветку от светло до темного
хаки, увеличивая частоту пульсаций.
3. Используйте частичную загрузку
Вовремя завершенное дело лучше, чем идеально
исполненное. Это выражение в полной мере касается загрузки. Если страница будет
загружаться по частично (а не только целиком, достигнув полной загрузки), у вас
получится уменьшить время пассивного ожидания пользователей (то есть то время,
когда они попросту сидят и не знают чем заняться).
Google использует
эту технику для входящих писем клиентов своей электронной почты.
Скелет
страницы появляются сразу;
секундой, либо двумя позже возникают ваши сообщения и спустя еще одну или две
секунды отображаются ваши сообщения видеочатов Google Hangouts.
Пользователь едва ли успевает
заметить не достающие элементы, потому что он слишком увлечен, рассматривая уже
появившиеся.
Эта стратегия также хорошо
работает и с более мелкими элементами. Когда вы загружаете медиа файлы в
фейсбук, процесс загрузки отображается с помощью серого цвета рамки кадра. Этот
кадр заменяется реальным файлом, как только процесс завершен.
Такая техника эффективно делит
время ожидания напополам, потому как вместо ожидания загрузки всего файла,
пользователь сперва наблюдает загрузку рамки. Увидев как быстро загружается
рамка, вы уже не замечаете оставшегося времени загрузки, зная, что оно будет
таким же коротким.
4. Делайте это забавно
Вот, где есть масса возможностей
нарушать правила. Чем более веселой и вовлекающей будет ваша стартовая страница
или символ загрузки, тем больше внимания пользователей будет отвлечено от
времени, потраченного на этот процесс.
Одним из лучших примеров такого
подхода является сайт Prettyloaded.com
Вам показывают вполне
стандартную строку состояния загрузки с процентами, однако каждый процент
представляет собственное описание.
Экран загрузки
сайта танцевальной академии Lordz практически целиком окрашен в желтый цвет. Ваш взгляд мгновенно падает на
крошечный силуэт, танцующий по центру и замирает на нем, потому что наблюдение
за его действиями завораживает.
Честно говоря,
этот экран загрузки так крут, что пользователь может быть почти разочарован,
когда наконец появится главная страница.
Run4tiger.com - это сайт
всемирного фонда дикой природы, чей экран также гипнотизирует.
Лицо тигра
проявляется схематически, параллельно процессу загрузки. И к моменту достижения
100% возникает полное изображение.
Эти примеры
настолько же красивы, насколько актуальны. Разрабатывая дизайн своей страницы
загрузки, важно учитывать передовой опыт и психологию пользователей. Но если вы
хотите, чтобы экран загрузки был особенным и уникальным, делайте акцент на
своем бренде, либо продукте.
5. Интегрируйте
ожидание
Чтобы сделать
ожидание загрузки действительно приятным, заставьте ваш загрузочный экран сливаться
с остальной частью приложения. Это значит, что вместо двух отдельных,
самостоятельных моментов ожидания, это
будет ощущаться, как один долгий, но крутой момент.
Illusion - это журнал, посвященный теме цифрового искусства. Сайт журнала – это великолепный
пример использования базовой техники интегрированного экрана загрузки.
Сначала
появляется низко-контрастный, статичный экран загрузки с едва уловимыми
очертаниями логотипа по центру экрана.
Но через несколько
секунд он уже трансформируется в экран загрузки с анимироваными GIF изображениями.
Несмотря на различные эффекты, обратите внимание, насколько месторасположения,
размер и стиль логотипа остаются неизменными.
\