Скотт Хёрф - Как создать продукт, который полюбят

Рис. 6.21. Огромная стрелка показывает, что я могу построить пушку, потратив при этом кристаллы, чтобы потом купить еще больше кристаллов. Да, так это и работает [121]

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

Игрок, вступающий в фазу ускорения, не думает о скучных повторениях, которые ему придется совершить, чтобы попасть на следующий уровень. Он просто делает это и наслаждается увеличивающимся результатом… Такие игроки мыслями уже находятся в будущем, где их герои наделены могуществом, недоступным на текущем этапе. Говоря более техническим языком, они видят перед собой экспоненциально увеличивающуюся силу, которая исчезает за горизонтом предвидения их героев. Это не самый традиционный подход, но субъективно игроки получают от него точно такое же удовольствие [122].

На рисунках 6.22–6.24 представлены прекрасные примеры промежуточного состояния.

Рис. 6.22. Знаменитая шкала заполненности профиля в LinkedIn заставляет выполнять задания до тех пор, пока вы не достигнете 100 %. Перфекционисты ликуют. Разработчики тоже

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

Рис. 6.24. Приложение «Активность» на Apple Watch ставит задачу «заполнить» все круги

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

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

Об этом пишет Люк Вроблевски, эксперт в области продуктового дизайна, руководивший дизайнерскими отделами в eBay, Yahoo и Google (где он работает и по сей день после продажи своего стартапа Polar, занимавшегося созданием мобильного приложения для проведения соцопросов).

Вроблевски и его команда заметили, что после того, как они добавили к каждому опросу круговые прогресс-бары, пользователи Polar начали жаловаться, что приложение работает медленнее, чем обычно: «Приходится долго ждать обновления и загрузки страниц. Предыдущая версия была быстрее».

Вроблевски пишет о своем осознании:

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

Благодаря этому пониманию родилось то, что Вроблевски называет «каркасными экранами» (рис. 6.25). Эта технология, в частности, используется в десктопных и мобильных версиях Pinterest и Facebook.

Рис. 6.25. Приложение Люка Вроблевски Polar и его каркасные экраны в действии [124]

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

Pinterest не только применяет концепцию каркасных экранов, но и обогащает ее некоторыми уникальными чертами. Например, определяет «средний цвет» изображения и заполняет им фон до тех пор, пока само изображение не будет загружено. Таким образом, вы получаете примерное представление о картинке еще до того, как ее видите. Сегодня та же технология применяется и в поиске Google Images.

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

Рис. 6.26. Facebook изобрел собственную технологию загрузки экрана, аналогичную каркасным экранам Вроблевски. Методика Вроблевски комбинируется с так называемым эффектом мерцания, благодаря которому формы пульсируют, указывая на загрузку контента

«Никому не нравится ждать, даже пока он ждет», – сказал основатель Instagram Майк Кригер в 2011 году, описывая инженерные решения, формирующие впечатление высокой скорости работы его приложения (рис. 6.27) [125].

Рис. 6.27. «Оптимизм» в ранней версии Instagram

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

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