Список как способ представления данных
Работа со списком и его организация - часто встречающаяся задача дизайнера интерфейсов. Список есть во всех интерфейсах, сложнее одностраничного сайта. Список это любые информационные объекты, сложные или простые, упорядоченные тем или иным способом. Он не так прост, как кажется и грамотная работа со списком может привести к интересным результатам и отказаться от многих привычных интерфейсных решений.
Анатомия списка
I тип. Привычный нам вид списка, последовательная организация пунктов сверху-вниз при опциональном ранжировании.
II тип. Чуть менее привычный вид списка. Не привычный по причине матричной организации пунктов. Обычно так располагают изображения, а не текст, но списком быть не перестаёт. Привычный вид списка сверху-вниз - частный случай матричного, в одну колонку.
III тип. Неочевичный вид списка в виде случайного расположения пунктов. Географическая привязка к карте, это наглядное представление этого типа.
IV тип. Смешанное представление списков двух разных интерфейсов, обычно в виде I и III типов.
Работа со списком
Введу 2 термина для упрощения понимания - пункт и карточка пункта. Пункт, это сумма информационных слоёв: пиктограмм, текста, изображений, гипертекста. Карточка пункта, это содержимое пункта.
На примерах ниже, разберём способы визуализации пунктов и карточек пунктов.
1. Список выполняет двойную функцию: функцию списка и функцию карточки. По клику на пункт в области списка подгружается карточка пункта, с дополнительной информацией (сроком доставки, сроком хранения и т. д.). Полезно, когда нужно сэкономить место на экране.
Пример, карта пунктов выдачи заказов на Озоне.
IV тип.
2. Другой способ подгрузки карточки, в случае с отелями на сайте anywayanyday - подгрузка под картой. Минус этого способа в ограниченном размере подгружаемой карточки, поэтому авторы решения прибегли к идеографическому обозначению характеристик отелей. А так же в слабой визуальной связи между выбранным отелем в выдаче и подгружаемой под картой карточки отеля. Достоинство решения - список на виду.
IV тип.
3. Интересный приём, двухколоночное представление карточки бара. Удачная попытка решить проблемы с подгрузкой карточки отеля в предыдущем примере и визуальной связи пункта и карточки пункта.
IV тип.
4. Попытка сохрания выдачи на карте справа, накладывая карточку на дополнительный слой, перекрывающий участок карты. Отсутствует связь между карточкой и пунктом. Неудачная реализация.
IV тип.
5. Ещё попытка наложения карточки на карту. Недостатки подхода в перекрывании карты массивным слоем карточки и в очень слабой связи между карточкой и пунктом.
IV тип.
5. Матричное представление списка с подгружаемой карточкой в виде «дятла». Достоинства: чёткая связь между объектами, ширина ограниченная wrap-слоем. Способ представления можно рассматривать как альтернатива классическому представлению контента на сайте - отдельная главная страница, с отдельными внутренними страницами. Побочный эффект - отказ от хлебных крошек.
II тип.
6. Ещё одно матричное представление списка с подгружаемой колонкой для карточки пункта. Недостатки: слабая связь между объектами, ограниченная ширина. Ещё одна альтернатива хлебным крошкам, рудиментарном элементе.
II тип.
8. Матричная организация списка с перекрывающей карточкой пункта в виде попапа. Не очень удачное решение, на мой взгляд ретроградная и отмирающая технология.
II тип.
9. Изящное решение не покидать поисковую выдачу или список предложили дизайнеры в приложении Ютуб в iOS. Видеоролик сворачивается в скриншот в правом углу, не мешая рассматировать другие ролики.
I тип.
Буду рад вашим примерам.
Анатомия списка
I тип. Привычный нам вид списка, последовательная организация пунктов сверху-вниз при опциональном ранжировании.
II тип. Чуть менее привычный вид списка. Не привычный по причине матричной организации пунктов. Обычно так располагают изображения, а не текст, но списком быть не перестаёт. Привычный вид списка сверху-вниз - частный случай матричного, в одну колонку.
III тип. Неочевичный вид списка в виде случайного расположения пунктов. Географическая привязка к карте, это наглядное представление этого типа.
IV тип. Смешанное представление списков двух разных интерфейсов, обычно в виде I и III типов.
Работа со списком
Введу 2 термина для упрощения понимания - пункт и карточка пункта. Пункт, это сумма информационных слоёв: пиктограмм, текста, изображений, гипертекста. Карточка пункта, это содержимое пункта.
На примерах ниже, разберём способы визуализации пунктов и карточек пунктов.
1. Список выполняет двойную функцию: функцию списка и функцию карточки. По клику на пункт в области списка подгружается карточка пункта, с дополнительной информацией (сроком доставки, сроком хранения и т. д.). Полезно, когда нужно сэкономить место на экране.
Пример, карта пунктов выдачи заказов на Озоне.
IV тип.
2. Другой способ подгрузки карточки, в случае с отелями на сайте anywayanyday - подгрузка под картой. Минус этого способа в ограниченном размере подгружаемой карточки, поэтому авторы решения прибегли к идеографическому обозначению характеристик отелей. А так же в слабой визуальной связи между выбранным отелем в выдаче и подгружаемой под картой карточки отеля. Достоинство решения - список на виду.
IV тип.
3. Интересный приём, двухколоночное представление карточки бара. Удачная попытка решить проблемы с подгрузкой карточки отеля в предыдущем примере и визуальной связи пункта и карточки пункта.
IV тип.
4. Попытка сохрания выдачи на карте справа, накладывая карточку на дополнительный слой, перекрывающий участок карты. Отсутствует связь между карточкой и пунктом. Неудачная реализация.
IV тип.
5. Ещё попытка наложения карточки на карту. Недостатки подхода в перекрывании карты массивным слоем карточки и в очень слабой связи между карточкой и пунктом.
IV тип.
5. Матричное представление списка с подгружаемой карточкой в виде «дятла». Достоинства: чёткая связь между объектами, ширина ограниченная wrap-слоем. Способ представления можно рассматривать как альтернатива классическому представлению контента на сайте - отдельная главная страница, с отдельными внутренними страницами. Побочный эффект - отказ от хлебных крошек.
II тип.
6. Ещё одно матричное представление списка с подгружаемой колонкой для карточки пункта. Недостатки: слабая связь между объектами, ограниченная ширина. Ещё одна альтернатива хлебным крошкам, рудиментарном элементе.
II тип.
8. Матричная организация списка с перекрывающей карточкой пункта в виде попапа. Не очень удачное решение, на мой взгляд ретроградная и отмирающая технология.
II тип.
9. Изящное решение не покидать поисковую выдачу или список предложили дизайнеры в приложении Ютуб в iOS. Видеоролик сворачивается в скриншот в правом углу, не мешая рассматировать другие ролики.
I тип.
Буду рад вашим примерам.