В веб-дизайне есть два ключевых понятия — UX и UI, они же — юикс и юай.
UX (user experience) — это про работу с сайтом и удобство, а UI (user interface) — про внешний вид интерфейса и красоту. Есть много готовых решений, которые помогают улучшать пользовательский опыт при взаимодействии с сайтом, они называются UX-паттернами. Знать UX-паттерны важно не только дизайнеру, но и разработчику: это помогает писать код эффективнее и избегать лишней работы.
Сегодня расскажем о принципах UX на сайтах, разберёмся, зачем это знать разработчику, рассмотрим примеры популярных паттернов и покажем, где можно найти готовые компоненты для своих проектов.
Что такое UX-паттерны
Основная цель UX-дизайна — не заставлять пользователя думать. Когда интерфейс логичен и понятен, пользователю не нужно прикладывать лишние усилия для достижения цели.
Со временем дизайнеры и разработчики заметили, что определённые механики на сайтах эффективнее других. Например, удобнее добавлять товар в корзину прямо со страницы списка товаров, а не переходить сначала на страницу этого товара. Перетащить файл для загрузки, свайпнуть влево для удаления сообщения или показать модальное окно для дополнительной информации — всё это оказалось более удобным и интуитивным для пользователей.
Удачные решения сформировались в UX-паттерны — проверенные способы, которые помогают пользователям быстрее и проще совершать то, что они хотят. Чтобы каждый раз не изобретать велосипед, разработчики и дизайнеры стали использовать на сайтах уже знакомые пользователям паттерны, чтобы сделать интерфейс предсказуемым и понятным.
Все паттерны в веб-дизайне выработаны на основе опыта пользователей, и есть разные сформулированные UX-правила.
- Пользователи не читают сайты, а просматривают их. На сайте должна быть чёткая визуальная иерархия, чтобы можно было сразу понять, где находится важная информация. Использование разных шрифтов, размеров и цветов помогает выделить заголовки и основные пункты, делая их заметными.
- Закон Фиттса гласит, что время обнаружения цели зависит от расстояния до цели и её размера. В нашем случае это значит, что элементы, к которым пользователи чаще обращаются, должны быть более заметными и доступными. Кнопки действия («Купить» или «Зарегистрироваться») должны быть достаточно большими и расположены в удобных местах, чтобы пользователи могли легко их нажимать.
- Закон Якоба говорит о том, что пользователи проводят большую часть своего времени на других сайтах и в результате предпочитают сайты, которые работают так же, как уже знакомые им. Это значит, что элементы управления должны быть размещены в привычных местах. Следование этим паттернам помогает избежать путаницы.
- Пользователи склонны делать ошибки, поэтому важно предоставлять ясные сообщения об ошибках и подсказки. Например, если пользователь ввёл неправильный адрес электронной почты, полезно не только сообщить об этом, но и объяснить, что именно неверно, чтобы помочь ему быстро исправить ошибку.
- Пользователи ожидают согласованности. Если в одном разделе сайта используются определённые цвета и стили для кнопок, то же самое должно быть и в других разделах. Это создаёт предсказуемый опыт, который позволяет пользователям быстрее адаптироваться к интерфейсу.
На основании этого определяются правила для проектирования сайтов и компонентов. Чтобы пользователи легко находили нужную информацию, страницы собираются, например, из модульных блоков. Блоки должны быть сгруппированы по смыслу, с понятными разделителями, чтобы пользователь не запутался, что к чему относится. А меню, заголовки и кнопки должны располагаться так, чтобы можно было быстро выполнить нужные действия.
Например, здесь сайту не хватает визуальной иерархии, и пользователь не сразу поймёт, что к чему:
Карточки товаров или формы обратной связи должны быть такими, как на большинстве сайтов. Поскольку пользователи уже привыкли к таким решениям, это позволяет им быстрее освоиться на вашем сайте и не тратить время на изучение новых правил. Так что сейчас создание макета интерфейса уже во многом похоже на собирание конструктора из готовых деталей. Такая автоматизация экономит время и разработчику, и дизайнеру.
Зачем это разработчику
Казалось бы, UX-дизайном занимаются дизайнеры, тогда зачем в это вникать разработчику? А вот зачем.
Чтобы упростить жизнь самому себе и не делать лишнюю работу
Когда разработчики знают, как работают UX-паттерны, то могут быстрее реализовать задумки дизайнеров, найти в макетах логические ошибки и не тратить время на реализацию плохих решений.
Иногда дизайнеры учитывают только UI, то есть внешний вид, но забывают про UX. Например, дизайнер сделал эффектное меню с анимацией, где пункты появляются при наведении мыши. С виду всё красиво, но на практике пользователи могут случайно потерять фокус и закрыть меню, не успев выбрать нужный пункт. На мобильных устройствах такое решение вообще не будет работать. Это пример, когда UI в приоритете перед UX: красиво, но неудобно.
В такой ситуации разработчик может улучшить пользовательский опыт, предложив открыть меню по клику вместо наведения, чтобы избежать случайного закрытия, или добавить индикаторы для подменю.
Чтобы не ухудшать UX техническими решениями
Часто UX зависит от технических решений, которые принимает разработчик при реализации дизайна. Допустим, разработчик делает сайт интернет-магазина, и дизайнер создал макет, где отображается очень длинный список товаров. Технически это можно реализовать, загрузив и отобразив все товары сразу на одной странице. Но с точки зрения UX это будет плохим решением. Если сразу загрузить много товаров, это приведёт к замедленной работе интерфейса и перегрузке пользователя информацией.
Для улучшения удобства работы с сайтом можно использовать UX-паттерн — пагинацию. Когда мы разбиваем список товаров на отдельные страницы, сокращается время загрузки каждой страницы, упрощается навигация и снижается когнитивная нагрузка на пользователя. Пагинация делает интерфейс более отзывчивым и управляемым, что особенно важно для пользователей с медленным интернет-соединением или при использовании мобильных устройств. Но это не универсальное решение — иногда с пагинацией с сайтом работать сложнее, чем без неё.
Чтобы работать в команде более слаженно
Если дизайнер и разработчик используют одни и те же паттерны, проект двигается быстрее. Разработчик не тратит время на обсуждения, как должна работать кнопка или меню: он уже знает, что это стандартные элементы, которые легко встроить в код.
Тестирование тоже становится проще. Когда интерфейс основан на проверенных паттернах и согласован с разработчиком, тестировать его получается быстрее и более предсказуемо. Это ускоряет выход новых версий, потому что разработчик заранее знает, какие элементы должны работать и как. Это особенно важно, когда команда трудится в условиях ограниченного времени, где каждая итерация должна приносить результат.
Распространённые паттерны на сайтах
Здесь рассмотрим наиболее часто встречающиеся на современных сайтах UX-паттерны
Pull-to-Refresh
Обновляет контент на мобильных устройствах с помощью простого жеста. Пользователь тянет страницу или список вниз, и при отпускании стартует процесс обновления данных. Этот жест интуитивно понятен и соответствует естественному поведению при прокрутке контента.
Зачем использовать:
- Просто и интуитивно обновлять информацию и не искать специальную кнопку.
- Снизить когнитивную нагрузку, позволяя пользователю сконцентрироваться на содержимом, а не на управлении.
- Сэкономить пространство на экране.
Бесконечная прокрутка (infinite scroll)
Автоматически подгружает дополнительный контент по мере прокрутки страницы вниз. Пользователь может непрерывно просматривать новые элементы без необходимости нажимать на кнопки или переходить на другие страницы. Бесконечная прокрутка — противоположность пагинации.
Зачем использовать:
- Загружать только необходимый для первоначального отображения контент, что ускоряет начальную загрузку страницы.
- Удерживать внимание пользователя и увеличить вовлечённость.
- Сделать взаимодействие с сайтом более интуитивным и не переключаться между страницами.
Скелетные экраны (Skeleton Screens)
Отображают шаблонную версию контента во время его загрузки. Вместо спиннеров или индикаторов загрузки пользователь видит светло-серые блоки на местах будущего контента, что создаёт ощущение более быстрой загрузки и улучшает восприятие приложения.
Зачем использовать:
- Снижает ощущение ожидания, показывая пользователю, что контент скоро появится.
- Пользователь не теряет интерес во время загрузки данных.
- Делает интерфейс более современным и динамичным.
Использование этого паттерна не заменяет оптимизацию производительности. При разработке по возможности лучше кэшировать и отображать реальный контент на странице.
Модальные окна
Позволяют отображать дополнительную информацию или запрашивать действие без перехода на другую страницу, фокусируя внимание пользователя на текущей задаче. Модальное окно появляется поверх основного контента и требует взаимодействия перед продолжением работы.
👉 Модальные окна уже можно создавать на чистом CSS с использованием псевдокласса :target.
Зачем использовать:
- Привлечь внимание пользователя к важному сообщению или действию.
- Удобно отображать формы, уведомления или подтверждения.
- Показывать дополнительный контент без перегрузки основного интерфейса.
Карточки
Группируют связанную информацию и представляют её в удобной для восприятия форме. Используют при отображении элементов с похожей структурой: товары, статьи, профили пользователей.
Зачем использовать:
- Структурировать контент и облегчать восприятие.
- Адаптировать карточки для разных типов контента, изменяя только передаваемые данные.
- В фреймворках (React, Vue) карточка создаётся как переиспользуемый компонент, что упрощает разработку и поддержку кода.
Тёмные паттерны (dark patterns) в UX
Тёмный паттерн — это термин, придуманный дизайнером Гарри Бригналлом (по ссылке — текст на английском). Это такие хитрые приёмы в дизайне, которые заставляют пользователей делать то, что они на самом деле не планировали.
Например, когда пользователь хочет отписаться от рассылки или удалить свой аккаунт, порядок действий оказывается таким сложным и неинтуитивным, что проще всё оставить как есть и не разбираться дальше. Это и есть тёмный паттерн: дизайнеры и разработчики намеренно усложнили жизнь пользователю, чтобы он отказался от отписки.
Другой распространённый пример — заставить нажать пользователя не на ту кнопку. При отмене какого-то действия кнопки могут быть расположены не там, где привык пользователь, и быть другого цвета. Кнопка отмены может быть зелёной, подтверждения — красной. Это нарушает привычный порядок действий.
Манипулирование эмоциями — ещё один популярный тёмный UX-паттерн. Например, если пользователь какое-то время не заходит в приложение, ему могут приходить уведомления с текстом: «Вы нас покидаете?» или «Нам будет вас не хватать!»
Использование таких приёмов может сработать в моменте — увеличить продажи или удержать пользователей, но на самом деле это подрывает доверие. Поэтому лучше избегать таких в своих проектах.
Библиотеки паттернов для разработчиков
Есть множество готовых решений и библиотек, где можно брать готовые компоненты и шаблоны для сайтов.В первую очередь стоит заглянуть на NPM. Здесь можно найти тысячи пакетов с готовыми компонентами и паттернами для различных целей. Хотя многие из них связаны с UI, есть и те, которые помогают решить задачи, связанные с UX — навигацией, управлением состояниями и взаимодействием с пользователем.
Также постоянно развивается CSS и предлагает новые возможности. В последних версиях появились команды, позволяющие реализовать некоторые UX-паттерны без использования JavaScript. Например, можно создать аккордеон — сворачивающийся контент — с помощью элементов <details> и <summary>. Ещё есть интересный проект CSS-only Carousel, где показано, как создать простую карусель, используя только CSS, включая новые свойства и методы. Но поскольку решение экспериментальное, то поддерживается не во всех браузерах.
Чтобы разработчику повысить насмотренность на хорошие UX-практики, можно проверять свои сайты с помощью чек-листов. В сервисе checklist.design собрано множество готовых чек-листов для разных элементов интерфейса — от форм и кнопок до страниц с ошибками и профилей пользователей.
Что дальше
Дальше попробуем сами реализовать какой-нибудь UX-паттерн. Мы уже делали форму Drag-and-Drop у себя на сайте, а в следующий раз сделаем что-то посложнее. Подписывайтесь, чтобы не пропустить новые разборы с паттернами.
