Редизайн сайта

Посетитель за несколько секунд решает, жива ли ещё компания, — и делает это по мелким признакам, а не по модности дизайна.

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

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

• мелкий текст и узкая колонка на широком экране
• новости и акции, последние из позапрошлого года
• фото из фотобанка вместо собственных работ
• телефон одного оператора и ни одного мессенджера

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

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

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

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

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

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

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

Проверьте сами: откройте свой сайт с телефона на мобильном интернете, а не на Wi-Fi, и дойдите до конца — до отправленной заявки. Место, где вы раздражились, — это место, где клиент уже ушёл.

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

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

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

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

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

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

Когда сайт собран из готового шаблона, посетитель запоминает дизайн, но не запоминает вас.

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

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

• ваши цвета и шрифты вместо стандартных из шаблона
• фото ваших работ и сотрудников, а не фотобанк
• блоки под ваш процесс, а не «как в примере»
• тексты про ваши условия, а не общие фразы

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

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

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

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

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

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

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

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

После смены логотипа сайт остаётся последним местом, где живёт старый стиль, — и одновременно самым заметным.

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

Редизайн под новый бренд — это не замена картинки в шапке. Цвет заложен во весь интерфейс: кнопки, ссылки, заголовки, подложки, состояние кнопки под курсором. Шрифты меняют вид всех текстов. Иконки и фото тоже должны попасть в новое настроение. Если поменять только логотип, сайт будет выглядеть собранным из двух разных.

• логотип в шапке, в подвале и на иконке вкладки
• цвета кнопок, ссылок и заголовков
• шрифты заголовков и основного текста
• фото, иконки и картинка для соцсетей

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

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