10 Коротких Советов: Как Улучшить Дизайн Вашего Сайта

() translation by (you can also view the original English article)

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

Однако в отличие от витрины магазина, улучшение внешнего вида, будет стоить не так дорого, особенно, если у вас действительно малый бизнес.

Website homepage design — Дизайн домашней страницы вашего сайта занимает важное место в успехе вашего бизнеса (Изображение).

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

Приступим к уроку.

1. Используйте Файлы Изображений Небольшого Объема

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

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

Page load time statistics — Чем дольше загружается страница веб-сайта, тем больше вероятность того, что посетитель уйдет.

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

2. Сделайте Один, Хорошо Заметный Призыв к Действию

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

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

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

call to action placement — Разместите ваш призыв к действию в верхней части страницы, и, кроме этого, повторите добавьте его в другие места, домашней страницы.

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

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

Если у вас нет хорошо заметной кнопки - призыва к действию, на вашей домашней странице, посмотрите эти приковывающие внимание шаблоны для кнопки на Graphic River.

3. Уточните Ваше Предложение Ценности

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

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

study on clarity in company communications — Покупатели больше всего ценять ясность сообщения, которое им хотят донести, больше чем дезайн, краткость или его граммотность.

Если вы хотите в большей степени прояснить предложение ценности на вашей домашней странице, попробуйте использовать техники, которые описаны ниже:

1. Повторяйте Предложение Ценности

На протяжении все домашней странице, говорите пользователю о той пользе, которую он получит, если откликнется на призыв к действию. Вы можете описывать это в разных словах, использовать визуальную подачу, при повторении. В примере ниже, Gossamer Gear, онлайн магазин по продаже облегченного походного снаряжения, их предложение ценности "облегченное снаряжение" занчится (значилось, сейчас слоган другой) в заголовке страницы. Оно также упомянуто в логотипе компании ("Take less. Do more." - «Бери меньше. Делай больше») и слайд шоу с двумя путешественниками, которые несут рюкзаки, меньшего, чем обычно, размера.

Clear website homepage value proposition example — Повторите предложение ценности несколько раз на домашней странице вашего сайте, включая визуальные образы.

2. Уточните Почему Ваше Предложение Является Ценным

Вы можете сказать, что выпускаете продукт выского качества, или у вас хороший сервис по обслуживанию покупателей, или то, что вы занимаетесь благотворительностью. Вы так же можете дать более специфичное объяснение, почему покупатель должен выбрать вас. На домашней странице, магазина одежды United By Blue, указывает на свою социальную активность в теге ("ответственные надежные товары") и контенте (ссылки на их посты в блоге, где они пишут об акциях уборки в общественных местах и других благотворительных акциях). И кроме того, впечатление усиливают конкретные цифры по проделанной работ, которые приводятся на домашней странице компании.

Example of specificity in homepage copy — Пусть ваше предложение ценности будет специфическим.

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

4. Домашняя Страница Вашего Сайта Должна Быть Удобна Для Просмотра.

Ваша домашняя страница может быть длинной или короткой - важно, чтобы она легко просматривалась. Это потому что люди стремятся сканировать и фильтровать текст в интернете. Исследования Nielsen Norman Group показали, что только 16 процентов людей читают тексты онлайн слово за словом. В более недавнем исследовании, был обнаружено, что люди стремятся сканировать тексты большого содержания по контуру буквы F, при этом пропускается важная информация.

F-shaped pattern for reading text online — Большие блоки текста на домашней странице, вынуждают посетителей просматривать их по контуру буквы F.

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

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

Хорошую иллюстрацию этого принципа можно найти на сайте Barebones Living, которые продают товары для которые используются при выходе на природу. Вместо того, чтобы делать длинный список категорий продуктов и делать их описание, они задают вопрос " Как мы проводим время на природе?" Картинки и всего одно слово для категории дают хороший эффект. Даже не читая слов, вы можете понять какую категорию вам выбрать. Взгляните на пример их домашней страницы:

Scannable product categories — Сочетание простых слов и хороших визуальных образов для быстрого просмотра содержания сайта.

Так же на странице сайте используются подзаголовки. На скриншоте ниже, за подзаголовком "Why Barebones?" следуют меньшие подзаголовки такие, как "Farmers in Africa," "Providing shelter in Nepal," and "Providing food in Utah." Наличие таких подзаголовков, позволяет посетителю получить представление о проектах компании, даже если они не будучи читать коротенькие тексты-пояснения.

Use of subheads in scannable text — Используйте подзаголовки, чтобы посетители могли уловить суть, того, что вы хотите донести, даже если они не будет читать полный текст.

5. Используйте Фотографии с Людьми

Даже если ваш продукт самый фотогеничный на рынке, лучше использовать фотографии на которых есть еще и люди, особенно на домашней странице сайта. Тесты от Visual Website Optimizer показывают, что использование фотографий с людьми вместо иллюстраций и иконок, значительно увеличивает конверсию.

Очень важно использовать настоящии фотографии ваших покупателей или вашего персонала. Согласно исследованию The Nielsen Norman Group, посетители сайтов часто игнорируют стоковые фотографии с людьми.

Хороший пример, мы можем видеть в онлайн магазине семян - Renee's Garden. На сайте, есть множество фотографий людей с его фермы, людей которым он подарил семена, и фотографии самого владельца. Кроме того, что эти фотографии привлекают глаз, они так же завоевывают доверие, показывая, что за бизнесом, присутствуют человеческие отношения. Построение таких доверительных отношений очень важно для малого бизнеса, который не имеет такой репутации, как именитые бренды.

Example of real people in photos — Использование фотографий реальных покупателей и персонала помогают построить доверительные отношения и увеличивают конверсию.

6. Уменьшите Риск

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

W&P Design, дизайнерский магазин из Бруклина, делают это прозрачно и понятно написав в верхней части страницы, "Бесплатный Возврат. Без Претензий". Если покупатель сомневается покупать ли ему товар, на случай, если он ему не понравится, он заранее знает, что он может вернуть его назад, без каких либо претензий со стороны компании и без какой либо дополнительной платы. Вот пример того, как выглядит страница сайта:

Return policy on website homepage to reduce risk — Указание правил возварата на домашней странице сайта уменьшает риски для покупателя.

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

Wynd, который продает умные воздухоочистители, добавил вкладку "Reviews" ("Отзывы") в верхней части страницы. Когда вы щелкаете по вкладке, появляются отзывы по продукту. Так же эти отзывы вы можете посмотреть в специальном разделе сайта, на который есть ссылка на домашней странице.

Customer reviews on website homepage — Добавление отзывов на домашнюю страницу поможет минимизировать риски для ваших пользователей.

Чтобы детально узнать как собирать и использовать обратную связь от клинетов на вашем сайте, посмотрите следующие уроки:

7. Покажите Ваше Навигационное Меню

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

Time to navigation chart — Посещение сайтов со скрытым навигационным меню отнимает больше времени у пользователей.

Если на вашем сайте очень много страниц, и вы не можете вместить их в меню на вашей домашней странице, вы можете использовать комбинацию навигаций. В таком случае, присутствуют статические ссылки на важные страницы сайта, а остальные скрыты в виде выпадающего меню. Это был подход, был использован онлайн магазином семян - Johnny's Selected Seeds. Поскольку в этом интернет-магазине есть десятки семян, в основном меню перечислены только основные категории. Другие подкатегории отображаются в выпадающем меню.

Example of combo navigation menu — Если в вашем магазине много наиметований, перечислите в меню только основные категории. Важные элементы должны присустсвовать в отображающемся меню.

8. Попробуйте Использовать Живаой Чат

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

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

Example of live chat on a small business website — Живой чат на домашней странице сайта, поможет вам прояснить вопросы покупателей по вашему продукту и увеличит конверсию.

Но есть и другие важные преимущества в использовании чата на вашей домашней странице. Согласно исследованию Apex Chat, конверсия может возрасти на 40%. Это так же позволяет повысить уровень удовлетворенности покуптелей, так 73 процента покупателей были удоволетворены услугами, которые они получили при использовании чата поддержки. Ответы по электронной почте окзались на втором месте по удовлетворительности с 61 процентом.

live chat satisfaction levels — Покупатели удовлетворены уровнем клиентсой поддержки через жиовой чат больше чем через общение по почте, телефону или в социальных сетях.

Если вам понравилсась идея живойго чата, то вот несколько сервисов, которые вы можете использовать:

9. Добавьте Видео

Добавление видео на вашу домашнюю страницу может увеличить конверсию. Это действительно хорошо работает для некоторых категорий продуктов, согласно исследованиям Treepodia. Поэтому, добавление видеоклипа на вашу домашнюю страницу, может быть достаточно полезным. Оно должно быть коротким, так в случае длинного видео заинтересованность падает. Согласно статистическим исследованиям Wistia, лучше если видео будет короче 2-х минут.

Study increase in video conversion rates — Для перечисленных выше продуктов, конверсия оналайн продаж выросла при добавлении видео на сайт.

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

Embedded video on website homepage example — Добавление демнострационногов идео на сайт, может быть очень полезным для необычных продуктов.

10. Упрощайте

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

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

Домашняя Страница Сайта Которая Приносит Пользу для Бизнеса

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

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

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