идеальный сайт

46 важных элементов, которые сделают ваш сайт идеальным

От  редактора:

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

Автор статьи: Теос Светлана, 1PS.ru

Обязательные элементы сайта-визитки

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

 

Обычно сайты-визитки состоят в среднем из 5-7 страниц (до 10). Как и какую информацию необходимо обязательно разметить, чтобы сайт приносил реальную пользу и вам, и клиентам? Мы составили чек-лист обязательных составляющих любого сайта-визитки. Вы можете проверить существующий или грамотно спланировать разработку нового сайта, пользуясь этим списком.

 

Подготовка

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

 

  1. Название компании

Юридическое наименование или зарегистрированная торговая марка. Здесь так же работает бессмертная истина капитана Врунгеля «Как вы лодку назовете, так она и поплывет». Запоминающееся название сыграет вам только наруку. Но не переусердствуйте – отталкиваться нужно от сферы бизнеса и успешных конкурентов.

Шапка с наименованием компании

 

  1. УТП

Уникальное торговое предложение – это ядро, которое отличает вас от других игроков на рынке. Именно оно делает вас интересным для клиента, поэтому так важно избегать шаблонных и неконкретных формулировок. Формирование УТП – отдельный, сложный процесс, но ему необходимо посвятить время.

Пример первого экрана с УТП

 

  1. Логотип

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

образец логотипа компании

 

  1. Фирменный стиль

Помимо логотипа, стоит продумать фирменную гамму цветов, комплект шрифтов, схему верстки, формат – если полиграфическое и веб-оформление вашей компании будет единым, это будет свидетельствовать о четком понимании вами миссии и целей компании.

фирменный стиль в полиграфии

 

фирменный стиль в веб-дизайне

  1. Слоган

Слоган тоже является частью фирменного стиля. Во многом влияет на имидж, передает дух и настрой всей компании.

слоган ресторана Май Труд Плов

 

  1. Фавикон

Маленькая иконка сайта отображается на вкладке браузера, в выдаче поисковиков, в панели закладок. Очень помогает пользователю не потерять ваш ресурс, если у него открыто сразу много сайтов. Фавикон создают в разрешении 16*16 пикселей в формате .ico. Обычно это уменьшенный логотип или другое изображение, представляющее компанию.

отображение фавикона в браузере

отображение фавикона в Яндексе

 

  1. Доменное имя

Считайте, что это будет второе название компании. Адрес сайта должен однозначно отражать деятельность компании, в плюс – если оно будет запоминающимся. Креатив здесь способен как помочь, так и помешать.

Пример доменного имени

образец доменного имени

 

Обязательные элементы(шапка сайта)

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

 

  1. Теглайн

Краткое описание сферы деятельности компании, состоит, как правило, из ключевых слов. Теглайн может содержать не более 5–8 слов.

 

  1. Телефон

Он должен всегда быть на виду, чтобы пользователь знал, как связаться с вами. Важно: в шапке помещайте только 1 телефон. Не нагружайте вашего посетителя лишними муками выбора способа связи. При необходимости рядом с телефоном расположите кнопку обратного звонка (см. раздел Функциональные элементы).

 

  1. Часы работы

Указывайте их обязательно, особенно, если ваш бизнес – оказание услуг. Это повышает шанс того, что клиент позвонит. Его не будут терзать сомнения: «А вдруг я наберу, а у них обед/рабочий день закончился или еще не начался?»

 

  1. Дополнительные контакты

Не более одного, например, email или skype, в противном случае пользователь запутается в этом разнообразии контактной информации.

11

 

  1. Регион

Если сфера вашей деятельности распространяется только на определенный город или регион, обязательно укажите это в шапке. Вы избежите нецелевого трафика. Если работаете по всей России – сделайте выбор города или укажите географию в шапке.

регион в шапке сайта

 

Структура сайта и контентные блоки

Набор и иерархия страниц сайта зависит от конкретной тематики бизнеса, однако стандартной и понятной для пользователей будет следующая структура:

 

  1. Главная страница

На ней обязательно должен быть размещен текст объемом от 2000–3000 знаков с представлением услуг/товаров, а также информацией об УТП, преимуществах, текущих акциях, ваших достижениях и успехах.

 

  1. Страницы с описанием услуг/товаров

Разместите здесь небольшой текст 1000–1500 символов с полезной информацией – кратким описанием сути товаров/услуг с переходом на более подробное, о доставке или специальных условиях.

Внутренняя страница Описание услуг

 

  1. Страница «О компании»

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

Внутренняя страница О компании

 

  1. Страница«Цены»

Разместите на ней небольшой текст на 1000 символов и понятный прайс-лист. Если в прайсе очень много пунктов, имеет смысл сгруппировать позиции по блокам.

Раздел прайс-лист на сайте

 

  1. Страница «Контакты»

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

страница контакты на сайте

 

  1. «Портфолио/Галерея»

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

Портфолио на сайте-визитке

 

  1. «Новости/Блог»

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

оформление блога

 

  1. Фотографии

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

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

фотографии на сайте-визитке

 

  1. Видео

В формате видеороликов могут выступать отзывы, обзоры или презентации. Этот контент – плюс в копилку медиаинформации, но выкладывайте его в случае необходимости (например, вы event-агентство или продаете разную технику).

видеоролик на сайте

 

  1. Схема работы

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

описание схемы работы на сайте-визитке

 

Навигация

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

 

  1. Главное меню сайта (в шапке сайта)

Обеспечьте мгновенный доступ ко всем верхним в иерархии страницам сайта. Выберите не более 6 пунктов меню и оставьте их в шапке.

главное меню в шапке сайта

 

  1. Меню каталога (если есть товары/услуги)

Доступ к конкретным товарам и услугам в каталоге также должен быть реализован. Используйте выпадающее меню в шапке сайта или поместите такое меню слева.

меню каталога на сайте

 

  1. «Хлебные крошки»

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

хлебные крошки на сайте

 

  1. Кнопка «Наверх»

В эпоху вертикального дизайна страницы сайтов достаточно длинные. После того, как клиент дочитал страницу до конца – избавьте его от необходимости скролить в обратную сторону и предусмотрите прокрутку вверх одной кнопкой.

кнопка наверх на сайте

 

  1. Кликабельные слайдеры

Если вы используете слайдеры в разделах Акции, Портфолио, учтите – по правилам юзабилити они должны переводить на внутреннюю страницу с более подробной информацией.

слайдер ведет на страницу акции

 

  1. Внутренняя перелинковка

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

области внутренней перелинковки на сайте

 

  1. Футер

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

футер сайта со ссылками и контактами

 

  1. Оформление ссылок

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

правильное оформление ссылок на сайте

 

  1. Карта сайта

Элемент, который наглядно представляет полную структуру и с его помощью можно увидеть те страницы, на которые по каким-то причинам отсутствуют прямые ссылки.

карта сайта

 

Триггеры

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

 

  1. Преимущества компании

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

перечисление преимуществ на сайте

 

  1. Достижения и успехи

Сильно на этом акцентировать внимание не стоит (ваши успехи пока что не принесли никакой пользы посетителю сайте), но определенный имидж их перечисление создаст. Будьте очень лаконичны, не занимайтесь самолюбованием.

иконки на сайте

 

  1. Отзывы

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

размещение отзывов на сайте

 

  1. Акции и скидки

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

оформление раздела акций на сайте-визитке

 

  1. Иконографика

Тесно связана с пунктами 33–34 и другими контентными блоками. Сейчас настоящий бум иконографики, так как с ней информация заходит в мозг клиента быстрее и без препятствий. Но избыточное количество иконок сольется в глазах читателя так же, как и длинный текст без разметки.

иконографика на сайте

 

  1. Целевое действие на первом экране

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

целевое действие на первом экране

 

Функциональные элементы интерфейса

Удобство пользования сайтом складывается не только из навигации, контента, но и его способности подстраиваться под клиента и реализации интерактивных функций:

 

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

Возможность элементов изменять свое построение при просмотре на узких экранах смартфонов. Для этого часто применяют карточные системы расположения инфоблоков. 

 

  1. Кнопка и форма обратной связи

Чтобы получить обратную связь от посетителей – предусмотрите на сайте такую возможность. Продумайте целевое действие для каждой такой формы («Задать вопрос», «Оставить заявку», «Вызвать замерщика», «Запрос на обратный звонок» и т.д.).

кнопка обратной связи

 

  1. Кнопка или/и форма«Оставить заявку» на товар/услугу после их описания

Всегда помещайте целевое действие сразу после основного описания товара/услуги. Посетитель должен знать, что ему делать дальше.

кнопка вызвать замерщика после описания и прайса

 

  1. Кнопки социальных сетей

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

кнопки соцсетей на сайте

 

  1. Возможность оставить отзыв

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

отзывы на сайте клининговой компании

 

  1. Онлайн-консультант

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

 

Оптимизация

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

 

  1. Оптимизированные и продающие заголовки

Составляя тексты на сайт, используйте ключевые слова в заголовках – там они имеют очень большой вес. Но вхождение должно быть естественным и не нарушать грамматику. Заголовок H1 – для каждой страницы только один, а подзаголовки H2-H6 могут употребляться неограниченное количество раз.

ключевые слова в заголовках h1-6

 

  1. Теги

Основные метатеги – title и description. 

 

  1. Тексты с ключевыми словами

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

расстановка ключевых слов по тексту

 

Проверьте, не упустили ли вы какой-нибудь из этих элементов на своем сайте? Ведь даже небольшая деталь способна кардинально поменять общую картину поведенческих факторов и конверсии. Узнать, чего не хватает вашим клиентам, вы также можете с помощью юзабилити-аудита. А если вы только собираетесь создать сайт, при разработке мы не забудем ни о чем важном.  

Проверь Callbackhunter на своей шкуре!

  • Укажи при регистрации промо-код: БЛОГ и получи 15 бесплатных лидов для теста.
  • Расскажи мне о результате и я расскажу о твоей компании в нашем блоге и соцсетях!

Check

Пиши нам в соцсетях:

vkyoutubeFacebookinstagram

С любовью,

 Команда Callbackhunter

 

316 комментариев к “46 важных элементов, которые сделают ваш сайт идеальным”

  270. what is in doxycycline Trade Names Generic Name 1, 25- dihydroxycholecalciferol Calcitriol 2- PAM a Pralidoxime Chloride 3TC a Lamivudine 5- aminosalicylic acid Mesalamine 5- ASA Mesalamine 5- FC a Flucytosine 5- Fluorocytosine a Flucytosine 8- Arginine Vasopressin a Vasopressin 9- Fluorohydrocortisone a Fludrocortisone Acetate 27 Elemental Ca Calcium Chloride A- 200 Pyrethrins Abelcet Amphotericin B Lipid Complex Absorica Isotretinoin Abstra Fentanyl Accolate Zafirlukast AccuNeb prediluted nebulized solution Albuterol Accutane Isotretinoin Acetadote Acetylcysteine Acticin Permethrin Actigall Ursodiol Actiq Fentanyl Activase Alteplase Acular, Acular LS Ketorolac Acuvail Ketorolac Aczone Dapsone Adalat CC Nifedipine Adderall, Adderall XR Dextroamphetamine Amphetamine Adenocard Adenosine Adoxa Doxycycline Adrenaline Epinephrine HCl Advair Diskus, Advair HFA Fluticasone Propionate and Salmeterol Advil, Children s Advil Ibuprofen Aerospan Flunisolide Afrin Oxymetazoline AK- Poly- Bac Ophthalmic Bacitracin Polymyxin B AK- Spore H.

Оставить комментарий