Как оформить главную страницу. Какой должна быть страница во вконтакте
Кэп подсказывает, что более заметен тот номер, который написан посередине страницы и крупно. Делайте так, если хотите, чтобы как можно больше клиентов смогли дозвониться и поговорить с сотрудниками компании.
Дайте контакты разных подразделений
Крупной компании, которая получает огромный поток клиентских обращений каждый день, имеет смысл сразу выложить координаты отдела продаж, техподдержки, кадровой службы и других отделов. Так люди быстрее смогут получить ответ на интересующий вопрос.
На сайте международного ресторанного холдинга «Ginza Project» выложены телефоны call-центра, PR-службы, HR-департамента и других отделов.
На сайте «Тинькофф Банка» помимо контактов отделов есть ещё и разные телефонные номера для различных категорий клиентов: владельцев кредитных карт, дебетовых карт и вкладчиков.
Контакты региональных подразделений не обязательно выкладывать сразу большим списком. Можно выводить их только по клику на название нужного представительства. Например, как в разделе контактной информации на сайте «Рефиниш Автолака».
У «Центра Международного Обмена» довольно много подразделений во всём мире. Представители компании объединены в рубрики по странам для удобного поиска их телефонов и адресов.
Фотографии вывесок офлайновых магазинов на сайте уличного бренда одежды «BatNorton» помогут клиентам сориентироваться в торговом центре и найти нужный отдел.
Контакты региональных представительств «Сайнер» появляются во всплывающих окошках. Такой приём позволит освободить страницу контактов от избытка информации. Пользователь сможет подробно ознакомиться с телефоном и адресом только нужного ему дилера.
У «Оконного континента» сорок семь представительств в Москве. Для удобства клиентов контакты выложены на сайте в трёх видах: одним списком, на карте города и на схеме метро. В последних двух вариантах контактная информация появляется во всплывающем окошке по клику на нужное представительство.
Напишите контакты сотрудников
Человек больше доверяет другому человеку, чем обезличенному названию некой фирмы. Поэтому рассказывайте о ваших специалистах. Покажите, что за каждое направление в работе компании несут ответственность конкретные люди.
Постарайтесь выложить фото сотрудников. Подумайте, какие снимки вызовут наибольшее доверие клиентов? Возможно, это будут фотографии на рабочем месте или фото в деловых костюмах в профессиональной студии.
Покажите схему проезда
Понятная карта проезда экономит время на объяснении каждому клиенту, как добраться в компанию. И гарантирует, что большинство гостей не заблудится.
Хороши рисованные схемы проезда. На них получаются реалистичные изображения зданий, парков и других близлежащих объектов, на которые люди будут ориентироваться при поиске вашего офиса.
Однако учтите, что отрисовка карты проезда - дело трудозатратное. И скорее всего подойдёт фирмам, у которых немного офисов или точек продаж, одна-две.
Если у компании много офисов или представительств, то проще использовать не рисованную, а стандартную схему проезда. Её легко создать в любом конструкторе карт. А для того, чтобы не загромождать страницу с контактами на сайте многочисленными схемами проезда, их можно спрятать во всплывающие окошки.
На сайте «Мэри Трюфель» размещены рисованные схемы проезда к двум свадебным салонам.
На отрисованной схеме проезда к магазину подарков «Presentstar» видны мельчайшие детали: от кошки под деревом до инопланетян, крадущих жигули.
Контакты представительств «Центр международного обмена» выложены на сайте в виде списка. Если кликнуть на название представительства, то откроется карта проезда во всплывающем окошке.
В разделе с контактной информацией на сайте «ПСКБ Банка» схемы проезда к каждому офису изначально спрятаны. И появляются по нажатию на название офиса в раскрывающихся блоках.
На странице контактов фирменного интернет-магазина «Sony» во всплывающем окошке пользователь выбирает нужный город. И сразу после этого на странице выводятся соответствующие контактные данные, схема проезда и текстовое описание того, как добраться.
На сайте автомобильного фестиваля «Unlim 500+» переключаются три разные схемы - проезд к месту проведения мероприятия, карта автополигона и расположение кафе и сцены на смотровой площадке. Выбираешь нужную схему - меняется описание в левой части страницы и карта в правой части.
На сайте «Розовоза» контактная информация выложена в одном всплывающем окошке. И уже внутри окошка можно переключать два информационных блока: адреса цветочных складов и телефон службы доставки.
На сайте жилого комплекса «Панорама Сколково» есть возможность проложить маршрут из произвольной точки на карте до офиса продаж.
Задействуйте пространство во всплывающем окошке внутри карты
Иногда на карте нужно показать адреса и телефоны сразу нескольких торговых точек. Но если выложить всю контактную информацию сразу, то страница окажется перегруженной, будет сложно найти что-то определённое.
Удобно прятать контакты во всплывающие окошки, которые появляются по нажатию на ту или иную точку на карте. Отсутствие большого количества контактных данных разных магазинов, представительств и офисов визуально облегчает страницу, в ней легче ориентироваться.
Однако существуют и более интересные способы того, как использовать маленький кусочек свободного пространства внутри всплывающего окошка на карте!
На сайте ресторанного холдинга «Ginza Project» можно переключать четыре информационных блока внутри всплывающего окошка: адрес ресторана, телефон, время работы, ближайшая станция метро.
На сайте «Лето Банка» во всплывающем окошке на карте можно оценить работу отделения по 5-балльной шкале.
На сайте цветочной базы «Всё пучком» во всплывающем окошке помимо адреса, телефона и режима работы есть ещё и фотографии каждого склада.
Во всплывающих окошках на карте проезда к центрам изучения иностранных языков «Джей энд эс» расположены кнопка онлайн-звонка, ссылка на группу Вконтакте и несколько фотографий. А ещё такой «стандартный набор» как адрес, телефон и режим работы.
Выложите фотографию входа в офис компании
Покажите, как выглядит вход в офис фирмы. Особенно, если у вас нет собственной вывески с логотипом на фасаде здания. Проще один раз показать это на фотографии, чем каждый раз объяснять клиентам на словах.
Напишите, как добраться в офис
Приведите несколько вариантов описания того, как люди могут попасть к вам: пешком, на автомобиле, на общественном транспорте. Представьте себя на месте человека, который вышел из последнего вагона метро на станции Калужская и впервые оказался на улице Профсоюзной. Куда ему дальше идти? По какой стороне улицы? Где и куда нужно свернуть? Расскажите об этом как можно подробнее.
Инструкции по ориентированию на местности можно выложить все сразу или спрятать в информационные блоки, раскрывающиеся по клику мыши.
На сайте магазина подарков «Presentstar» есть инструкции для любителей пеших прогулок и для автомобилистов.
В «Газпром» можно не только прийти пешком, но и приехать на троллейбусе или автомобиле. Описание прогулок и поездок до офиса выложено на странице с контактами.
На сайте «Рефиниш Автолака» описания того, как доехать в компанию на автомобиле или общественном транспорте, появляются по клику на соответствующий заголовок.
На странице с контактами клиники репродукции «МАМА» есть не только инструкция для пользователей троллейбусов и автомобилей, но и для иногородних гостей, едущих от вокзала или аэропорта. Блоки с разными текстами переключаются по нажатию на иконки с автомобилем, автобусом, поездом.
Уделите внимание текстам
Не будьте скучными, поработайте над текстами и заголовками на странице с контактами. Яркий заголовок остановит блуждающий по сайту взгляд в нужном месте.
«Рамблер» говорит, что есть много причин написать ему. А ведь на этом месте могла бы оказаться какая-нибудь серенькая фраза типа «Список электронных адресов».
Бренд вязаных шапок «Handy Hat» хочет быть ближе к своим клиентам. Заходите, говорит, к нам во Вконтактик.
На странице с контактами производителя декоративных пропиток «Veres» есть одна незатейливая фраза о том, что продукция представлена более, чем в 300 городах России. На этом месте мог быть стандартный заголовок «Наши представители». Но тогда никто не узнал бы, насколько широка география деятельности компании.
Разместите ссылку на контакты в других разделах сайта
«В чёрном-чёрном футере, в самом дальнем углу, среди десятка других ссылок спряталась единственная на сайте ссылка на страницу контактов. Чтобы точно никто не нашёл», - страшная сказка об одной компании, которая не желала слышать звонки и читать письма людей.
Если вы хотите, чтобы как можно больше клиентов вышли на связь, то делайте ссылку на раздел контактов максимально заметной. Например, используйте картинки для оформления ссылки.
Давайте ссылку на контактную информацию везде, где это уместно. Например, вы пишете новость о предстоящей лекции именитого бизнес-тренера в вашей компании. Логично дополнить статью ссылкой на контактную информацию, чтобы все желающие могли записаться на лекцию.
На каждой странице сайта цветочной базы «Всё пучком» хорошо заметна ссылка на адреса складов.
Знаете, за какое время посетитель принимает решение о полезности сайта? За 3 секунды.
Вдумайтесь: у вас есть всего 3 секунды на то, чтобы заинтересовать пользователя. И нет права на ошибку: второго шанса произвести первое впечатление не будет. Сегодня мы расскажем о том, какая информация на главной странице удержит пользователя.
Главная страница вашего сайта должна быть
- Интересной.
- Понятной.
- Приятной.
- Привлекательной.
На словах звучит просто, а как это сделать? Будем разбираться.
Оценка понятности
Что значит «понятная страница»? Всё просто — на главной странице посетитель должен получить ответы на свои вопросы:
- Кто вы?
- Чем занимаетесь?
- Чем вы можете мне помочь?
- Почему я должен вам верить?
- Есть доказательства вашей хорошей работы?
- Гарантии?
- Адрес? Телефон? Контакты-то у вас есть?
Если на эти вопросы посетитель ответа не получает — он уходит.
Не нужно давать ответы на все вопросы именно на главной странице. Лучше на видном месте в меню разместить кнопки, которые перенаправят посетителя на страницу с нужной информацией. Обычно это страницы «О нас», «Гарантии», «Контакты» и т. д.
Вам понятно, чем занимается этот сайт?
Главная страница сайта. Совершенно непонятно, куда попал
А вот тут уже сразу всё понятно.
Правильная главная страница. Сразу ясно, на каком сайте находишься
Какие элементы помогают пользователю получить ответы на вопросы
Логотип
Логотип компании обычно располагается в левом верхнем углу. Если у вас его нет — напишите текстом название организации, например: Компания «Двое из ларца» . Пользователи привыкли, что именно тут располагается первичная информация о компании, оставьте её на этом же месте.
Лого сразу поясняет клиенту, на каком сайте он находится
Пояснение
К логотипу нужно пояснение. Обязательно. Многие этого не делают, а зря. Человек не может расшифровать ваш логотип, он просто видит интересную картинку.
Если ваш лого текстовый, то пояснение тоже нужно. Например: «Компания “Двое из ларца” — доставка суши за 30 минут». Вот, теперь посетителю станет понятно, на какой сайт он зашёл.
Контакты
Если контакты вынесены у вас в меню и для них предусмотрена отдельная страница, всё равно укажите один из телефонов или электронную почту в шапке и футере сайта. Многим просто лень переходить по ссылкам, нужно, чтобы информация была перед глазами.
СКРИН Примечание: нужен пример хорошего сайта на базе 1C-UMI.
Поиск по сайту
Многие забывают о кнопке поиска по сайту, а она нужна. В интернет-магазинах особенно. Большинство людей предпочитают не искать товары по меню, а просто написать их названия в поиске. Обязательно поставьте поиск на сайт. Например, на поиск встроен. Обычно его располагают справа вверху страницы или посередине.
Кнопка поиска конвертирует на 43 % больше прибыли.
Контент
«Это текст, который пользователь…» Нет, сразу читать будет вряд ли, но «просканирует» мгновенно. Текст должен быть составлен грамотно, написан простым и понятным языком, без канцелярщины и пустых оборотов. Уберите все штампы, нелепые и тяжеловесные конструкции вроде «вас встретят доброжелательные лица», «динамично развивающаяся компания», «колоссальный опыт работы и высококвалифицированные специалисты». Это пустые слова. Клиент в наше время разборчивый, он хочет сразу получить необходимую информацию, а не продираться сквозь дебри слов.
Обязательно отметьте в тексте, чем занимается ваша компания и сколько времени. Как много было выполнено работ. Дайте ссылку на портфолио, где посетитель может ознакомиться с вашими работами. Затроньте тему сервиса и гарантий — покажите, что вы отвечаете за качество и всегда готовы нести ответственность за свои недочёты.
Текст должен вызывать доверие. Пишите искренне, и пользователь это почувствует.
Кроме того, не забывайте о структуре текста: заголовки, подзаголовки, списки, цитаты, картинки — расставляйте акценты. При беглом просмотре статьи пользователь увидит важные для него моменты.
Мы уже рассказывали о том, как правильно писать и структурировать тексты. Читайте об этом подробнее в нашем блоге.
Портфолио
Несколько работ можно разместить на главной странице сайта, на остальные дать ссылку. Так посетитель сразу сможет оценить качество услуг, которые вы предоставляете.
Отзывы
Отзывы повышают уровень доверия новых клиентов к вашей компании. Они отвечают на вопросы посетителя: «Почему я должен вам верить?» и «А кто может подтвердить, что вы действительно хорошо работаете?» Опубликуйте хотя бы 3—4 отклика. Через время вы заметите, насколько лояльнее стали к вам посетители.
Важно! Отзывы должны быть честными, фото клиентов — настоящими. Стоковые картинки видно сразу, а если посетитель заметит, что его пытаются обмануть даже в такой мелочи, как фото, то он не поверит и всему остальному.
Окинув взглядом главную страницу, средне-статистический посетитель сайта доверится впечатлению от дизайна, интерфейса, стиля. Оформленное «на коленке» вызовет рефлекторную реакцию закрытия вкладки – такого он не просил! Переселение потребителя в интернет сделало из главной страницы «виртуальную парадную» для современной компании. В чем же продающая особенность страничек, убедительно представляющих топ-бренды? Как оформить главную страницу сайта правильно и не получить памятник дизайнерской мысли, вместо инструмента реализации своих целей?
Мнение исследователя конверсии Брайана Мэсси, о том, как должна выглядеть главная страница интернет-ресурса с коммерческим предложением:
Лучший не тот дизайн, с которым вы подчеркнете статус и стиль компании. Лучший тот, что будет способствовать конверсии, имея мотивирующие элементы и отличные описания, побуждающие нажать СТА-кнопку
Подход уверенного лидера на рынке: главная страница 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 мини-карта филиалов
Основной принцип продвижения в поисковых системах (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 самого сайта.
Грамотное оформление статей на сайте позволяет читателю зацепиться взглядом за текст, легче усвоить его содержание, получить ответ на свой вопрос. Все это, в свою очередь улучшает статистику поведения пользователей на сайте, помогает ему занимать более высокие позиции в в выдаче поисковых систем, что в конечном итоге приносит новые продажи.
Солидная страница – дело сложное, так как подавляющее большинство не умеют их вообще. Какие-то выдуманные фамилии, корявые буквы в графе "О себе", стенка в кошечках, позорный аватар и неправильный круг общение.
Первое – только настоящий аватар, а не картинки из Google.
Второе – ваши реальные фамилия и имя. Особенно это относится к девушкам, которые пишут что-то вроде "Мария Wolf Соловьева" – абсолютно несерьезный подход, который вызывает смех.
Третье – полное заполнение профиля, то есть всех полей абсолютно. Исключения составляют графы про институт, точное место жительства и воинскую часть.
Впрочем, некоторые поля можно пропустить, но основная информация должна быть заполнена. Но даже если ее заполняют, то делают лишь хуже. Ни грамотности в заполнении, ни серьезного слога, ни полезной информации. Помните, что страница – ваше лицо, и оно должно быть серьезным, ответственным.
Стена страницы – еще один важный показатель того, как о вас думают. Если там репосты котиков, мышек, розовых цитат из женских пабликов (еще хуже, если из пацанских) – серьезного отношения к себе не ждите. Лучший вариант – только посты собственного производства. Копировать информацию может каждый, но написать что-то свое и при этом дельное – далеко не все. О чем писать? То, в чем разбираетесь. Люди должны видеть в вас эксперта.
Большинство не отказались бы от популярности. И ее может получить абсолютно каждый, если действует грамотно. Вот вам бонусный совет – не держите в друзьях всех подряд, а некоторых вовсе . Если у вас 4 000 друзей, при этом накрученных, то будет антиэффект. В моем случае было около 10 000 человек, но реальных.
Такую небольшую популярность я получил благодаря каналу на YouTube и личным блогам. И меня часто спрашивали: "мол, да?" – что-то объяснять людям было сложно.
К тому же я подумал, стоит ли держать такое количество в друзьях, если они мне не друзья, а простые фанаты? В итоге я оставил буквально 19 человек – люди, которые являются моим близким кругом общении. Все остальные ушли в раздел подписчиков – некоторые обиделись и отписались, но это лучше, чем иной вариант.
Человек должен понимать, что попасть к вам в друзья может далеко не каждый. Это будет добавлять авторитета и уважения в целом.
Подводя итог: никаких глупых репостов (а лучше вовсе отказаться от них), только собственные посты, только настоящие друзья – всех остальных в подписчиков, заполнять страницу полностью и солидно, исключительно настоящий аватар.
Этих стратегий достаточно для того, чтобы начать тот путь, который вам нужен. Все, что дальше – зависит от вас самих. Управляйте собой, своей страницей и популярностью грамотно – это не просто, но интересно.