Обновление страницы Pull-to-Refresh

Спустя какое-то время мы захотели обновить в Ionic функционал Pull-to-Refresh. Он был рабочий, но не такой, как надо. Мы считаем, что каждый компонент проекта, который делается с помощью Ionic, должен быть как можно практичнее и привлекательнее. Итак, настал момент для апдейта. И вот некоторые уроки по семиотике и UX, которые мы выучили ...

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

Большинство пользователей не сидят и не забавляются анимацией, сопровождающей pull-to-refresh, уткнувшись в свои смартфоны. Они "пользуются" смартфонами. Для них pull-to-refresh служит способом получения информации, которая им нужна, и нужна прямо сейчас. Это означает, что они делают быстрый свайп вниз и ждут, что pull-to-refresh тут же запустит процесс обновления информации. Свайп бывает таким быстрым, что никакой анимации и не происходит.

Мы вернулись обратно к обычной, фиксированной по времени анимации, обновили дефолтные иконки на более красивые и продолжили работу.

Следующее, что мы заметили, это то, что большинство вызовов API работают быстро, даже слишком быстро. Наш "рефрешер" возвращается в позицию "home" сразу же, как только до него доходит сигнал о том, что запрошенная информация уже получена. Нужно было бы, чтобы рефрешер прекратил свое действие сразу же после свайпа вверх. Однако вместо этого он моментально возвращается "домой". Для тестирования функции обновления данных у нас было приложение Hacker News (мы скоро напишем об этом поподробнее). Первая страница Hacker News не обновляется каждые пять секунд, а с помощью "refresh" мы ничего добиться не смогли. Поэтому остались в недоумении, подумали, что апдейт информации перестал функционировать вообще.

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

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

 

Пользователям все равно, что там происходит внутри приложения. Он полагается только на интерфейс - это то, что для него понятно. Именно интерфейс и может убедить пользователя в том, что приложение работает корректно. Для того чтобы пользователь был уверен, что обновление данных происходит, необходимо техническое решение. В нашем случае, если апдейт длится дольше 400 мс, иконка будет продолжать крутиться, пока данные не будут доступны пользователю на экране в полном представлении.

Я думаю, вы согласитесь с тем, что в таком виде пользоваться "pull-to-refresh" гораздо приятнее и понятнее. На самом деле мне понравился процесс критической оценки ситуации и корректировки поведения этого одного компонента. Это тот стандарт, которого мы пытаемся придерживаться, чем я очень горд. К каждой новой функции Ionic мы относимся с большим вниманием.

Посмотреть то, что мы сделали, можно на хостинге IT-проектов GitHub.

See the Pen Pull To Refresh: 1.0.0-beta.12 by Perry Govier (@perrygovier) on CodePen.

Комментарии