Для аудитории 55 плюс на лендинге меняют шесть вещей: шрифт от 18 пикселей, контраст текста к фону не ниже 4,5 к 1, кнопки от 44 пикселей, подписи над полями формы вместо плейсхолдеров, номер телефона текстом в шапке и отказ от каруселей, автовидео и всплывающих окон. Все правки одновременно улучшают страницу и для более молодых посетителей.
Почему стандартный дизайн теряет возрастных посетителей
После 45 лет хрусталик глаза теряет эластичность, и мелкий текст на экране превращается в работу. К 60 годам добавляется сниженная чувствительность к контрасту: светло-серый текст на белом фоне, который дизайнеру кажется аккуратным, посетитель старше 55 различает с трудом или не различает вовсе. Читаемость сайта для этой аудитории не вопрос вкуса. Это физиология.
При этом аудитория 55 плюс платит. Стоматология, установка окон, санатории, юридические услуги, ремонт техники, загородное строительство: в моей практике в этих нишах люди старше 55 дают от трети заявок. Доступность сайта здесь превращается в деньги напрямую. Если человек не смог прочитать цену или попасть пальцем в кнопку, он ушёл к конкуренту, у которого смог.
Ниже разбор по элементам: размер шрифта, контраст текста, кнопки, формы и формулировки. Хорошая новость: большинство правок делается за день и не требует переделывать страницу целиком.
Шрифт: 18 пикселей это не крупно, это норма
Браузерный стандарт основного текста 16 пикселей. Для страницы, куда приходят люди старше 55, я ставлю 18-20 пикселей на основной текст и не опускаюсь ниже 16 даже в подписях и примечаниях. Мелкий кегль в дисклеймере эта аудитория тоже читает, причём внимательнее всего: именно там ищут подвох.
Насыщенность и начертание
Тонкие начертания с weight 300 и легче на обычных экранах рассыпаются на бледные штрихи. Основной текст набирайте начертанием 400, акценты делайте жирным, а не цветом. Курсив для длинных фрагментов не подходит: наклонные буквы сливаются между собой.
Межстрочный интервал и длина строки
Интервал 1,5 от кегля, строка 60-75 знаков. Строка во всю ширину монитора заставляет глаз искать начало следующей, и возрастной читатель теряется на этом чаще молодого. Подробнее про размеры и интервалы есть в статье Типография для лендинга.
Контраст: серый текст красив дизайнеру и невидим читателю
Ориентир простой: контраст основного текста к фону не ниже 4,5 к 1. Это порог из стандарта WCAG, проверяется за минуту в любом онлайн-чекере контраста. Любимый дизайнерами серый #999999 на белом до порога не дотягивает. Тёмно-серый #333333 проходит с запасом и при этом выглядит мягче чистого чёрного.
Отдельная беда - текст поверх фотографий. Заголовок на фоне неба читается, пока небо однотонное; на пёстрой картинке половина букв пропадает. Если фото на первом экране нужно, кладите под текст сплошную тёмную подложку, а не полупрозрачный градиент на треть экрана.
Проверьте и цветные акценты. Жёлтый или салатовый текст на белом не читается ни в каком возрасте, а после 55 добавляются сложности с различением близких оттенков синего и фиолетового: посещённая ссылка и обычный текст сливаются. Цвет как единственный сигнал ненадёжен, ему нужен дублёр: подчёркивание, жирность, рамка.
Как проверить контраст, размеры и навигацию всей страницы разом, я разбирал в статье Доступность лендинга.
Кнопки: попасть пальцем с первого раза
Ориентир для зоны нажатия 44 на 44 пикселя, между соседними кнопками зазор. С возрастом точность движений снижается, и кнопка-иконка размером со спичечную головку собирает промахи: человек нажимает, попадает мимо, нажимает снова и закрывает сайт.
Ссылки в тексте подчёркивайте. Игра в угадывание кликабельного по оттенку синего работает против вас: часть посетителей просто не поймёт, что цена по клику разворачивается в подробную смету.
На мобильной версии закрепите кнопку звонка внизу экрана. До неё палец дотягивается без перехвата телефона, и посетителю не приходится листать страницу обратно к шапке. Следите только, чтобы закреплённая полоса не перекрывала текст и кнопку отправки формы: перекрытый контент для возрастного посетителя всё равно что отсутствующий.
Формы: подписи над полями, а не внутри
Плейсхолдер, который исчезает при вводе, для возрастного посетителя ловушка. Человек отвлёкся, посмотрел на поле, а там семь цифр без объяснения: это телефон или код из СМС? Подпись ставьте над полем, и пусть она остаётся на месте всё время.
Полей минимум: имя и телефон. Каждое дополнительное поле отсекает часть заявок в любой аудитории, а в возрастной особенно: длинная форма похожа на анкету в госучреждении и вызывает желание отложить на потом. Сколько полей реально нужно, я считал в статье Формы заявок на лендинге.
Ошибки показывайте словами рядом с полем: не красная рамка без объяснений, а фраза "в номере не хватает одной цифры". Красную рамку без текста понимает тот, кто заполняет формы каждый день. Ваш посетитель не из таких.
Почему телефон важнее формы для аудитории 55 плюс?
Люди старше 55 охотнее звонят, чем переписываются. Форма и мессенджеры пусть остаются, но номер телефона должен быть текстом в шапке, крупно и кликабельно. Иконка трубки без цифр не работает: посетитель хочет увидеть номер, иногда даже записать его на бумагу и позвонить с городского.
Рядом с номером укажите часы, когда вы берёте трубку. Для этой аудитории неотвеченный звонок значит "фирма не работает", а не "перезвонят позже".
Слова: без англицизмов и панибратства
Лид-магнит, апгрейд, прайс, кейсы: каждое такое слово часть посетителей просто не переведёт. Пишите по-русски: подарок за заявку, обновление, цены, примеры работ. Это не упрощение текста, а перевод на язык читателя.
Обращение строго на "вы". Панибратские призывы в духе "залетай за скидкой" в этой аудитории читаются как неуважение. Цену пишите цифрами и крупно, а если она начинается с "от", сразу объясняйте, от чего зависит итог.
Что убрать со страницы для возрастной аудитории?
Часть привычных приёмов для возрастной аудитории вредна. Убирайте без сожалений:
- карусели и слайдеры: контент, который двигается сам, не успевают прочитать;
- анимации появления текста при скролле: блок, возникающий с задержкой, воспринимается как пустое место;
- видео с автозапуском и звуком;
- поп-апы, всплывающие через 10 секунд: маленький крестик закрытия это отдельное испытание;
- таймеры обратного отсчёта: давление вызывает недоверие, а не покупку.
Чек-лист: частая практика против нужной
| Элемент | Как делают обычно | Для аудитории 55 плюс |
|---|---|---|
| Основной текст | 14-16 пикселей, серый #999999 | 18-20 пикселей, #333333 и темнее |
| Кнопки | иконки, мелкие надписи | от 44 пикселей высотой, надпись словами |
| Телефон | иконка трубки в углу | номер текстом в шапке, кликабельный |
| Подписи полей | плейсхолдер, исчезает при вводе | подпись над полем, видна всегда |
| Ссылки | выделены только цветом | подчёркнуты |
| Анимации | появление блоков на скролле | контент виден сразу, без движения |
Как проверить без бюджета
Тест с увеличенным шрифтом
Откройте лендинг на телефоне, в настройках системы выставьте крупный шрифт и масштаб 125 процентов. Значительная часть возрастных пользователей живёт именно с такими настройками. Если вёрстка поехала, кнопка налезла на текст или форма обрезалась, посетитель этого не простит.
Тест на родителях
Дайте страницу человеку 60 лет и попросите найти цену и отправить заявку. Молча, без подсказок, со стороны. Пять минут наблюдения заменяют неделю споров о дизайне: вы своими глазами увидите, где палец промахивается и какой блок пролистали как рекламу.
Есть и совсем быстрый способ: отойдите от экрана на два шага или прищурьтесь. Что осталось различимым, то и увидит посетитель со сниженным зрением. Заголовок первого экрана, цена и кнопка обязаны переживать эту проверку. Если из трёх элементов выжил один, вы уже знаете, с чего начинать правки.
Лендинг, который читается в 60 лет, отлично читается и в 30. Обратное неверно.
Частые вопросы
Как понять, что возрастные посетители уходят из-за дизайна, а не из-за цены?
Смотрите записи в Вебвизоре. Если посетители закрывают страницу в первые секунды на одном и том же экране, ещё не дойдя до цены, дело скорее в тексте или кнопке, которые не читаются или не находятся. Уход уже после блока с ценой - другой вопрос, не про дизайн.
Как подписывать поля формы для этой аудитории?
Подпись держите над полем и не убирайте её при вводе: в отличие от плейсхолдера, она не пропадает и не заставляет вспоминать, что за поле перед глазами. Для номера телефона можно добавить формат прямо в подписи, например "Телефон (пример: +7 921 123-45-67)".
Что делать, если аудитория лендинга смешанная по возрасту?
Ориентируйтесь на менее удобный сценарий чтения, а не на средний возраст аудитории. Крупный шрифт, высокий контраст и кнопки от 44 пикселей не мешают молодым посетителям и заметно облегчают жизнь тем, кому за 55. Делать две версии одной страницы ради этого не нужно.
Сколько стоит адаптировать готовый лендинг под аудиторию 55 плюс?
Если структура и тексты уже готовы, адаптация обычно ограничивается вёрсткой: увеличить шрифт, поднять контраст, укрупнить кнопки, вынести телефон в шапку текстом. Такая правка занимает от нескольких часов до одного дня и стоит заметно дешевле, чем разработка лендинга с нуля.
Коротко
Дизайн под аудиторию 55 плюс это не отдельный стиль, а гигиена: текст от 18 пикселей, контраст от 4,5 к 1, кнопки от 44 пикселей, подписи над полями, телефон текстом в шапке. Из приёмов убрать карусели, анимации и поп-апы. Из текста убрать англицизмы и панибратство.
Ни одна из этих правок не ухудшает страницу для молодых. Поэтому если возрастные клиенты дают хотя бы четверть выручки, делайте по этим правилам весь лендинг, а не отдельную версию. Проверка стоит один вечер: увеличенный шрифт на телефоне и тест на родителях покажут больше, чем любой аудит.
