Если в офлайн-мире человека «встречают по одежке, а провожают по уму», то в онлайне встречают по дизайну, а провожают по содержанию. Главная страница сайта - это ваше лицо в интернете и первое, что попадает на глаза посетителю. Второго шанса произвести первое впечатление не будет: ваша главная должна быть максимально четкой и привлекательной, да так, чтобы вопросов не оставалось.
Какую информацию ищет посетитель при первом посещении сайта? Мы сформулировали 5 ключевых вопросов, на которые ваша главная страница должна дать ответ. Возьмите их за основу, и вы не упустите ни одного потенциального клиента.
Кто вы такой?
Ответ на этот вопрос должен звучать громко и четко. Если цель сайта - продвижение бизнеса, посетители первым делом должны увидеть ваш логотип. Это правило распространяется на сайты-портфолио и на все ресурсы, которые рекламируют услуги. Сразу же давайте понять, кто вы такой, не ждите, пока у людей возникнут вопросы и недоумение. Вот пара полезных советов по .
Чем вы занимаетесь?
Старайтесь, чтобы люди сразу же понимали, какие услуги вы оказываете. Попросту говоря - чем вы можете быть им полезны. Если вы, например, фотограф, дизайнер или парикмахер, то так и пишите. Рассказывать о себе можно по-разному, в большинстве случаев достаточно просто добавить занятие или род деятельности рядом со своим именем или логотипом. Помните: краткость - сестра таланта.
Что я здесь найду?
Своевременный ответ на этот вопрос - третий шаг на пути к идеальной главной странице. Сайты, как мы знаем, бывают разные. Есть простые, с минимумом деталей, а есть, наоборот, многостраничные, с горой контента. Вне зависимости от того, какой стиль вы выбрали, обязательно проработайте навигацию, чтобы посетители могли легко найти нужную им информацию. Сделайте аккуратное и красивое меню и позаботьтесь о том, чтобы порядок страниц на сайте соответствовал визуальной иерархии. Кстати, в работе над улучшением навигации может пригодиться фиксированный хедер - читайте о его преимуществах.
Чем вы отличаетесь от других?
Вот и пришло время вспомнить слово « ». Для начала решите, какие ассоциации должен вызывать ваш бизнес и сайт. Придумайте собственный стиль и дизайн: когда дело доходит до самопрезентации в интернете, шрифты, цвета, иконки и качественные изображения могут многое о вас рассказать. Если веб-дизайн кажется вам чем-то запредельно сложным, не переживайте. Лучше возьмите себе за правило регулярно читать соответствующий
Знаете, за какое время посетитель принимает решение о полезности сайта? За 3 секунды.
Вдумайтесь: у вас есть всего 3 секунды на то, чтобы заинтересовать пользователя. И нет права на ошибку: второго шанса произвести первое впечатление не будет. Сегодня мы расскажем о том, какая информация на главной странице удержит пользователя.
Главная страница вашего сайта должна быть
- Интересной.
- Понятной.
- Приятной.
- Привлекательной.
На словах звучит просто, а как это сделать? Будем разбираться.
Оценка понятности
Что значит «понятная страница»? Всё просто — на главной странице посетитель должен получить ответы на свои вопросы:
- Кто вы?
- Чем занимаетесь?
- Чем вы можете мне помочь?
- Почему я должен вам верить?
- Есть доказательства вашей хорошей работы?
- Гарантии?
- Адрес? Телефон? Контакты-то у вас есть?
Если на эти вопросы посетитель ответа не получает — он уходит.
Не нужно давать ответы на все вопросы именно на главной странице. Лучше на видном месте в меню разместить кнопки, которые перенаправят посетителя на страницу с нужной информацией. Обычно это страницы «О нас», «Гарантии», «Контакты» и т. д.
Вам понятно, чем занимается этот сайт?
Главная страница сайта. Совершенно непонятно, куда попал
А вот тут уже сразу всё понятно.
Правильная главная страница. Сразу ясно, на каком сайте находишься
Какие элементы помогают пользователю получить ответы на вопросы
Логотип
Логотип компании обычно располагается в левом верхнем углу. Если у вас его нет — напишите текстом название организации, например: Компания «Двое из ларца» . Пользователи привыкли, что именно тут располагается первичная информация о компании, оставьте её на этом же месте.
Лого сразу поясняет клиенту, на каком сайте он находится
Пояснение
К логотипу нужно пояснение. Обязательно. Многие этого не делают, а зря. Человек не может расшифровать ваш логотип, он просто видит интересную картинку.
Если ваш лого текстовый, то пояснение тоже нужно. Например: «Компания “Двое из ларца” — доставка суши за 30 минут». Вот, теперь посетителю станет понятно, на какой сайт он зашёл.
Контакты
Если контакты вынесены у вас в меню и для них предусмотрена отдельная страница, всё равно укажите один из телефонов или электронную почту в шапке и футере сайта. Многим просто лень переходить по ссылкам, нужно, чтобы информация была перед глазами.
СКРИН Примечание: нужен пример хорошего сайта на базе 1C-UMI.
Поиск по сайту
Многие забывают о кнопке поиска по сайту, а она нужна. В интернет-магазинах особенно. Большинство людей предпочитают не искать товары по меню, а просто написать их названия в поиске. Обязательно поставьте поиск на сайт. Например, на поиск встроен. Обычно его располагают справа вверху страницы или посередине.
Кнопка поиска конвертирует на 43 % больше прибыли.
Контент
«Это текст, который пользователь…» Нет, сразу читать будет вряд ли, но «просканирует» мгновенно. Текст должен быть составлен грамотно, написан простым и понятным языком, без канцелярщины и пустых оборотов. Уберите все штампы, нелепые и тяжеловесные конструкции вроде «вас встретят доброжелательные лица», «динамично развивающаяся компания», «колоссальный опыт работы и высококвалифицированные специалисты». Это пустые слова. Клиент в наше время разборчивый, он хочет сразу получить необходимую информацию, а не продираться сквозь дебри слов.
Обязательно отметьте в тексте, чем занимается ваша компания и сколько времени. Как много было выполнено работ. Дайте ссылку на портфолио, где посетитель может ознакомиться с вашими работами. Затроньте тему сервиса и гарантий — покажите, что вы отвечаете за качество и всегда готовы нести ответственность за свои недочёты.
Текст должен вызывать доверие. Пишите искренне, и пользователь это почувствует.
Кроме того, не забывайте о структуре текста: заголовки, подзаголовки, списки, цитаты, картинки — расставляйте акценты. При беглом просмотре статьи пользователь увидит важные для него моменты.
Мы уже рассказывали о том, как правильно писать и структурировать тексты. Читайте об этом подробнее в нашем блоге.
Портфолио
Несколько работ можно разместить на главной странице сайта, на остальные дать ссылку. Так посетитель сразу сможет оценить качество услуг, которые вы предоставляете.
Отзывы
Отзывы повышают уровень доверия новых клиентов к вашей компании. Они отвечают на вопросы посетителя: «Почему я должен вам верить?» и «А кто может подтвердить, что вы действительно хорошо работаете?» Опубликуйте хотя бы 3—4 отклика. Через время вы заметите, насколько лояльнее стали к вам посетители.
Важно! Отзывы должны быть честными, фото клиентов — настоящими. Стоковые картинки видно сразу, а если посетитель заметит, что его пытаются обмануть даже в такой мелочи, как фото, то он не поверит и всему остальному.
Главная страница сайта - это лицо компании. Обычно именно на нее попадают потенциальные клиенты и именно по ней оценивают, стоит ли дальше сотрудничать с фирмой. Главная страница сайта сродни витрине магазина. Если она привлекает внимание, то потенциальный покупатель зайдет внутрь, чтобы внимательнее рассмотреть товар. К тому же она играет роль информационного центра, помогая пользователю сориентироваться и понять, где искать необходимую информацию.
Какой должна быть идеальная главная страница сайта?
- Информативной.
Заходя на сайт, посетитель сразу же должен получить на первой странице короткие и четкие ответы на вопросы:
- Что это за сайт?
- Что здесь можно найти?
- Можно ли доверять этой компании?
- Чем этот сайт лучше других?
- Что делать дальше?
И если посетитель получает нужную ему информацию и понимает, что этот сайт может предложить то, что ему нужно и на выгодных условиях, то он останется на страницах ресурса и с большей вероятностью станет клиентом компании. Поэтому основная задача главной страницы - с первых секунд убедить посетителя сайта в том, что он попал по адресу.
- Целевой. Обращаться к своим клиентам необходимо на их языке. Если это крупная B2B-компания, то лучше придерживаться профессионального сленга, сдержанного стиля - все должно подчеркивать профессионализм и серьезность компании. А если это развлекательный ресурс, целевой аудиторией которого является молодежь, то уже можно и нужно придерживаться разговорного стиля написания текстов, более смелого дизайна главной страницы.
- Удобной и функциональной. Информация и ссылки на главной странице должны быть расположены грамотно, чтобы посетителю было удобно пользоваться ресурсом. Интуитивно понятная навигация, контакт для обратной связи, популярный контент\товар и возможность его заказать непосредственно с главной страницы, адаптированный дизайн сайта - вот только некоторые элементы, которые делают страницу удобной. Но при этом всего должно быть в меру, поскольку перегруженная контентом и функциональными блоками страница отпугнет пользователя.
- Визуально привлекательной. Это очевидное, но довольно сложное требование. Сложность заключается в том, что у всех свое представление о прекрасном. При разработке дизайна главной страницы необходимо помнить, что она должна нравиться не владельцу ресурса, а его клиентам. А как показывает практика, их предпочтения могут сильно различаться. Дизайн главной страницы сайта должен быть привлекательным, и для его создания необходимо четко понимать, кто является целевой аудиторией ресурса.
Ниже приведены примеры дизайна главных страниц салонов красоты. Информативным первый вариант назвать сложно. Перейдя на этот ресурс по запросу «салон красоты», пользователь, скорее всего, покинет его через 1 секунду, потому что здесь нет ответа ни на один из вышеперечисленных вопросов. На втором сайте есть понятная навигация, выведены прайс-лист и список основных услуг, представлены специалисты, которые будут работать с клиентом, примеры работ и актуальные акции. Человек, желающий воспользоваться услугой, наверняка задержится здесь, чтобы ознакомиться со всей информацией.
Также на примерах главной страницы сайтов можно сразу увидеть выполнение и нарушение последних трех пунктов. Уверены, объяснять, где удачный вариант, а где - нет, не нужно. Первый сайт нельзя назвать ни привлекательным, ни продающим, ни удобным и функциональным. Низкое качество изображений, применение светлых шрифтов, отсутствие логичной структуры, функциональных блоков и продающих элементов делают первый сайт малопривлекательным для пользователей. Напротив, на втором ресурсе сразу виден блок, где можно подобрать интересующую услугу, ознакомиться со стоимостью, получить бонусы, участвуя в акциях, плюс привлекательный дизайн - все это заставит посетителя задержаться на сайте, а затем воспользоваться предложением.
Важные элементы оформления: что должно быть на главной странице сайта?
Главная страница сайта должна соответствовать ожиданиям клиента и отрасли, в которой работает компания. Но четкого ответа на вопрос о том, какой должна быть главная страница сайта, не существует, иначе все сайты были бы похожи друг на друга. Но существуют определенные требования, при соблюдении которых можно увеличить степень доверия к компании и уменьшить процент отказов.
Навигация
Как уже говорилось, навигация по сайту должна быть простой и интуитивно понятной. Пользователи должны легко и быстро находить нужную им информацию на странице.
Пример главной страницы сайта с удачной навигацией:
Если это интернет-магазин, рекомендуем оформить на главной странице небольшой каталог с наиболее популярными товарами, скидками и/или новинками. Если это информационный портал, то это могут быть ссылки на наиболее популярные статьи, последние материалы и т. п. Например:
Уникальное торговое предложение
Посетитель должен понимать, почему ему необходимо купить товар именно на этом сайте. Преимущества компании, выгоды для клиента должны быть оформлены лаконично и размещены в видимой части экрана. Например, как на рисунке ниже. Выделенный блок является уникальным предложением, а ограничение акции по времени подталкивает пользователей к быстрому принятию решения.
Графический контент
Фотографии и изображения обеспечивают визуальную привлекательность главной страницы сайта. Возьмем к примеру сайт по продаже деревянных домов.
Можно сколько угодно писать о красоте дома и его уюте, природе вокруг, но никто не поймет этих преимуществ, пока не увидит. Но только не стоит размещать изображения, купленные на фотобиржах. Лучше поместить реальные фотографии товаров, объектов, результатов работы и т. п. Если не оформить главную страницу с помощью графического контента, сайт будет смотреться уныло и серо. Это непременно скажется на уровне конверсии и в конечном итоге на продажах.
Сравните следующие главные страницы сайтов:
В первом случае одного взгляда на страницу достаточно, чтобы составить представление о том, какие дома предлагает компания, а также о их стоимости. Во втором случае на главной странице просто размещен общий малоинформативный текст. В данном случае пользователь с большей вероятностью покинет сайт.
Текст
Необязательно на всех главных страницах сайта должен быть текстовый контент. Если это интернет-магазин, то можно обойтись и вовсе без него, ограничившись несколькими предложениями, описывающими выгоды для клиента. Но все-таки большинству сайтов текст на главной странице необходим как для повышения релевантности, так и для привлечения посетителей. Он должен быть лаконичным, содержать только важную для пользователя информацию. Также желательно, чтобы он был разделен на смысловые блоки с подзаголовками (один блок - одна мысль).
Целевые кнопки
Что отталкивает пользователей главной страницы сайта?
В стремлении улучшить главную страницу сайта необходимо знать меру. Иначе можно добиться обратного эффекта и вместо потока новых клиентов увеличить процент отказов. Итак, что отталкивает посетителей, а значит, ухудшает поведенческие факторы и отрицательно влияет на позиции сайта в выдаче? Оформляя главную страницу сайта, избегайте следующих элементов:
- музыка и посторонние звуки. Неожиданно начинающаяся мелодия, резкие звуки или звуковые призывы купить товар вызывают лишь одно желание - как можно быстрее найти кнопку и выключить навязчивое аудиосопровождение. И зачастую ей становится кнопка, закрывающая сайт раз и навсегда;
- навязчивая реклама сторонних ресурсов. Мало того, что рекламные баннеры сильно снижают доверие к сайту, так еще и отвлекают Вашего потенциально клиента от конечной цели - покупки/заказа на Вашем сайте. Такая реклама может увести клиента с Вашего ресурса;
- требование регистрации. Никто не захочет тратить свое драгоценное время, чтобы зарегистрироваться на Вашем сайте. Разве что ради внушительной скидки;
- грамматические ошибки. Если уже на главной странице сайта попадаются ошибки и опечатки, грубые нарушения пунктуации, то это вряд ли вызовет доверие посетителя;
- мелкие шрифты или слишком высокий контраст. Сайт должен быть приятен для пользователя - глаза не должно резать от слишком контрастного или мелкого шрифта. Никто не уйдет с сайта только из-за этого, но вкупе с другими недостатками оформления и форматирования это может сыграть не в Вашу пользу;
- Красивые изображения, фотографии, графики - это, конечно же, хорошо. Но нужно помнить, что перед размещением графического контента на сайт необходимо уменьшить его вес для более легкой загрузки. Посетитель не будет долго ждать, пока прогрузится страница. И насколько бы красивой она ни была, ее никто не увидит;
- лишние элементы. Часы, облака тегов, виджеты погоды и другие подобные элементы оформления перегружают главную страницу и отвлекают от основной информации. Избегайте движущихся и мигающих элементов, анимации, бегущих строк. У людей периферическое зрение развито лучше центрального, поэтому такие детали отвлекают внимание и затрудняют восприятие других информационных блоков;
- отсутствует адаптивная верстка. Все больше посетителей заходят на сайты через планшеты и смартфоны. И если сайт не адаптирован под разные устройства, то Вы потеряете огромное количество потенциальных клиентов.
Оформление главной страницы сайта - это процесс практически бесконечный. Если Вы думаете, что можно один раз постараться и после этого забыть о проблеме, то Вы глубоко заблуждаетесь. Главная страница должна постоянно развиваться и совершенствоваться. Чтобы оставаться востребованным и не терять клиентов, следите за тенденциями в копирайтинге, юзабилити и SEO, используйте Вебвизор, чтобы понимать поведение и потребности посетителей Вашего сайта. Анализируйте популярность различных информационных блоков с помощью инструментов Яндекс.Метрики и удаляйте некликабельные элементы, заменяя их другими материалами.
Основной принцип продвижения в поисковых системах (SEO продвижение) — соответствие сайта ожиданиям интернет-пользователя, который делает запрос к Google или Яндекс для получения наиболее релевантного, т.е. максимально точного ответа.
Поэтому крайне важно создать веб-страницу таким образом, чтобы она а) своим содержанием отвечала на вопрос пользователя и б) давала поисковым системам исчерпывающую информацию, о чём же данная страница.
Предположим, что страница создана, содержит уникальный, качественный для потенциального посетителя контент. Остановимся на том, что нужно сделать для её видимости в поисковых системах. Эта задача связана с корректным оформлением элементов страницы (тегов), важных для поиска. Прежде всего это
- заголовки h1, h2, h3 и т.д. (по необходимости);
- тег title — заголовок страницы, который отображается в поисковой выдаче и заголовке вкладки вашего браузера;
- мета-тег description, на его основе формируется сниппет — краткое описание страницы в выдаче;
- мета-тег keywords, ключевые слова.
Также желательно наличие на странице графики, если она нужна по смыслу.
Крайне важно иметь возможность заполнения или изменения этих атрибутов на вашем сайте.
Рассмотрим каждый из этих элементов подробнее.
H1 — это основной заголовок статьи, её название. Это то, что в первую очередь видит пользователь. Поскольку данный атрибут несёт в себе основной смысл, он является важным ориентиром для поисковых систем, сообщающий им, о чём данная страница. H1 на странице должен быть только один. Заголовки h2, h3 и далее по иерархии используются для обозначения разделов внутри статьи и дают поисковикам дополнительную информацию.
Title — это заголовок страницы, который в первую очередь виден поисковым системам. Можно сказать, что если H1 в первую очередь предназначен для пользователя, хотя и для поисковых систем он очень важен, то title предназначен поисковикам. Обычно он составляется на основе ключевых слов, по которым страница сайта должна быть видна в поиске. Рекомендуемая длина 55-60 символов, желательно чтобы он содержал в себе не более 12 слов. Наиболее важные ключи должны быть расположены ближе к началу заголовка. Также необходимо обеспечить уникальный title для каждой страницы — это помогает страницам лучше ранжироваться в поиске.
Мета-тег Description — краткое описание страницы. Грамотно составленный description может целиком попасть в сниппет поисковой выдачи, увеличивая вероятность того, что пользователь кликнет именно на вашу страницу. Поисковая система может формировать сниппет на основе содержания страницы, но так или иначе, решение о её релевантности принимается в том числе по содержимому тега description. Важно тщательно прописывать данный атрибут с использованием ключевых слов. Рекомендуемая длина тега соответствует размеру снипетта в поисковой выдаче, т.е. 120-135 символов.
Мета-тег keywords — перечень слов, наиболее часто встречающихся на странице. Плотность ключевых слов можно проверить через сервис http://istio.com/rus/text/analyz/ . Рекомендуется прописывать 5-6 ключевых слов для одной страницы.
Атрибут alt для изображений — дает поисковым системам подсказку относительно того, что на них изображено. Правильно оформленный элемент alt позволяет получить целевой трафик при поиске по изображениям. Кроме того, он является дополнительным показателем качества оформления страниц сайта и способствует лучшему ранжированию поисковыми системами.
Текст. Не стоит забывать, что грамотное форматирование текста, использование жирного шрифта и курсива там, где это требуется по смыслу, позволяет легче воспринимать текст, а это ещё один плюс вашему сайту. При этом не стоит усердствовать с выделением ключевых слов, под которые оптимизирована страница — это может быть расценено поисковиками как попытка манипуляции выдачей.
Видео. Видео-ролики релевантные тематике вашего сайта позволяют увеличить время пребывания посетителя на сайте, что положительно сказывается на поведенческих факторах сайта. Поэтому если у вас есть видеоматериал, его необходимо разместить на сайте там, где он будет наиболее уместен по смыслу. Традиционно сами видеоролики размещаются на популярной площадке YouTube и вставляются на сайт при помощи специального кода. Описания к роликам можно оптимизировать под запросы, что в перспективе даст дополнительный трафик на сайт.
Оформление ссылок. Для того чтобы придать ссылкам на сайте эстетичный вид (иногда они бывают очень длинными), их необходимо вставлять при помощи html-кода, чтобы в тексте отображался только URL самого сайта.
Грамотное оформление статей на сайте позволяет читателю зацепиться взглядом за текст, легче усвоить его содержание, получить ответ на свой вопрос. Все это, в свою очередь улучшает статистику поведения пользователей на сайте, помогает ему занимать более высокие позиции в в выдаче поисковых систем, что в конечном итоге приносит новые продажи.
Окинув взглядом главную страницу, средне-статистический посетитель сайта доверится впечатлению от дизайна, интерфейса, стиля. Оформленное «на коленке» вызовет рефлекторную реакцию закрытия вкладки – такого он не просил! Переселение потребителя в интернет сделало из главной страницы «виртуальную парадную» для современной компании. В чем же продающая особенность страничек, убедительно представляющих топ-бренды? Как оформить главную страницу сайта правильно и не получить памятник дизайнерской мысли, вместо инструмента реализации своих целей?
Мнение исследователя конверсии Брайана Мэсси, о том, как должна выглядеть главная страница интернет-ресурса с коммерческим предложением:
Лучший не тот дизайн, с которым вы подчеркнете статус и стиль компании. Лучший тот, что будет способствовать конверсии, имея мотивирующие элементы и отличные описания, побуждающие нажать СТА-кнопку
Подход уверенного лидера на рынке: главная страница Reebok микросайта
Правила оформления главной страницы продающего сайта
- Яркий заголовок усилен подзаголовком, которому релевантно изображение
- Мощный призыв с тонкой анимацией, подчеркивающей предполагаемое намерение
- Положительный образ, привлекая внимание к предложениям бренда, стимулирует потребительское желание обладать понравившимся
- Hero-хэдер утверждает в сознании посетителей мысль о полезности продукции, показывая, как ей пользуются другие
Главные правила начальной страницы
1. Прежде, выгоды предложения. Для узнаваемости сайта торговой марки Pepsi-Cola, достаточно одного имени. А вашего? В известной книге «не заставляйте меня думать!» Стив Круг рассуждает: «Вы задержитесь на сайте, не поняв его назначения?» И все же в современном коммерческом секторе, видимо не желая отставать от упомянутого супербренда – все стремятся в первую очередь улучшить потребительское мнение о продукте / компании:
- Обрисовывая саму деятельность кратко, выгоды предложения исчерпывающе – минимум про особенности, больше о полезности
- Акцентом на выигрышных гранях своего подхода… с отзывами и т.д.
Заполнение полей форм, само СТА-действие - это стресс. Преодолеть его помогает интерес к предложению, а не кнопки «Подписаться», «Купить». Смягчите однословную категоричность, что-либо предлагая: Узнай рецепты, Запросить демонстрацию. Краткое информирование не перегружает задачей и не даст почувствовать себя потерянным. Что более важно: вместо «WEB брошюры» сайт становится продающей и лидогенерирующей машиной.
3. Социальные доказательства. Общественная полезность – мерило, по которому принято «оценивать» торговое предложение.
Недоверчивый посетитель навинченный негативными отзывами в интернете, вряд ли сам истолкует сомнения в вашу пользу. Умалчивание только подтвердит его опасения негарантированности с небезопасностью. На главной странице своего сайта вы должны опередить потребительские страхи. Обыграйте их убеждая в обратном.
Мощь социального подтверждения психологически действует на толпу, доверяющую «коллективному опыту» и готовую забыть даже о рациональности своего выбора
Партнерства и упоминания на сайтах популярных изданий, принято показывать как социальное доказательство. По канонам главных страниц, оформляются они лаконично:
Вариант с анимацией набегающих чисел, статистика: проектов, %довольных клиентов, коэффициент удержания…
4. Эффективный заголовок – это «приманка» . Манящий и цепкий, он ловит внимание пользователя, побуждая остановиться и узнать чуть больше.
Хороший заголовок - как пионер:
- Всегда готов! – сфокусирован на удобстве для потребителя
- Всем ребятам пример! – адекватный / «экспертен» / апеллирует к авторитетному мнению, как «Методы оптимизации главной страницы вашего сайта от Matt McGee»
Плохой заголовок - как сосиска:
- Отваривать нужно
- Конверсий быстрых не жди – полуфабрикат нуждается в доработке для годности
Стоит ли его нагружать задачами, от которых теряется меткость? Детализировать уникальное предложение можно подзаголовком, применяемым в паре и усиливающим эффект… . Юзабилити-исследование от KISSmetrics:
Идеальный заголовок - 6-ти словный (3+3): в поисковой выдаче беглый взгляд охватывает три слова (с начала или с конца). MOZ называет оптимальным Title в 57-59 знаков
Признаки эффективного заголовка:
- Синтаксически не перегружен, емко сформулирован – ни убавить, ни добавить!
- Выражает конкурентные преимущества (выгода пользователю), а не «образцовость» и дельные качества
- Выглядит конкретным планом – предложением с реальными сроками
- Психологически внушает доверие – уже является продающим триггером
- Прямо или косвенно напоминает об имеющемся лимите времени / кол-ва
- Хорошо придуман: с переформулировкой, цепляющими прилагательными, побуждающими действовать глаголами
- Провокационен, разжигает интерес и «без условностей» – привычное в новом понимании, с неожиданным противопоставлением и т.д.
Согласно исследованиям 3M Corporation:
83 % решений принимаемых человеком основаны на визуальной информации. Визуальный образ – то, что скорее запомнится и доверять будут ему. Зрительное воспринимается быстрее текстового в 60 тыс. раз!
- Для оптимизации пользовательского опыта
- Чтобы общаться на одном языке с нужной аудиторией
Анимируя элемент укажите на тип / расположение контента, интерактивом создайте обратную связь (визуализация завершения действия пояснит, что произошло) и т.д.
- Расположение на странице
- Пользовательское восприятие (UX)
- Остальная SEO-стратегия / социальный маркетинг
- Уровень конкуренции / временной фактор / сама полезность
Тесная логическая связь заголовка главной со страничным контентом и включения слов по тексту, пойдут странице на пользу при . Тематические и второстепенные ключевые фразы могут стать находкой, т.к. полнота сбора семантики повышает качество подачи материала. Структурирование информации, от главной и до конверсионных страниц – действенный метод их оптимизации…
Возрастающее влияние фактора «полезности» вполне ожидаемо:
От оптимизации, изначально не ориентированной на удержание, мало толку при слабой вовлеченности пользователя
Уделите внимание типу трафика: брендированный / нишевые запросы / long tail, чтобы не упускать важных клиентов.
8. Сделайте главную страницу удобной в пользовании. Юзабилити часть UX и если принести в жертву своей индивидуальности (чего-то еще), интересы посетителя имеющего и другой опыт, он ответит:
- Большей избирательностью
- Отказами, предпочитая осваивать узнаваемые схемы (грозит вам потерей позиций)
Оформляйте главную страницу с точками фиксации внимания (графически и текстово разбивая контент по блокам, выделяя типографикой и т.д.)
10. Привлекательная идея vs Проработка элементов. Веб-аудитория оценит привлекательность, явно относящуюся к делу – когда качество элементов безупречно, а их необходимость очевидна.
Лирическое отступление. Древний ваятель на вопрос, как он создает скульптуру:
Беру каменную глыбу, образ божественной формы уже есть в ней. Я просто отсекаю лишнее
Сейчас больше возможностей для творческих идей, но они – сырой материал. Промах мастера, все так же загубит проект. Завершая аналогию:
Гибкие решения от скульптора Хосе Лопес: «открывая гранитную страницу»
Еще раз о важном:
- Хороший дизайн не заметен, а ключевые элементы там, где их ожидают увидеть
- Чем шире целевая аудитория, тем больше компромисса в оформлении – требуется БОЛЕЕ хороший дизайн
Читайте также: UX-дизайны интернет-магазинов: хорошие и плохие. 21 пример
Главные страницы сайтов™ прод. брендов
Среди индивидуально разработанных и профессионально оформленных фирменных сайтов выделяются лишь интересные дизайны. Но, торговые марки не становятся брендами без эффективного маркетинга. С какими дизайн-маркетинговыми решениями сегодня добиваются потребительской преданности, смотрите на примерах главных страниц этих сайтов.
Эко Хлеб
Достойное оформление – сайт Эко-Хлеб™ с интернет-магазином:
на гл. страницу
- Качественная отрисовка элементов и фотосъемка продуктов
- Уникальность фирменного ретро-стиля с красивым логотипом
Персона
Главная оформлена как промо-страница - сайт торговой марки на Битриксе:
на гл. страницу
- Запоминающийся логотип производителя продуктов питания. Слоган разработан под «товар-локомотив»
- Для имиджевых целей подобраны / отрисованы / подогнаны элементы
- При прокрутке анимированное меню сворачивается в иконку; меняется по секциям тип кетчупа (спецэффект)
Читайте также: 40+ лучших дизайнов сайтов о еде и кулинарии
Крошка Картошка
Интересный вариант оформления - промо-сайт фастфуд бренда:
на гл. страницу
- Позитивный брендинг с логотипом концептуального блюда
- HotSpot тултип-подсказки занимают посетителя познавательными описаниями
- Аудиомаркетинг – послушайте гимн компании
Бургер Кинг
Сайт сети ресторанов быстрого питания с декоративным шрифтом:
на гл. страницу
- В мультяшном интерфейсе массивный шрифт гармонирует со стилизованными элементами UI не подавляя имиджевых фото
- Социальные доказательства выводятся во flip-блоки динамической подгрузкой твитов
- К корпоративному приложению привлекают внимание скидками и стилем гранж
Впечатляющее визуальное воздействие
Помогает задать целостный образ УТП. Основным имиджевым изображением обычно дают почувствовать всю серьезность торгового предложения. Позитивная картинка, демонстрирующая дружелюбие, командный дух, возможности применения… повышает эффективность оффера. В качестве примера пара хоумпейдж, выражающих эстетику бренда волнующими и притягательными бэкграундами.
Apidura
Главная страница продающего сайта – английский бренд велотоваров:
на гл. страницу
- Впечатляющие фоны с градиентным переходом к разделяющим иконкам. Стильное полупрозрачное меню, контурные кнопки и
- Феноменальный способ продвижение бренда дизайном: сайт уже получил 10000 пинов на досках Pinterest!
Яркий смысл флэт дизайнов
Читайте также: Сайты в стиле флэт: 20 нестандартных дизайнов
Двухмерный стиль уже поселился в умах пользователей и маркетологов с дизайнерами интересуют новые концепции для главной страницы веб-ресурсов. Одни ищут яркий путь к высокой конверсии , через сфокусированный на контенте дизайн. Освежив имидж, пробуют выйти на новую потребительскую аудиторию. Других, простота восприятия мотивирует создавать для Web проектов визуально-привлекательные образы.
Все больше flat-интерфейсов выражают стилистику и особенности позиционирования бренда в интернете / за пределами сети. Смотрите сами, как «упрощения» фирменной индивидуальности сокращает дистанцию между бизнесом и клиентом.
Moosend
Пример редизайна главной страницы – позитивный сайт с красивой типографикой:
на гл. страницу
- Единая гарнитура с одним шрифтом для заголовков & UI, повышая узнаваемость сайта облегчает восприятие его страниц
- Доработано оформление: в логотип вложен смысл бренда, поля регистрации вынесены на первый экран, новые анимации
Tribute Media
Американское веб-маркетинговое агентство – лаконичный минимум (CMS Drupal):
на гл. страницу
- Стрелки и анимированные иконки указывают на выдвижное меню / дублирующую навигацию по вкладкам
- Призыв размещен в первом экране по F-схеме просмотра: лого> цифры> кнопка
Bizible
Главная страница с отличными идеями – сайт небольшой компании:
на гл. страницу
- Красивый сайт сразу привлекает рифмованной связкой «заголовок + подзаголовок»
- Мягкая выразительность UI с тоновой проработкой и размытием текстуры фона. Социальные доказательства и отзывы встроены в фоны каруселью
- Формы с названиями полей в контексте поясняющих предложений – хорошее юзабилити при уникальном дизайне
Zendesk
Редизайн главной страницы – сайт современной компании с эффектным контентом:
на гл. страницу
- С новыми анимациями, графикой и мультипликацией видео сайт повеселел, стал лаконичней (выпадающее меню скрыло вторичное)
- Выразительно переведенный Zendesk , полемичным тоном и прямым обращением в заголовках напоминает диалог
Читайте также: Анимация по правилам UX-дизайна: полное руководство
Эффектные страницы с интересными дизайн-решениями
Сегодня не удивишь wow-эффектом на «Главной». В тренде – полезная анимация.phive.pt – португальский фитнес-сайт с интерактивным дизайном на JS и jQuery.
«Танцующий», «изможденный» эффектно решает UX-задачу: предзагрузка страницы – уже побуждает к активности
Ged Group
Пример последовательного визуального стиля – сайт с jQuery эффектами:
на гл. страницу
- Векторная графика согласует главную с внутренними страницами. Больше чем эстетика! – пользователь увереннее на сайте с четко определенной идентичностью
- 2-6х фигурная сюжетная сцена прорисовывается анимированной предзагрузкой
- Ненавязчивые интерфейсные микровзаимодействия, эффект Кена Бернса для картинок и скролл-анимации
Medpraktika
Клиентоориентированный дизайн главной страницы медицинского сайта:
на гл. страницу
- Лаконичный дизайн с отрисовкой главной страницы при минимуме цветов
- Оригинально проиллюстрированы предложения организации: с блоком услуг и занимательным фунционалом хотспота удерживает внимание клиентов
Главная страница как лендинг
Читайте также: 30+ адаптивных лендинг пейдж шаблонов на HTML (бесплатные, премиум)
Когда совмещаются SEO-бонусы (трафик из поиска) с возможностями посадочных лэндинг-страниц , продающий визуал создает эмоциональный эффект вовлечения в нужную атмосферу. С усилением пользовательского внимания, главная страница сайта становится способной генерить готового клиента от организованных маркетинговых кампаний.
Нагоняемым рекламой Директа / AdWords, важна заметность четко сформулированного оффера, мотивирующего к конверсионным действиям. УТП-предложение на главной странице должно выглядеть броско, а «визуальное информирование» закрыть смысловые пробелы формулировки.
Fish Bowl
Продающий мини-сайт - лендинг на несколько страниц:
Chris Ducker
Пример правильного оформления главной страницы сайта бизнес-инструктора:
на гл. страницу
- Персональный сайт блогера: составной фон из подсвеченного фото и градиентной обработки
- По F и Z принципам визуальной иерархии, направленный взгляд «берет под руку» и ведет к конверсионной цели
- Тематичность фонов блоков обращает внимание на деятельность автора, а их цветокоррекция на контрастные кнопки призыва
Dollar Shave Club
Еффективный рекламный ролик на главной странице ТОПового сайта:
на гл. страницу
- Изысканная небрежность в хипстерско – винтажном стиле: шапка с текстурой под дерево, гранжевый шрифт заголовков
- Shave time. Shave money – в рекламном каламбуре предложение выгоды: «Время бритья. Экономного бритья». Конкурентам DollarShave так не перефразировать
- Креативное продающее видео имело феноменальный успех, в день завалив заказами компанию. Просмотры растут, сейчас 23.5 млн.
Freshdesk
Приятное флэт-оформление главной страницы с элементами лендинга:
Big Commerce
SaaS платформа создания eCommerce сайтов:
на гл. страницу
- Геометрия в деталях визуального ряда / UI-элементов согласует все страницы. По единому стилю с узорами сайт узнаваем на любом экране
- Расширенный масштаб предложения оправдывает дополнительные СТА-призывы
- Оптимизированный под сенсоры интерфейс, удобные для заполнения формы
Ted Todd Insurance
Главная – посадочная страница сайта страховой компании:
на гл. страницу
- Финансовый лэндинг в light тонах, от которого веет ненавязчивой легкостью
- Блок по центру «выше линии сгиба» структурирует услуги по видам страхования. «Карусель» блоков прокручиваемая с клавиатуры, UI мини-карта филиалов