Мы начинаем серию статей об идеальной странице, состоящей из следующих важных элементов:
- Дизайн и содержание страницы.
- Призыв к действию.
- Оптимизация страниц для поиска.
- Разметка страниц.
- Работа с кодом.
Это переводная и адаптированная статья. С оригиналом можно ознакомиться тут.
Сегодня мы изучим первый раздел, касающийся дизайна и содержания страницы.
Главное требование к вашему сайту – он должен быстро и эффективно сообщать пользователю, где он находится и чем данный сайт может быть полезен для него. Дизайн и контент должны представлять собой единое целое, так, чтобы дизайн дополнял контент, а не существовал сам по себе. Вы можете использовать фон, цвета, шрифты, картинки и другие элементы дизайна для усиления идей, которые хотите сообщить пользователям с помощью вашего контента.
Рассмотрим каждый из элементов дизайна более подробно.
1. Заголовки (h1)
Ваш заголовок, возможно, самая важная часть страницы. С точки зрения навигации, заголовок сообщает пользователю, где именно он находится и какую информацию он может найти на данной странице. Кроме того, он подтверждает, что пользователь попал именно туда, куда и хотел. Это также важно и для поискового продвижения, ведь заголовок сообщает поисковой системе, о чем данная страница.
Например, если это страница продукта, то, очевидно, что в заголовке должно быть его название. Если же это контентный проект, например, страница со статьей блога, то заголовок должен соответствовать названию статьи. Кроме того, стоит помнить, что он должен быть «цепляющим», т.е. увидев такой заголовок в меню или в поисковой выдаче, пользователи захотят перейти по этой ссылке.
2. Навигация
Информационная архитектура (AI) нужна для организации и маркировки содержания вашего сайта. Это облегчает задачи юзабилити и поиск нужной информации. Вам же нужно, чтобы пользователи, во-первых, могли легко найти то, что ищут, во-вторых, попадали туда, куда вам нужно. AI крайне важна и должна быть разработана еще на стадии исследований и планирования создания веб-сайта.
По сути, ваша навигация должна быть максимально простой и понятной, чтобы с ее помощью пользователь мог в один-два клика попасть в любую нужную ему точку сайта.
Если у вас до сотни страниц, добиться этого несложно. Но если у вас очень крупный сайт и страниц несколько сотен или даже тысяч – вам не обойтись без классификации ваших страниц. Сделать это лучше всего с помощью их разделения в зависимости от логического соотношения групп. Тут нет наиболее правильного или оптимального варианта. Все зависит от вашего сайта. Есть несколько основных принципов, на которые вы можете опираться:
- деление по типам (например, кровати, столы, офисные кресла);
- по решению пользовательских задач (вместо кроватей – сон, вместо офисного кресла – работа);
- контекстные настройки (спальни, офисная мебель).
3. Тексты
При написании текстов для сайта, вы должны писать как для пользователей, так и для поисковых систем (хотя последнее уже не так критично, как еще полгода-год назад). Поэтому ваш текст должен быть уникальным, и при этом с использованием нужных ключевых слов. Безусловно, они должны вписываться в контент сайта, а не выглядеть нарочно вставленными.
Ваш текст должен быть четким и описательным, содержать конкретные преимущества вашего товара/услуги или предложения по сравнению с конкурентами, и написанным в стиле беседы с потенциальным покупателем, а не навязчивым. Кроме того, если хотите, чтобы ваши текст и сайт запомнились, пишите его простым и понятным языком, теми словами, которые забивают в поисковую строку и которые будут понятны почти всем пользователям (не используйте жаргоны и будьте внимательны с терминологией).
Простой и понятный язык снижает двоякость восприятия информации, неточности и вызывает больше доверия, чем набор заумных и неясных слов.
4. Читабельность
Нет никакого смысла писать прекрасный текст, если его никто не читает. Избегайте сложных объяснений, делая информацию легко усваиваемой. Обычно пользователи не читают статью, а сканируют ее по диагонали, находя наиболее важную для них информацию. Ваша задача облегчить им это «сканирование» и сделать более удобным поиск нужных моментов.
Убедитесь, что тип и размер шрифта разборчивы, а расстояние между строками удобно для чтения. Используйте пробелы для отделения текста от пунктов и подзаголовков, выделяйте наиболее важное жирным шрифтом, используйте маркировку для списков.
5. Шрифты
До недавнего времени веб-разработчики были ограничены в использовании шрифтов для html. Доступно было всего несколько шрифтов, а если была необходимость что-то выделить, нужно было использовать технологии типа Flash или текст, встроенный в изображение.
Сейчас многие используют WebFonts, что значительно расширяет возможности веб-дизайнеров и разработчиков. Это делает более удобным сканирование текста, а также привлекает больше внимания к содержанию страницы.
Часто приходится платить за использование лицензии качественных шрифтов, например, таких компаний, как Fonts.com , MyFonts и Typekit. Есть и бесплатные решения, например,Google-шрифты.
6. Картинки (изображения)
Существует множество исследований, подтверждающих, что изображения привлекают больше внимания и запоминаются намного лучше, чем текстовая информация. Многие покупатели в он-лайн магазинах принимают решение о покупке исключительно по изображению, а не описанию и техническим характеристикам. Именно поэтому картинки должны быть качественные, четкие, яркие, представляющие товар «в лучшем свете». Также нужно предусмотреть функцию увеличения и масштабирования изображения.
Сделайте картинкой по умолчанию наиболее релевантный или популярный товар (например, самый продаваемый вариант цвета), и включающий в себя множество дополнительных фотографий (с разных ракурсов и в разных цветах).
Если вы реселлер, желательно кроме стандартных фотографий от производителя добавить и несколько собственных фотографий, чтобы выгодно отличаться от предложений конкурентов.
Примечание: если вы не являетесь собственником картинки, следует получить разрешение (желательно письменное) на использование чужих изображений или использовать образы уже лицензированных для коммерческого пользования.
7. «Сигналы доверия»
Для того чтобы люди у вас покупали, они должны доверять вам. В дополнение к прекрасному дизайну, удобному интерфейсу и понятному содержанию, вы можете построить доверительные отношения с покупателем с помощью так называемых «сигналов доверия», например, отзывов других покупателей. Такие сигналы должны убедить пользователя, что сайтом занимаются реальные люди, что персонал квалифицированный, сайт соответствует масштабам задач клиента, и ему доверяют другие пользователи.
Другие популярные сигналы доверия включают:
- отзывы пользователей, в частности видео-обзоры, т.к. их трудно подделать;
- Live Сhat – подтверждает, что сайтом занимаются реальные люди и готовы помочь в решении задач пользователя;
- раздел Вопросов и Ответов, где администраторы или другие пользователи отвечают на вопросы по вашему сайту. Это показывает, что другие пользователи заинтересованы в вашем сайте;
- региональный номер телефона (и как дополнение, международный 8-800);
- социальные медиа – если ваша социальная активность высока, это также повышает доверие к вашему проекту;
- наличие физического адреса и карты на сайте;
- список клиентов/логотипов;
- SSL или логотипы кредитных карт;
- прозрачные условия покупок и доставок;
- аккредитация общественными организациями.
8. Хлебные крошки
Хлебные крошки – важный элемент юзабилити страницы, так как они развернуто показывают пользователю, где конкретно он сейчас находится, как сюда попал, и дают возможность легко вернуться на предыдущий уровень каталога. Хлебные крошки также полезны и для SEO, поскольку они облегчают поисковым системам определение структуры сайта.
Также рекомендуется использовать микроразметку, она поможет поисковым системам взять нужные и полезные данные вашего сайта и предоставить их в результатах поиска в удобном виде, что значительно повышает CTR на странице SERPа.
9. Видео
Видео можно использовать на страницах продуктов, в дополнение к картинкам с товаром. На видео могут более подробно раскрываться функциональные особенности продукта, и это намного эффективней, чем просто картинки или текст. Многие компании заявляют о значительном росте конверсии после добавления видеообзора на страницу товаров. Видеоматериалы также являются сигналом доверия и делают контент на вашей странице более разнообразным, что полезно и для пользователей, и для поисковых систем.
Видеоотзывы клиентов – очень сильный доверительный сигнал, особенно если в этом видео клиент хвастается купленным у вас продуктом. Кроме того, вы можете самостоятельно записать такое видео с минимальными затратами, используя различные сервисы и выкладывая их на видеохостинги.
При размещении видео правильно описывайте его. Ведь видео часто выходит в результатах поиска и имеет значительно выше рейтинг кликабельности по сравнению с текстовыми результатами.
10. Низ страницы (футер)
Футер – это неотъемлемая часть любой страницы, и у пользователей есть определенные ожидания относительно него. Например, они рассчитывают найти основные пункты меню (о нас, контакты, телефон), счетчик со статистикой вашего сайта (также важный показатель уровня доверия), а также ссылки на дополнительные ресурсы (ваш блог, статьи по теме, партнеры), социальные сети.
Исследования показывают, что пользователи, которые прокрутили всю вашу страницу до самого конца, очень вовлечены в ваш сайт. Поэтому внизу можно ставить такие блоки, как новости, оформление подписки. Кроме того, можно таких пользователей чем-то «наградить», например, необычным эффектом внизу страницы или юмористическим дизайном.