Вертикальный формат — отличный пример онлайновой инфографики нового
типа. Так, например визуализация «Мобильное юношество: подростки и сотовые телефоны» имеет последовательную компоновку. Зритель постепенно усваивает предложенную информацию, которая выстроена по принципу «сверху вниз» и разбита на пять разделов. Получается вертикальный формат, в котором создается большинство онлайновых инфографик.
В различных источниках такой формат инфографики называется высоким, длинными или башенным. С точки зрения дизайна и компоновки веб-интерфейсов соотношение сторон, образующее вертикальный формат инфографики, обладает рядом серьезных преимуществ. Компьютерная мышь технологически устроена так, что экран удобнее прокручивать в вертикальном направлении, пользуясь колесиком. Проматывать веб-страницу по горизонтали значительно сложнее.
Важен следующий факт: большинство сайтов скомпонованы именно так, что их удобно просматривать, прокручивая по вертикали, а не по горизонтали. Как правило, сайт полностью умещается в окне браузера по ширине и не требует прокрутки по горизонтали. Часть контента веб-страницы обычно располагается за нижней границей экрана. Пользователь привык, что, если требуется ознакомиться с остальной информацией, страницу нужно прокрутить вниз. Если изображение слишком велико и не умещается на экране, то пользователь знает, что страницу следует прокрутить вниз, чтобы просмотреть оставшуюся часть картинки.
Действует общее правило: оригинальная полномасштабная версия инфографики, предназначенная для публикации онлайн, — это изображение шириной 800 пикселов. Высота изображения не ограничена и зависит от того, какую информацию требуется сообщить. Такой размер позволяет отобразить на сайте компании оригинальную версию инфографики с оптимальным разрешением, и инфографика будет полностью помещаться по ширине в окне большинства браузеров при любых распространенных
разрешениях экрана.
Но когда инфографика используется совместно либо повторно публикуется на других сайтах, размер изображения обычно уменьшается до миниатюры- эскиза, чтобы вписаться по ширине в ту часть макета сайта или блога, которая отводится под основной контент.
Большинство шаблонов, предоставляемых на сайте для ведения блогов, предусматривают для основного контента область шириной всего 600 пикселов, чтобы на экране можно было разместить дополнительный контент на боковых панелях. Информация в вертикальном, высоком макете обычно остается вполне удобочитаемой даже при необходимости уместить ее в более узком пространстве, чем планировалось изначально. Если же оригинальный контент выполнен в горизонтальном формате, то подобное сужение будет столь радикальным, что воспринимать информацию станет совершенно невозможно.
Оригинал инфографики «Чего хотят гости» представляет собой файл изображения в формате JPG размером 800 х 4000 пикселов. Пользователи, которые перепостят эту инфографику в своем блоге, вероятно, попробуют уменьшить размеры файла до 500 х 2500 пикселов. Ширина
сокращается на 37,5 %, зато общий размер инфографики будет на 61 % меньше.
Давайте сравним этот макет с другой веселой инфографикой — 7«История купального костюма». Здесь складывается совершенно иная ситуация. Инфографика выполнена в горизонтальном формате, по ширине она занимает 4000 пикселов, по высоте — 800 пикселов. Чтобы просмотреть весь контент,пользователь должен прокручивать эту инфографику по горизонтали.
Данный вариант прокрутки не идеален, однако сайт реализован
таким образом, что пользователю не составляет труда прокручивать ее таким
образом. Но чтобы файл шириной 4000 пикселов можно было уместить в
стандартный формат блога, 4000 пикселов придется уменьшить до 500
пикселов. Сужение составляет 87,5 %, а общий размер сайта уменьшается на
98,4%. Получается слишком маленькая картинка, на которой ничего не видно.
Сайты для обмена изображениями, например Пинтерест, используют интерфейсы с вертикальной прокруткой. В них удобно просматривать изображения самой разной ширины. Таким образом, информация в вертикальном формате легко
отображается на подобных сайтах целиком. Пусть данное дизайнерское решение принималось и без учета инфографической специфики, оно идеально подходит для вывода на экран галереи образцов инфографики в вертикальном
формате.
На следующей инфографике четко видно, как пересчитываются размеры различных схем, чтобы они уместились в шаблон, состоящий из столбцов фиксированной ширины. Зрителю гораздо удобнее просматривать изображения, выполненные в вертикальном формате. К тому же при уменьшении горизонтально ориентированных инфографических схем такие изображения становится практически невозможно разглядеть.
Хотя инфографика в вертикальном формате идеально подходит для распространения онлайн, такой формат удобен исключительно в тех случаях, когда вы не собираетесь распространять эту информацию на других носителях. Инфографики, построенные в вертикальном формате, исключительно сложно использовать на слайдах презентаций либо распечатывать на бумажном носителе. Как на слайдах, так и при печати ограничительным фактором оказывается именно высота, а не ширина инфографики.
Если инфографика выполнена в вертикальном формате, ее приходится уменьшать при распечатке в формате письма или в формате А4. При вставке такой инфографики в слайды презентаций ее также приходится уменьшать по высоте, чтобы схема уместилась на странице презентации. Получаются изображения, которые обычно очень сложно читать и воспринимать.
Инфографика "Наша удивительная планета: взгляд сверху вниз" подготовлена Карлом Тейтом и показывает Землю в разрезе от 11 км в высоту до 11 км ниже уровня моря. Все изображенные на инфографике компоненты расположены в правильном визуальном соотношении друг с другом. В оригинальном варианте дизайна (крайний слева) инфографика получилась невероятно высокой — ее размер составляет 800 х 15 000 пикселов. При необходимости уместить такую
инфографику на печатной странице рассмотреть ее становится практически
невозможно.
Данная инфографика была специально разработана для онлайнового просмотра. Вертикальный формат подчеркивает большой масштаб того расстояния, которое на ней отображено. Зрителю приходится довольно долго прокручивать страницу, чтобы ознакомиться с инфографикой целиком.
Вторая версия (в центре) имеет более удобное соотношение сторон, и ее можно распечатать в виде плаката. Но при необходимости уместить на обычной печатной странице даже эту версию приходится существенно уменьшать.
В данном случае инфографика получилась очень качественной, поскольку она предназначается преимущественно для онлайнового просмотра. Однако разработчик при подготовке инфографики должен тщательно учитывать стратегию публикации материала и исходить из нее.
Если зрители будут просматривать инфографику преимущественно в онлайновых источниках, то вертикальный формат будет оптимальным. Но если вы планируете распечатывать инфографику в качестве раздаточного материала либо использовать ее в презентациях, то попробуйте уменьшить оригинальный дизайн так, чтобы инфографика полностью умещалась на листе бумаги
стандартного формата. Другой вариант — оформить инфографику в виде секций, каждую из которых можно легко распечатать на отдельной странице.