Персонализация и адаптивность интерфейса: что работает на практике

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

Адаптивность и персонализация — не одно и то же

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

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

Уровни персонализации: от настроек до рекомендаций

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

1. Явные настройки пользователя. Человек сам выбирает город, валюту, язык, тему оформления, состав уведомлений. Это самый предсказуемый уровень: пользователь понимает, почему видит именно это, и может передумать.
2. Продолжение собственных действий. Незавершенный заказ, последний просмотренный документ, история поиска, повтор прошлой покупки. Данные уже есть, объяснение очевидно, ценность высокая.
3. Сегменты. Новый посетитель против вернувшегося, покупатель против читателя, компания против частного лица. Правил немного, поведение системы легко проверить.
4. Рекомендации. Подбор товаров и материалов по поведению похожих пользователей. Требует объема данных и постоянного контроля: на малом трафике такая система показывает случайное и подрывает доверие.

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

Какие данные нужны и что говорит закон

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

• Согласие. Отслеживание поведения и передача данных в аналитические сервисы требуют согласия, полученного заранее, а не отметки, проставленной за пользователя.
• Минимизация. Собираем только то, что реально используется в конкретном сценарии. Данные «на будущее» — это риск и расходы без пользы.
• Понятная политика. Человек должен видеть, что собирается, зачем и на какой срок, и иметь возможность отозвать согласие.
• Хранение. Персональные данные граждан России должны храниться в базах на территории России; передача в зарубежные сервисы аналитики — отдельный вопрос, который решается до запуска, а не после.

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

Где персонализация мешает

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

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

Адаптивность как техника

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

• Размер зоны нажатия на сенсорных экранах — не меньше 44-48 пикселей, с зазором между соседними элементами.
• Проверяем ландшафтную ориентацию и узкое окно на десктопе: браузер редко открыт во весь экран.
• Управление с клавиатуры должно работать целиком: видимый фокус, логичный порядок обхода, возможность закрыть модальное окно клавишей.
• Текст не ломается при увеличении системного шрифта и при масштабировании страницы до 200 процентов.
• Медиазапросы учитывают не только ширину, но и способ ввода: на устройстве без точного указателя всплывающие подсказки по наведению просто недоступны.

Системные настройки, темная тема и доступность

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

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

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

Что уместно почти всегда

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

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

Приёмы, которые вызывают отторжение

Граница проходит там, где человек перестаёт понимать, откуда сайт знает о нём то, что знает.

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

Персонализация и кеширование

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

1. Делим страницу на общую часть и персональную: общая кешируется, персональная подгружается отдельным запросом.
2. Проверяем, что страница осмысленно выглядит до загрузки персональной части, без прыжков вёрстки.
3. Следим, чтобы поисковые роботы видели общий вариант и персонализация не мешала индексации.
4. Проверяем поведение при отключённых куках и в режиме инкогнито.

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

С чего начать на действующем сайте

1. Сохранять выбор города и способ отображения списка.
2. Добавить в кабинет историю заказов и повтор заказа.
3. Показать индивидуальные условия там, где они есть по договору.
4. Собрать блок «вы смотрели» с подписью и кнопкой очистки.
5. Только после этого думать о рекомендациях и подборках.

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

Как проверять, что это работает

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

1. Формулируем гипотезу в терминах поведения: «вернувшийся покупатель быстрее находит повтор заказа», а не «сайт станет удобнее».
2. Сравниваем с контрольной группой, которой персонализация не показывается, — иначе рост легко перепутать с сезонностью или рекламой.
3. Смотрим не только на конверсию, но и на побочные эффекты: доля людей, ушедших в общий каталог, количество обращений в поддержку, отказы на первом экране.
4. Проверяем сценарий нового пользователя, о котором система ничего не знает: у него интерфейс должен оставаться полноценным, а не пустым.
5. Держим возможность быстро выключить механику целиком, если метрики просели.

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

Если интерфейс уже мешает продажам, разбираем его по шагам: проектирование интерфейсов с прототипом и тестированием.