Карточки vs списки. Их влияние на опыт взаимодействия с пользователем.

Источник: Cards vs. lists, how they impact UX.
Автор:  Marc Schenker.
Перевод: .

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

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

В данной статье мы определим случаи, когда использование в веб-дизайне карточек будет более предпочтительным, чем списков и наоборот.

Что представляют собой карточки и списки?

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

Карточка является неким контейнером, отображающим различные биты соответствующей информации, который как цельный объект в состоянии передать пользователю даже больше информации. Несмотря на то, что карточки представляют собой результат применения «плоского дизайна», все же правильнее было бы отнести их к Flat Design 2.0, поскольку они зачастую содержат упрощенные 3D эффекты наподобие падающей тени (drop shadow), придающей им свойство кликабельности. Речь идет о 3D эффектах, подобных этой, создающей визуальное углубление функции, которое сообщает пользователю о возможности нажатия на элемент с последующим получением дополнительной информации.

Интересно, что карточкам свойственно что-то вроде ассоциации с настоящими игральными картами, как по размерам, так и по форме. Это в определенной степени напоминает уже устаревший скевоморфизм (*Применявшийся на «яблочных» платформах дизайн интерфейса, в котором его элементы представлялись иконками в виде объектов из реального мира — конверт (для e-mail приложений), корзина (для удаленных файлов), ножницы (для помещения фрагмента текста в буфер обмена) и т.д.).

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

.

Когда следует использовать карточки.

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

Для просмотра информации (процесс противоположный поиску).

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

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

Для группировки разнообразных элементов.

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

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

Когда использовать списки?

Со списками все немного проще, чем с карточками. Это, скорее всего, объясняется тем, что они присутствуют в веб-дизайне достаточно давно. И как результат нам намного легче выделить ситуации, когда использование списков более предпочтительно.

Создание условий для эффективного зрительного сканирования.

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

Для меньших экранов.

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

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

Установленное на моем смартфоне приложение App store для демонстрации доступных программ использует аккуратный вертикальный список, позволяющий просматривать восемь элементом одновременно, что избавляет меня от необходимости запоминания увиденных ранее приложений при прокрутке страницы вниз. Если бы все было оформлено с помощью более объемных карточек, то я смог бы увидеть, в лучшем случае, лишь несколько вариантов за один раз, что, само собой, стесняло бы меня в плане удобства.

Карточки vs списки.

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

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

Оформление вашего контента будет безупречным, если вы всегда будете помнить об этих важных отличиях между основными способами представления содержимого — карточками и списками.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *