Дизайн — статьи о сайтах
Цветы часто заказывают в спешке: до встречи, вечером перед днём рождения или с телефона в транспорте. Первый экран главной страницы должен за несколько секунд ответить на три вопроса: что здесь продают, доставят ли по моему адресу и к какому букету перейти. Ниже разбираем, из чего собрать такой экран и что с него лучше убрать.
Какие вопросы у посетителя возникают в первые секунды
Человек, пришедший из поиска или по ссылке в мессенджере, не изучает бренд. Он проверяет, подходит ли вам его ситуация. Обычно ему нужно понять:
- есть ли доставка в его район и когда она возможна;
- можно ли выбрать букет по поводу или по бюджету;
- совпадёт ли букет с тем, что на фото;
- как быстро связаться с живым человеком, если что-то непонятно.
Если ответов нет на первом экране, посетитель идёт искать их в меню или уходит к конкуренту, у которого они есть.
Что обязательно разместить на первом экране
Для цветочного магазина достаточно пяти элементов.
- Понятный заголовок. Он называет товар и условие, например «Букеты с доставкой по городу». Абстрактные лозунги про эмоции и красоту ничего не сообщают.
- Главная кнопка. «Выбрать букет» ведёт в каталог или в подборку под повод. Для второй кнопки подойдёт «Написать в мессенджер».
- Строка с условиями. В ней указаны срок доставки, время приёма заказов на сегодня и возможность самовывоза с адресом. Пишите только то, что магазин действительно выполняет в обычный день.
- Быстрый выбор по поводу. Это несколько ссылок: «День рождения», «Свадьба», «Просто так», «Соболезнования». Повод для многих покупателей важнее названия цветка.
- Реальные фото. Используйте снимки букетов из вашего ассортимента, а не абстрактные стоковые композиции, которых нет в каталоге.
Условный пример: как может выглядеть экран
Возьмём вымышленный магазин «Цветочная лавка». Это не реальный проект, а схема для ориентира. Сверху в шапке видны название, телефон, значки мессенджеров и корзина. Меню короткое: «Каталог», «Доставка», «Контакты».
В левой части экрана стоит заголовок «Букеты с доставкой по городу», под ним подзаголовок «Собираем в день заказа. Фото готового букета пришлём перед отправкой». Подзаголовок работает только в том случае, если магазин действительно так делает. Ниже расположены две кнопки: «Выбрать букет» и «Заказать в мессенджере».
Справа находится фото одного из букетов, который есть в каталоге. Под ним подпись с названием и ценой, по клику открывается карточка. Под кнопками идёт строка: «Заказ до 18:00 — доставим сегодня · Самовывоз: адрес · Оплата: способы». В самом низу видна первая полоса быстрых ссылок: «День рождения», «Свадьба», «Розы», «Букеты до выбранной суммы». Так посетитель уже на первом экране понимает, что делать дальше.
Что лучше не ставить на первый экран
- Автоматический слайдер. Пока человек читает первый слайд, он меняется. Информация о доставке на втором слайде вообще может остаться незамеченной.
- Всплывающее окно со скидкой или формой подписки. Оно закрывает каталог до того, как человек понял, что ему предлагают.
- Длинный рассказ о магазине. История и философия уместны ниже или на отдельной странице.
- Общие фразы без проверяемого смысла, например «лучшие цветы». Их нельзя ни подтвердить, ни использовать для выбора.
- Слишком много категорий сразу. Если их двадцать, покупатель теряется. Оставьте 4–6 самых частых поводов, остальные уберите в каталог.
Как проверить мобильную версию
Для цветов мобильный трафик нередко основной, поэтому экран нужно проектировать для телефона в первую очередь. Откройте сайт на обычном смартфоне, не в эмуляторе. Без прокрутки должны быть видны заголовок, главная кнопка и строка с условиями доставки. Телефон и мессенджер должны открываться одним нажатием. Если баннер или шапка занимают весь экран, сократите высоту фото и уберите лишние элементы.
Проверочный список для владельца магазина
- Из заголовка понятно, что вы продаёте и где работаете.
- Главная кнопка ведёт в каталог или подборку, а не на общую страницу «О нас».
- Условия доставки и самовывоза видны без прокрутки и соответствуют реальности.
- Есть быстрый выбор по поводу или бюджету.
- Фото на экране соответствуют букетам, которые можно заказать.
- Связаться можно одним нажатием с телефона.
- Нет автоматического слайдера и всплывающих окон поверх контента.
- Посторонний человек за 5 секунд скажет, что делать дальше. Проверьте это на ком-нибудь, кто не знает ваш сайт.
Если хотя бы два пункта не выполняются, начните с них: обычно это быстрее и проще, чем полностью переделывать дизайн главной страницы.
