NIKSYOU 
Тендеры и лиды
Информация
Сайт может выглядеть дорого, получать положительные отзывы о дизайне и при этом создавать посетителям трудности в самых важных местах: при выборе услуги, поиске стоимости или отправке заявки.
Проблема не обязательно связана с неудачной графикой. Иногда именно стремление к визуальной выразительности приводит к тому, что полезная информация оказывается скрытой, интерфейс становится менее очевидным, а путь к обращению — неоправданно сложным.
Разберём ситуацию на примере условной компании, которая занимается проектированием и установкой архитектурного освещения. Посмотрим на её сайт глазами потенциального заказчика и выясним, какие дизайнерские решения помогают принятию решения, а какие создают лишние препятствия.
Материал будет полезен владельцам бизнеса, маркетологам, руководителям digital-проектов и всем, кто планирует разработку или редизайн сайта.
Представим ситуацию. Владелец ресторана планирует обновить освещение зала. Ему нужен подрядчик, который сможет разработать проект, подобрать оборудование и организовать монтаж.
Он находит сайт студии архитектурного освещения.
Первый экран выглядит убедительно: крупная интерьерная фотография, выверенная типографика, аккуратная навигация. Всё производит впечатление профессиональной компании.
Но через несколько секунд возникают вопросы.
Работает ли студия с ресторанами? Занимается ли только проектированием или также установкой? Можно ли заказать отдельную услугу? Какой бюджет необходим? Есть ли реализованные проекты?
Ответы на эти вопросы могут находиться где-то ниже, в разных разделах сайта. Однако посетителю приходится самостоятельно искать их и собирать общую картину.
Возникает противоречие: визуально сайт воспринимается как качественный, но пользоваться им неудобно.
Сильный веб-дизайн помогает посетителю понять предложение, оценить его применимость к своей задаче и выбрать следующий шаг. Если этого не происходит, эстетическое впечатление не решает основную проблему.
При этом важно не путать удобство с гарантированной конверсией. Даже идеальный интерфейс не заставит человека купить услугу, которая ему не подходит по цене, срокам или условиям.
Поэтому оценивать будем не гипотетический рост заявок, а конкретные препятствия, которые можно обнаружить и исправить.
Первый экран формирует первоначальное представление о компании. Здесь особенно важно найти баланс между эмоциональной подачей и содержанием.
Рассмотрим два варианта.
Вариант А
Крупная фотография ресторана и заголовок:
«Свет, который вдохновляет».
Под ним — кнопка «Подробнее».
Такое решение может быть эстетически удачным, но оставляет слишком много вопросов. Посетителю неизвестно, какие именно услуги предлагает компания.
Вариант Б
Та же фотография и заголовок:
«Проектируем архитектурное освещение для ресторанов и отелей».
Подзаголовок:
«Светотехнический проект, подбор оборудования и сопровождение реализации».
Кнопка:
«Обсудить проект».
Во втором случае информация конкретнее. Посетитель понимает специализацию компании и предполагаемый результат сотрудничества.
Это не означает, что эмоциональные заголовки всегда хуже предметных. Для известного бренда, рекламной кампании или имиджевого проекта лаконичный слоган может быть оправдан.
Но когда сайт должен знакомить новую аудиторию с услугой, ясность предложения приобретает особое значение.
Что проверить на собственном сайте: может ли человек, который ничего не знает о компании, определить её специализацию и основное предложение, не изучая несколько разделов?
Если для этого требуется дополнительное объяснение менеджера, первый экран стоит пересмотреть.
Следующий шаг нашего посетителя — разобраться, какое решение ему подходит.
На сайте студии представлены три направления:
«Атмосфера», «Гармония», «Пространство».
Каждое сопровождается красивым изображением и коротким описанием философии бренда.
Проблема в том, что названия не объясняют состав услуг. Посетителю приходится открывать каждую карточку, чтобы понять разницу.
Для компании, которая продаёт технически сложные услуги, это может стать существенным препятствием.
Представим альтернативную структуру:
Светотехническое проектирование.
Подбор осветительного оборудования.
Монтаж и настройка освещения.
К каждой услуге добавлено короткое описание результата и ссылка на подробности.
Теперь посетитель может быстрее определить нужное направление.
Фирменные названия при этом необязательно исключать. Их можно использовать как дополнительный уровень коммуникации, не заменяя ими понятные названия услуг.
Например, раздел «Атмосфера пространства» может объединять конкретные решения для ресторанов, гостиниц и общественных интерьеров.
В хорошей карточке важна не только фотография, но и содержание.
Посетителю желательно понимать, кому подходит услуга, что входит в работу, какой результат он получает и как начинается сотрудничество.
Необязательно помещать всю информацию в небольшую карточку. Достаточно дать краткое объяснение и понятный переход к подробностям.
Особенно важно соблюдать это правило, когда услуги отличаются по цене, срокам и составу работ.
Наш посетитель определился с услугой. Теперь он хочет понять, соответствует ли предполагаемый бюджет его возможностям.
На сайте есть подробное описание подхода, фотографии проектов и обещание индивидуального решения.
Но информации о стоимости нет.
Единственный вариант — оставить номер телефона и дождаться консультации.
Такой подход может быть оправдан, если каждый проект требует сложных расчётов, а диапазон цен настолько широк, что предварительная оценка вводила бы заказчика в заблуждение.
Однако полное отсутствие ценовой информации не всегда помогает продажам.
Потенциальному клиенту часто нужен хотя бы ориентир: порядок стоимости, минимальный бюджет, пример расчёта или перечень факторов, влияющих на цену.
В нашем демонстрационном проекте можно представить три формата сотрудничества:
Проектирование — разработка светотехнической концепции и документации.
Проектирование и комплектация — проект с подбором оборудования.
Комплексная реализация — проектирование, подбор оборудования и организация работ.
Для каждого формата можно указать состав, условия оценки и порядок расчёта стоимости.
Если компания может обоснованно назвать стартовую цену, её стоит рассмотреть как часть предложения. Если нет — полезнее объяснить, какие данные нужны для расчёта.
Например:
«Стоимость зависит от площади объекта, количества световых сценариев и выбранного оборудования. Для предварительной оценки потребуется план помещения и описание задачи».
Так посетитель понимает, почему цена определяется индивидуально и что необходимо подготовить.
Задача ценового блока — не обязательно раскрыть окончательную сумму, а уменьшить неопределённость там, где это возможно.
Далее потенциальный клиент изучает реализованные проекты.
Он видит галерею интерьеров с эффектным освещением. Изображения качественные, композиции продуманные.
Но остаётся неизвестным, что именно выполнила студия.
Разработала концепцию? Подобрала оборудование? Отвечала за монтаж? Или фотографии использованы только как визуальные примеры?
Эстетически привлекательная галерея может заинтересовать посетителя, но не всегда помогает оценить профессиональную компетенцию подрядчика.
Для этого нужен контекст.
Представим карточку проекта ресторана.
В ней указано назначение помещения, исходная задача, состав выполненных работ и особенности решения.
Например:
«Ресторан с несколькими функциональными зонами. Требовалось предусмотреть рабочее освещение в дневное время и более камерную атмосферу вечером. В проекте разработаны отдельные сценарии для общего зала, барной стойки и приватных зон».
К описанию добавлены фотографии или схемы, показывающие конкретные решения.
Такой формат позволяет посетителю соотнести чужую задачу со своей.
Особенно полезно раскрывать ограничения проекта: особенности помещения, технические требования, бюджетные рамки и причины выбора определённых решений.
При этом важно отличать реальные коммерческие работы от концепций, демонстрационных проектов и визуализаций.
Если проект не был реализован для заказчика, это следует обозначить.
Доверие формируется не количеством красивых изображений, а понятными и проверяемыми свидетельствами компетентности.
Есть задача на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR? Создайте тендер и выберите подходящего исполнителя из откликов.
Заполнить заявку
13842 тендера
проведено за восемь лет работы нашего сайта.
Теперь представим, что тот же посетитель открывает сайт со смартфона.
На компьютере всё выглядело убедительно. На мобильном экране крупный заголовок занимает почти всю видимую область, кнопка обращения оказывается далеко ниже, а карточки услуг требуют длительной прокрутки.
Формально сайт адаптивный: контент помещается по ширине экрана, изображения масштабируются, горизонтальной прокрутки нет.
Но удобство взаимодействия может оставаться неудовлетворительным.
Мобильная адаптация предполагает не только изменение размеров, но и пересмотр композиции с учётом ограниченного пространства.
Заголовки. Они должны сохранять читаемость и смысловую иерархию. Чрезмерно крупный текст может вытеснять основное предложение за пределы первого экрана.
Навигация. Пользователь должен без затруднений находить основные разделы и возвращаться к интересующей информации.
Карточки. Необходимо проверить порядок изображений, заголовков, описаний и кнопок. При переносе в одну колонку смысловая связь между элементами должна сохраняться.
Формы. Поля должны быть удобны для ввода, а подписи — оставаться понятными после начала заполнения.
Интерактивные элементы. Кнопки и ссылки должны быть различимы и удобны для касания.
Отдельное внимание стоит уделить производительности. Тяжёлые изображения, многочисленные эффекты и сложные скрипты могут ухудшать скорость загрузки и отзывчивость интерфейса.
Впрочем, проблемы мобильной версии нельзя оценивать только по скриншоту. Необходимо проверить реальное поведение сайта: открытие меню, прокрутку, работу форм, реакцию кнопок и отображение ошибок.
Посетитель изучил услуги, посмотрел проекты и решил связаться с компанией.
Он нажимает «Обсудить проект».
Открывается форма с несколькими обязательными полями: имя, телефон, электронная почта, организация, должность, тип объекта, площадь, предполагаемый бюджет и подробное описание задачи.
Часть информации у посетителя пока отсутствует.
Например, он ещё не знает точную площадь помещения и не определился с бюджетом. Но без этих данных форма не отправляется.
В результате человек вынужден либо заполнять поля приблизительно, либо откладывать обращение.
Не каждая дополнительная графа является ошибкой. Иногда подробная форма необходима, чтобы квалифицировать обращение и подготовить содержательное предложение.
Однако состав обязательных полей должен соответствовать задаче пользователя и стадии принятия решения.
Если цель — первичное знакомство, может быть достаточно имени, способа связи и краткого описания задачи.
Дополнительные сведения можно запросить на следующем этапе.
Для сложной услуги подходит и другой вариант: разделить процесс на первоначальное обращение и последующий подробный бриф.
Важно не количество полей само по себе, а обоснованность каждого требования.
Исследования Baymard Institute по оформлению интернет-покупок показывают, что сложность форм, неочевидные подписи и проблемы ввода способны мешать завершению действий. Эти результаты относятся прежде всего к электронной коммерции; переносить их количественные показатели на заявки в B2B-услугах некорректно.
Но сам принцип полезен и для корпоративного сайта: чем меньше необоснованных препятствий возникает при заполнении, тем проще посетителю завершить действие.
Есть ещё один момент, который часто упускают при проектировании интерфейса.
Пользователь отправил форму. Что дальше?
Если кнопка просто перестала реагировать или появилось малозаметное уведомление, человек может не понять, был ли запрос получен.
Корректный сценарий предусматривает подтверждение отправки и понятное объяснение дальнейших действий.
Например:
«Спасибо! Заявка отправлена. Мы свяжемся с вами после ознакомления с задачей».
Точные сроки ответа следует указывать только тогда, когда компания действительно готова их соблюдать.
На этом этапе легко сделать поспешный вывод: достаточно переписать первый экран, упростить форму и добавить стоимость — и конверсия увеличится.
В действительности связь сложнее.
Количество обращений зависит не только от интерфейса. Важны качество трафика, конкурентоспособность предложения, цена, репутация компании, сезонность и множество других факторов.
Поэтому профессиональный аудит должен разделять три категории наблюдений.
Очевидные проблемы использования. Например, неработающая кнопка, невозможность отправить форму или текст, который невозможно прочитать на смартфоне. Такие дефекты необходимо исправлять.
Вероятные препятствия. Неясное позиционирование, сложная структура услуг, отсутствие важной информации. Здесь нужны качественные проверки: пользовательские интервью, наблюдение за выполнением задач, анализ обращений и вопросов клиентов.
Гипотезы об эффективности. Например, предположение, что изменение текста кнопки или перемещение блока увеличит количество заявок. Такие выводы требуют проверки на данных.
Это различие защищает бизнес от дорогостоящих переделок, основанных исключительно на субъективных предпочтениях.
Для первичной оценки необязательно сразу заказывать полный редизайн.
Можно провести короткий сценарный аудит.
Выберите конкретную задачу потенциального клиента. Не абстрактное «посмотреть сайт», а понятную потребность: заказать разработку лендинга, подобрать оборудование, получить расчёт стоимости или записаться на консультацию.
Затем откройте сайт так, словно впервые видите компанию.
Шаг 1. Найдите предложение.
Можно ли понять, чем занимается компания, кому предназначены её услуги и какую задачу она помогает решить?
Шаг 2. Выберите нужную услугу.
Понятны ли названия разделов? Достаточно ли информации для первоначального выбора? Не приходится ли открывать множество страниц только для выяснения базовых различий?
Шаг 3. Оцените условия сотрудничества.
Есть ли информация о составе работ, ограничениях, сроках или порядке расчёта стоимости? Понятно ли, что именно потребуется от заказчика?
Шаг 4. Проверьте доказательства компетентности.
Можно ли определить, какие проекты компания действительно выполняла и какой вклад внесла в результат?
Шаг 5. Пройдите путь на смартфоне.
Проверьте навигацию, читаемость, расположение кнопок, корректность форм и скорость реакции интерфейса.
Шаг 6. Попробуйте обратиться.
Сколько действий необходимо совершить? Все ли обязательные поля оправданны? Получаете ли вы понятное подтверждение отправки?
Шаг 7. Зафиксируйте препятствия.
Для каждой обнаруженной проблемы запишите, на каком этапе она возникает, кому мешает, насколько критична и какое изменение предлагается.
Лучше оценивать сайт по нескольким реалистичным сценариям. Клиент, который впервые знакомится с услугой, и посетитель, уже готовый заказать конкретное решение, могут нуждаться в разной информации.
После аудита обычно появляется список замечаний разного масштаба: от неудобной кнопки до необходимости пересмотреть структуру сайта.
Не стоит устранять их в произвольном порядке.
Для каждой проблемы полезно оценить три параметра:
Влияние на задачу. Мешает ли недостаток выполнить ключевое действие или только создаёт незначительное неудобство?
Масштаб. На скольких страницах и для каких пользовательских сценариев возникает проблема?
Уверенность в причине. Подтверждено ли наблюдение реальным тестированием или это пока предположение специалиста?
Например, неработающая мобильная форма имеет высокий приоритет, потому что напрямую препятствует обращению.
Неоднозначное название услуги требует проверки на понятность.
А замена цвета кнопки без дополнительных данных обычно не должна становиться главным пунктом проекта.
Такой подход помогает распределять бюджет в пользу изменений, имеющих понятное основание.
Полная переработка сайта оправданна не всегда.
Если структура понятна, интерфейс стабилен, а основные сложности связаны с отдельными формулировками или элементами, разумнее начать с локальных изменений.
Например, уточнить предложение на первом экране, скорректировать мобильную форму, добавить недостающую информацию в карточки услуг.
Полный редизайн стоит рассматривать, когда проблемы затрагивают архитектуру сайта, визуальную систему, пользовательские сценарии или техническую основу проекта.
При этом редизайн не должен начинаться с выбора цветовой палитры и подбора референсов.
Сначала необходимо определить, что именно не работает, какую задачу решает обновление и по каким признакам будет оцениваться результат.
Иначе компания рискует получить новый красивый сайт с прежними неудобствами.
Вернёмся к нашему посетителю, который ищет подрядчика по архитектурному освещению.
Чтобы принять решение, ему необходимо понять специализацию студии, выбрать подходящую услугу, оценить условия, увидеть подтверждение компетентности и связаться с компанией.
Каждый из этих этапов может быть поддержан дизайном — или осложнён им.
Качественный интерфейс не требует от посетителя угадывать смысл названий, искать очевидную информацию или преодолевать технические препятствия.
При этом эстетика остаётся важной частью работы. Выразительный визуальный стиль помогает сформировать восприятие бренда, выделить продукт и сделать взаимодействие приятнее.
Задача профессионального веб-дизайна — соединить визуальную выразительность, содержательную ясность и удобство использования.
Поэтому при следующей оценке сайта попробуйте заменить вопрос «Насколько современно он выглядит?» другим:
«Может ли наш потенциальный клиент уверенно пройти путь от первого знакомства до нужного действия?»
Ответ на него часто оказывается гораздо полезнее для бизнеса.
