понедельник, 31 декабря 2012 г.

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), но ведь так приятно видеть человека заботящегося о деталях и целостности стиля!

2 комментария:

Евгений Самигуллин комментирует...

метоинформаци* => метаинформаци*, не?

Maxim Gurkin комментирует...

все верно, спасибо!

Отправить комментарий