РАЗРАБОТКА И ДИЗАЙН

Как должна выглядеть главная страница Интернет-магазина!? Основные приемы

    42 10551
    Как должна выглядеть главная страница Интернет магазина

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

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

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

    glavnaya stranica

    На этой схеме расположены основные компоненты витрины:

    1. Шапка
    2. Верхнее (Главное) меню
    3. Левое меню
    4. Тело сайта
    5. SEO-блок
    6. Правый блок
    7. Подвал

    Теперь разберем каждый элемент подробно.

    1. Шапка

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

    • Логотип магазина
    • Название магазина (можно объединить с логотипом)
    • Форма поиска
    • Иконка корзины
    • Выбор валюты и языка
    • Вход в личный кабинет (при его наличии)

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

    2. Верхнее (Главное) меню

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

    • О магазине/О нас
    • Товары и цены/ Каталог/ Услуги/
    • Оплата/Способы оплаты
    • Доставка
    • Акции/Специальные предложения
    • Гарантия/Сервис
    • Контакты

    В итоге Вы должны получить идеальное "средство передвижения" по Вашему Интернет-магазину.

    3. Левое меню

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

    ВАЖНЫЙ СОВЕТ! Не мудрите с названиями пунктов левого меню. Пишите как можно проще и понятнее. Общайтесь с посетителями на понятном языке с применением понятных технических терминов.

    4. Тело сайта

    Это самая важная часть Вашего магазина, а также любого сайта. В этом блоке должна быть размещена основная информация сайта... НО ТОЛЬКО НЕ НА ГЛАВНОЙ СТРАНИЦЕ!

    Почему?! Спросите ВЫ!

    Потому что в этой статье мы разбираем как должна выглядеть ГЛАВНАЯ СТРАНИЦА ИНТЕРНЕТ-МАГАЗИНА! А что важно для главной страницы? Правильно! Красивые, манящие визуальные элементы, заставляющие нажать и узнать. А что чаще всего посетитель хочет узнать? Информацию об интересных и нужных товарах, но еще лучше о самых привлекательных ценах и предложениях.

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

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

     5. SEO-блок

    SEO-блок предназначен исключительно для поисковых машин. Поэтому в нем необходимо написать текст с ключевыми словами, для правильной индексации Вашего магазина поисковыми системами. Например: "Интернет-магазин предлагает купить детские коляски в Москве дешево. Доставка Бесплатно". Ну и дальше в этом роде.

     6. Правый блок

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

    В правом блоке я рекомендую разместить следующую информацию:

    • Отзывы
    • Последние покупки
    • Мы ВКОНТАКТЕ
    • Хиты продаж
    • и т.д.

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

    7. Подвал

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

    Для подвала не существует каких либо четких правил. Он несет исключительно информативную окраску.

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

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

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

    Также рекомендую подписаться на обновления сайта, чтобы не пропускать интересные статьи и советы. И не стесняемся делиться полезной информацией с друзьями ;-)

    С уважением, Владимир Гынгазов!

    42 КОММЕНТАРИЯ (ЕВ)

      • Тоже считаю, что именно так должна выглядеть Главная страница интерне-Магазина. Потому что именно её вид решает – останется ли человек на этой странице, будет ли он дальше знакомиться с тем, что представлено в Магазине, купит ли предложенные товары?

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

    1. Хорошо и толково все написано и есть теперь к чему стремиться. Будем ошибки исправлять и ваши рекомендации в жизнь воплощать. Благодарю, Владимир, за познавательную статью!

    2. Неплохая статья. Только вот информации как в шаблонах задавать эти блоки убирать и т.д. маловато в инете.

    3. Для всеми известного OpenCart нет НИ ОДНОГО курса, в котором бы рассказывалось о создании шаблона с нуля, либо о особеностях натяжки старых шаблонов с версии 1.5.4.1 на версию 1.5.5.1 . Нет ни в каких книгах и источниках алгоритмов работы с шаблонами, их программировании с нуля. Так углублённо ни в одном курсе не рассказывается. Например я новичок, защитил кандидатскую, кандидат тех. наук. Но даже с моим мозгом не удаётся разобраться в такой куче информации, в которой одна лишь вода, нет конкретики в видеокурсах, всё на уровне пользователя вплоть до щелкания по кнопкам, а все сторонние программеры только деньги могут тянуть. Уже даже на форумах такое происходит…Я подал вам идею. Если хватит знаний и создадите такой видеокурс, то уверяю вас станете миллионером и ваше имя будет знать каждый опенкартер :)

      • Владимир, я отчасти с Вами согласен! Но хочу сказать, что очень сомневаюсь в том, что большинство людей, которые хотят создать свой интернет магазин горят желанием разбираться в коде, чтобы изменить или создать шаблон с нуля. Большинству достаточно готовых шаблонов, которых на просторах интернета великое множество. Плюс ко всему, к сожалению, я не являюсь программистом. Я очень сомневаюсь, что смогу создать шаблон с нуля. Но самое главное это то, что правила о том, как должна выглядеть главная страница не является аксиомой. Каждый владелец интернет магазина должен анализировать свое детище и экспериментировать над её юзабельностью и коммерческой выгодностью.
        И еще один момент. Я это понял на собственном опыте. Порой лучше немного заплатить профессионалам, чтобы они Вам сделали все как надо, чем самому днями и ночами пытаться что то сделать и наладить. Время – самая дорогая валюта.

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

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

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

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

      • А ну может вы и правы если тем более у вас имеется опыт в таком вопросе и своей ИМ. Я просто сделал предположение относительно главной страницы сайта

      • Я покупал спальник, с поиска попал на конкретную страницу. Но т.к. не был уверен в выборе, то пошёл на главную страницу, чтобы просмотреть все спальные мешки. На главную страницу я бы не пошёл, если абсолютно точно был бы уверен в своём выборе.

    6. Creeper нет, конечно лучше главную оптимизировать. Но и без оптимизации все прекрасно работает. У меня на главной просто подключены модули: “лидеры продаж”, “последние поступления” и модуль статьи (Полезная информация). То есть человек даже если попадет на главную, легко поймет что это за магазин и куда ему нужно перейти. В крайнем случае нажмет на раздел “О нас”.

    7. Зависит еще от того, какую страницу вы продвигаете. Продвигать главную страницу по моему слишком накладно. Лучше продвинуть именно страницы с товарами. Но это мое мнение, может я и не прав. Посмотрим, что скажет Владимир. Думаю у него больший опыт, чем у меня.

      • Опыт – величина относительная! У каждого предпринимателя свое видение и свой опыт в видении бизнеса.
        Лично мое мнение – продвигать страницы с конкретным товаром. НО! Главная страница, должна выглядеть не хуже, чем страницы с товаром. А лучше если – лучше :-) На самом деле, различать по дизайну и юзабильности главную страницу и второстепенные, нет большого смысла. Они должны быть схожи. Понятно дело, что отдельные блоки будут отличаться, или вообще отсутствовать на определенном типе страниц.

    8. Посмотрел ваши бесплатные лекции и как бывший преподаватель могу сказать, что сделаны они очень презентабельно, оформлены на высочайшем уровне. Но это всё пыль в глаза. Ничего нового в лекциях я не увидел. В части материала, который представлен в видео, я разочаровался, например, как устанавливать программы и скачивать интернет движок – уже все знают, поскольку до вас были очень хорошие лекции автора программиста Ивана Коротеева (сейчас он работает программёром 1С-Рарус). Вот если сравнить его лекции и ваши в части оофмления:заставки, звук, качество видео, дикция, то я скажу, ваши лекции сделаны в 100 раз лучше. Но если сравнить качество материала лекций, то уровень Ивана на порядок выше и он говорит не по написанному, как должно быть, а по ходу лекций то, что знает исходя из опыта и упоминает о многиъ подводных камнях движка, так легче воспринимается, поскольку бывают нестандартные вещи в движке Опенкарта. Все сейчас бьются за качественный контент. но его в сети очень мало, поскольку это связано с недостаточным уровнем знаний преподавателей. Советую вам углублять уровень знаний. Например если у вас появится хотя бы одна видеолекция 5-минутная, на которой будет написана например блок-схема работы и взаимодействия
      файлов, функций, аргументов, переменных, схем запроса к базам данных и т.д. движка Опенкарта, то я даже готов её купить посмотреть, а пока ничего достойного я не увидел. Даже если это и есть в сети, то многим будет полезно это посмотреть и повторить.

      • Большое спасибо, Владимир, за такой отзыв. Именно такие отзывы я больше всего и люблю. Они мотивируют на совершенство.
        Целью этого миникурса было – ознакомить людей с таким движком, как Opencart. Я кстати, тоже не говорил по написанному. Все то, что я умел на тот период, все донес. Сейчас, курсы, в которых раскрывается от и до тема обучения – не бесплатны. Этот же курс является ознакомительным.
        Но скажу честно, на данный момент я тружусь над созданием более обширного и подробного курса.
        Совершенству нет предела

    9. Очень нужные рекомендации по оформлению Главной страницы Интернет-магазина Вы дали, Владимир.
      В недалёком будущем тоже собираюсь создавать И-магазин, и будет где найти руководство.

      • Я надеюсь, что Владимир Гынгазов разрешит дать ссылку на мой интернет-магазин (70% юзабилити совпадает с описанным в статье), так как ранее я размещал свои комментарии здесь. По статистике, люди, посещавшие мой интернет-магазин, говорят, что юзабилити на высочайшем уровне. Даже расположение корзины всем покупателям очень нравится. Вот пример интернет-магазина (сделан он конечно же раньше, чем вышла статья Владимира Гынгазова. Зная психологию людей, интернет-магазин был оптимизирован под юзабилити. Интернет-магазин уже работает, поэтому можете заходить http://www.kupimyaso.ru

        • Владимир, Ваш сайт действительно очень наглядный! Но если позволите, маленький совет! Сделайте слайдшоу на главной странице с товаром или еще чем то наглядным. Чтобы человек сразу понял, куда он попал! Так сказать добить его до конца :-)

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

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

        • Зашла, посмотрела на предложенный интернет-магазин Владимира по продаже мяса. В целом у меня уже складывается представление, как магазины должны выглядеть. Спасибо!

    10. Мне самым сложным кажется прикрутка на главную страницу программного кода Оплаты/Способов оплаты. Может плагин такой есть, Владимир, не знаете?

    Добавить комментарий