UXXATA

Система размеров и отступов для более быстрого UI-дизайна

2026-05-13T17:39:55.758Z

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

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

Например, при проектировании карточки — каких размеров должен быть контейнер? Какими должны быть ширина и высота кнопок? И какими должны быть отступы между всеми элементами внутри карточки?

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

Ответ — создать собственную систему размеров и отступов.

Построение системы

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

Начни с разумного базового значения, а затем построй шкалу, используя делители и кратные этого значения. Хорошее базовое значение — 12px, потому что это составное число с большим количеством делителей, чем у любого меньшего числа (1, 2, 3, 4, 6, 12). Именно поэтому оно лежит в основе многих систем — времени (12 часов в сутках, 12 месяцев в году) и измерений (12 дюймов в футе, дюжина).

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

Например, относительная разница между аватарами 48px и 60px составляет 25%. А относительная разница между шириной карточки 480px и 504px — всего 5%. Это значит, что разница в 5% в пять раз менее значима, чем увеличение с 48px до 60px.

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

Шкала

Вся шкала обладает гармонией и ритмом, которые можно воспринять только математически. В нижней части шкалы множитель увеличивается на 0,5 — от 6px до 36px. Далее множитель растёт на 1 — вплоть до 120px.

От 120px до 240px рост множителя составляет 2. В верхней части шкалы рост множителя увеличивается до 5. Обрати внимание, как множитель постепенно нарастает по мере перехода от низких значений к средним и высоким.

Вот как выглядит полная шкала. Она заканчивается на 780px, но при необходимости может быть расширена. Рост множителя в итоге увеличится с 5 до 10 и далее.

Применение системы

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

Эта карточка использует значения размеров и отступов из системы. Всё выглядит хорошо, кроме одного — карточка слишком большая. Вместо того чтобы переопределять значения для каждого элемента, достаточно просто выбрать следующее значение вниз по шкале от исходной точки. Контейнер уменьшается с 480×360px до 420×300px. Аватар — с 60×60px до 48×48px. Блоки с данными — с 192×96px до 168×72px. Ширина кнопок действий тоже уменьшается на один шаг. Кнопки-бейджи остаются прежними, так как занимают минимум пространства.

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

Поиск оптимального диапазона

Следующий пример — карточка товара для интернет-магазина. Начни с определения необходимых элементов: контейнер карточки, разделительная линия, блок с названием, выбор цвета, выбор размера и кнопка «Добавить в корзину».

Начни с размера контейнера, соответствующего изображению товара — они будут скреплены вместе. Затем выбери ширину разделительной линии, которая оставит достаточные поля. Поскольку ширина контейнера — 480px, достаточно опуститься на один уровень до 420px. Это даёт поля в 30px — вполне достаточно.

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

После проверки разных значений оптимальный диапазон на шкале — от 30px до 48px: 24px слишком мало, а 60px слишком много. Таким образом, идеальные размеры для рассмотрения — 30px, 36px и 48px. На примере хорошо видно, насколько это гармонично.

Следующий шаг — расстановка элементов с оптимальными отступами. Идеальный диапазон отступов — от 18px до 30px: крайние варианты либо слишком малы, либо слишком велики. Если один из крайних вариантов выглядит лучше, проведи ещё одно сравнение, используя его как «среднее» значение — чтобы убедиться, что лучшего варианта нет.

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

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

60/30/10: цветовое соотношение для исправления некрасивых интерфейсов

2026-05-13T17:17:37.598Z

Как балансировать цвета в интерфейсе

Твой интерфейс некрасив? К сожалению, это так, если в нём нет соотношения цветов 60/30/10. Без этого баланса пользователи не воспримут приложение как интуитивное. Мало того — ты не сможешь обосновать высокую цену за него. Некрасивые интерфейсы в итоге обходятся дороже, чем кажется.

Использование основного цвета везде

Например, это приложение имеет очень слабую эстетику, потому что не следует соотношению 60/30/10:

60% — нейтральные цвета для пространства
30% — основной цвет для идентичности
10% — акцентный цвет для действий

Основной цвет интерфейса — тёмно-синий, и он должен занимать 30% дизайна. Однако в этом приложении он занимает 60% — вдвое больше нормы. Нейтральные цвета составляют лишь 40% интерфейса, тогда как должны занимать 60%. Вдобавок в дизайне нет акцентного цвета.

Большинство дизайнеров склонны злоупотреблять основным цветом, стремясь создать сильную фирменную идентичность. Однако для этого достаточно применить его к 30% дизайна. Любое превышение может на самом деле ослабить фирменную идентичность — ты разбавляешь сигнал и превращаешь его в фоновый шум. Иными словами, переполнение интерфейса основным цветом разрушает соотношение сигнала к шуму. Цвет воспринимается как важный только тогда, когда он контрастирует с окружением. Эффект Ресторфф подтверждает эту идею: мозг автоматически запоминает элементы, которые визуально выделяются на фоне окружения.

Использование акцентного цвета как декорации

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

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

Слишком много нейтральных цветов

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

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

Идеальное цветовое соотношение (60/30/10)

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

Обрати внимание, как 10% акцентного цвета выделяют основную кнопку призыва к действию и индикаторы состояния в боковом меню и вкладках. Акцентный цвет больше не используется как декорация — он служит конкретной цели: направлять пользователей к действиям и взаимодействиям.

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

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

Почему стоит отображать тултипы в тёмном режиме

2026-03-13T10:56:45.535Z

Повышаем удобство использования всплывающих подсказок

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

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

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

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

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

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

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

Встроенные карточки: лучшее отображение данных без модальных окон

2026-01-22T11:37:07.981Z

Лучший способ управления историей версий

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

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

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

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

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

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

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

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

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

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

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

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

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

Путь к «чистому» интерфейсу через закон сниженого акцента.

2025-12-01T10:35:55.903Z

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

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

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

Закон снижения акцента

Чтобы самый важный элемент выделялся, всё остальное должно отходить на второй план.

В данном случае приоритет №1 — текстовые метки. Если пользователь не может их прочитать, он не нажмет на кнопку, и она станет бесполезной. Чтобы переработать кнопки, начните с текста и уберите всё остальное: никакой формы кнопки, рамок или цветов.

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

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

Кроме того, примените более тяжёлое начертание шрифта, например medium или semibold, чтобы текст сильнее выступал на передний план. Bold иногда выглядит слишком тяжелым, поэтому важно найти правильный баланс.

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

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

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

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

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

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

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

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

Заключение

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

Чистый UI-дизайн не минималистичен ради эстетики. Он минималистичен потому, что убирает всё, что мешает пользователю достичь своей цели. Следуйте закону де-акцентирования, и вы будете создавать интерфейсы, которые приятно видеть и удобно использовать.

Почему формы в стиле Mad Libs привлекают больше лидов?

2025-10-16T11:12:50.598Z

Более эффективный дизайн для сбора заявок

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

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

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

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

Вовлеченность ведет к более высоким конверсиям

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

В одном тесте зафиксировали рост конверсии на 25%, что демонстрирует: такие изменения в дизайне могут напрямую привести к увеличению числа лидов.

И традиционные, и Mad Libs-формы собирают одни и те же данные, но восприятие усилий при заполнении влияет на результат. Форма в стиле Mad Libs кажется короче, потому что пользователи читают её как историю, а не как таблицу. Представляя поля ввода в более дружелюбном для восприятия формате, вы снижаете сопротивление пользователей к завершению формы.

Дизайн формы в стиле Mad Libs

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

Можно использовать стандартные поля ввода, но тогда может возникнуть визуальное несоответствие между текстом Mad Libs и самими полями. В результате получится большой абзац текста рядом с крошечным шрифтом в поле ввода. Чтобы создать единый визуальный язык, стоит рассмотреть вариант с подчеркнутыми полями. Такие поля не имеют границ и выглядят как часть текста, создавая ощущение естественного, “живого” повествования.

Вот пример Mad Libs-формы “в дикой природе”.

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

Как ИИ изменяет поисковое поведение

2025-08-28T10:12:05.643Z

Резюме: Наше исследование показывает, что генеративный ИИ переосмысляет поиск, но давние привычки сохраняются. Многие пользователи по-прежнему по умолчанию используют Google, что дает Gemini шанс побороться.

Генеративный ИИ (genAI) переосмысливает то, как люди ищут информацию. Каждый, кто наблюдает падение просмотров своего контента, сейчас на себе ощущает это воздействие. Но что стоит за этим сдвигом? Скорость перемен впечатляет, учитывая, насколько глубоко могут быть укоренены привычки поиска информации.

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

В этой статье:

Привычки поиска трудно изменить
ИИ меняет привычки поиска информации
ИИ не устраняет необходимость в поиске
У Gemini и ChatGPT есть конкурентное преимущество: привычность
Меняющийся ландшафт поиска информации
Что будет дальше
Об исследовании

Привычки поиска трудно сломать

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

Это отчасти объясняет гигантскую долю Google на рынке поисковых систем. На протяжении лет многие участники говорили нам, что им даже в голову не приходило рассматривать Bing или другие альтернативы - просто потому, что они знакомы с Google и знают, что он работает достаточно хорошо для них. В нашем исследовании несколько участников отмечали свою склонность опираться на то, к чему они уже привыкли.

«Я всегда начинаю с Google. Он знаком. Он “там”. Я так делаю уже очень давно».

«У меня это всегда Google. Это то место, с которого я всегда начинаю; моя поисковая система по умолчанию».

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

«В какой-то момент я использовал браузер Google Chrome. У него есть настройка по умолчанию, которая перенаправляет меня в Google. Так что по умолчанию я просто начинаю с google.com. Думаю, это основная причина, по которой я держусь этого очень долго».

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

«Не знаю, почему я всегда пропускаю первые результаты. Все, где написано “спонсировано”… я обычно перехожу к одному из верхних результатов, который не спонсируется».

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

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

ИИ меняет привычки поиска информации

Ценность genAI в поиске информации достаточно велика, чтобы изменить эти укоренившиеся привычки. Несколько участников осознавали, что их собственное поведение при поиске информации стало меняться с тех пор, как они начали экспериментировать с инструментами ИИ.

«О, я всегда начинаю с Google. Я никогда не использую другие поисковые системы, но в последнее время я также подключаю ChatGPT».

Генеративный ИИ предлагает существенные ярлыки вокруг зачастую утомительной и затратной по времени работы, требуемой для изучения темы, включая:

Определение и формулирование информационной потребности
Преодоление пробелов в знаниях и проблем поиска по ключевым словам
Взвешивание и выбор достоверных источников
Пролистывание огромных массивов информации
Сканирование длинных страниц текста
Сопоставление противоречивых точек зрения из разных источников
Синтез и хранение информации (в уме или в заметке)

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

AI-обзоры: первая точка контакта для начинающих пользователей ИИ

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

AI-обзоры появляются вверху страниц результатов по многим запросам в веб-поисковиках. Они работают на базе LLM и пытаются быстро определить ключевые слова или ответить на вопросы.

Страница результатов Google по запросу «dragonfruit» с AI Overview. Обзор описывает питахайю как тропический фрукт с ярко-розовой или желтой кожурой и белой или красной мякотью, усыпанной черными семенами. Включены детали о кожуре, мякоти, разновидностях, вкусе и текстуре. В правой панели показаны результаты поиска, включая сниппет из Википедии, статью Healthline и миниатюру видео на YouTube с изображением разрезанного плода питахайи. Пример AI-обзора в верхней части страницы результатов поиска Google.

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

(Эта функция представляет серьезную проблему для всех производителей контента - в том числе для NN/G.)

Недавнее количественное исследование Pew Research проанализировало этот эффект - они обнаружили, что пользователи Google, столкнувшиеся с AI-обзором, были существенно менее склонны кликать по ссылкам результатов.

GenAI быстро впечатляет новых пользователей

Но у AI-обзоров ограниченная полезность - они лучше подходят для быстрых определений и фактов (иногда неверных фактов), чем для сложных задач поиска информации, включающих синтез. В таких ситуациях более полезными были AI-чат-боты (ChatGPT, Gemini, Google AI Mode, Perplexity и др.). Однако такой сценарий использования ИИ очевиден не для всех.

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

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

Покупая футбольные ворота (soccer для американцев) для своего 11-летнего сына, он использовал поиск Google, чтобы найти размеры. AI-обзор любезно предоставил их.

Один участник посмотрел этот AI-обзор, чтобы перепроверить, какого размера должны быть стандартные футбольные ворота. «Я просто посмотрел этот AI-обзор», - сказал он. - «Он всплывает довольно часто, когда я ищу».

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

Для следующей задачи (диагностика проблемы с водопроводом у него дома) мы направили участника к Gemini. Это была его первая встреча с Gemini и первый опыт использования ИИ-чата для поиска информации. Сначала ему было трудно точно сформулировать свою проблему, но в итоге он остался доволен полученными рекомендациями.

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

Скриншот ответа Gemini с инструкциями по сантехнике под заголовком «Метод 1: Подтяжка ослабленных соединений (очень распространенное исправление)». Раздел включает список из пяти шагов: найти место протечки, очистить участок, осмотреть соединение, подтянуть вручную и использовать гаечный ключ/разводной ключ. Дополнительные советы упоминают использование фонарика и жесткой проволоки или сантехнического троса. В своем первом опыте использования genAI-чата для поиска информации один участник счел его чрезвычайно полезным для исследования решений сантехнической проблемы.

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

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

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

ИИ не устраняет необходимость в поиске

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

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

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

У Gemini и ChatGPT есть конкурентное преимущество: привычность

Участники нашего исследования, уже использующие ИИ для поиска информации, сообщили, что больше всего знакомы с ChatGPT и Gemini. На рынке поиска информации, движимом привычками, эта знакомость - огромное конкурентное преимущество. В этом и предыдущих исследованиях по использованию ИИ некоторые участники называли ChatGPT просто «Чат», что напоминает, как Google стал глаголом («искать» стало «гуглить», вне зависимости от поисковика). Лингвистические сдвиги могут предвосхищать поведенческие.

ChatGPT был первым современным LLM-чатом на сцене. Он захватил внимание публики и в настоящее время доминирует на рынке ИИ-чатов. Но ассоциация и интеграция Gemini с традиционным поиском Google дает ему неплохой шанс догнать.

Один из наиболее опытных в ИИ участников объяснил нам, почему он полагался на Gemini, несмотря на то, что пробовал ChatGPT, Grok и Copilot.

«Когда люди думают об ИИ, чаще всего они говорят о ChatGPT. Я услышал о ChatGPT, попробовал и был впечатлен. Но затем я услышал о похожих платформах от разных компаний. Я и так использую Google для множества вещей, поэтому я начал делать кое-что в Bard. Потом это превратилось в Gemini. Конечно, есть и другие, но я просто продолжил использовать этот, потому что я его уже давно использую.»

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

Меняющийся ландшафт поиска информации

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

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

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

Что будет дальше

В следующих статьях этой серии мы рассмотрим темы и открытые вопросы, поднятые этим исследованием, включая:

Очень ограниченную «ИИ-грамотность» потребителей (в том, что ИИ может делать, как он работает и как им пользоваться)
Когда пользователи склонны обращаться к genAI вместо традиционного поиска и как они используют оба в тандеме
Формирование новых ментальных моделей и проблемы доверия к ИИ
Проблемы удобства использования «гибридных» интерфейсов «поиск-с-ИИ», таких как AI Mode в Google и Perplexity
Как genAI помогает решать проблемы пробелов в знаниях и поиска по ключевым словам

Об исследовании

Мы провели юзабилити-тестирование с 9 участниками из Северной Америки и Великобритании. Мы набирали с равным смешением демографических и социально-экономических характеристик и уровней предыдущего опыта с ИИ. Ни один из наших участников не работал в области дизайна или технологий.

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

Страница результатов Google по запросу «Copenhagen» с AI Overview вверху. В ней Копенгаген описан как столица Дании, известная каналами, яркой архитектурой и историческими достопримечательностями. Выделенные блоки подчеркивают элементы, связанные с ИИ, на странице: вкладка AI Mode, AI-обзор и сгенерированные ИИ ответы в разделе «Люди также спрашивают». Современные страницы результатов поисковых систем заполнены контентом, сгенерированным ИИ, особенно у Google.

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

Участники планировали путешествия, искали рестораны, изучали DIY-проекты, исследовали Гражданскую войну в США, изучали микроструктуры мозга и многое другое. Некоторые участники имели значительный предыдущий опыт использования инструментов genAI и выбирали их. У других был очень ограниченный предыдущий опыт с genAI, и они выбирали традиционные методы поиска. Этих участников впоследствии направляли к инструменту ИИ, чтобы мы могли собрать их первые впечатления (после фиксации того, что это не было их естественным выбором).

Прогрессивное раскрытие: Искусство вовремя убирать шум

2025-08-28T09:48:17.715Z

Перевод статьи от https://uxmovement.com/

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

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

1. Чекбоксы с условием

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

2. Аккордеон для обзора

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

3. Опции для продвинутых

Продвинутые пользователи — особая каста. Их потребности глубже, их знания шире, им хочется кастомизировать каждый уголок интерфейса. Но для большинства стандартных настроек более чем достаточно.
Не засоряйте основной экран настройками для гиков. Спрячьте их под discreet-кнопкой вроде «Дополнительные опции» или «Расширенные настройки». Это сохранит чистоту интерфейса для новичков и даст власть экспертам.

4. Контекстная помощь (служба заботы)

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

Фокус — это всё

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

Как упростить большие меню с помощью сеток в стиле бенто-бокса

2025-08-18T10:10:49.785Z

Улучшите восприятие и распределение элементов

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

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

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

Меню «Products» (Продукты) у Oracle огромное. Чтобы превратить его в сетку в стиле бенто-бокса, сначала нужно определить размер каждого списка, перечислив все элементы, исключив их подэлементы. При таком подходе получается три списка: два маленьких и один большой.

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

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

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

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

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

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

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

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

Вот пример длинного блока, созданного из двух маленьких блоков и отступа.

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

Как упростить сложную таблицу с тарифами

2025-07-31T14:11:24.657Z

Дизайн тарифных планов, который действительно продаёт

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

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

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

Основы

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

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

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

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

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

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

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

Годовые скидки

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

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

Самый популярный тариф

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

Анатомия UI

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