Анализ 12 нестареющих макетов пользовательского интерфейса и шаблонов дизайна сайтов

Посетители интернет-ресурсов ищут информацию, а не оценивают внешний вид страниц. 

Как отмечается в издании «Web UI Patterns 2016 Vol. 1», основная функция дизайна заключается в том, чтобы представить содержание сайта максимально понятно и удобно для пользователя. В этой статье мы рассмотрим примеры, лучшие практики и распространенные сценарии для 12 успешных шаблонов веб-макетов. Обсудим также, какие задачи в области улучшения пользовательского взаимодействия решают эти шаблоны, на примере известных компаний. Заказать услугу анализа сайта вы можете в сервисе AskUsers.

12 распространенных шаблонов веб-дизайна

Узнайте, как представить свой веб-макет в наиболее мощном формате.

1. Карты

Фейсбук

Твиттер

Oprah

Проблема

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

Решение

Использование карточек является эффективным способом организации контента на страницах, делая его легко усваиваемым. Как отмечено в издании «Тенденции веб-дизайна 2015-2015», карточки стали распространенным элементом многих сайтов благодаря своей функциональности.

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

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

Для сайтов с большим количеством контента карточки предоставляют следующие преимущества:

• Интуитивно понятны — не требуют дополнительных пояснений для использования.
• Гибкость в адаптивном дизайне — благодаря своей независимости, карточки легко адаптируются под разные размеры экранов.
• Возможность совместного использования — легко поделиться конкретным содержимым в соцсетях.
• Универсальность — подходят для разнообразных стилей веб-страниц.

Советы

• Сделайте интерактивной всю карточку, а не только отдельные ее части. Согласно Закону Фиттса, изложенному в «Лучших практиках проектирования взаимодействия», это увеличивает шансы на взаимодействие с пользователем.
• Сфокусируйте содержание карточки на одной главной идее, чтобы не отвлекать внимание.
• Подбирайте изображения, учитывая возможные ограничения размеров на мобильных устройствах, которые могут потребовать различного кадрирования.
• Избегайте излишней сложности. Карточки наиболее эффективны, когда они представляют информацию просто и ясно, с использованием базовой типографики и сдержанных описаний для легкости восприятия.

2. Сетки

YouTube

Huffington Post

Etsy

Diply

Проблема

Сайты с большим содержанием контента хотят отображать все основные элементы с одинаковой иерархией.

Решение

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

Сетки могут различаться по размеру, интервалу и количеству столбцов. Такие сайты, как Huffington Post, чередуют свои варианты, чтобы избежать ощущения «прямолинейности», в то время как YouTube подчеркивает строгую организацию с прямыми строками и группировкой по категориям («Рекомендуемые», определенные каналы и т. д.).

Советы

• Обратите внимание на пустое пространство (или его отсутствие, как в случае с Diply), поскольку оно влияет на то, как пользователи просматривают страницы. Просторное пространство работает медленнее, но каждому элементу уделяется больше внимания. Минимальное пространство быстрее, но есть риск, что часть контента ускользнет.
• Последовательность важна, особенно при разработке дизайна для разных устройств. Убедитесь, что ваш макет остается узнаваемым на различных контрольных точках .
• Начните с базовой сетки из 12 столбцов с помощью таких инструментов, как 960js.

3. Макет в журнальном стиле

TIME

WebMD

WIRED

BuzzFeed

Проблема

На сайте много регулярно обновляемого контента в разных категориях.

Решение

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

Макет журнала меняет способ отображения контента. В левой части экрана может доминировать сетка карточек, а в правой — список текстовых ссылок.

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

Советы

• Как и в печатных журналах, в этом формате особое внимание уделяется изображениям. Как и в случае с TIME, WebMD и WIRED, на экране обычно есть одно доминирующее изображение объекта, которое привлекает внимание, прежде чем пользователи просматривают меньшие второстепенные изображения.
• Одной из характеристик этого стиля является вертикальное меню с обеих сторон (или горизонтальное меню).

4. Формат без контейнеров

AOL

Apple

Общественная библиотека

Cienne NY

Проблема

Сайт стремится к максимальной простоте в представлении информации.

Решение

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

В прошлом, дизайн сайтов основывался на прямолинейных и строго структурированных композициях для упорядочивания информации. Это было эффективно, однако современные технологии открывают новые возможности для творчества. Этот стиль нравится агентствам (Public-Library), сайтам портфолио и модным сайтам (Cienne NY), которые ценят современный и авангардный вид.

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

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

Советы

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

5. Разделенный экран

Google переводчик

Adidas Football (Великобритания)

Peugeot

62 Models

Lauren Wickware Design

Проблема

Сайт состоит из двух ключевых разделов, каждый из которых несет равную значимость.

Решение

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

Разделенный экран — это выбор для одновременного отображения двух центральных элементов или, как показывает пример Adidas, их сопоставления друг с другом. Этот подход идеален, когда необходимо выделить оба элемента без приоритета: просто дайте им равное пространство.

Разделенные экраны идеально подходят, когда сайт предлагает два совершенно разных варианта, например, пола в «62 Models». Посетители сразу же делают выбор, благодаря чему сайт экономит время и не показывает оба варианта без надобности. К тому же, такой дизайн позволяет включить два разных призыва к действию, как это сделано на сайте Peugeot.

Со временем данный стиль приобрел чисто эстетическую функцию. Часто текст располагается на одной половине экрана, в то время как другая половина заполнена главным изображением, как, например, на сайте Lauren Wickware Design. Обе части экрана отражают разные грани одной идеи.

Советы

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

6. Одностраничные макеты

Twitter

Gmail

Spotify

Tumblr

Проблема

Многостраничная система навигации слишком запутана или ненужна.

Решение

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

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

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

Советы

• Создавайте уникальные URL-адреса для каждой точки просмотра, например Gmail или Twitter. Поскольку контент загружается динамически с помощью JavaScript, URL-адреса требуют особого внимания. Уникальные URL-адреса также позволяют использовать кнопку «Назад» браузера.
• Используйте липкую навигацию, чтобы уменьшить дезориентацию, даже если это только меню заголовка.
• Примените методы прокрутки из главы 4 Web UI Patterns 2016 (том 1), чтобы правильно решать проблемы с прокруткой.

7. F-образный паттерн

Yelp

Groupon

The New Yorker

Проблема

Пользователи испытывают трудности при просмотре сайтов с большим количеством текста.

Решение

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

Nielsen Norman Group объясняет, как исследования отслеживания движений глаз показали, что пользователи (в культурах чтения слева направо) обычно просматривают тяжелые блоки контента по образцу, похожему на букву F или E. Наши глаза приучены начинать с правого верхнего угла, сканировать по горизонтали, затем опускаться к следующей строке и делать то же самое, пока не найдем что-то интересное.

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

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

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

Советы

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

8. Z-образный паттерн

TripAdvisor

Kentucky Fried Chicken

Wunderlist

Проблема

На сайте представлена определенная целевая задача или призыв к активности, которые не находят у отклика у аудитории.

Решение

Как и шаблон F, макет Z имитирует естественные методы сканирования пользователя. Тем не менее, шаблон Z особенно эффективен для ресурсов с однонаправленным фокусом и более сжатым объемом информации.

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

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

Советы

• Располагайте призывы к действию справа в конце линии просмотра: это позволит пользователю сделать короткую паузу перед тем, как продолжить прокрутку страницы.
• Размещайте наиболее значимые призывы к действию в правом верхнем углу, так как в этой области они наиболее заметны.
• Шаблон Z можно повторять снова и снова на одной и той же странице, так что пользователь вырабатывает ритм, который будет удерживать его внимание.

9. Горизонтальная симметрия 

Starbucks

Budweiser

Проблема

Сайт содержит массу повторяющихся дизайнерских решений, требующих аккуратной структуризации.

Решение

Симметрия, естественное явление, наблюдаемое в природе, традиционно ассоциируется с красотой и приносит чувство упорядоченности и системности, а также укрепляет доверие.

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

Советы

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

10. Приблизительная горизонтальная симметрия

eBay

McWhopper

Проблема

Горизонтальная симметрия слишком структурирована для сайта.

Решение

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

Однако небольшое визуальное нарушение может пойти вам на пользу.

Советы

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

11. Радиальная (вращательная) симметрия.

Wikipedia

Technics

Проблема

Сайт стремится акцентировать фокус на ключевой элемент и стимулировать посетителей к быстрым действиям.

Решение

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

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

Советы

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

12. Асимметрия

Esquire (Великобритания)

Honda

Revolution PN

Histograph

HSBC

Beoplay

Проблема

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

Решение

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

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

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

Советы

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