UX Teddy

Почему пользователи лучше воспринимают детали через компактные окна, выезжающие в режиме slideover

2026-06-22T16:46:34.255Z

Полностраничные и компактные окна

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

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

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

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

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

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

Компонент “Slideover”

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

В большинстве приложений обзор данных на странице начинается с отображения дашборда в виде таблицы или карточек. Когда пользователи нажимают кнопку «Просмотреть детали» (“View Details”), с правой стороны страницы выезжает окно.

Страница обзора

Как ускорить просмотр данных

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

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

Окно, выезжающее в режиме slideover, без оверлея

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

Окно, выезжающее в режиме slideover, с оверлеем

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

Поэтому в окне, выезжающем в режиме slideover, рядом с кнопкой «X» должны быть стрелки пагинации. При нажатии на стрелку «вперёд» следует отображать следующий элемент по порядку, а при нажатии на стрелку «назад» пользователь будет возвращаться к предыдущему. Эти кнопки позволят людям последовательно просматривать детали, не закрывая каждый раз окно, выезжающее в режиме slideover.

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

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

Будущее за окнами, выезжающими в режиме slideover

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

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

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

Перевод статьи Why Users View Details Better with Compact Slideovers из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Как сделать идеальный дизайн лендинга

2026-06-17T07:50:16.362Z

Улучшенный UX на целевой странице

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

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

Блок «Первый экран»
Блоки «Характеристики»
Блок «Призыв к действию»

Блок «Первый экран»

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

Логотип
Заголовок
Описание
Призыв к действию
Изображение

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

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

Выравнивание по левому краю VS по центру

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

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

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

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

Блоки «Характеристики»

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

Выравнивание по центру VS по левому краю

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

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

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

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

3 VS 2 колонки

Вы также можете использовать трёхколоночный макет. В таком макете акцент делается на трёх ключевых характеристиках. Иконки хорошо выделяются на фоне. Ниже вы также можете добавить изображение.

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

Другой вариант дизайна — двухколоночный список характеристик. Здесь нет возможности добавить изображение, потому что этот макет предназначен для перечисления всех характеристик с наиболее низким приоритетом. Этот блок идёт последним, потому что в нём больше всего текста и он наименее привлекательный.

Блок «Призыв к действию»

В самом конце лендинга находится блок «Призыв к действию». Он содержит заголовок, описание и кнопку. Его цель — ещё раз подчеркнуть ценность продукта и превратить пользователя в покупателя.

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

Анатомия лендинга

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

Перевод статьи How to Design the Best Layout for a Landing Page из блога UX Movement Newsletter

Как размещать элементы навигации в веб-приложениях

2026-06-09T08:02:35.430Z

Оптимальный дизайн и расположение элементов

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

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

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

Структура навигации

Структура навигации состоит из верхней и боковой панелей, которые всегда на виду. Внутри этой структуры есть область контента, которая постоянно меняется в зависимости от действий пользователя.

Боковая панель — основная навигация, а верхняя панель — дополнительная. Для достижения наилучшего пользовательского опыта в веб-приложении должны быть обе панели. На панелях есть определённые места, которые лучше всего подходят для конкретных элементов навигации. Пользователи будут ориентироваться на них при навигации.

Группировка элементов боковой панели

Чаще всего на боковой панели все элементы навигации объединяют в одну группу. Но не все элементы имеют одинаковую природу. Их можно разделить на три группы:

Элементы контента
Административные элементы
Персональные элементы

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

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

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

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

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

Группировка элементов верхней панели

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

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

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

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

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

Поле поиска

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

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

Оптимальный дизайн и расположение

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

Перевод статьи The Best Location for Navigation Items on Web Apps из блога UX Movement Newsletter

Примеры и антипримеры дизайна форм ввода и выбора данных

2026-06-03T09:13:03.034Z

Визуальный чек-лист при проектировании форм

Представьте, что у вас есть книга, которая помогает вам создать отличный UX-дизайн форм ввода и выбора данных. В ней подробно перечислены все примеры и антипримеры в отношении каждого компонента формы. И вы больше никогда не столкнётесь с проблемой, какое дизайн-решение принять при работе с формами. Именно об этом книга “Dos and Don'ts for Form Input and Selection”.

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

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

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

Ссылка на книгу: https://uxmovement.gumroad.com/l/dodontform

Вот несколько примеров из книги.

Перевод статьи Dos and Don'ts for Form Input and Selection из блога UX Movement Newsletter

Как замотивировать пользователей заполнить длинную форму из 13 полей

2026-05-28T09:09:45.288Z

Эффективный способ заполнения формы

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

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

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

Однако согласно исследованию структура формы существенно влияет на то, будут ли пользователи её заполнять. Если вы связываете шаги или разделы формы через диалог с человеком, то он будет более склонен к тому, чтобы заполнить каждое поле (источник).

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

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

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

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

Человек на фотографии должен выглядеть привлекательно и профессионально, а также улыбаться. Заголовки должны звучать как диалог. В первом заголовке представителю следует назвать своё имя. Например, важно включить фразу: «Привет! Я — Мария».

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

В этот заголовок добавили слово «Интересно!», которое служит диалоговым переходом к тому, чтобы узнать местоположение пользователя.

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

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

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

Перевод статьи How to Make Users Fill Out the Longest 13 Field Form Inputs из блога UX Movement Newsletter

Почему кнопка «Посмотреть ещё» лучше пагинации

2026-05-20T07:45:04.845Z

Скажем «нет» пагинации

Легко ли пользователям просматривать контент на вашей странице? Если вы применяете пагинацию, то она замедляет и усложняет исследование сайта.

Пагинация — традиционный способ навигации и просмотра страниц. Однако большинство дизайнеров не знают о множестве UX-проблем, которые возникают при её использовании. Чтобы улучшить качество просмотра страниц, вместо пагинации отдавайте предпочтение кнопке «Посмотреть ещё».

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

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

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

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

У кнопки «Посмотреть ещё» нет таких UX-проблем. Её легко найти. Нажать на неё тоже просто. Кнопка расположена в нижней центральной части страницы, она широкая, а область нажатия у неё большая. Кроме того, кнопка одна, поэтому пользователям не приходится выбирать между вариантами, что снижает когнитивную нагрузку.

Вместо загрузки совершенно новой страницы для сохранения текущих элементов страницы используется AJAX*. В результате пользователь получает непрерывный поток нового контента без резких появлений свободного пространства и длительной загрузки.

*Примечание. AJAX — подход к построению интерактивных интерфейсов веб-приложений, который заключается в «фоновом» обмене данными браузера с веб-сервером.

Кнопка «Посмотреть ещё» — это не кнопка «Посмотреть всё», поэтому не нужно с её помощью загружать сразу весь контент. Вместо этого его следует отображать частями. Чтобы просмотреть следующую порцию элементов, пользователям нужно прокрутить страницу до самого низа и снова нажать на кнопку. Когда они дойдут до конца, сообщите им об этом в сообщении.

Если вы разместите сообщение над кнопкой «Посмотреть ещё», то сможете проинформировать пользователей о том, сколько элементов им осталось посмотреть. Например, можно написать: «Просмотрено 24 товара из 144». Так они будут понимать, насколько далеко прокрутили страницу.

Кроме того, можно предусмотреть кнопку «Вернуться к началу». Она возвращает пользователя в начало страницы. Если вы разместите её под кнопкой «Посмотреть ещё», пользователи смогут легко вернуться к первой порции контента, не прокручивая страницу вверх.

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

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

Перевод статьи Why You Should Never Split Text Field Inputs из блога UX Movement Newsletter

Более эффективный способ представления данных вместо формата «Поле: Значение»

2026-05-14T07:16:28.944Z

Как организовать данные с позиции визуального восприятия

Насколько хорошо вы представляете информацию пользователям? Если вы просто отображаете её в формате «Поле: Значение», то вы не создаёте для них приятный визуальный опыт. Вместо этого вы добавляете им работу, которая может привести к неправильному восприятию информации.

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

Разница между данными «Текущее местоположение» (“Current Location”) и «Пункт назначения» (“Destination”) ничтожна. Везде адреса отображены в одном и том же формате и находятся рядом друг с другом. Более того, между данными «Время отправления» (“Departure Time”) и «Время прибытия» (“Arrival Time”) разница также незначительна. Неудивительно, что пользователи часто неправильно воспринимают информацию.

Рассматривайте данные с позиции визуального восприятия

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

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

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

Этот дизайн содержит гораздо меньше текста, потому что в нём нет названий полей. Обратите внимание, что названия «Номер заказа» (“Order ID”), «Статус» (“Status”), «Текущее местоположение» (“Current Location”), «Пункт назначения» (“Destination”), «Имя клиента» (“Client Name”), «Время отправления» (”Departure Time”), «Время прибытия» (“Arrival Time”) и «Общее время в пути» (“Total Elapsed Time”) удалены. Они излишни. Поскольку их заменили на визуальные элементы, теперь они выполняют свою функцию.

Каждое значение, за исключением «Номера заказа» (“Order ID”), сопровождается визуальным элементом, который улучшает восприятие данных. Теперь вы больше не читаете текст, а обрабатываете информацию на более глубоком уровне, через визуальные элементы. Это не только приятно для глаз, но и для мозга.

Визуальные элементы динамичны, потому что они отражают обновленные данные. Статус меняется с «В пути» (“In Transit”) на «Доставлено» (“Delivered”). Вы также можете видеть, как «двигаются» стрелки времени и местоположения, и линии маршрута заполняются цветом.

Ниже есть ещё один пример формата «Поле: Значение». Как видите, здесь всего три значения, но информацию все равно трудно обработать. Однако, когда вы отображаете данные в визуальном формате, они становятся более лёгкими для восприятия.

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

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

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

Ваша цель — перевести часть «Поле» из формата «Поле: Значение» в визуальный формат. Когда пользователи могут обрабатывать значения данных без названий полей, это означает, что вы всё точно визуально отобразили.

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

Перевод статьи A Better Way to Display Data Than "Field: Value" из блога UX Movement Newsletter

Как упростить запутанное мегаменю из 65 пунктов

2026-04-29T10:06:44.686Z

Создайте более эффективную навигацию

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

Для наглядности, ниже вы видите мегаменю, которое содержит 8 категорий, включающих 65 пунктов. Попробуйте найти в нём пункт «Speakers» и обратите внимание, сколько времени это займёт.

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

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

Для этого существует шаблон дизайна под названием «меню со вкладками». Он позволяет скрывать неактуальные списки и пункты до тех пор, пока пользователь не щёлкнет по вкладке. Каждая вкладка представляет собой категорию, которая расположена горизонтально, а снизу находится список пунктов.

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

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

Решение об использовании иконок зависит от того, реальные ваши пункты или абстрактные. Легко подобрать иконки для меню «Electronics», потому что эти товары — реальные. Однако иногда могут встречаться более абстрактные вещи, поэтому используйте визуальные вкладки с иконками только тогда, когда есть такая возможность.

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

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

Вы также можете использовать это дополнительное пространство для навигации с помощью фильтров. Например, список фильтров «Shop by Brand» находится справа. Там пользователи могут выбирать камеры по названию бренда. Вместо того, чтобы переходить на страницу конкретного товара и выбирать фильтр, они могут сразу перейти на отфильтрованную страницу из меню.

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

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

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

Перевод статьи How to Simplify a Confusing 65 Item Mega Menu из блога UX Movement Newsletter

Лучшие практики UX-дизайна подсказок в полях формы

2026-04-20T14:04:56.593Z

Как правильно отображать текстовые подсказки

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

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

Эта статья решает четыре проблемы UX-дизайна подсказок:

Слишком много текста в подсказке
Воздействие на сообщения об ошибках
Воздействие на названия полей
Неправильное применение подсказки-заполнителя

Слишком много текста в подсказке

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

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

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

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

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

Воздействие на сообщения об ошибках

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

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

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

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

Воздействие на названия полей

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

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

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

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

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

Неправильное применение подсказки-заполнителя

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

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

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

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

Когда использовать текстовые подсказки

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

Используйте текст с подсказками, когда вам нужно:

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

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

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

Перевод статьи The Best UX Design for Form Field Help Text из блога UX Movement Newsletter

Как оптимизировать поле выбора со 147 вариантами

2026-04-13T07:06:12.489Z

Скажем «Нет» прокрутке в меню

Представьте, что вы заполняете форму и продвигаетесь вперёд. Но внезапно натыкаетесь на поле выбора с сотнями вариантов. Вам приходится прокручивать меню, чтобы найти и выбрать правильный.

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

Многие пользователи сталкиваются с подобной проблемой, когда видят длинные поля выбора. Будучи UX-дизайнером, вам следует сократить время и усилия, необходимые для выбора нужного варианта. Стандартное меню здесь не подойдёт.

Поиск в меню

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

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

В поле выбора «Отрасль» (Industry) доступно 147 вариантов. Ввод одной буквы сокращает список и отображает варианты, которые начинаются с этой буквы. Чем больше пользователь печатает, тем короче становится список. Обратите внимание, как ввод буквы «С» сократил список со 147 вариантов до 15. Если человек введёт слово «Компьютер» (Computer), список сократится до пяти вариантов, и необходимость в прокрутке и поиске отпадёт.

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

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

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

Режим по умолчанию

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

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

На мобильном устройстве при появлении фокуса клавиатура появится автоматически. Пользователь может скрыть её, нажав кнопку «Готово» (Done), чтобы выбрать вариант из меню. Тем не менее, поиск в меню должен всегда быть в приоритете, поскольку пользователь уже знает, что он ищет.

Когда люди вводят несуществующий запрос, нужно показать пустое состояние, чтобы они знали, что результаты не соответствуют их запросу. Достаточно будет написать в сообщении меню «Нет результатов. Введите новый запрос» (No results. Enter a new search).

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

Чтобы оптимизировать любое объёмное поле выбора, внедрите функцию поиска в меню. Неважно, сколько у вас вариантов — 100 или 1000. Если пользователь знает, что он ищет, поиск варианта будет быстрее и удобнее прокрутки списка.

Перевод статьи Why You Should Never Split Text Field Inputs из блога UX Movement Newsletter