Сайт для компании по производству автоматов для воды
Поставленная задача
В ходе данного проекта необходимо было не просто разработать стандартный адаптивный сайт с каталогом, а учесть, что продукция, которая в нем представлена, является сложной для онлайн-продаж и требует «особой подачи».
Карточка товара прежде всего должна показывать продукцию с презентабельной стороны, побуждать к покупке и давать исчерпывающую информацию. Одновременно с этим на сайте подразумевался «легкий» дизайн, неосложнённый переизбытком элементов, чтобы не отвлекать пользователя от главной задачи: выбора и заказа продукции или услуги.
Реализация
Структура сайта
Структура сайта была спланирована таким образом, чтобы пользователь без особой подготовки в данной тематике мог с легкостью найти всю интересующую его информацию. Поэтому основное меню разбито на крупные разделы, содержащие каталог товаров, услуги и мониторинг.
Так как у компании богатая история, присутствует много сопутствующей информации по деятельности (документация, партнерство, патенты), данная ветвь также развита и проработана в отдельности.
Общая структура сайта имеет вид:
При разработке структуры учитывались рекомендации по SEO оптимизации, среди которых:
- Соблюдение логики вложенностей URL.
- Для упрощения навигации, меню при скроллинге закрепляется в верхней части экрана.
- Все URL-адреса должны иметь человекоподобный вид, соответствовать структуре и содержать латинские символы.
- На всех внутренних страницах предусмотрены «хлебные крошки», соответствующие структуре сайта и вложенности данного раздела.
- Карточка товара содержит изображение, описание, цену и характеристики.
- Телефон в шапке сайта кликабельный для быстрого набора номера через мобильное устройство.
- На сайте присутствуют конверсионные элементы для взаимодействия:
- кнопка оставления заявки;
- корзина;
- заказ;
- сравнение товаров;
- итоговый подсчет аппарата с добавлением опций.
Дизайн и функциональность
При выборе оформления сайта был выбран лаконичный дизайн с преобладающей цветовой гаммой, выраженной оттенками голубого, серого и белого. Данный набор цветов перекликается с водной тематикой, что создает цветовое ассоциативное единство между оформлением сайта и представленной на нем продукцией.
В ходе работы проводились изменения первоначально согласованного дизайна и элементов на сайте по желанию заказчика.
Особое внимание было уделено одному из важнейших элементов на сайте — карточке товара. Она должна была быть одновременно простой, неперегруженной и максимально информативной. Галерею фотографий можно перелистывать как кликами на соответствующую миниатюру, так и с помощью захвата мышки и движения в сторону:
Помимо базовых характеристик имеется вкладка для углубленного ознакомления с продукцией и комплектацией:
Отдельно стоит отметить простоту внесения как товаров, так и текстов на любых страницах сайта. Административная панель удобна для использования даже для неподготовленного пользователя, что позволит заказчику избежать обращения к помощи специалистов для замены или корректировки какой-либо информации.
Удобный графический редактор позволяет внести нужные правки без знания языков программирования
Добавление характеристик максимально упрощено и может быть изменено в зависимости от особенностей того или иного аппарата:
Вид блока на сайте
Вид блока в административной панели
Для удобства пользователей и получения дополнительной информации для менеджера при отправке формы заявки, на карточке товара можно выбрать нужные опции и получить его цену в реальном времени. Все выбранные дополнительные опции придут вместе с заявкой автоматически.
При отправке заявки все опции будут включены в расчет
Опции также очень удобно редактируются из административной панели. Заказчик может менять не только цены, но и наименование:
На сайте предусмотрена двусторонняя связь, и после отправки заявки на расчет, пользователь получает готовое коммерческое предложение. Если проверку осуществляет авторизованный менеджер, то его контактные данные будут прикреплены для связи.
Для всех запасных частей предусмотрено соответствие для определенных аппаратов из каталога, и они подтягиваются к нужным карточкам автоматически. Если запчастей к конкретному аппарату не предусмотрено, вкладка с ними не будет пустой, а просто не отобразится на карточке.
Запасные части для автомата ИЧВ-УК-08 (3000)
Вкладка пропадает, если на сайте нет подходящих комплектующих
Прикрепление деталей к аппаратам происходит путем обычной простановки галочек в админпанели. Таким образом, при расширении ассортимента, актуализировать информацию на сайте по аппаратам и доступным к ним запчастям легко сможет любой сотрудник компании, которому будет предоставлен доступ на сайт.
На главной странице сайта присутствует карта с отметками партнеров по всей России и СНГ. Данный фактор оказывает положительное влияние не только на роботов поисковых систем при индексации, но и является элементом доверия для пользователей, что в свою очередь будет способствовать наращиванию поведенческих факторов.
Последнему также способствуют страницы с патентами и сертификатами, историей компании и ее сотрудниками. Ленту истории можно переключать по годам, просматривая соответствующие важные события на различных этапах развития.
Оптимизация под мобильные устройства
Сайт полностью оптимизирован под основные разрешения смартфонов и планшетов, что позволяет получать хороший мобильный трафик из поисковых систем и рекламных каналов. В боковом меню содержится вся необходимая информация, которая способствует не только удобной навигации по сайту, но и простоте оформления заказа: кнопка «оставить заявку», «корзина», «социальные сети» и «контактные данные».
На странице «Контакты» карта размещена в свернутом режиме. Это создает больше удобства при использовании устройств с небольшим экраном. При клике карта разворачивается и с ней можно взаимодействовать путем перемещения или изменения масштаба.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
