Waterton by Judicael  Aspirot - Downloaded from 500px

Исследование большого экрана

Более трех лет мы работаем с отзывчивым веб-дизайном. За это время в наших портфолио накопились примеры шаблонов, позволяющие создавать сайты для мобильных устройств. А как обстоят дела с большими экранами?

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

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

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

Неудивительно, что при всех условиях, дизайн многих страниц сайтов приспособлен к разрешению 1024х768 пикселя. Это пережиток прошлого, когда дизайнеры были ограничены в разрешениях экранов, популярных у пользователей. Сегодня у большинства владельцев стационарных компьютеров или ноутбуков разрешение превышает 1024 пикселя. Другими словами, максимальный размер окна браузера может превратить тщательно продуманный 960-пиксельный макет страницы в небоскреб, окруженный белым пространством.

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

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

Проблемы с информационным наполнением сайта

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

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

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

Чтобы создать комфортное чтение, дизайнер должен найти баланс между шириной строки и размером текста, вкупе с междустрочным интервалом. Классически, одна колонка текста вмещает 7-10 слов (Josef Muller-Brockmann) или 45-75 символов (Robert Bringhurst). Bringhurst также отмечает, что в обычной книге ширина колонки должна быть в 30 раз больше используемого размера шрифта. Но это значение может варьироваться от 20 до 40, в зависимости от используемого шрифта.

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

Длинные статьи

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

01

Сайт The Great Discontent использует большие фотографии вверху каждой статьи.

02

Сайт Roger Ebert уменьшает количество отображаемых элементов пользовательского интерфейса по мере масштабирования страницы.

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

03

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

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

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

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

Разделение информационного наполнения на больших экранах

Разделяя информационное наполнение сайта на блоки, мы помогаем пользователям быстро и эффективно находить информацию на объемных страницах. Такими блоками легко управлять в зависимости от ширины дисплея, поэтому это настоящая находка для отзывчивого веб-дизайна. Преимущество блоков для больших экранов состоит в том, что каждый фрагмент странички может отображаться по-разному, в зависимости от того, что нам необходимо. Хорошей демонстрацией является сайт Manchester City Council, в котором используются блоки одновременно с фотографией, располагающейся на всю ширину экрана, которая создает нужный настрой при просмотре. При изменении размеров страницы макет меняется плавно, сохраняя нужные пропорции для каждого блока.

04

На сайте Manchester City Council информационное наполнение разделяется на блоки.

05

Информационное наполнение сайта Juliana Bicycles богато визуальными образами.

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

Плитка и информационное наполнение сайта

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

06

Google картинки отображаются на всю ширину экрана.

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

07

Сайт Pinterest можно сравнить со скрапбукингом.

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

08

Широкоэкранный вид сайта Uniqlo’s позволяет покупателям визуально сравнивать товары.

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

У сайтов Pinterest и Google Images отсутствует отзывчивый веб-дизайн. Оба сайта используют отдельную мобильную версию. Uniqlo адаптируется только для больших экранов, с мобильного устройства вы увидите уменьшенную десктопную версию. Даже если у вашего сайта нет отдельной мобильной или адаптивной версии, то пользователь вполне может довольствоваться обычной версией.

Графическая техника

Еще один интересный прием заключается в использование методик полиграфического дизайна.

09

На сайте Institut Choiseul элементы пользовательского интерфейса растягиваются до края экрана.

Institut Choiseul ограничивает информационное наполнение каждой страницы модульной сеткой, расположенной по центру. Цвет фона у логотипа и основного блока растягивается до края экрана. Кнопка «Вернуться наверх» появляется в нижней левой части экрана и после нажатия мы наблюдаем плавное возвращение наверх. При этом успеваем просмотреть всю страницу еще раз целиком. Структура и цветовая палитра сайта приносят пользователю чувство спокойствия, вызывают воспоминания об Интернациональном Швейцарском Стиле, который был модным в 1950-1960 годах.

10

У сайта Kanselarij der Nederlandse Orden адаптивная модульная сетка  с ассиметричными цветами.

У Kanselarij der Nederlandse Orden похожая система, с ассиметричными цветными полосками, которые привязаны к общей сетке. Поскольку сетка гибкая, содержимое подстраивается к общей ширине страницы, вызывая определенные сложности с версткой макета.

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

Вывод

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

В любом дизайне большее внимание стоит уделять информационному наполнению, потому что оно будет фундаментом при работе с дизайном для больших экранов. У длинных публикаций наиболее важно создать хороший ритм чтения, который не будет вызывать отторжение у пользователей. Для фото или графических материалов необходимо работать с пространством и масштабированием элементов интерфейса, именно они напрямую воздействуют на восприятие такого типа материалов. Правительственные сайты и сайты услуг обязаны предоставлять простой доступ к задачам и информации. Коммерческие сайты должны предоставить покупателям возможность наглядно сравнить и легко приобрести товары. Расположение элементов на сайте должно отражать, в первую очередь, цели страницы. Если сайт предполагает медленное, размеренное чтение, то и проектировать его стоит соответственно. «Активный» сайт, наоборот, должен быть более плотно скомпонован. Залив фон под фотографией, вы добьетесь объема, а если разобьете элементы и добавите пустое пространство, то дизайн приобретет элегантность и престижный вид.

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

Об авторе

author

Mike Pick

Как участник Monkey Do, Майк подходит к веб-дизайну с позиции арт-директора и фронт-энд разработчика. Он создает простой и легкий дизайн сайтов, но, в случае необходимости, готов писать код на HTML/CSS и JavaScript.

Много лет он работал рядовым сотрудником в крупном агентстве, арт-директором на внутренних проектах, скромным дизайнером, получил несколько наград. На текущий момент у него степень бакалавра по специальности «Проектирование взаимодействия» в университете NSCAD, городе Галифакс, Новая Шотландия, Канада.

Статья “Surveying the Big Screen” переведена с одобрения издания A List Apart и автора Mike Pick.

PS: Если вы обнаружили ошибки в переводе, напишите по адресу info@uxcafe.ru.