x
 
Александр Ищенко
20 июля 2009

Добрый день, Артём и уважаемые советчики!

Помогите понять, насколько хорош этот пагинатор для мобильной версии сайта? Что можно улучшить? Предполагается, что на сайте будет много страниц с текстом и картинками. iPhone и другие touch screen девайсы не учитываем. Изначально это устройства с экраном в 240 на 320 пикселей. Спасибо!



Чтобы понять, насколько плохи «пагинаторы» в «мобильных версиях сайтов», попробуйте изучить расписание кинотеатров на афише Яндекса. Воспользуйтесь любым телефоном (Айфон не учитываем).

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

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


Ваша иллюстрация несколько равнодушна к предмету: хедер, футер, контент, текст текст текст. Соображения по вашему интерфейсу я выскажу, если расскажете, о чём речь.


Поделиться
Отправить

Комментарии

Денис Братчук
20 июля 2009

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

Руслан Юлдашев
20 июля 2009

Удивляет скролбар: зачем он нужен, если вся страница помещается на экране (кстати, частая «ошибка» тех, кто в виндах скриншот сайта в сафари помещает).

Если страница не будет помещаться на экране, то разносить ссылки «Предыдущая / Следующая» не нужно. Лучше оставить листалку страниц сверху, а снизу продублировать. И вывести номера всех страниц. Правда, т. к. экран маленький, номера страниц лучше засунуть в выпадающий список.

Александр Ищенко
21 июля 2009

Артём, постраничная навигация, применительно к мобильным версиям, важна для:
1) Увеличения скорости загрузки — практически все телефоны отображают контент только при полной загрузке.

2) Ограничение объёма страницы — многие телефоны большим объемом свободного кеша не могу похвастаться и «падают» при переполнении.

3) Уменьшение нагрузки на сервер — при некоторых задачах это довольно важный параметр.

Речь идёт об унифицированном (такой бы хотелось) пагинаторе. Пожалуй, «самый показательный пример» — просмотр списка фотографий (миниатюры) и самих фотографий (оптимизированы под размер экрана 240×320). Выводить как очень много миниатюр, так и несколько «больших» фотографий, не кажется правильным.

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

Руслан, до ссылки всё равно придётся «прощелкать» джойстиком (тачскрин-девайсы не рассматриваем пока что). Кликабельные номера всех страниц (тем более в выпадающем списке), на мой взгляд, вообще не нужны — вряд ли пользователь запомнит, на какой странице находится интересующий его контент, а список страниц его ещё и путать будет («О, вроде на 5-й странице было! Не, наверное, на 3-й или я на неё нажимал…»)

Руслан Худяков
21 июля 2009

Руслан, если страница помещается на одном экране, то дублировать листалку не нужно, а поместить её вниз, ведь логичнее схема «прочитал, листнул дальше или пробежался глазами по страничке — «Не то!» — и вернулся».

Так или иначе, решение о том, куда идти, будет после того как страницу просмотрели, а значит зрительный фокус внизу, да и лишнее место освободится, на таком малюсеньком экране каждый пиксель на счету ;-)

Сергей Гончаров
21 июля 2009

Если без пагинатора никак, то довольно функционален у Акробат-ридера:
 — позволяет листать туды-сюды;
 — занимает мало места;
 — даёт сразу ввести номер любой страницы.

Роман Паулов
21 июля 2009

Топикстартер дал условие — сайт с множеством текста и графики, предположительно, это хабраподобная лента.

Как обычно просматриваются эти сайты? Человек едет в автобусе, решает почитать чего-нибудь новенького. Открывает сайт и начинает читать страничку сверху вниз. Доходит до конца страницы, жмёт на номер следующей страницы, и так до тех пор, пока не дойдёт до новости, которую он прочитал вчера, сидя в таком же автобусе :) Получается, единственное, что нужно человеку в конце страницы — это кнопочка «Далее». Я бы ещё добавил номер страницы и общее количество страниц, ну так чтобы не потеряться :-)

Делать выпадушку со страницами безсмысленно. Из контекста непонятно что я увижу на странице №125, и что будет на странице №18. Зато выпадушка скушает трафик. Также и кнопка «назад» неуместна снизу, т. к. если человек вспомнил — «о, а на предыдущей страничке я не дочитал в одном месте», то в браузере есть хорошая кнопка «Назад».

Сверху кнопка «предыдущая» уместна, чтобы поддержать навигацию «вперёд/назад», как и счётчик страниц. Хотя тыкать по ней будут единицы.

Анатолий Rr Буров
22 июля 2009

Александр, проблему с неинформативным — и потому запутывающим и малополезным — списком страниц можно решить, сделав его информативным: вместе с номером страницы отображать заголовок или ещё что-нибудь.

К вопросу о транспорте: если читать в метро, то когда страница заканчивается, нужно ждать станции, где ловит сеть. В этой ситуации гораздо удобнее, когда загружается сразу куча информации.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Смена иллюстраций при переключении абзацев в книгах издательства бюро 6 Карусели и слайдеры 10 7 19




Недавно всплыло

Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33 Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 В Сафари появилось распознавание текста на картинках. Иногда текст странно выделяется и копируется. Что поделать? 2 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5