Как спроектировать приложение так, чтобы его работа воспринималась как быстрая и отзывчивая и как избежать ошибок при проектировании интерфейса, которые влияют на восприятие скорости работы веб-приложения.
Мгновенная обратная связь на действия пользователя
В современных приложениях обратная связь интерфейса должна быть мгновенной, даже если приложению нужно некоторое время для того чтобы сгенерировать и загрузить новый контент на устройство пользователя. Мгновенная обратная связь помогает понять, что приложение нормально работает и воспринимать работу с ним как легкую и быструю. В приложении это можно реализовать изменив состояние интерактивного элемента сразу после взаимодествия с ним. Например, можно сразу после нажатия на пункт меню пометить его как выбранный и начать загрузку содержимого новой страницы, мгновенно открыть выпадающее меню или модальное окно и отобразить данные после их загрузки.
Раздельная загрузка и перемещающийся контент
Если на странице есть тяжелый контент, который требует времени для вычисления, сбора или загрузки с сервера, его часто выделяют в отдельный запрос, чтобы сначала показать легкие, а затем более тяжелые данные. Например, сначала загружается и отображается главное меню, заголовок и описание раздела, а списки элементов и их детали — позже.
Но в этом кейсе нужно быть внимательным к интерактивному контенту, который может изменить свое положение после полной загрузки страницы. Самая частая проблема, с которой могут сталкиваются пользователи в этой ситуации, — это ошибочные клики и как следствие неадекватная работа приложения. Такое происходит, если интерактивные элементы перемещаются в тот момент, когда пользователи собираются взаимодействовать с ними. Например, пользователь нашел нужную строку и намереваться кликнуть по ней чтобы открыть соответствующий раздел, но прямо перед нажатием были загружены новые данные, которые сдвинули этот элемент, и клик происходит на другой элемент. Этот прием часто используют намеренно, подсовывая баннер вместо основной кнопки и зарабатывая на этом деньги, что лично меня очень раздражает.
Вы можете безопасно отобразить контент в любое время, если он имеет фиксированные размеры и не изменит свое положение после загрузки другого контента. Контент, который может значительно сдвигаться после загрузки других блоков, должен отображаться только после того как будет загружен другой контент, который может повлиять на этот блок. Просто не показывайте или блокируйте его до завершения загрузки. Проектируйте приложение так чтобы отображать контент слева направо и сверху вниз без изменения его положения.
Кэширование данных
Еще один эффективный способ быстро показать данные — использование кэша. Если пользователь ранее посещал ваше приложение вы можете сохранить его данные в кеш и мгновенно показать их при следующем входе, при этом отправить запрос на сервер и обновить данные после получения ответа. Этот метод также помогает оптимизировать работу приложения, ограничивая количество запросов к серверу.
Однако использование этого метода может также привести к неожиданному сдвигу элементов интерфейса и ошибочным кликам. Конечно, самый простой способ избежать этой проблемы — не использовать кэш, особенно если они могут устареть к моменту просмотра страницы. Просто всегда показывайте новые данные.
Но если вы используете кэш, вам нужно определить среднее время, через которое данные становятся устаревшими, и исходя из этого периода настроить работу приложения.
Я могу выделить два способа работы с кэшированными данными, основываясь на частоте их обновления:
- Часто обновляемые данные: если данные часто устаревают в течение одного просмотра страницы, не используйте кэш. Пусть пользователь подождет ответа сервера зато получит актуальные данные.
- Редко обновляемые данные: для данных, которые остаются неизменными на протяжении нескольких посещений, но иногда могут устареть, используйте кэш. Одновременно с показам данных из кеша отправляйте запрос на сервер для проверки и делайте это периодически, пока пользователь находится на странице.
Как только мы поймем, что данные устарели, нужно аккуратно заменить их, так, чтобы избежать ошибочных кликов. Аккуратно — это значит сначала отобразить сообщение о том, что данные устарели и предложить пользователю обновить их нажав на кнопку. Только после нажатия на кнопку — перерисовать страницу и отобразить новые блоки. В данном случае можно сделать это мгновенно.
Спиннеры, лоадеры и скелетоны
Это элементы интерфейса которые показывают что приложение работает, пока контент загружается или обрабатывается. Вы с ними знакомы и часто их используете. И, возможно, даже слишком часто. Лоадеры, предназначены для того, чтобы скрыть задержки в работе приложения и скрасить ожидание, но, как показывает практика иногда они только делают на этом излишний акцент.
Не используйте лоадеры, если страница загружается быстро!
Если страница загружается менее чем за 1 секунду, индикаторы загрузки не нужны, так как они не окажут того влияния на пользовательский опыт, который вы ожидаете. Если задержка появления новых данных составляет менее одной секунды и вы дали пользователю немедленную обратную связь на его действие, пользователь не заметит задержки в отклике приложения. Использование загрузчиков в таких ситуациях может только раздражать: быстро мигающая страница создаст у пользователей ощущение, что они не успевают уследить за быстро меняющимся контентом. Это создает ощущение странного поведения и медленной работы приложения.
Но что если мы не можем знать, загрузится ли страница быстро или нет?
Конечно, мы не можем знать все заранее, но мы можем не показывать загрузчики. Если вы не уверены во времени загрузки страницы, используйте короткую задержку (500-1000 миллисекунд) перед показом индикаторов загрузки. А после этой задержки покажите загрузчик, добавив анимацию его появления. Таким образом, если страница загрузится быстро, задержка будет почти незаметной для пользователя и он не увидит мелькающий индикатор.
Внимательный читатель может заметить, что если страница загружается немного дольше 500 миллисекунд, пользователи все равно могут столкнуться с этой проблемой и увидеть мигающий загрузчик.
Да эта задержка не устранит мигание полностью, но оно значительно сократит количество таких случаев. Если у вас есть данные о среднем времени загрузки страниц, настройте время задержки для еще большего уменьшения этого эффекта.
Спасибо за прочтение! Если вы согласны с этими советами — делитесь ими в своих социальных сетях или каналах!