UI отвечает за то, как сайт выглядит. Это палитра, форма и состояния кнопок, шрифты и размеры заголовков, расстояния между блоками, иконки, поля форм. Всё, что человек видит глазами и трогает курсором или пальцем, — это работа UI-дизайнера.
Частая путаница: UI и UX — не одно и то же. UX — это логика и путь, по которому человек идёт к цели; UI — внешний вид этого пути. Можно нарисовать красивый экран, по которому невозможно дойти до покупки, а можно сделать логичный, но визуально отталкивающий. Сильный продукт держит обе стороны: понятный сценарий и аккуратную картинку, которая не мешает, а ведёт взгляд к нужной кнопке.
Цвета, кнопки, шрифты и отступы интерфейса.
UI — картинка, UX — логика и сценарий.
Аккуратный вид ведёт взгляд к целевой кнопке.
Кнопка «Купить» стала контрастнее, шрифт цены — крупнее, поля формы — выше: тот же сценарий, но за счёт UX-дизайна и чистого UI заявок стало заметно больше.
С точки зрения SEO интерфейс влияет на ранжирование косвенно, но измеримо. Яндекс через поведенческие факторы ловит, как пользователь ведёт себя на странице: если кнопки мелкие, контраст слабый, а форма путает, растёт процент отказов в Метрике и падает глубина просмотра — для алгоритма это сигнал, что страница не отвечает запросу. Google с 2021 года прямо учитывает Core Web Vitals, и тяжёлый UI бьёт по метрикам: несжатые шрифты тормозят LCP, а кнопка, которая «прыгает» при дозагрузке, ломает CLS. Аккуратный юзабилити-слой здесь не косметика, а часть технического SEO.
Типичная ошибка — гнаться за модной картинкой в ущерб читаемости. Серый текст #999 на белом фоне, шрифт 13px, кнопки без явного hover-состояния выглядят «дорого» на скриншоте, но на телефоне с этого экрана уходят. Проверять UI стоит не на ретина-мониторе дизайнера, а в Вебвизоре Метрики: видно, где люди кликают мимо, где переспрашивают и где бросают форму. Сильная связка — это когда UX-сценарий и визуал не спорят, а ведут взгляд к целевому действию на лендинге.
На карточке услуги цену вынесли в крупный блок 28px, кнопку «Оставить заявку» перекрасили из серой в терракотовую с тенью, а поля формы увеличили до 48px высоты под палец. Скорость не пострадала, сценарий тот же — но в Вебвизоре доскролл до формы вырос с 41% до 67%, а конверсия в заявку — с 2,1% до 3,4% за две недели.