- Статьи
- 3 мин на чтение
- 129
Какие карточки лучше: вертикальные или горизонтальные?
Лучший способ отображения контента
Какие карточки лучше использовать для того, чтобы правильно представить контент на странице: вертикальные или горизонтальные? Многие дизайнеры затрудняются ответить на этот вопрос, потому что не понимают, в чём разница между этими двумя типами карточек, помимо расположения и ориентации.
Фиксации взгляда и движение глаз при рассматривании предметов
Учитывайте несколько факторов, чтобы правильно выбрать тип карточек. Если для представления информации вы используете большие изображения, горизонтальная карточка создаст рассеянный поток сканирования, поскольку потребует от пользователя большего количества фиксаций взгляда. Другими словами, человеку придётся приложить больше зрительных усилий для восприятия контента.
И наоборот, большое изображение в формате вертикальной карточки позволит пользователям лучше сфокусировать взгляд на картинке при её сканировании. Люди сделают меньше фиксаций взгляда при просмотре изображения и текста. Они будут фиксировать взгляд в одной области, а не переводить его с левой половины на правую.
Иногда текст содержит больше информации, чем изображение. В этом случае лучше выбрать горизонтальные карточки. Так вы сможете заполнить их длинным текстом. А поскольку у пользователей останется больше свободного пространства для чтения каждой строки, их не затруднит прочитать текст.
В вертикальной карточке меньше свободного пространства для длинного текста, поэтому она будет выглядеть перегруженной контентом. В результате, будет казаться, что для каждой строки отведено совсем мало места. Более того, текст будет выглядеть массивным и перегруженным.
Возможно, в карточке будет не длинный текст, а метаданные. Метаданные на горизонтальной карточке — плохой вариант, потому что человеку придётся вести взгляд по длинной траектории. Чтобы пользователь мог легко и быстро сканировать метаданные, используйте вертикальные карточки, чтобы человек переводил взгляд по короткой траектории.
Изображения, которые касаются краёв карточки
Если вы сгруппируете карточки вместе, то они займут много места. Поэтому возникает распространённая проблема с их отображением на мобильных устройствах. Однако есть способ сэкономить место и одновременно сделать изображения более привлекательными.
Вы будете использовать пространство более эффективно, если расположите изображения так, чтобы они касались краёв карточки. Так на горизонтальной карточке вы сэкономите пространство по вертикали. А на вертикальной карточке – у вас будет больше горизонтального пространства.
Кроме того, так изображения будут выглядеть более заметными и привлекут к себе внимание большего количества пользователей. А содержимое изображений, которые ограничены рамкой, наоборот, будет выглядеть более отдалённым и неестественным.
На примере выше вы видите изображение гамбургера в рамке и его фотографию, которая занимает всё вертикальное пространство карточки, от края до края. Во втором варианте кажется, что гамбургер находится ближе к пользователю, в то время как гамбургер в рамке выглядит так, как будто он расположен дальше.
Изображение в рамке создаёт впечатление, что гамбургер находится внутри искусственной рамки. Картинка, которая занимает всё вертикальное или горизонтальное пространство карточки, от края до края, убирает эту рамку, и гамбургер выглядит более естественно.
Ниже представлено сравнение групп горизонтальных карточек. С его помощью вы увидите, какое количество вертикального пространства можно сэкономить. Обратите внимание, что размер интервалов между карточками одинаковый. Вы экономите примерно 21% общего вертикального пространства, если используете изображения, которые полностью занимают вертикальное пространство карточки, от края до края.
А это сравнение групп вертикальных карточек. Оно демонстрирует уменьшение области горизонтального пространства. Вы экономите около 11%, что гораздо меньше, чем при использовании горизонтальных карточек. Однако этот факт играет значительную роль при проектировании мобильных интерфейсов, где размеры экрана ограничены.
Выберите правильный тип карточек
Правильный выбор между вертикальными и горизонтальными карточками — важное дизайн-решение, которое сделает ваш контент ярким. Если вы сделаете неправильный выбор, пользователю будет сложно считывать информацию. Чтобы принять оптимальное решение, подумайте, какой тип контента передает пользователям больше информации: изображения, текст или метаданные.
Перевод статьи Vertical vs. Horizontal Cards: Which Are Better? из блога UX Movement Newsletter
В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!
- Источник:
- UX Movement Newsletter
