Каким должен быть хороший сайт

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

Что должно быть на коммерческом сайте

Каждый коммерческий сайт направлен на привлечение клиентов и продажи. Чтобы сайт приносил прибыль, уделите особое внимание оформлению следующих элементов.

Страница «О нас»

Здесь опубликуйте историю компании, дипломы и сертификаты, чтобы показать клиентам свою экспертность и надежность. Также можно кратко рассказать о сотрудниках и их опыте работы.

Примеры работ

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

Отзывы клиентов

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

Страница контактов

Опубликуйте контакты в «шапке» сайта, чтобы клиенты могли сразу связаться с вами. Напишите телефон, электронную почту и режим работы. Если у вас есть торговые точки, то укажите их адрес. Многие сайты дублируют свои контакты в «подвалах» (нижней части страниц) или на отдельной странице «Контакты».

Часто задаваемые вопросы (FAQs)

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

Подробности о сотрудничестве

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

Призывы к действию (CTA)

Это завуалированное подталкивание клиента к покупке или выгодному для компании действию. Стимулировать пользователя приобрести товар могут бонусы, скидки и акции, подарки. Эта же методика работает для тренингов, подписок на рассылку компании и другое. Призыв к действию оформите ссылкой или кнопкой.

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

Качественные фото

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

Подробное описание продукта

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

Цены

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

Маркетинг

Читайте также:

Основные отличия сайта от лендинга

Основные отличия сайта от лендинга

Как продумать привлекательность сайта на каждом этапе

Структура и прототип

Этап прототипирования во многих случаях следует предварять составлением и анализом семантического ядра.

Зная, какие запросы наиболее близки тематике сайта, вы спроектируете более релевантную структуру разделов и страниц. Так пользователи смогут интуитивно ориентироваться на сайте и воспринимать его более позитивно.

Функционал

Разработка функционала на самом деле следует после прототипирования и дизайна, но вспомним про техническое задание. Всё начинается именно с него.

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

• Цели и задачи;
• Технические требования;
• Требования по функциональности;
• Пользовательские сценарии.

Только потом элементы оформления «нанизываются» на выверенную и тщательно описанную структуру и функции.

Дизайн

Дизайн — обширное понятие, включающее в себя множество компонентов.

• Веб-дизайн;
• Графический дизайн;
• UI- дизайн;
• UX-дизайн.

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

В частности, большая ответственность лежит на тех, кто берёт на себя фронт работ по UX/UI-дизайну. Они решат, как именно пользователи взаимодействуют с сайтом и как выглядит интерфейс.

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

Критерии удобного привлекательного сайта

Рассмотрим по отдельности, как внешний вид и функционал сайта влияют на восприятие его пользователями.

Внешний вид сайта

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

Так выглядел сайт Сбербанка в июне 2017 года. Огромный баннер съехал вниз, оставив гигантское пустое пространство под главным меню и перекрыв элементы навигации ниже. Серый заголовок баннера просто физически не читается из-за однородности цвета шрифта и фона.

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

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

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

Хороший пример — сайт НТИ. Сделана стилистическая отсылка к чертежам, схемам, средам моделирования. Контрастное представление — тёмные, но не насыщенные шрифты на белом фоне. Текстовые элементы снабжены минимумом дополнительной графики.

fotonaut.cz/en/: яркий пример сайта, который хочется просмотреть от начала до конца. Много motion-дизайна, отклика и интерактива. Сетка разбита на 5 неизменных по структуре блоков, но каждая страница уникальна и содержит интересное решение. Чётко выстроены акценты по цвету, размеру и расположению элементов. Сочная увлекательная цветовая гамма и живая графика.

carbonbeauty.com: похожий пример, но без цветастых акцентов, на пустом фоне. Нестандартные габариты заголовков, многослойность и в то же время лаконичность.

Функционал

Функциональный и удобный сайт предугадывает сценарии взаимодействия пользователя с системой.

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

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

Ещё лучше — когда контакты интегрированы с коллтрекингом. Все пользователи видят разные номера телефонов, и благодаря этому звонки можно сопоставлять с сеансами посетителей, обогащая пользовательскую аналитику. Коллтрекинг Calltouch собирает точные данные для анализа эффективности рекламы: конверсия и стоимость звонка, источник перехода, сумма сделки и ROI по звонку, геопозицию и даже тип устройства пользователя. Получайте наглядные отчеты и записи звонков — улучшайте работу колл-центра.

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

Всё должно вести к решению задачи пользователя. Вместо пространных речей лучше сразу давать инструменты удовлетворения потребностей.

ЦИАН Предлагает сразу приступить к поиску недвижимости, а не путает посетителя кучей вводных данных о проекте.

videotuts.ru — не самый привлекательный дизайн, но пользователь сразу попадает в пространство, наполненное нужным материалом — видеоуроками, без прелюдий.

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

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

Отображение пути навигации Раздел 1 > Подраздел 1 > Подраздел 2 под главным меню помогает понять, в каком разделе сайта сейчас находится пользователь, и позволяет вернуться в произвольный верхний раздел без лишних манипуляций.

Каждый элемент должен быть интуитивно понятным. Сайт должен думать за пользователя. В меню сбоку наглядно указаны размеры и цвета — всё понятно без перевода и не нужно кликать на выпадающие меню.

Признаком хорошего тона однозначно считается возврат на главную при нажатии логотипа, традиционно располагающегося сверху слева или по центру.

Пользователь хочет, чтобы сайт запоминал его активность и не требовал лишних операций. Автологин, избранное, подгрузка данных карты при оплате, сохранение введённых данных в веб-формах: всё это свидетельствует о продуманности системы и заботе о пользователе. Отличный пример — Aliexpress.

Минимум рекламы или вынесение её в самые труднодоступные локации облегчает работу с сайтом.

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

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

Карта сайта в подвале — очень дружелюбный элемент.

Поиск по сайту — большой плюс при наличии контента.

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

Прилипающее меню — хорошее решение.

Огромный слайдер без полезной информации омрачает пребывание на сайте.

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

Сайт может предлагать много вариантов взаимодействия или интерактива, но если пользователь имеет на них свои виды, это должно быть учтено. Нельзя запускать заставки без возможности пропуска, можно предлагать сворачивать и открывать отдельные navbar’ы.

Маркетинг

Читайте также:

Как использовать сервисы по сокращению ссылок

Как использовать сервисы по сокращению ссылок

Что учесть при создании сайта

Для сайта учитывают не только визуальные параметры, но и технические моменты. Они также влияют на качество взаимодействия с клиентами и продажи.

Адаптивный дизайн

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

Высокая скорость загрузки

От скорости вашего сайта напрямую зависят продажи. Если на сайте присутствует много «тяжелых» элементов и ошибки в верстке страниц, снижается скорость загрузки ресурса. Клиент не будет ждать 15–20 секунд, пока загружается сайт, и через 3 секунды уйдет на сайт конкурентов.

Чтобы увеличить скорость сайта, публикуйте изображения не больше 1 Мб. Выберите хостинг в зависимости от «веса» сайта, а если у вас много сайтов, то — выделенный сервер.

Поисковая оптимизация (SEO)

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

Страница 404

Страница 404 — это ошибка сайта. Она появляется, если:

• изменили URL страницы;
• эту страницу удалили;
• удалили весь сайт.

Чтобы не терять клиентов, оформите страницу 404 в фирменном стиле компании и напишите 1–2 предложения, почему клиент сюда попал. Шутку и интересный подход к ошибке аудитория точно оценит.

Навигация

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

Заключение

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

Предложения от наших партнеров

Рекламное агентство

Бесплатная часовая сессия с ведущим маркетологом

Хостинг-провайдер и аккредитованный регистратор доменных имён

Скидка до 80% на пакет услуг «Быстрый старт» для создания сайта

Агенство по разработке сайтов

Бесплатная помощь в формировании концепции вашего сайта

Сервис по созданию онлайн магазинов

Онлайн магазин без программистов со скидкой 30%

Конструктор сайтов

1 месяц обслуживания в подарок

Набор инструментов для SEO-специалистов, интернет-маркетологов и PPC-специалистов

Скидка 15% на любой тариф