Как оформить главную страницу интернет магазина

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

Каким должно быть оформление главной страницы сайта?

Любой интернет-маркетолог скажет, что оно должно быть информативным, полезным, с удобной навигацией и интересным дизайном. Но в этом предложении нет конкретного ответа на наш вопрос. Рассмотрим основные факторы грамотного формирования главной страницы подробнее.
Главная страница – это страница обо всем, но с максимально удобной подачей. Даже при попадании нового пользователя из поиска на посадочную страницу, он с большой вероятностью перейдет на главную, где ему нужно кратко и ёмко рассказать о вашей компании, предложить основные услуги и/или товары.

На главной стоит обязательно указать:

• что вы за кампания и род вашей деятельности;
• постоянные и специальные предложения;
• описать особенности и преимущества.

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

Как оформить главную страницу сайта: пошаговая инструкция

Я не буду говорить о возможных вариантах структуры сайта, так как приводить примеры лучше на классической и привычной схеме, которая включает в себя шапку (header) с основным меню (навигацией), подвал (footer), несколько информационных блоков и панельки призыва к действию. Теперь подробно поговорим о каждом элементе этой структуры.

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

В данном элементе структуры главной страницы все просто: небольшой логотип (одновременно являющийся ссылкой на главную) и основное меню со ссылками на страницы сайта. Не надо ничего изобретать, классическое вертикальное или горизонтальное расположение максимально эффективно и удобно для пользователя. При использовании меню с иконками, позаботьтесь о кратком текстовом описании его пунктов. Раздел «Контакты» стоит размещать либо справа, либо снизу, в зависимости от расположения типа меню.
Верхушка (top bar – располагается над header или является его составным элементом) должна содержать основную контактную информацию: телефон, почту и при необходимости адрес.

Информационные блоки

Кратко и доступно донесите пользователю о вашей основной деятельности в 2-3 блоках информации. Расскажите о ваших услугах, товарах и конкурентных преимуществах.
Особое внимание уделите вашим последним, сделав их отдельным блоком с собственным заголовком. Клиент должен мотивировать себя сделать выбор в пользу вашей компании. Только не распыляйтесь в этом блоке – изложите свои мысли сжато и дайте ответ на вопрос: почему именно вы?
Текст должен быть максимально структурирован: заголовки, блоки, абзацы и другие элементы верстки. Если вы удовлетворите первичные условия выбора пользователя, то с большой вероятностью он станет вашим клиентом.

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

Главная страница сайта должна решать две основные задачи: задерживать пользователя на сайте и аккуратно подводить его к совершению заказа или звонку. Пользователя необходимо подтолкнуть к этому решению, поэтому рекомендуем использовать блок «Call-to-acton» – «призыв к действию».
Оформить его можно различными способами. Если вы предоставляете лишь одну услугу, то потенциального клиента следует добиваться грамотно размещенной кнопкой.
При наличии нескольких услуг следует разместить их по разным страницам разделов, а на главной сосредоточить внимание на одной или комплексно описать их.

Подвал страницы

Его также называют футер (footer). В некоторых вариантах дизайна он может не присутствовать, но, как правило, в классической структуре он имеет место. Зачастую в подвале размещают контактную информацию, ссылки на соцсети и второстепенные страницы сайта. В футере рекомендуется разместить дополнительный блок с контактной информацией или добавить кнопку призыва к действию, чтобы пользователь, досмотрев страницу до конца, не возвращался наверх.

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

1. Не размещайте слишком много информации

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

2. Делайте акцент на спецпредложения

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

3. Используйте иконки, инфографику и изображения

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

4. Не преувеличивайте

Не стоит лгать и вводить в заблуждение, достаточно грамотно описать свои преимущества и услуги без лишних эпитетов.

5. Ищите варианты, не стойте на месте

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

6. Как оформить главную страницу сайта при SEO оптимизации?

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

Вывод

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

Веб-студия ЛАНЦИО

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

Наши услуги

• Создание сайтов
• Продвижение сайтов
• Создание интернет-магазина
• Создание логотипа и фирменного стиля
• Нейминг – придумаем название
• Контекстная реклама
• Наполнение сайтов
• Продвижение в соц сетях
• Дизайн и верстка полиграфии

Источник: lancio-studio.ru

Оформление главной страницы сайта

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

Почему так важна главная страница сайта

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

Элементы

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

Логотип в шапке профиля

Лого должно располагаться в шапке веб-ресурса. Сделайте его читабельным, загрузив изображение в высоком разрешении. Это повысит узнаваемость бренда.

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

Меню

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

• Услуги или каталог с товарами.
• Данные об организации.
• Акции.
• Гарантия, доставка и возврат.
• Блог или новости.
• Контакты.

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

Ссылки

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

Оффер

Уникальное предложение размещают в первом блоке. Простой пример — акция. Она должна заинтересовать человека, чтобы он перешел по ссылке и совершил целевое действие.

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

Также предложение может отражать ваши преимущества и рассказывать о том, чем занимается фирма — например, если вы предоставляете услуги.

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

Чтобы выделить целевые действия, сделайте упор на визуальных элементах и анимации. Не используйте большое количество CTA-кнопок, чтобы человек не потерялся и не запутался в том, что вы от него хотите получить.

Контент

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

Старайтесь избавиться от стокового контента и размещать свои фотографии. Для этого можно заказать съемку у профессионального фотографа.

Подвал

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

Виды главных страниц сайта

Рассмотрим особенности оформления разных видов веб-сервисов.

Ресурс с услугами

Чтобы показать ценность и экспертность, используют следующие модули:

• Каталог услуг.
• Преимущества бренда.
• Портфолио с результатами работ.
• Прайс.
• Форма заявки и контактные данные.

Интернет-магазин

Порядок размещения информации может варьироваться: витрина или оффер. Обычно размещают следующие блоки:

Лендинг

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

• Баннер с оффером.
• Преимущества.
• Цены и условия.
• CTA-кнопка.
• Форма обратной связи и FAQ.
• Контактные данные.

Корпоративный сервис

В дизайне первой страницы сайта используют данные об организации:

• Цель и миссия.
• История.
• Преимущества.
• Описание продуктов.
• Форма обратной связи и контакты.

Рекомендации: как оформить сайт

Советы и правила, как оформлять начальную страницу сайта:

1. Четкость и краткость текстового наполнения.
2. Понимание цели и целевых действий. Например, покупка товара или подписка на рассылку.
3. Дизайн должен соответствовать бренду и целевой аудитории. При этом он имеет привлекательный вид и не вызывает отторжения.
4. Адаптивность. Интерфейс хорошо выглядит на любом экране и устройстве. А также быстро загружает контент.
5. Юзабилити — аудитории интуитивно понятно, как пользоваться сервисом и на какие кнопки нажимать.
6. Добавляйте акценты, чтобы привлекать внимание человека.
7. Поддерживайте положительное отношение к человеку, сообщайте о том, что вы всегда готовы ответить и помочь. Это увеличит лояльность.

Заключение

В этой статье вы узнали, как правильно создавать первый экран и какие модули на нем размещать.

Старайтесь избегать следующих ситуаций при оформлении страницы сайта:

• Весь ассортимент на главном экране.
• Объемные текстовые описания.
• Переизбыток положительных отзывов.
• Некачественные изображения.
• Большое количество виджетов, всплывающих окон и видеороликов.

Наше агентство Acoola.Team на протяжении более семи лет помогает организациям создавать веб-сервисы, повышать репутацию, привлекать клиентов и увеличивать прибыль. Свяжитесь с нами по телефону: +7 (495) 126-87-82, чтобы получить консультацию и аудит.

Источник: acoola.team

Яркие примеры главной страницы: что пишут и должно быть на ней

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

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

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

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

1. Дизайн и контент точно отвечает на вопросы пользователя «Кто вы?», «Что вы делаете?», «Что он может сделать на вашем сайте?»

Известные бренды, такие как Coca-cola или Apple, могут избегать описаний: кто они и чем занимаются. При этом действительность следующая – большая часть компаний должны отвечать на эти вопросы, чтобы каждый посетитель понимал куда он «попал».

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

2. Главная страница сообщает убедительное ценностное предложение

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

3. Сайт узко сфокусирован под целевую аудиторию

Контент на главной сообщает людям информацию, используя профессиональную терминологию. Речь не посвященного в тайны профессионализма воспринимается через призму недоверия. Не пишите тривиальные или поверхностные фразы. О вас подумают, что вы дилетант, и уйдут.

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

4. Сайт оптимизирован под все девайсы и обладает кроссбраузерностью

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

5. На главной размещен призыв к действию (CTA)

Все сайты ниже фактически используют призывы к действию, чтобы направлять посетителей на следующий шаг конверсионной воронки. К примеру, «Пишите, мы ждем», «Перезвонить? Легко!» или «Узнайте больше».

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

6. Элементы дизайна, контента, интерфейса непрерывно тестируются

Контент и оформление лучших сайтов не всегда статичны. Их адаптируют под нужды, проблемы и вопросы пользователей, и под новейшие тренды создания сайтов. Также часто проводится А/Б тестирование и настраивается динамический контент для оптимизации коэффициента конверсии (CR). С помощью последнего функционала можно менять, например, заголовки, тексты в контекстной рекламе в зависимости от ключевого запроса посетителя. Но об этом другая статья.

7. Эффективная главная страница

Эффективная страница внушает доверие к себе, сообщает ценности и УТП компании, легка в навигации, обладает крутым дизайном и использует психологические триггеры. Сайт также должен отличаться высокой скоростью работы, качественным отображением и описанием ваших продуктов. Все это вкупе зеркально отражается на пользовательском опыте (UX) и лояльности к бренду.

Теперь вашему вниманию примеры.

Примеры главных страниц

1. strip-lenta.com

На сайте strip-lenta.com гармонично сочетаются ознакомительная часть, ценностное предложение и преимущества компании. При этом посетитель сразу понимает, что он может позвонить, «Заказать звонок» или найти подробную информацию под стрелкой «Узнайте больше».

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

На сайте используется CTA «Заказать». Из минусов – это отсутствие адаптации под мобильные устройства.

2. granola.com.ua

Яркое решение главной воплотилось в этом украинском проекте. Качественные изображения продукта и контент от преимуществ до рецепта приготовления слились воедино. Мы видим также психологический триггер популярности в США и Европе.

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

3. creddy.ru

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

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

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

4. ru.oollee.com

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

При этом создатели не забыли про УТП, преимущества, цены, ссылку на Facebook и форму обратного звонка.

5. servermall.ru

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

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

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

Повсюду потенциального клиента преследуют призывы к действию, такие как «Перезвонить? Легко!», «Пишите, мы ждем», «Выбрать свой», «За консультацией», чтобы не упустить тот момент, когда он наконец-таки решит оставить заявку или купить.

Мобильный формат на высоте и сайт просто напичкан функционалом — форма обратного звонка, онлайн-консультант, поиск, личный кабинет, всплывающее окно с товарами со скидкой и даже конфигуратор. Перейдите также на внутренние страницы, там есть на что посмотреть!

6. have-a-rest.net/ru/

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

Однако, по мнению агентства WIONT, на этой домашней странице не хватает форм захвата и другого функционала лидогенерации.

7. affinity.pt/en/

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

Ниже главная страница детально отвечает на вопрос, чем занимается компания в блоке «WE DO» со ссылками на каждую услугу с не менее красивым дизайном. Смотрите!

8. koox.co.uk

Графическая прорисовка, параллакс и четкое ценностное предложение. Пролистав до меню и кликнув на кнопку его просмотра, переходим на удивительное отображение блюд. Круто!

9. kikk.be/2017/en

Завораживающий дизайн главной, выделяющиеся призывы к действию «Get tickets», «See the full program», описание мероприятий и организаторов фестиваля, список партнеров + социальная медиа оптимизация (SMO) в виде интеграции Twitter и Instagram аккаунтов с веб-сайтом – всё, что нужно для продвижения информационного продукта.

10. easterneuropeanmovies.com

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

Заключение

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

Статья будет дополняться примерами. Следите! Пожелания и отзывы приветствуются в комментариях! Спасибо.

Комментарии (0)

Пока еще никто не оставил комментарий

Источник: wiont.ru