60 ключевых аспектов UX-оптимизации
60 ключевых аспектов UX-оптимизации — гайд, который поможет оптимизировать пользовательский опыт (UX) так, чтобы он приносил максимальную ценность пользователю и одновременно повышал эффективность бизнеса
Дата публикации
13 февраля 2026
Время прочтения
22 минуты
о статье
Внутри гайда — 6 основных разделов, раскрытых через более 60 аспектов. Гайд познакомит с основами юзабилити и тёмными UX-паттернами, даст конкретные рекомендации по элементам интерфейса, структуре страниц, адаптивному дизайну, а также подскажет, как оптимизировать ключевые блоки интернет-магазинов.
Навигация
Тёмные паттерны
Лишающие осознанного выбора
Ограничивающие выбор
UX-элементы
Юзабилити
Эвристики
Юзабилити
Юзабилити — показатель того, насколько продукт (лендинг, сайт, приложение) прост и удобен в использовании. Юзабилити лежит в основе пользовательского опыта и во многом определяет его качество.
Плохое юзабилити ведёт к потере потенциальных клиентов.
Хорошее юзабилити повышает лояльность пользователей, снижает показатель отказов, увеличивает конверсию и улучшает поведенческие факторы. Это фундамент успешного UX.
Прежде чем переходить к конкретным элементам интерфейса и страницам, стоит ознакомиться с основами юзабилити.
Плохое юзабилити ведёт к потере потенциальных клиентов.
Хорошее юзабилити повышает лояльность пользователей, снижает показатель отказов, увеличивает конверсию и улучшает поведенческие факторы. Это фундамент успешного UX.
Прежде чем переходить к конкретным элементам интерфейса и страницам, стоит ознакомиться с основами юзабилити.
Принципы юзабилити
При разработке интерфейса сайта или приложения рекомендуется опираться на проверенные принципы юзабилити. Одним из таких инструментов являются эвристики, сформулированные в 1990-е годы экспертом в области юзабилити Якобом Нильсеном.
Эвристики Нильсена — это набор практических правил, которые помогают создавать продукт с хорошим юзабилити. Они основаны на глубоком понимании психологии пользователей и их поведения. Эти эвристики широко распространены и используются дизайнерами и разработчиками по всему миру.
Эвристики Нильсена не являются универсальной методикой,
но служат ориентиром и помогают создавать продукты, которые соответствуют ожиданиям и потребностям пользователей.
Эвристики Нильсена — это набор практических правил, которые помогают создавать продукт с хорошим юзабилити. Они основаны на глубоком понимании психологии пользователей и их поведения. Эти эвристики широко распространены и используются дизайнерами и разработчиками по всему миру.
Эвристики Нильсена не являются универсальной методикой,
но служат ориентиром и помогают создавать продукты, которые соответствуют ожиданиям и потребностям пользователей.
Список эвристик
- Понятное состояние системы
- Соответствие системы реальному миру
- Свобода действий пользователя
- Согласованность и стандарты
- Предотвращение ошибок
- На виду, а не в памяти
- Гибкость и эффективность использования
- Эстетичный и минималистичный дизайн
- Распознавание проблем и их решение
- Справочные материалы и документация
Понятное состояние системы
Пользователь всегда должен понимать, что происходит в системе, откликается ли она на его действия. При грамотном юзабилити пользователь видит результат каждого своего действия на экране
Например, при оформлении заказа в интернет-магазине пользователь видит, что товар добавлен в корзину, подсвечивается текущий шаг оформления. А после успешной оплаты появляется экран успеха с подтверждением «Заказ принят».
Например, при оформлении заказа в интернет-магазине пользователь видит, что товар добавлен в корзину, подсвечивается текущий шаг оформления. А после успешной оплаты появляется экран успеха с подтверждением «Заказ принят».
Соответствие системы реальному миру
Интерфейс должен «говорить на языке пользователя». То есть использовать термины, метафоры и последовательность действий, привычные пользователю. Это делает взаимодействие с продуктом естественным и понятным.
Именно по этому принципу большинство интернет-магазинов используют иконку корзины в виде привычной продуктовой корзины, чтобы пользователь сразу понял её назначение.
Именно по этому принципу большинство интернет-магазинов используют иконку корзины в виде привычной продуктовой корзины, чтобы пользователь сразу понял её назначение.
Свобода действий пользователя
Каждый пользователь должен иметь возможность свободно управлять своими действиями в системе, отменять их и возвращаться к предыдущим шагам без потери данных. Если действие необратимо, система предупреждает пользователя и даёт шанс подумать ещё раз.
Например, если пользователь случайно удалил товар из корзины, он может вернуть его обратно одним кликом. Также можно легко изменять количество товаров в корзине перед оформлением заказа.
Например, если пользователь случайно удалил товар из корзины, он может вернуть его обратно одним кликом. Также можно легко изменять количество товаров в корзине перед оформлением заказа.
Согласованность и стандарты
Элементы интерфейса должны вести себя предсказуемо и соответствовать привычным пользователю стандартам. Пользователи привыкли к определённым решениям и паттернам, и чем меньше нового им нужно изучать в интерфейсе, тем эффективнее они работают с продуктом.
Например, навигация в интернет-магазинах обычно устроена так: логотип слева или по центру страницы; меню и поля для входа находятся сверху; корзина в правом верхнем углу. Это стандартное расположение, в нём пользователи быстро ориентируются и легко выполняют действия.
Например, навигация в интернет-магазинах обычно устроена так: логотип слева или по центру страницы; меню и поля для входа находятся сверху; корзина в правом верхнем углу. Это стандартное расположение, в нём пользователи быстро ориентируются и легко выполняют действия.
Предотвращение ошибок
Пользовательский интерфейс должен минимизировать вероятность ошибок и помогать пользователю избегать неправильных действий. Проще говоря, лучше предотвратить ошибку, чем потом её исправлять.
Например, при вводе данных в форму используются маски ввода, чтобы пользователь сразу видел правильный формат и не мог допустить ошибку.
Например, при вводе данных в форму используются маски ввода, чтобы пользователь сразу видел правильный формат и не мог допустить ошибку.
На виду, а не в памяти
Пользователь должен видеть все важные элементы и информацию прямо на экране, не полагаясь на память.
Например, «хлебные крошки» показывают пользователю, где он находится в структуре сайта и позволяют вернуться на предыдущие страницы, не запоминая путь.
Например, «хлебные крошки» показывают пользователю, где он находится в структуре сайта и позволяют вернуться на предыдущие страницы, не запоминая путь.
Гибкость и эффективность использования
Интерфейс должен быть удобен как для новичков, так и для опытных пользователей. Не нужно нагружать пользователя лишней информацией. Следует упрощать функции, которыми он пользуется чаще всего.
Например, при оформлении заказа в интернет-магазине формы могут автозаполняться сохранёнными данными: имя, адрес доставки, телефон, e-mail.
Например, при оформлении заказа в интернет-магазине формы могут автозаполняться сохранёнными данными: имя, адрес доставки, телефон, e-mail.
Эстетичный и минималистичный дизайн
Интерфейс не должен перегружать пользователя лишней информацией. Все элементы, тексты и визуальные компоненты должны быть оправданы и служить цели взаимодействия.
Например, форма регистрации с минимальным количеством полей — только имя, телефон и код подтверждения. Пользователь быстро понимает, что нужно сделать, и завершает регистрацию без лишней информации.
Например, форма регистрации с минимальным количеством полей — только имя, телефон и код подтверждения. Пользователь быстро понимает, что нужно сделать, и завершает регистрацию без лишней информации.
Распознавание проблем и их решение
Пользовательский интерфейс должен помогать пользователю понять, что пошло не так, и как исправить ошибку.
Например, если пользователь видит сообщение об ошибке 404, следует на экране объяснить причину неполадки и подсказать дальнейшие действия.
Например, если пользователь видит сообщение об ошибке 404, следует на экране объяснить причину неполадки и подсказать дальнейшие действия.
Справочные материалы и документация
Если пользователю нужна помощь, справочные материалы, туториалы или встроенные подсказки должны быть короткими и не вызывать дополнительных вопросов и трудностей.
Например, раздел FAQ с ответами на часто задаваемые вопросы помогает пользователю быстро найти решение без обращения в поддержку.
Например, раздел FAQ с ответами на часто задаваемые вопросы помогает пользователю быстро найти решение без обращения в поддержку.
UX-элементы
Каждый элемент интерфейса важно продумать отдельно, поскольку у каждого есть множество нюансов, которые напрямую влияют на удобство и эффективность использования продукта.
Крупные компании инвестируют большие ресурсы в UX и тестируют интерфейсы на реальных пользователях. Их решения часто становятся стандартами и задают тренды.
Опыт крупных компаний может служить ориентиром при проектировании кнопок, форм, навигации и других элементов.
Примеры сервисов, на которые можно ориентироваться:
Соцсети: VK, Telegram, TikTok
Маркетплейсы: Wildberries, Ozon, Яндекс Маркет, Авито
Банки: Тинькофф, Сбербанк, Альфа-Банк
Другие сервисы: Яндекс Такси, Госуслуги
Крупные компании инвестируют большие ресурсы в UX и тестируют интерфейсы на реальных пользователях. Их решения часто становятся стандартами и задают тренды.
Опыт крупных компаний может служить ориентиром при проектировании кнопок, форм, навигации и других элементов.
Примеры сервисов, на которые можно ориентироваться:
Соцсети: VK, Telegram, TikTok
Маркетплейсы: Wildberries, Ozon, Яндекс Маркет, Авито
Банки: Тинькофф, Сбербанк, Альфа-Банк
Другие сервисы: Яндекс Такси, Госуслуги
Фавикон (Favicon)
Фавикон — это маленькая иконка, которая представляет веб-сайт и отображается среди вкладок, закладок и в поисковой выдаче.
Внешний вид фавикона должен быть прописан в UI kit сайта. Если его нет, рекомендуется соблюдать следующие правила по оформлению фавикона:
Фавикон должен быть узнаваемым и соответствовать бренду.
Внешний вид фавикона должен быть прописан в UI kit сайта. Если его нет, рекомендуется соблюдать следующие правила по оформлению фавикона:
- Лого с закруглёнными краями
- Стрелка или другой визуальный элемент, указывающий на сайт в выдаче
- Размеры: 16×16, 32×32 или 120×120 px
- Формат: ICO (рекомендуемый), GIF, JPEG, PNG, BMP
Фавикон должен быть узнаваемым и соответствовать бренду.
Кнопка (Button)
Кнопка — один из ключевых элементов интерфейса. Именно через кнопки пользователь совершает целевые действия: оформляет заказ, отправляет форму, переходит к следующему шагу. Поэтому кнопки должны быть заметными, понятными и предсказуемыми.
Внешний вид кнопок должен быть зафиксирован в UI-kit или дизайн-системе.
В дизайне кнопок важно соблюдать базовые принципы:
Форма кнопки может быть разной (прямоугольной, с закруглёнными углами). Главное — чтобы она выглядела как кнопка и воспринималась однозначно.
Также в интерфейсе должны быть предусмотрены кнопки разной важности и иметь понятные визуальные состояния, которые дают пользователю обратную связь.
Внешний вид кнопок должен быть зафиксирован в UI-kit или дизайн-системе.
В дизайне кнопок важно соблюдать базовые принципы:
- кнопка должна визуально отличаться от фона (контраст по цвету и/или форме);
- текст кнопки должен быть хорошо читаемым и контрастным;
- текст кнопки должен быть достаточно кратким, чтобы кнопка корректно отображалась на разных разрешениях
- кликабельной должна быть вся кнопка, а не только текст;
Форма кнопки может быть разной (прямоугольной, с закруглёнными углами). Главное — чтобы она выглядела как кнопка и воспринималась однозначно.
Также в интерфейсе должны быть предусмотрены кнопки разной важности и иметь понятные визуальные состояния, которые дают пользователю обратную связь.
Выпадающий список (Dropdown)
Выпадающий список (dropdown) — элемент интерфейса, который позволяет пользователю выбрать одно или несколько значений из заранее заданного набора.
Выпадающий список следует использовать в следующих случаях:
Выпадающий список следует использовать в следующих случаях:
- Когда список вариантов фиксирован и заранее известен;
- Когда количество вариантов слишком велико для радиокнопок или чекбоксов;
- Для фильтров, выбора страны, категории, способа оплаты, времени доставки и т. п.
Чекбокс (Checkbox)
Чекбокс — элемент интерфейса для выбора одного или нескольких вариантов.
Чекбокс применяется в случаях, когда пользователь может:
В чекбоксе вся область (и текст и элемент) должна быть кликабельна.
Чекбокс применяется в случаях, когда пользователь может:
- выбрать несколько элементов одновременно (например, способы доставки или дополнительные опции);
- включить или отключить отдельное свойство или настройку;
- уточнить, как должно выполняться действие.
В чекбоксе вся область (и текст и элемент) должна быть кликабельна.
Радиокнопки (Radio buttons)
Радиокнопка — элемент интерфейса для выбора одного элемента из списка.
В отличие от чекбокса, радиокнопка позволяет выбрать только один вариант из группы. Она используется в ситуациях, где одновременный выбор нескольких значений невозможен или лишён смысла. Например, при выборе способа доставки или варианта оплаты.
У радиокнопки вся область (и текст и элемент) должна быть кликабельна.
В отличие от чекбокса, радиокнопка позволяет выбрать только один вариант из группы. Она используется в ситуациях, где одновременный выбор нескольких значений невозможен или лишён смысла. Например, при выборе способа доставки или варианта оплаты.
У радиокнопки вся область (и текст и элемент) должна быть кликабельна.
Ссылки (Links)
Внешний вид ссылок должен быть прописан в UI kit.
Ссылка должна быть подчёркнута и выделена цветом, отличным от основного текста.
Рекомендуется предусмотреть два состояния: наведение (hover) и нажатие (active). Дополнительно можно добавить состояние посещённой ссылки (visited).
Ссылка должна быть подчёркнута и выделена цветом, отличным от основного текста.
Рекомендуется предусмотреть два состояния: наведение (hover) и нажатие (active). Дополнительно можно добавить состояние посещённой ссылки (visited).
Изображения на сайте
Изображения на сайте помогают передать важное сообщение
и правильно презентовать товар или услугу. Для главных страниц
не стоит использовать фото плохого качества, а при масштабировании фото должно сжиматься или увеличиваться пропорционально.
При масштабировании фото должно сжиматься или увеличиваться пропорционально.
и правильно презентовать товар или услугу. Для главных страниц
не стоит использовать фото плохого качества, а при масштабировании фото должно сжиматься или увеличиваться пропорционально.
При масштабировании фото должно сжиматься или увеличиваться пропорционально.
Поля ввода (Text fields)
Поле ввода — элемент интерфейса для добавления текста. Поле ввода позволяет пользователю самостоятельно ввести текстовые или числовые данные, а не выбирать из готовых вариантов.
Подпись поля должна быть короткой и понятной, обычно достаточно существительного или сочетания слов.
Для упрощения ввода можно использовать маски и автозаполнение там, где это уместно.
Подпись поля должна быть короткой и понятной, обычно достаточно существительного или сочетания слов.
Для упрощения ввода можно использовать маски и автозаполнение там, где это уместно.
Формы (Input forms)
Форма — это элемент интерфейса, с помощью которого пользователь вводит и отправляет данные.
Подписи и поля ввода должны набираться одним шрифтом и выравниваться по общей базовой линии.
Порядок полей очень важен. Пользователи ожидают привычную логику: связанные данные должны идти подряд, а стандартные сценарии — сохраняться (например, пароль сразу после логина).
Размер поля должен подсказывать пользователю, какой объём данных от него ожидается:
Важно заранее предусматривать место для сообщений об ошибках, чтобы их появление не «раздвигало» форму и не ломало вёрстку.
Ошибки не следует показывать преждевременно. Также стоит помнить, что пустое обязательное поле не является ошибкой само по себе.
Подписи и поля ввода должны набираться одним шрифтом и выравниваться по общей базовой линии.
Порядок полей очень важен. Пользователи ожидают привычную логику: связанные данные должны идти подряд, а стандартные сценарии — сохраняться (например, пароль сразу после логина).
Размер поля должен подсказывать пользователю, какой объём данных от него ожидается:
- короткие поля — для коротких значений (номер, индекс);
- длинные — для адресов и развернутого текста;
- многострочные поля должны быть достаточно широкими и высокими, чтобы в них было удобно вводить хотя бы абзац текста.
Важно заранее предусматривать место для сообщений об ошибках, чтобы их появление не «раздвигало» форму и не ломало вёрстку.
Ошибки не следует показывать преждевременно. Также стоит помнить, что пустое обязательное поле не является ошибкой само по себе.
Форма захвата (Lead form)
Форма захвата обычно содержит:
Согласие на обработку персональных данных — юридически значимое действие, а не просто элемент интерфейса.
По российскому законодательству согласие на обработку персональных данных должно быть свободным, конкретным, информированным и сознательным. Невыполнение этого требования может привести
к юридической ответственности и штрафам.
Выразить своё согласие пользователь может галочкой, нажатием кнопки или другим аналогичным действием.
- заголовок, поясняющий цель формы;
- поля ввода с визуальным отличием от фона (цвет поля или обводка);
- подписи к полям и при необходимости подсказки по формату ввода;
- кнопку с понятным действием;
- чекбокс согласия на обработку персональных данных;
- визуальную реакцию на отправку формы (например, анимацию или состояние загрузки).
Согласие на обработку персональных данных — юридически значимое действие, а не просто элемент интерфейса.
По российскому законодательству согласие на обработку персональных данных должно быть свободным, конкретным, информированным и сознательным. Невыполнение этого требования может привести
к юридической ответственности и штрафам.
Выразить своё согласие пользователь может галочкой, нажатием кнопки или другим аналогичным действием.
Форма регистрации (Registration form)
При проектировании формы регистрации следует запрашивать минимально необходимый набор данных.
Наиболее приемлемая форма регистрации включает имя, номер телефона, поле для ввода кода подтверждения, возможность регистрации через социальные сети или аккаунты и кнопку «Зарегистрироваться».
Рекомендуется разделять номер телефона и имя от кода из смс на два окна, но с минимальным дискомфортом для пользователя.
Будет плюсом, если код заполняется автоматически.
Наиболее приемлемая форма регистрации включает имя, номер телефона, поле для ввода кода подтверждения, возможность регистрации через социальные сети или аккаунты и кнопку «Зарегистрироваться».
Рекомендуется разделять номер телефона и имя от кода из смс на два окна, но с минимальным дискомфортом для пользователя.
Будет плюсом, если код заполняется автоматически.
Шапка, хэдер (Header)
Хэдер отвечает за навигацию по сайту и помогает пользователю ориентироваться. Он должен быть простым, понятным и не перегруженным.
Хэдер должен содержать: логотип и краткий дескриптор (если есть), информацию о местоположении, навигацию по сайту, контактные данные и кнопку CTA (целевого действия).
Хэдер должен содержать: логотип и краткий дескриптор (если есть), информацию о местоположении, навигацию по сайту, контактные данные и кнопку CTA (целевого действия).
Подвал, футер (Footer)
Футер должен содержать:
- Логотип/название компании;
- Кликабельные логотипы соцсетей компании;
- Сopyright, чтобы закрепить юридическое право на контент;
- Юридическую информацию: политика конфиденциальности, условия оферты, условия хранения cookies;
- Дублирование навигационного меню, расширенного на услуги/другое;
- Карту сайта (обязательно для улучшения SEO-ранжирования в поисковых системах);
- Телефон, почту, адрес, режим работы (при наличии);
- Карту местоположения офиса (при наличии);
- Смену языка (при наличии).
Хлебные крошки (Breadcrumbs)
Хлебными крошками называют навигационную цепочку, которая показывает путь
от главной страницы до текущего раздела.
Благодаря хлебным крошкам пользователь видит структуру сайта, понимает, где находится, и может быстро вернуться на один или несколько шагов назад.
Поисковики читают хлебные крошки как структурированный путь, это упрощает навигацию, улучшает ранжирование страницы и SEO.
от главной страницы до текущего раздела.
Благодаря хлебным крошкам пользователь видит структуру сайта, понимает, где находится, и может быстро вернуться на один или несколько шагов назад.
Поисковики читают хлебные крошки как структурированный путь, это упрощает навигацию, улучшает ранжирование страницы и SEO.
Cookies
Cookies — это небольшие файлы, которые сайт сохраняет в браузере пользователя. Они помогают запоминать информацию о взаимодействии с сайтом и использовать её при следующих визитах.
Поскольку cookies могут обрабатывать данные пользователя, нужно получать явное согласие на их использование.
Лучше располагать уведомление о cookies внизу экрана и фиксировать при скролле — такие UX‑паттерны привычны пользователю. Сообщение не должно мешать взаимодействию с сайтом.
Поскольку cookies могут обрабатывать данные пользователя, нужно получать явное согласие на их использование.
Лучше располагать уведомление о cookies внизу экрана и фиксировать при скролле — такие UX‑паттерны привычны пользователю. Сообщение не должно мешать взаимодействию с сайтом.
Страницы
Шаблоны страниц
Шаблоны страниц — типовые экраны, которые сообщают пользователю текущее состояние системы или его действия и подсказывают следующий шаг.
Основная задача шаблонов страниц — объяснить текущее состояние, снизить неопределённость и подсказать следующий шаг.
Шаблоны страниц охватывают экраны успеха, ошибок (404, 500, 401/403), пустых состояний, загрузки и др.
Шаблоны страниц с ошибками обязательны на каждом сайте. Их внешний вид зависит от стиля сайта. Будет огромным плюсом добавлять на эти страницы анимационные и игровые элементы, которые помогут скрасить негативный опыт пользователя.
Основная задача шаблонов страниц — объяснить текущее состояние, снизить неопределённость и подсказать следующий шаг.
Шаблоны страниц охватывают экраны успеха, ошибок (404, 500, 401/403), пустых состояний, загрузки и др.
Шаблоны страниц с ошибками обязательны на каждом сайте. Их внешний вид зависит от стиля сайта. Будет огромным плюсом добавлять на эти страницы анимационные и игровые элементы, которые помогут скрасить негативный опыт пользователя.
Страница «Контакты»
Страница контактов должна содержать все данные, необходимые пользователю для связи с компанией. Информация должна быть ясной, структурированной и легко сканируемой, чтобы пользователь мог быстро найти нужные данные.
На странице необходимо разместить:
Также можно добавить:
На странице необходимо разместить:
- Адрес компании;
- Карту с местоположением;
- Номер телефона и e-mail для связи.
Также можно добавить:
- Реквизиты компании (если нет отдельной страницы для юрлиц);
- Время работы;
- Ссылки на социальные сети;
- Контакты разных отделов (техподдержка, отдел продаж и т. д.).
Страница «О компании»
Страница «О компании» помогает пользователям познакомиться с брендом, понять его ценности и убедиться в надёжности.
В тексте стоит кратко указать основные достижения, опыт работы, участие в мероприятиях или СМИ. Полезно добавить сертификаты, награды, благодарственные письма и видеопрезентацию компании, если есть.
Живые фотографии офиса или производства помогут сделать страницу более человечной и наглядной. Если нет отдельной страницы «Команда», можно добавить фото и информацию о сотрудниках.
В тексте стоит кратко указать основные достижения, опыт работы, участие в мероприятиях или СМИ. Полезно добавить сертификаты, награды, благодарственные письма и видеопрезентацию компании, если есть.
Живые фотографии офиса или производства помогут сделать страницу более человечной и наглядной. Если нет отдельной страницы «Команда», можно добавить фото и информацию о сотрудниках.
Интернет-магазин
Каталог товаров
Каталог — ключевая страница интернет-магазина. Именно здесь пользователь принимает решение: продолжать выбор, углубляться в карточки товаров или покинуть сайт.
Задача каталога — помочь быстро сориентироваться в ассортименте, отфильтровать предложения и найти подходящий товар.
Заголовок страницы формулирует, что именно представлено в каталоге. Он должен быть информативным, понятным, коротким. Например: «Купить светильники для дома» или «Освещение и декор».
Дополнительно можно использовать подзаголовок с уточняющей информацией.
В условиях высокой конкуренции допустимо добавление гео-метки (например, «в Москве»).
Над областью с карточками товара должны располагаться сопутствующие иконки, изменяющие интерфейс каталога (сортировка, переключатели отображения).
В каталогах, где много товаров все фотографии должны быть единообразными (важно, чтобы товар просмотривался хорошо).
Задача каталога — помочь быстро сориентироваться в ассортименте, отфильтровать предложения и найти подходящий товар.
Заголовок страницы формулирует, что именно представлено в каталоге. Он должен быть информативным, понятным, коротким. Например: «Купить светильники для дома» или «Освещение и декор».
Дополнительно можно использовать подзаголовок с уточняющей информацией.
В условиях высокой конкуренции допустимо добавление гео-метки (например, «в Москве»).
Над областью с карточками товара должны располагаться сопутствующие иконки, изменяющие интерфейс каталога (сортировка, переключатели отображения).
В каталогах, где много товаров все фотографии должны быть единообразными (важно, чтобы товар просмотривался хорошо).
Карточка товара
Инфорационный блок карточки — ядро страницы. Именно здесь пользователь принимает решение о покупке. Здесь нужно расположить всю основную информацию о товаре.
Звёзды и количество отзывов — визуальный триггер доверия. Покупатель интуитивно будет присматриваться к товару, который уже покупали.
Ключевые характеристики (мощность, питание и т. д.) должны быть написаны в одну строку, без перегрузки лишними элементами; Ссылка «все характеристики» ведёт в полное описание. Такой формат позволяет пользователю сразу оценить, подходит ли ему товар, не прокручивая страницу.
Блок с ценой должен быть визуально выделен, чтобы пользователь сразу понимал стоимость товара и наличие. Перечёркнутая старая цена усиливает ощущение выгоды.
Кнопка CTA (Call-to-action, целевого действия) должна быть ярче других элементов, используйте контрастный фирменный цвет.
Также в карточке товара обязательно нужно добавить рядом метку с местоположением, чтобы пользователь мог быстро поменять город.
Информацию о доставке лучше также раскрыть в поп-апе, не переходя на отдельную страницу.
Звёзды и количество отзывов — визуальный триггер доверия. Покупатель интуитивно будет присматриваться к товару, который уже покупали.
Ключевые характеристики (мощность, питание и т. д.) должны быть написаны в одну строку, без перегрузки лишними элементами; Ссылка «все характеристики» ведёт в полное описание. Такой формат позволяет пользователю сразу оценить, подходит ли ему товар, не прокручивая страницу.
Блок с ценой должен быть визуально выделен, чтобы пользователь сразу понимал стоимость товара и наличие. Перечёркнутая старая цена усиливает ощущение выгоды.
Кнопка CTA (Call-to-action, целевого действия) должна быть ярче других элементов, используйте контрастный фирменный цвет.
Также в карточке товара обязательно нужно добавить рядом метку с местоположением, чтобы пользователь мог быстро поменять город.
Информацию о доставке лучше также раскрыть в поп-апе, не переходя на отдельную страницу.
Главное фото — точка внимания, от которой пользователь начинает знакомство с товаром.
Фото должны быть:
Рядом с блоком основной фотографии нужно добавить миниатюры других, которые будут появляться при прокрутке или автоматическом перелистывании фотографий в галерее. Активную фотографию нужно визуально выделить.
Видео помогает лучше рассмотреть товар в действии. Видео должно быть по соотношению сторон таким же, как и блок с главным фото.
3D-просмотр позволяет рассмотреть товар со всех сторон, оценить габариты и детали конструкции. Это взаимодействие улучшает конверсию, так как почти заменяет опыт офлайн-магазина, позволяя пользователю точно понять, что он покупает.
Теги (метки) «хит продаж», «скидка», «новинка» и т.д. повышают конверсию. Используйте разные цвета для каждого из тегов, чтобы привлечь внимание к ним. Не используйте монохромные оттенки для тегов.
Фото должны быть:
- в высоком разрешении;
- с возможностью зума (приближения);
- желательно на белом фоне, если интерфейс светлый — это уменьшит визуальный шум и позволит сконцентрироваться на товаре.
Рядом с блоком основной фотографии нужно добавить миниатюры других, которые будут появляться при прокрутке или автоматическом перелистывании фотографий в галерее. Активную фотографию нужно визуально выделить.
Видео помогает лучше рассмотреть товар в действии. Видео должно быть по соотношению сторон таким же, как и блок с главным фото.
3D-просмотр позволяет рассмотреть товар со всех сторон, оценить габариты и детали конструкции. Это взаимодействие улучшает конверсию, так как почти заменяет опыт офлайн-магазина, позволяя пользователю точно понять, что он покупает.
Теги (метки) «хит продаж», «скидка», «новинка» и т.д. повышают конверсию. Используйте разные цвета для каждого из тегов, чтобы привлечь внимание к ним. Не используйте монохромные оттенки для тегов.
Корзина
Корзина — это ключевой элемент интернет-магазина, который должен быть максимально удобным и понятным для пользователя.
Кнопка корзины должна быть доступна на всех страницах сайта. Это облегчает навигацию.
Корзина должна содержать: карточки выбранных товаров, стоимость доставки, общую сумму заказа с учётом доставки и без, кнопку «оформить заказ».
Карточка товара должна содержать: фотографию товара, наименование, количество доступного товара в наличии, выбранные характеристики, цену, кнопку «Удалить товар», кнопку «Отложить товар» или «Добавить
в избранное».
Изображение должно занимать значительное место, так как часть пользователей сравнивает товар из карточки товара и из корзины по фото.
В корзине можно показывать релевантные рекомендации — сопутствующие или дополнительные товары, которые логично дополняют выбранные позиции. Их можно ненавязчиво расположить в отдельном блоке или внутри карточки товара.
Кнопка корзины должна быть доступна на всех страницах сайта. Это облегчает навигацию.
Корзина должна содержать: карточки выбранных товаров, стоимость доставки, общую сумму заказа с учётом доставки и без, кнопку «оформить заказ».
Карточка товара должна содержать: фотографию товара, наименование, количество доступного товара в наличии, выбранные характеристики, цену, кнопку «Удалить товар», кнопку «Отложить товар» или «Добавить
в избранное».
Изображение должно занимать значительное место, так как часть пользователей сравнивает товар из карточки товара и из корзины по фото.
В корзине можно показывать релевантные рекомендации — сопутствующие или дополнительные товары, которые логично дополняют выбранные позиции. Их можно ненавязчиво расположить в отдельном блоке или внутри карточки товара.
Оформление заказа
После проверки содержимого корзины пользователь переходит к оформлению заказа — этапу, требующему ввода большого объёма данных. Чтобы не перегружать пользователя, информацию стоит разделить на логические блоки.
Чаще всего процесс делится на три этапа:
Каждому этапу нужен понятный заголовок и визуальная граница блока, чтобы пользователь сразу понимал, какую информацию ему предстоит ввести. Страница может быть представлена как модальное окно с пошаговым прохождением или как длинная страница с отдельными блоками.
Если форма многошаговая, важно, чтобы пользователь мог легко вернуться на предыдущий шаг или перейти к следующему.
Чаще всего процесс делится на три этапа:
- Данные покупателя — ФИО, контактный телефон, e-mail.
- Доставка — выбор способа доставки, уточнение адреса и времени, отображение стоимости и возможных сроков. Можно предусмотреть выбор между адресом доставки и самовывозом. Можно добавить автозаполнение адресов, если пользователь ранее делал заказы.
- Оплата (самые частые варианты: оплата онлайн, оплата при получении, рассрочка или кредит).
Каждому этапу нужен понятный заголовок и визуальная граница блока, чтобы пользователь сразу понимал, какую информацию ему предстоит ввести. Страница может быть представлена как модальное окно с пошаговым прохождением или как длинная страница с отдельными блоками.
Если форма многошаговая, важно, чтобы пользователь мог легко вернуться на предыдущий шаг или перейти к следующему.
Адаптивность
Адаптивный дизайн
Адаптивный дизайн обеспечивает корректное отображение сайта на разных устройствах — от больших десктопов до смартфонов. Основная цель — сохранить удобство, читаемость и консистентность интерфейса при любом разрешении экрана.
Общий стиль и иерархия
Пользователь должен понимать, что находится на том же сайте вне зависимости
от устройства.
Важно сохранять общий дизайн, акцентные элементы, размеры заголовкови структуру блоков. Крупный заголовок страницы не должен «превращаться» в маленький по сравнению с заголовками блоков или разделов.
от устройства.
Важно сохранять общий дизайн, акцентные элементы, размеры заголовкови структуру блоков. Крупный заголовок страницы не должен «превращаться» в маленький по сравнению с заголовками блоков или разделов.
Масштаб элементов
При изменении разрешения необходимо следить за размером элементов относительно друг друга. Важно сохранять пропорции такие же, как и в дизайн макете (или разрешении эталоне).
Если дизайном предусмотрено размещение элементов четко в размер экрана, то необходимо пропорционально уменьшать/увеличивать эти элементы.
Если дизайном предусмотрено размещение элементов четко в размер экрана, то необходимо пропорционально уменьшать/увеличивать эти элементы.
Размеры текста и кликабельных элементов
При изменении разрешения необходимо следить за размером текста и кликабельных элементов.
Основной текст в мобильной версии лучше делать 14−16 px, дополнительный — 11−13 px.
Важно оставлять достаточные отступы вокруг текста и между элементами интерфейса.
Кликабельные элементы (кнопки, ссылки, иконки) должны быть удобными для касания: оптимальный размер — 44−48 px,
минимальный — 40 px.
Если элемент должен быть визуально маленьким, можно увеличить его интерактивную область.
Основной текст в мобильной версии лучше делать 14−16 px, дополнительный — 11−13 px.
Важно оставлять достаточные отступы вокруг текста и между элементами интерфейса.
Кликабельные элементы (кнопки, ссылки, иконки) должны быть удобными для касания: оптимальный размер — 44−48 px,
минимальный — 40 px.
Если элемент должен быть визуально маленьким, можно увеличить его интерактивную область.
Адаптация контента и блоков
На мобильных устройствах контент может выстраиваться в узкую вертикальную колонку или блоки могут превращаться в слайдеры.
Скрывать информацию в слайдерах стоит только там, где это оправдано, иначе пользователи могут пропустить важный контент. Например, преимущества продукта на лендинге удобнее расположить друг под другом, а не прятать в слайдер.
Блоки при скролле, желательно, располагать так, чтобы следующий блок был виден примерно на 15%. Это касается блоков на странице и слайдеров с контейнером.
В слайдере с изображениями для мобильного устройства необходимо добавлять навигацию и делать видимым часть предыдущего и следующего контейнера. Так у пользователя будет понимание, что на сайте есть дополнительный контент.
Скрывать информацию в слайдерах стоит только там, где это оправдано, иначе пользователи могут пропустить важный контент. Например, преимущества продукта на лендинге удобнее расположить друг под другом, а не прятать в слайдер.
Блоки при скролле, желательно, располагать так, чтобы следующий блок был виден примерно на 15%. Это касается блоков на странице и слайдеров с контейнером.
В слайдере с изображениями для мобильного устройства необходимо добавлять навигацию и делать видимым часть предыдущего и следующего контейнера. Так у пользователя будет понимание, что на сайте есть дополнительный контент.
Горизонтальное меню на мобильных экранах часто не помещается полностью, пункты выглядят слишком мелкими, с ростом функционала сайта расширять его становится проблематично.
Поэтому в мобильной версии лучше преобразовывать меню в бургер-меню или нижнее меню.
Поэтому в мобильной версии лучше преобразовывать меню в бургер-меню или нижнее меню.
Тёмные паттерны
Тёмные UX-паттерны — это приёмы проектирования интерфейсов, которые манипулируют поведением пользователей. Например, скрытые подписки или расходы, о которых пользователь узнаёт слишком поздно.
Такие паттерны работают на выгоду компании или продукта, а не на пользу пользователя.
Использование тёмных паттернов может приносить краткосрочную выгоду, но в долгосрочной перспективе негативно влияет на репутацию бренда.
По степени риска и уровню манипуляций тёмные паттерны можно условно разделить на три группы: лишающие осознанного выбора, ограничивающие выбор и влияющие на поведение.
Такие паттерны работают на выгоду компании или продукта, а не на пользу пользователя.
Использование тёмных паттернов может приносить краткосрочную выгоду, но в долгосрочной перспективе негативно влияет на репутацию бренда.
По степени риска и уровню манипуляций тёмные паттерны можно условно разделить на три группы: лишающие осознанного выбора, ограничивающие выбор и влияющие на поведение.
Получите полную версию гайда + блок «Тёмные паттерны»