G.E.C.K.: Infinite scroll + footer

Бесконечную прокрутку на веб-ресурсах сложно назвать новшеством. Теперь это один из стандартных подходов к построению навигации. У него есть плюсы - нет необходимости перемещаться между страницами, все что уже было загружено, останется на странице. Но есть и минусы. На мой взгляд таковых два: во-первых, необходимо предусматривать элементы интерфейса для перехода в начало страницы (забудьте про кнопку Home, она не для обычных пользователей), а во-вторых становится непонятно, что делать с бесконечно убегающим footer’ом (подвалом). И если с первой проблемой почти все справляются относительно успешно, то с решением второй очень часто возникают проблемы. О том, как решают ее крупные игроки современного web, мы сегодня и поговорим. Но для начала, ответим на вопрос “Зачем нужен footer при бесконечной прокрутке?”.

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

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

Но даже при таком подходе footer неизменно содержит метаинформацию о ресурсе. Что же происходит с сайтом, когда информационная лента становится бесконечной? Если ничего не делать, то результат будет такой же как у социальной сети vkontakte. Парни не стали заморачиваться и оставили все как есть, несмотря на бесконечную прокрутку. Если пользователю повезет - он пролистает до footer’а.

Чуть лучше обстоят дела у Google+, правда, на мой взгляд, их решение больше похоже на костыль: после троекратной подгрузки ленты вы все же достигните footer’а, а дальнейшая динамичная подгрузка будет доступна лишь после клика на клавишу “Еще”.

В Tumblr разработчики подумали, о необходимости сохранения footer, но сделали это так, что его очень легко упустить из виду. После начала прокрутки ленты, блок footer’а на некоторое время становится доступен пользователю, а затем исчезает. Зачем понадобилось его скрывать - мне не известно. Не думаю, что он так сильно отвлекал бы внимание пользователей.

Несмотря на то, что в Twitter footer сразу доступен пользователю, в процессе прокрутки он перемещается наверх, тем самым скрываясь из вида. На мой взгляд их решение выглядит лучше, чем в Tumblr с его магией появления и исчезновения элементов сайта.

В Facebook поступили грамотнее и вынесли footer под рекламный блок. Пожалуй, это лучший вариант реализации, т.к. последний остается всегда на виду, сколько бы долго пользователь не пролистывал новостную ленту.

Два других сервиса рассматриваются вне конкурса.

В Pinterest решением проблемы стал перенос footer в меню навигации. С одной стороны, я не вижу иного адекватного решения при их модели компоновки материалов, с другой стороны, меню “About” - это уже не footer, а заимствование из десктопных приложений. 

А самыми “вырви-глаз” UI-решениями нас продолжает радовать Prismatic. Парни из Prismatic решив, что footer и вовсе не нужен, выпилив его из интерфейса. Единственное средство обратной связи, которое я нашел - это форма “Feedback”. По ощущениям feedback уходит в пустоту.

Если на протяжении всей статьи вас не покидала мысль “Зачем поднимать такой шум вокруг какого-то footer’а?”, то смею вас успокоить, проблема не смертельна, но ее решение - это показатель степени зрелости ресурса. Хороший ресурс заботится о деталях и думает о UX. Решить проблему footer - это как подобрать правильные носки под костюм. При желании можно одеть любые, или не одевать вовсе (камень в сторону Prismatic), но ведь так приятно видеть человека заботящегося о деталях и целостности стиля!