Ваша домашняя страница служит как введением в ваш бренд, так и набором закодированных инструкций, призванных помочь новым и существующим клиентам сориентироваться в вашем бизнесе и найти то, что им нужно. Как и на целевой странице, каждая деталь должна быть направлена на то, чтобы произвести сильное первое впечатление и побудить к целевому действию, независимо от того, является ли целью вашей домашней страницы продажа продукции или привлечение подписчиков электронной почты. Не существует единого способа оформления домашней страницы. Тем не менее, вот несколько советов, которые следует иметь в виду при планировании домашней страницы сверху донизу, независимо от того, создаете ли вы свой сайт или пересматриваете домашнюю страницу уже существующего сайта.
Как разработать эффективную домашнюю страницу
Согласно экспертному анализу, лучшие сайты электронной коммерции привлекают внимание пользователя менее чем за 10 секунд. С точки зрения дизайна вам необходимо сделать навигационный поток четким, чтобы посетители могли быстро выбрать наилучший путь для себя (и для вашего бизнеса) — это означает сбалансированное белое пространство, интуитивно понятную навигацию и продуманные элементы дизайна. Срочность добавляет психологический феномен под названием «избегание решения», который представляет собой тенденцию людей избегать решения, на принятие которого уходит слишком много времени. На домашней странице избегание принятия решения означает «отскакивание» путем выхода со страницы или нажатия кнопки «назад». Чтобы предотвратить это, первой задачей вашей домашней страницы должно быть убедить потенциальных клиентов задержаться на ней.
Помните о пользовательском опыте
Хотя легко увлечься цветовой палитрой и выбором шрифта, важно помнить о цели вашей домашней страницы: убедить людей просмотреть вашу продукцию и в конечном итоге совершить покупку. Самый простой способ добиться этого — создать простой, интуитивно понятный и понятный пользовательский опыт (UX). Если вы размышляете над тем, что составляет отличный UX для лучших дизайнов сайтов и домашних страниц, вот несколько вопросов, которые помогут вам сориентироваться:
- Что вы хотите, чтобы посетитель сделал? (например, совершить покупку, присоединиться к вашему списку адресов электронной почты и т.д.).
- Насколько просто им это сделать? Сколько шагов нужно сделать, чтобы выполнить вашу цель?
- Сколько информации им нужно, чтобы перейти к следующему шагу?
- Можете ли вы исключить какие-либо этапы?
Иногда посетители попадают на домашнюю страницу, зная, чего они хотят, а иногда — нет. Вы должны разрабатывать домашнюю страницу с учетом обоих вариантов, обеспечивая при этом соответствие ваших решений вашим основным целям. Хорошая домашняя страница должна удовлетворять посетителей, которые ищут конкретный результат, и в то же время привлекать внимание тех, кто его не ищет.
Выберите правильные шрифты и цветовую гамму
Хотя UX — это прежде всего, вы также можете настроить тему своего магазина и выбрать шрифты и цветовую палитру для главной страницы. Шрифт должен соответствовать существующему брендингу, чтобы создать последовательную визуальную эстетику, способствующую узнаваемости бренда. То же самое касается и цветовой палитры. В некоторых случаях вы можете обнаружить, что ваш шрифт слишком сложен для чтения. Важнее создать домашнюю страницу для пользователя, поэтому здесь можно приспособиться. Рассмотрите возможность использования фирменного шрифта для таких элементов дизайна, как баннеры и изображения нижнего колонтитула, а для остального текста остановитесь на чем-то более универсальном. Когда дело доходит до цветов, вы также должны быть уверены, что поддерживаете чистый дизайн, оставаясь верными своему бренду. Если ваши цвета слишком резкие для длительного просмотра на экране, подумайте о том, чтобы разбить их белым пространством. Вы можете использовать цвета вашего бренда для CTA-кнопок, границ, ссылок и других элементов дизайна на главной странице. Несмотря на то, что бренд винтажной одежды Peppy Debs имеет яркий, смелый брендинг, он использует чистый дизайн главной страницы сайта, что облегчает навигацию. Вместо того чтобы использовать шрифт из своего логотипа, бренд выбрал что-то более простое и доступное. А в элементах дизайна, таких как кнопки и цвета шрифтов, используется фирменная цветовая палитра.
Используйте привлекающие внимание образы
Избегание решений применимо ко всем элементам вашей домашней страницы. Осознание границ внимания пользователя поможет вам подчеркнуть то, что наиболее важно при оформлении домашней страницы. Независимо от того, продвигаете ли вы продукт или коллекцию или пытаетесь привлечь внимание пользователей, цель ваших визуальных элементов — привлечь внимание пользователя сразу после того, как он зайдет на ваш сайт. Вот несколько способов включения визуальных элементов в дизайн вашей домашней страницы:
Изображение с наложением текста
В этом стиле изображения, размещаемые над разворотом, часто сочетаются с одним мощным изображением, прямым текстом и призывом к действию. Он лучше всего подходит для продавцов, которые хотят сфокусироваться на главном предложении, например, на ограниченной по времени распродаже, флагманском продукте или сезонной коллекции.
Слайд-шоу
Вы можете включить слайд-шоу, каждый из слайдов которого будет рекламировать конкретную распродажу, группу товаров или высококачественную фотографию товара. Владельцы магазинов, продающих широкий ассортимент товаров по нескольким категориям, часто выбирают этот подход, когда есть несколько коллекций или страниц, которые они хотят прорекламировать посетителям. Вы захотите упорядочить слайды по приоритету, причем самый приоритетный слайд должен быть первым. Лучше всего ограничиться примерно тремя слайдами, поскольку пользователи не будут долго смотреть на один слайд, прежде чем перейти к следующему шагу.
Видео
Некоторые бренды выигрывают от визуального оформления главной страницы, рассказывающего их историю. Для некоторых продуктов, особенно инновационных или сложных, может потребоваться иллюстрация того, как использовать продукт, прежде чем вы сможете заинтересовать посетителей. Возьмем, к примеру, домашнюю страницу компании Bottle Cutting Inc. Многие посетители, скорее всего, еще не знают, что им нужен этот продукт, поэтому главная страница создает ажиотаж вокруг него с помощью видео-демонстрации — естественный первый шаг в процессе конверсии.
Поскольку изображения оказывают такое немедленное и значительное влияние, важно убедиться, что они высокого качества и действительно представляют ваш бренд. Если вы не являетесь фотографом, вы можете воспользоваться функцией выбора изображений в редакторе темы Shopify, чтобы выбрать из нашей коллекции бесплатных стоковых фотографий.
Анимация
Анимация придает визуальный интерес и интерактивность дизайну вашей домашней страницы. Вы можете использовать графические иллюстрированные анимации или анимированные GIF-файлы с реальными изображениями и видео. Компания Ocean Park Swimwear использует анимацию на своей домашней странице в виде анимированного GIF. Анимированный GIF содержит несколько различных видеороликов, демонстрирующих купальники в действии. Поскольку компания ориентирована на активных женщин, которые хотят носить купальники, занимаясь водными видами спорта, видеоролики демонстрируют продукцию в этих случаях.
Этот анимированный GIF дополняет другие изображения продуктов, а также копию и элементы дизайна на домашней странице бренда.
Учитывайте дизайн домашней страницы для мобильных устройств
За последние несколько лет мобильный веб-трафик неизменно продолжает расти, составляя более половины всего мирового трафика. Поскольку значительная часть вашего трафика, скорее всего, будет поступать с мобильных устройств, каждое решение, принимаемое вами в отношении дизайна домашней страницы, должно учитывать мобильную оптимизацию. Упрощение домашней страницы с целью направить пользователей к определенному набору действий становится еще более важным для мобильных пользователей. Посмотрите, как бренд по уходу за кожей Blendily повторяет свои ценностные предложения, а затем призывает мобильных пользователей изучить его продукцию с помощью легко заметной черной CTA-кнопки Shop на примере ниже.
Если вы являетесь владельцем магазина Shopify, элементы любой темы в магазине тем Shopify будут подстраиваться под размер экрана. Однако имейте в виду, что изображения, которые выглядят потрясающе на широком экране настольного компьютера, могут быть обрезаны или обрезаны необычным образом на экране мобильного телефона. Призывы к действию может быть труднее найти или они могут быть перемещены таким образом, что посетители с большей вероятностью нажмут на кнопку мыши. Вы можете легко просмотреть дизайн своей домашней страницы на разных устройствах в редакторе тем Shopify, используя опции переключения вида в верхней части предварительного просмотра.
Контент, расположенный выше по тексту, побуждает к действию
Теперь вам нужно понять роль самой ценной недвижимости вашего сайта. Когда веб-дизайнеры говорят об области домашней страницы как «над сгибом», они имеют в виду то, что посетители видят до того, как они решат прокрутить страницу — что-то вроде входной двери вашей домашней страницы. При рассмотрении того, что находится над сгибом и как это сопровождает остальную часть вашей домашней страницы, сосредоточьтесь на действиях, которые вы хотите, чтобы посетитель предпринял, когда он впервые попадет на ваш сайт, на информации, которая ему нужна в первую очередь, и на том, как вы можете помочь ему принять решение. Большинство лучших дизайнов сайтов электронной коммерции используют заголовки, которые представляют собой сочетание привлекающего внимание заголовка, убедительного подзаголовка и захватывающего визуального ряда над сгибом, чтобы удержать новых посетителей на сайте и познакомить их с брендом. Однако существует множество других способов привлечь интерес клиента с самого начала, например, размещение рекламного баннера над навигацией для рекламы специального предложения или бесплатной доставки.
Понятная навигация
Навигационная сила веб-страницы основывается на ее простоте. Это может показаться противоречивым, когда вы хотите удовлетворить потребности различных типов посетителей, но это имеет смысл, если учесть, как быстро люди переходят от страницы к странице в Интернете. Навигация по заголовкам должна быть максимально простой, отдавая предпочтение тем путям, которые наиболее важны для большинства посетителей. Энди Крестодина, стратегический директор Orbit Media Studios, рекомендует размещать на главной странице не более семи навигационных ссылок. Люди используют организационный метод запоминания, называемый «разбивкой», при котором информация разбивается на более мелкие мысленные единицы, называемые «кусками». Чем меньше фрагментов, тем легче запоминать. В своей влиятельной работе, опубликованной в 1956 году, профессор психологии Джордж Миллер пришел к выводу, что наша кратковременная память обычно способна удерживать только семь элементов одновременно. Сайты со слишком большим количеством вариантов навигации могут казаться загроможденными и перегруженными, что увеличивает вероятность того, что посетители бросят сайт или пойдут по неправильному пути. Хорошей практикой является определение приоритета навигационных ссылок слева направо, причем наиболее важные страницы располагаются слева.
Если у вас много товаров и коллекций, сосредоточьтесь на основных коллекциях верхнего уровня в навигации главной страницы и используйте «мега-меню» или выпадающее меню для создания поднавигации. Поднавигация — это отличный способ упорядочить продукты и страницы для удобства поиска, не перегружая клиентов слишком большим количеством вариантов с самого начала. На некоторых сайтах в навигации по заголовку также есть ссылки на страницы «О нас», «Контакты», «Вопросы и ответы» или другие страницы, потому что эти страницы поддерживают их основные цели. Но если вы обнаружите, что посетители этих страниц не конвертируются, вероятно, эти ссылки уводят их с пути к конверсии. В таком случае лучше всего добавить эти ссылки в нижний колонтитул.
Прямой призыв к действию
Думайте о призыве к действию как о выездном знаке на шоссе; он должен быть коротким, его трудно не заметить, и он должен указывать водителям правильный путь, по которому они должны двигаться. Ваши призывы к действию и то, на что они ссылаются, должны соответствовать следующим шагам, которые клиент может предпринять для достижения основных целей вашей домашней страницы. Это может означать ссылку на вашу последнюю коллекцию или побуждение пользователей к просмотру объясняющего видео, чтобы узнать больше. Пользователь должен сразу понять, куда нажать, потому что кнопка призыва к действию должна выделяться на фоне окружающего дизайна. Чем больше времени требуется пользователю, чтобы найти призыв к действию, тем больше вероятность того, что он запутается или уйдет.
Легкодоступная корзина для покупок
Корзина покупок является неотъемлемой частью главной страницы большинства сайтов электронной коммерции. Частью интуитивно понятной навигации для ваших клиентов является обеспечение легкого поиска корзины. Липкая» корзина (иногда ее называют «выдвижной»), которая доступна в некоторых темах Shopify, — это корзина, которая присутствует и доступна на экране в течение всего времени просмотра, обычно в правом верхнем углу. Еще лучше, если вы можете отображать количество товаров, находящихся в корзине покупателя. Жирное, привлекающее внимание уведомление возле корзины с указанием количества добавленных товаров напоминает покупателям, что их покупка еще не завершена, и побуждает их завершить оформление заказа. Итог: Дайте покупателям понять, когда товары находятся в их корзине и как получить к ним доступ. На главной странице сайта Chubbies есть синий круг, показывающий количество товаров в корзине пользователя, а также выдвижная корзина, которая позволяет пользователям легко продолжить покупки или перейти к оформлению заказа.
Строка поиска
Наряду с минимальной навигацией и «липкой» корзиной, многие интернет-магазины включают строку поиска, чтобы помочь посетителям, которые точно знают, что ищут — особенно если у них много различных продуктов или много контента для изучения. Например, компания Morphe имеет обширную коллекцию различных средств для макияжа. Чтобы облегчить своим клиентам поиск того, что они ищут, Morphe добавила интеллектуальную панель поиска, которая автоматически дополняет поисковый запрос посетителя предлагаемыми продуктами, коллекциями и страницами. Это создает прямой путь к странице, которую ищет пользователь, с главной страницы.
Как правило, пользователи, которые завершают поиск, с большей вероятностью совершают конверсию. Если ваш бренд продает много товаров, удобная панель поиска — это альтернатива сложной навигации, которая может оттолкнуть покупателей.
Ниже сгиба: Другие элементы домашней страницы, которые следует учитывать
Элементы, размещенные ниже сгиба (т.е. после того, как пользователь прокрутит страницу), не обязательно менее важны — они часто усиливают и расширяют информацию, которую вы уже представили, обеспечивают другие пути к той же цели конверсии и делают другие страницы доступными для клиентов, которым они нужны. Вот краткий список элементов, которые вы можете включить в дизайн главной страницы или нижнего колонтитула, в зависимости от того, насколько они важны для достижения ваших целей.
Блоги, видео и другой контент
Содержание блога и видео может быть полезно для SEO, но контент выше сгиба может отвлекать покупателей и отвлекать их от вашей продукции. В целом вы хотите, чтобы ваш контент приводил пользователей к вашим продуктам, а не наоборот. Рассмотрите возможность размещения ссылок на ваш контент ниже сгиба или даже в нижнем колонтитуле, особенно если контент не является основным аспектом вашего бизнеса, и дайте возможность пользователям, решившим изучить ваш сайт, найти его. Если вы хотите продвигать свой контент, вы можете добавить ссылку в верхнюю навигацию, но часто лучше делать это в социальных сетях, по электронной почте и на сторонних сайтах, чтобы привлечь внешний трафик на ваш собственный сайт.
Социальное доказательство: Отзывы клиентов, одобрение и пресса
Социальное доказательство — это одобрение вашего бренда, которое использует существующее доверие со стороны клиентов/экспертов, чтобы завоевать доверие новых посетителей. Это могут быть упоминания в прессе, обзоры, посты в социальных сетях, галереи Instagram или одобрение со стороны влиятельных лиц или экспертов. Если у вас есть убедительные социальные доказательства, которые вы можете использовать, ваша домашняя страница может стать хорошим местом для них.
Низкоприоритетные и дополнительные продукты
Старые продукты и дополнительные продукты, возможно, стоит переместить в нижнюю часть главной страницы. В конце концов, вы хотите лидировать с вашими основными продуктами или привлечь внимание к вашим новейшим линейкам продуктов. Менее дорогие товары, дополняющие ваши основные продукты, лучше всего подходят в качестве импульсивных покупок, используемых в качестве дополнительного предложения при оформлении заказа, но их также можно разместить на главной странице, ниже сгиба, чтобы посетители знали о них, если вы продаете товар, требующий замены деталей или пополнения. Например, компания LIV специализируется на часах, но рекламирует свои дополнительные товары премиум-класса, такие как ремешки, в нижней части главной страницы.
Страницы с более низким приоритетом
Страницы, которые вы считаете низкоприоритетными, могут отличаться в зависимости от вашей бизнес-модели. Как правило, такие страницы, как Условия предоставления услуг, Политика конфиденциальности или Правила возврата, лучше всего размещать в нижнем колонтитуле. Поскольку ссылки на эти страницы так часто располагаются в нижнем колонтитуле, многие посетители будут интуитивно смотреть туда, если им нужно попасть на эти страницы. Другие страницы, такие как страница «О нас», контактная информация, местоположение магазина или страницы отслеживания заказов, также могут быть добавлены в нижний колонтитул. Но если они действительно помогают потенциальным клиентам купить у вас товар, или помогают вам достичь другой ключевой цели, то вы можете рассмотреть возможность их приоритетного размещения в верхней навигации или даже в дизайне главной страницы. Например, торговая компания, продающая услуги по подписке, может значительно сократить количество обращений в службу поддержки, добавив в навигацию главной страницы заметную ссылку FAQ. Пытаясь решить, является ли страница низкоприоритетной, спросите себя, насколько вы выиграете, если сразу же направите посетителей на эту страницу, и не отвлекает ли она их от ваших целей или не привлекает к ним.
PopSockets
Главная страница PopSockets отлично сочетает в себе смелые дизайнерские тенденции и оптимизацию коэффициента конверсии. Блестящие изображения продуктов привлекают внимание целевой аудитории, а также несколько призывов к действию.
Ничто над сгибом не отвлекает от главной цели главной страницы: направить пользователя на просмотр последней линейки продукции. Прокручивая страницу вниз, вы увидите больше CTA для покупки других продуктов.
Benoa Swim
Бренд экологичных купальников Benoa Swim также успешно сочетает хороший дизайн домашней страницы с удобством использования и простой функциональностью. Главная страница имеет простую навигационную панель и крупные высококачественные изображения продукции. Прокрутив страницу вниз, вы увидите возможности для покупки последних коллекций и узнаете о приверженности бренда к устойчивому развитию — это одни из его уникальных торговых предложений.
Benoa также стратегически позволяет пользователям приобретать представленные товары прямо с главной страницы сайта, без необходимости переходить на страницу товара. Это отличный способ оптимизации для увеличения конверсии за счет сокращения количества шагов для покупки.
Common Heir
Компания Common Heir использует хороший дизайн домашней страницы для продажи своих продуктов по уходу за кожей через Интернет. Главная страница включает такие важные элементы, как простая навигационная панель, контрастные цвета, которые облегчают чтение, и кнопки CTA.
Главная страница также подчеркивает продукцию бренда, основателей малого бизнеса и ценностные предложения, а также большие и красивые фотографии. Она также включает отзывы клиентов для социального подтверждения.
GRAV
Просто, но весело — вот тема для GRAV. Хотя фирменные цвета компании — черно-белые, GRAV выбирает яркие цвета фона и элементы дизайна, чтобы оживить свою домашнюю страницу. На домашней странице GRAV также демонстрируется встроенное видео, чтобы показать покупателям, как пользоваться продукцией компании. Другие важные элементы включают карусель отзывов покупателей, выделенные продукты и возможность подписаться на цифровой маркетинг GRAV по электронной почте.
Hunterhue
Hunterhue — это бренд предметов искусства и ювелирных изделий, который продает изделия, сделанные кустарным способом и единственные в своем роде. Дизайн его домашней страницы прост и понятен, что позволяет изделиям и искусству занять центральное место.
Пользователи могут легко выбрать для покупки предметы искусства или аксессуары, а также просмотреть последнюю коллекцию. С помощью навигационной панели пользователи могут перейти к другим товарам, странице «О сайте», контактной форме или корзине.
Rowan
Бренд по уходу за собаками Rowan — наш следующий мини-пример хорошего дизайна домашней страницы. Он использует яркие, веселые цвета и милые образы, чтобы привлечь внимание онлайн-покупателей. Изображение героя — это видео, на котором собака демонстрирует свою удивительную шерсть — результат использования продукции Rowan.
Наряду с каруселью товаров на выбор, на сайте Rowan отображается звездный рейтинг покупателей, чтобы еще больше убедить посетителей в необходимости конверсии. Rowan также демонстрирует хвалебные отзывы в прессе.
La Banasta
Компания La Banasta продает на своем веб-сайте экологически чистые чистящие средства и товары для дома. Дизайн главной страницы включает красивые фотографии продукции, четкие кнопки CTA и удобное для навигации главное меню.
La Banasta также использует свою домашнюю страницу для повторения своих ценностных предложений и того, почему кто-то захочет поддержать бренд.
Он организует товары по категориям, чтобы облегчить пользователям просмотр наиболее интересующих их товаров.
Наконец, La Banasta апеллирует к эмоциям людей и культивирует связь, рассказывая историю своего происхождения.
Ora Organic
Бренд добавок Ora Organic имеет чистый, но красивый дизайн главной страницы, который эффективно разделяет пользователей на две группы целевой аудитории: тех, кто хочет самостоятельно покупать продукты, и тех, кто хочет получить рекомендации по покупке продуктов. Таким образом, он побуждает пользователей просмотреть все товары или принять участие в викторине, чтобы помочь определить, какой продукт лучше всего подходит для них.
На главной странице повторяются ценностные предложения бренда, а затем пользователям предлагается выбор: совершить покупку или пройти викторину еще раз.
Далее на странице Ora Organic рекламирует свой вариант, основанный на подписке, после чего приводится больше доказательств в виде информации о дегустации продукции и отзывов покупателей.
Dirty Labs
Dirty Labs — это экологически чистый бренд стирального порошка, который использовал столь же чистый дизайн для главной страницы своего сайта. Белые, небеленые и мягкие оттенки создают впечатление дружелюбия и доступности — наряду с четкими путями навигации по сайту.
Отзывы клиентов добавляют социальное доказательство, побуждая пользователей к конверсии.
Dirty Labs также использует часть домашней страницы, чтобы рассказать людям о своей продукции и о том, что входит в ее состав. После этого она освещает сообщения в прессе, а затем умело рекламирует конкретные продукты.
BioLite Energy
BioLite Energy продает экологичные портативные приборы для приготовления пищи и освещения. На своей домашней странице компания использует красивые изображения продукции и четкие призывы к действию.
BioLite также использует свою домашнюю страницу, чтобы показать, какое влияние она оказывает на общество. Обмен этой информацией побуждает пользователей самим поддержать это дело, совершив покупку.
Улучшение дизайна домашней страницы с течением времени
Как вы, вероятно, уже знаете, не существует единого оптимального способа оформления домашней страницы. Такие факторы, как демографические характеристики пользователей, брендинг, количество продуктов, маркетинговые каналы и многое другое, могут влиять на поведение пользователей самыми разными способами. Вот почему так важно всегда рассматривать свою домашнюю страницу как незавершенную работу, используя трафик и продажи, которые вы генерируете, для измерения влияния вашей домашней страницы и внесения корректировок с течением времени.
FAQ по дизайну домашней страницы
Как должна выглядеть хорошая домашняя страница?
- Простое в использовании навигационное меню
- Высококачественные изображения продукции
- Четкие призывы к действию
- Быстрый доступ к корзине покупок
Что должна делать эффективная домашняя страница?
- Выделите свои продукты
- Познакомьте людей с вашим брендом
- Подтвердите свое ценностное предложение
- Подтолкнуть пользователей к следующему этапу процесса покупки
Каковы некоторые хорошие примеры дизайна домашней страницы?
- Benoa Swim
- Common Heir
- GRAV
- La Banasta
- PopSockets
- Rowan
- И многое другое в этом посте