Пример структуры веб-сайта

Какие разделы включить? Что по поводу контента? Мы серьезно все продумали, потратили более месяца на исследования и собрали в этом гиде весь наш 18-летний опыт по созданию сайтов. Дочитав эту статью, вы обретете исчерпывающее представление о том, почему именно так должен быть структурирован сайт компании или продукта, мы также немного коснемся фундаментальных принципов SEO и планирования контента.

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

Начало

Создание структуры сайта с нуля может казаться элементарной задачей, однако зачастую это совсем не так. И вот почему.

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

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

Данное руководство предоставит вам развернутые инструкции по структуризации вашего сайта, дельные советы по контенту и примеры готовых проектов для подогрева интереса.

Звучит многообещающе? Тогда начинаем!

Основной совет

Навигация и футер

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

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

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

Максимизируйте CTR

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

Поэтому, разместив наиболее ценную информацию и элементы призыва к действию CTA (call-to-action) в эффективном первом поле экрана, вы увеличите показатель кликабельности (CTR — click-through rate) и завладеете вниманием посетителя. Речь идет буквально о 3-4 секундах, за которые посетитель сканирует экран и, не найдя быстро нужной информации, чаще всего сразу покидает страницу.

Призыв к действию (CTA)

Следующий шаг — убедитесь, что элементы call-to-action (CTA), призывающие к конкретному целевому действию, расположены в нужном месте. Стандартным способом размещения CTA является добавление соответствующей кнопки, но также распространены и другие формы — картинки, видео, ссылки.

Исходя из практики, главное правило для CTA — элемент должен выделяться. Чем лучше проработаны эти элементы, тем больше кликов пользователей вы получите.

Политика конфиденциальности GDPR

Если ваша целевая аудитория — это клиенты из стран ЕС, то обработка данных пользователей должна соответствовать правилам обработки персональных данных GDPR (General Data Protection Regulation), принятых в Европе.

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

Помните, что независимо от выбора пользователя, ваш сайт должен быть доступен всем.

Структура

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

Вот эти страницы, из которых состоит грамотно сбалансированная структура сайта:

• Главная
• О нас
• Продукты / Услуги
• FAQ
• Вакансии
• Блог
• Контакты
• Ошибка 404
• Правовая информация

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

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

• Главная
• О нас
• Продукты / Услуги
• Контакты
• Правовая информация

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

Цель каждой страницы, включенной в структуру вашего сайта — преобразовывать посетителей в клиентов. Страницы образуют последовательности, постепенно подогревая интерес перемещающихся по ним посетителей, чтобы те в итоге очутились на странице вашего продукта или услуги. Все остальное является частью user flow (пользовательского потока).

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

Главная страница

Для чего создавать: зацепите внимание, произведите первое впечатление, оптимизируйте навигацию.

Содержание:

• Hero image / Основной визуальный посыл
• Продукт / Услуги
• Ключевые преимущества
• О нас
• Вакансии
• Отзывы (тематические исследования, рекомендации)
• CTA

Может показаться, что главная страница является самой важной частью вашего сайта. Однако последние исследования показывают, что посетители проводят на ней не так уж и много времени. Среднее время сеанса составляет около 2 минут 17 секунд, при этом посещение главной страницы занимает около 7 секунд. Причина в том, что люди часто ищут сразу что-то более конкретное.

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

“Главная страница — это как лобби отеля. Хотя это и важная часть отеля, но это не то место, где ваши гости хотели бы остановиться. Они хотят попасть в свой номер.”

Hero image

Hero-изображение — это первый визуальный эффект, который видит пользователь, попадая на сайт. Изображения, как правило, быстрее доносят информацию и создают более вовлекающий эмоциональный отклик. Поэтому делайте hero image чем-то уникальным, броским и, самое главное, тесно связанным с вашим брендом.

Чтобы лучше понять какой посыл должно нести это изображение, ознакомьтесь с концепцией JTBD (jobs-to-be-done), краткий смысл которой состоит в том, что у клиента на данный момент есть конкретная задача / проблема, которую надо выполнить, и он ищет лучшее решение (продукт), который поможет ему в этом. Ваша же цель — дать ему понять, что ваш продукт решает эту задачу.

Ваши продукты / услуги

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

Обозначьте характеристики и преимущества продукта

Как сказал Саймон Синек в своей знаменитой речи — люди покупают не то, ЧТО вы делаете, они покупают то, ПОЧЕМУ вы делаете это.

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

Социальное влияние

Люди склонны прислушиваться и доверять своему окружению. Еще один прекрасный способ быстро внедрить и распространить информацию — это добавить отзывы о вашей компании или продуктах. Сосредоточьтесь на вашей целевой аудитории и добавьте соответствующие отзывы. Чем более известен и публичен автор отзыва, тем лучше. Не беспокойтесь, если вы еще не засветились на TechCrunch или Forbes; ваши посетители должны быстро установить положительный эмоциональный контакт с рецензентами, вот что важно на данный момент.

О нас

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

Содержание:

• История / timeline
• Цели и миссия компании
• Отзывы
• Команда
• Партнеры
• Видео
• Статистика
• Интересные факты

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

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

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

Прежде всего, определите вашу целевую аудиторию. Кто главный адресат информации? Техническая персона? Человек, принимающий решения или нет? Ваш рассказ и форма, в которой вы его преподносите, должен коррелировать с ценностями и задачами таргет-группы, мотивировать людей к действию.

История компании

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

Ваши основные принципы

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

И снова отзывы

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

Вы также можете добавить агрегированные отзывы клиентов, достижения, бейджи и награды. Рассмотрите возможность размещения профиля вашей компании на различных информационных площадках (online listings). Это позволит получить два основных преимущества. Первое — качественные бэклинки на ваш сайт крайне привлекательны для SEO. Второе — если вы вкладываете ресурсы в сбор отзывов клиентов на таких платформах, то они, как правило, включают вас в рассылки и дают бейджи. А это — более широкий охват аудитории и повышение узнаваемости бренда.

Люди за кулисами

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

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

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

Партнеры

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

Запишите видео

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

Статистика и интересные факты

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

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

Продукты / услуги

Зачем создавать: продемонстрируйте свои продукты детально и обрисуйте в общих чертах их ценности.

Содержание:

• Изображения
• Описание
• Особенности и преимущества
• Цены
• Отзывы / рекомендации
• Контактная форма
• FAQ

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

Вместе или раздельно

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

Визуальный язык

Изображения продуктов имеют огромное значение и лучше всего выполняют свои функции контекстные образы.

Трудно переоценить пользу, которую приносят отличные изображения. Архиважно сосредоточиться на качестве, а не на количестве. Изображения доставляют ваши сообщения за считанные секунды и являются лучшим способом передачи смысла.

Описание продукта

Скомбинируйте изображение с детальным описанием продукта. Само по себе — это уже отдельная наука, поэтому не будем углубляться в это. Сфокусируйтесь на своей целевой аудитории. И помните о подходе JTBD, мы ранее уже касались этой темы.

Особенности и преимущества (ценность)

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

Цены

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

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

Наличие отдельной ценовой страницы (продукты / услуги) хорошо для вашего SEO: больше страниц в вашем индексе, больше ключевых слов для ранжирования в содержании страницы. Еще одним преимуществом отдельного расположения цен является возможность точной настройки пути вашего клиента, особенно в воронках B2B. Но общее правило — лучше сразу экономить ресурсы и указывать цены на своей домашней странице.

Если вы хотите заручиться доверием ваших будущих клиентов, то не забудьте проинформировать их о безопасной обработке платежей, о ваших правилах возврата, отмены и обмена. Другим хорошим способом налаживания доверительных отношений является наличие пробного периода (trial).

Актуальность обратной связи

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

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

Будьте на связи

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

Как только вы наберете обороты, подумайте о внедрении комплексных платформ управления клиентами, таких как Intercom или HelpScout, с их функциями для чата и интерактивной средой связи с клиентами.

Подготовьте ответы на вопросы заранее

Еще один способ улучшить взаимодействие с пользователем на странице вашего продукта или услуг — включить раздел FAQ. Сосредоточьтесь на часто задаваемых вопросах в ваших входящих сообщениях и на семантике SEO.

Важны краткие и точные ответы. Ваши посетители будут благодарны за то, что вы заблаговременно ответили на их вопросы.

Навигация

Страница продукта может служить Pillar страницей — быть хабом, аккумулирующим ценный органический трафик. И уже к ней линкуются релевантные кластерные страницы (Cluster pages). Помимо улучшения SEO, использование модели Pillar-Cluster значительно упорядочивает пользовательский поток на вашем сайте.

FAQ

Для чего создавать: ответить на типичные вопросы клиентов, не обращаясь к ним напрямую.
Содержание:

• Вопросы и ответы
• Поиск
• Живой чат

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

Страница FAQ довольно проста и дает много преимуществ. Как упомянуто выше, сосредоточьтесь на том, чтобы отвечать на реальные вопросы клиентов и повторяющиеся специфические вопросы, найденные в семантике поиска.

Разделение по темам

Рассортируйте ваши вопросы и ответы. Для каждой темы должен быть отдельный раздел. Таким образом, посетители сайта смогут перейти прямо к нужному вопросу, не блуждая во всем остальном.

Поиск

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

Отвечайте на вопросы напрямую

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

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

Общение в чате не обязательно означает, что он «живой». Службы чата могут быть настроены на передачу запросов в службу поддержки клиентов. Таким образом, вы не предоставляете ответы на странице в режиме реального времени, а получаете мейл с запросом от вашего посетителя, чтобы продолжить общение.

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

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

Вакансии

Зачем создавать: для развития своего HR, привлечения сотрудников и нишевого ранжирования по ключевым словам.

Содержание:

• Преимущества работы у нас
• Вакансии
• Фильтры
• Форма заявки
• Медиа, связанные с ваше корпоративной культурой, мероприятиями, рабочей средой и т.д.

В основном, раздел «Карьера» предназначен для тех, кто заинтересован работать с вами в качестве сотрудника. Расскажите им больше о вашей компании, чтобы они поняли, что вы именно тот бренд, с которым они хотели бы связать свою жизнь.

Чем вы лучше остальных?

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

Кого конкретно вы ищете?

Ключевой раздел вашей страницы «Карьера» — это вакансии. Как и FAQ, этот раздел нуждается в классификации. Сегментируйте свои вакансии по уровню профессионализма, или отделу. Если у вас много вакансий одновременно, рассмотрите возможность добавления фильтра или поля поиска.

Отдельная страница для каждой вакансии

У каждой вакансии должна быть своя отдельная страница, где можно подробнее узнать о требованиях к работе, необходимых навыках, оплате и прочем.
Добавьте форму заявки. Чем проще она будет в использовании и понятнее, тем лучше. Кроме того, форма является отличным способом создать и настроить автоматизированный процесс поиска и отбора кандидатов.

Аргументируйте

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

Блог

Зачем создавать: делиться своими знаниями и опытом, исследованиями и идеями, получать мощную поддержку SEO.
Содержание:

• Контент, который создает ценность
• Привлекательные изображения
• Видео
• Комментарии
• CTA
• Ссылки на профили в соцсетях

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

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

“Напрасно ты приобрел знания, если не передал их другим”
Дварим Рабба (комментарий к Книге Второзаконие)

Если ваш блог регулярно обновляется, поисковые системы видят, что ваш сайт “живой” и чаще индексируют ваш сайт.

Мы уже упоминали про рейтинг по релевантным ключевым словам. Для этого убедитесь, что ваши тексты имеют относительно большой объем, не менее 250 слов. Для лонгридов — от 800 слов. Осторожно придерживайтесь SEO оптимизации текстов.

Добавив блог, вы естественным образом получаете еще одно преимущество: увеличение продолжительности сеансов пользователей, которое поднимает вас в поисковой выдаче. Чем более интересны ваши посты и записи, тем больше времени посетители будут тратить на их чтение и, кстати, не переписывайте (rewrite) чужие блоги, это неэффективно.

Далее уже конвертируете время, которое посетители проводят за чтением вашего блога, в достижение своих целей — добавляете CTA блоки, попап-окна с предложением подписаться на рассылку (но в меру и элегантно), ссылки на другие статьи и т.д.

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

Заманите читателя

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

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

С точки зрения Pillar модели это позволит URL-адресам, таким как «https://yoursite.com/blog/#seo», выступать в качестве идеальных хабов для накопления органического трафика со смежных кластерных страниц. Роботы идентифицируют страницы как смежные, если они правильно сшиты.

Упорядочьте содержимое

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

Изображения и видео

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

Позвольте аудитории высказаться

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

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

Кнопки навигации

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

Расшарьте контент

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

Страница новостей

Что у нас по новостям? Похоже, что на сайтах компаний менее 1% посетителей считают новости стоящими своего времени. Кроме того, корпоративные новости часто воспринимаются как слишком субъективные и самовосхваляющие. Изучите поведенческие паттерны групп пользователей; возможно, вы обнаружите, что тот небольшой процент посетителей, интересующихся вашими новостями — это те, кто конвертируются лучше остальных.

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

Контактная информация / связаться с нами

Зачем создавать: позволить посетителям оперативно связаться с вашей компанией и улучшить SEO.

Содержание:

• Номера телефонов, e-mail (для разных целей)
• Форма обратной связи
• Карта

Хотя страница контактной информации является одной из базовых страниц для любого веб-сайта, она также является одной из самых важных.

К примеру, поисковые системы анализируют вашу карту сайта и оценивают вас выше, если они находят эту страницу.

Категоризация

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

Создайте форму

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

Местоположение

Еще одна полезная функция для страницы контактов — отображение местоположения вашего офиса на карте. Просто адрес уже никому неинтересен. Некоторые компании выходят за рамки стандартной Google Maps или Яндекс Карты и превращают свою карту в нечто уникальное.

Ошибка 404

Зачем создавать: Информирование пользователей об ошибках и перенаправление их на другие страницы.

Содержание:

• Изображения / видео / интерактивные элементы
• Сообщение об ошибке
• Ссылки на другие страницы сайта

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

Ключевые моменты

Прежде всего, разместите ссылки на другие страницы. Как минимум должна быть ссылка на главную страницу.

Плохо, если ваша страница с ошибкой по сути является тупиком, такой вариант не понравится ни вашим посетителям, ни SEO. Можно и нужно перенаправлять трафик со страницы ошибки в правильное место.

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

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

Правовая информация

Зачем создавать: расскажите о своем соответствии требованиям законодательства.

Содержание:

• Политика конфиденциальности
• Уведомления об авторских правах
• Правила и условия пользования
• Дисклеймер
• Злоупотребление или жалобы контактная информация
• Патенты
• Корпоративная политика

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

Убедитесь, что документация изложена безошибочно и проверена вашими юристами, а также:

1. Содержит всю необходимую информацию, разбитую на пронумерованные абзацы
2. Написана в понятной для большинства людей форме
3. Соответствует общему дизайну сайта

Заключение

Планирование правильной структуры и контента не такая легкая задача, как это может показаться сначала, это требует вдумчивого планирования, исследований и кропотливой работы. Но это фундамент!

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

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

Что касается нас, авторов этого руководства, то мы занимаемся этим уже 18 лет. И весь свой опыт постарались аккумулировать (помимо этого гайда) в мощном и одновременно простом инструменте Octopus.do, с помощью которого вы сможете бесплатно создать структуру веб-сайта, планировать контент и делиться этим с кем угодно. Регистрация необязательна.

Оригинал: The ultimate guide to your company website structure

^{(Вольный перевод: https://habr.com/ru/post/501430/)}

Главное достоинство WebStorm – это удобный и умный редактор для JavaSсript, HTML и CSS, который также поддерживает TypeScript, CoffeeScript, Dart, Less, Sass и Stylus и фреймворки, например, Angular, React и Vue.js.

WebStorm, как и другие IDE на платформе IntelliJ IDEA, делает разработку проще и удобней. WebStorm обеспечивая подсветку и автодополнение кода, проверяет его на ошибки, помогает быстро навигироваться по проекту и безопасно вносить изменения с помощью рефакторингов. В WebStorm есть инструменты для отладки кода и интеграция с системами управления версиями.

WebStorm по-настоящему понимает структуру вашего проекта и код, обнаруживает возможные проблемы еще до того, как вы открыли проект в браузере, и предлагает их решение.

Встроенные в IDE инструменты для тестирования помогут в разработке и сделают ее удобней и продуктивней.

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

META-теги имеют два возможных атрибута

— <META HTTP-EQUIV=»имя» CONTENT=»содержимое»>
— <META NAME=»имя» CONTENT=»содержимое»>
META-теги должны находиться в заголовке HTML-документа между <HEAD> и </HEAD> (особенно это важно для документов, использующих фреймы).

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

 Пруфлинк: http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.1
(The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.)


 

Атрибут HTTP-EQUIV

META-теги с атрибутом HTTP-EQUIV эквивалентны HTTP-заголовкам. Обычно они управляют действиями браузеров и могут быть использованы для совершенствования информации, выдаваемой обычными заголовками. Теги такой формы могут дать такой же эффект, что и HTTP-заголовки, и на некоторых серверах автоматически могут быть переведены в настоящие HTTP-заголовки.
Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тегов (в частности Date), другие подменяются только при ненормальном статус-коде (<>200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тегов.
 

Значения  поля content  для Аттрибута   HTTP-EQUIV

Атрибут NAME

Источники информации:

http://www.citforum.ru/internet/search/metatags.shtml
http://web-support.ru/adv/ps_meta_2.shtml
http://www.shtogrin.com/library/web/meta/
http://vancouver-webpages.com/META/metatags.detail.html
http://www.mattcutts.com/blog/keywords-meta-tag-in-web-search/
http://www.webotdel.ru/notes/metatags/
Очень хорошо и понятно написано http://www.w3schools.com/tags/tag_meta.asp
Какие мета-теги понимает Google  http://www.google.com/support/webmasters/bin/answer.py?answer=79812
Какие мета-теги понимает Bing
http://www.bing.com/community/blogs/webmaster/archive/2009/07/18/head-s-up-on-lt-head-gt-tag-optimization-sem-101.aspx
Google  не использует мета-тег keywords
http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html

Источник информации

У CSS есть несколько базовых проблем, которые позволяют очень быстро отстрелить себе ногу при неправильном использовании:

1. Глобальный неймспейс – в серверном программировании все что написано в файле, в файле и остается. Все же что написано в css и js засирает глобальное пространство имен со всеми вытекающими. В JS эту проблему сейчас побороли всякими модульными системами, а вот с css сложнее. В идеальном мире это должен починить Shadow DOM и настоящие Web Components, но пока их нет единственный способ с этим бороться – следовать какой-то системе именований селекторов, которая по возможности уменьшает и исключает возможные конфликты.

2. Каскадность – если на один элемент может сработать несколько правил, то они все и сработают последовательно. Если есть элемент h1.title, на него сработают все правила для тегов h1 и все правила для класса .title. Так как весь html состоит из тегов, то правил которые применяются на теги без классов будут работать на все вообще.

Соответственно назначать или переназначать стили у тегов – это примерно то же самое, что править прототипы объектов в JS, чем в свое время печально славился Prototype.js. Эти стили унаследует вообще все объекты и если их потом захочется поменять, то результат будет такой же, как если ты решил в прототипе объекта поменять результаты какого-то метода, который используют все дети этого объекта. Вероятность что-то сломать почти 100%.

3. Вложенные селекторы. Можно написать селекторы .nav .item {...} и .menu .item и .item в зависимости от места вывода будет показываться по-разному. Все хорошо пока тебе не нужно поместить блок menu внутрь блока nav. Тогда сайдэффекты становятся совершенно непредсказуемые. По сути аналог вложенных селекторов из программирования – это функция которая в зависимости от места где её вызывают, выдает разный результат. Например в одном месте sum(2,2) может возвращать 3, а в другом 5.

Зачем нужны методологии

Хорошая методология занимает предотвращением этих проблем. Покажу как это делает БЭМ^એ, но CSS Modules, Polymer или всякие решения с инлайновыми стилями для Реакта тоже решают именно их, только другим способом.

Как именование классов по БЭМ^એу помогает решать эти проблемы:

1. БЭМ^એ запрещает применять стили на теги, максимум ресет. На id тоже нельзя, потому что такие элементы нельзя на странице использовать 2 раза, а сколько раз он тебе понадобится ты не всегда знаешь заранее. Все стили можно применять только к классам.
2. БЭМ^એ создает для всех компонентов глобальный неймспейс – все классы которые относятся к компоненту начинаются с одного префикса. Это позволяет исправить второй пример таким образом: .nav__item, .menu__item. Если один вложить в другой не будет конфликта правил.
3. Под каждый компонент в БЭМ^એ создается своя папка – это защищает тебя от конфликтов в именах компонентов и при правильном использовании дает гарантию, что в глобальном неймспейсе будет только один компонент с таким префиксом.
4. В БЭМ^એ есть только один вид вложенных селекторов: модификатор > элемент. Оба начинаются с одного префикса, оба живут в одном файле, оба никак не влияют на другие компоненты.

Что делает Bootstrap

Bootstrap нарушает КАЖДОЕ из этих правил:

1. Bootstrap переназначает стили тэгов.
2. Bootstrap в куче случаев меняет способ отображения элемента в зависимости от того, кто его родители. Хорошо хоть сейчас делает это через >, а не просто так. Но вот https://github.com/twbs/bootstrap/blob/master/less/button-groups.less такие штуки все равно сильно уменьшают предсказуемость и усложняют редизайн.
3. Bootstrap загрязняет глобальный неймспейс сотнями классов с очень generic именами: .table, .dropdown, .row, .left, и т. д. Которые надо все помнить и ни в коем случае не использовать самому.

При таком подходе отстреливание себе ноги становится только вопросом времени.

Когда Boostrap можно использовать

Чтобы не отстрелить себе ногу Bootstrap’ом и получить от него пользу нужно чтобы проект соответствовал ряду требований:

1. На проекте много страниц.
2. Страницы собираются из простых базовых элементов. Базовый – это кнопка или таблица. Сложный – это пост в фейсбуке или комментарий к нему, они состоят из нескольких тегов и их нужно переносить и реиспользовать все вместе.
3. Нет мест, где изменение и эксперименты с дизайном могут сильно повышать/понижать конверсию или другие важные метрики. Как корзина или страница товара в интернет магазине.
4. Никогда не будет глобального редизайна.
5. Типизация страниц окупается скоростью их внедрения.

Еще можно для прототипов и быстрого старта, чтобы потом выкинуть. Для остальных случаев это боль скорее.

Примеры ситуаций когда Bootstrap НЕ подходит

1. Большие интернет-магазины и новостные сайты

У интернет-магазина есть главный KPI – конверсия в покупки. Покупки очень сильно зависят от дизайна страницы товара и корзины/процесса оформления заказа. Изменение конверсии во многом зависят от дизайна, прибавка на полпроцента может тебе позволить удвоить размер команды фронтендеров.

Тут ты дизайнера не запинаешь в гайды. Наоборот ему нужно давать максимум возможностей для экспериментов и изменений, брать эти варианты и гонять 50 сплит-тестов одновременно. С разными отступами, размерами шрифтов, кастомными элементами и прочим.

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

Примеры:

http://www.amazon.com/ – тысячи страниц, сотни сплиттестов, постоянный ползучий редизайн.
http://www.gog.com/ – мало стандартных элементов и много кастомных под этот сайт.
http://www.nytimes.com/ – очень много сложных компонентов и исключений. Несколько ключевых экранов от дизайна которых зависят KPI. Сюда же большинство сайтов больших СМИ.
http://arzamas.academy/ – так, до кучи.

2. Сайты со сложными реиспользуемыми в разных местах компонентами

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

А вот вызвать проблемы, когда ты вставляешь этот элемент в какое-то новое место можно довольно легко.

Самый простой вариант взять сложный компонент в котором используется .form-control или label и поместить его в какую-нибудь форму с модификаторами. Куча разнообразный сайдэффектов обеспечена: https://github.com/twbs/bootstrap/blob/master/less/forms.less

Также много интересного можно получить если ты хочешь сделать выпадающий компонент (как непрочитанные сообщения в фейсбуке) и разместить его в закрытом состоянии в шапке, рядом с кнопкой которая его открывает: https://github.com/twbs/bootstrap/blob/master/less/navbar.less

Примеры:

https://mail.yandex.ru/ – мало стандартных контролов, куча кастумных контролов, много исключений, поддержка легаси.
http://trello.com/ – много сложных компонентов, не очень много стандартных бутстраповских. Для http://try.discourse.org/ польза тоже весьма относительная будет.

3. Сайты с большим количеством типов страниц, которым может потребоваться редизайн

Сюда хорошо подходят те же интернет-магазины, большие онлайновые журналы/газеты, городские порталы.

Допустим ты решил поменять кегль у заголовков на каком-нибудь http://www.e1.ru . Ты переназначил стили h1 и h2. Ну ой, теперь тебе надо протыкаться по 100+ типам страниц и убедиться что у тебя не сломалось ничего: Ничего не вылазит за границы блоков.

При этом помня что еще https://github.com/twbs/bootstrap/blob/master/less/jumbotron.less и другие переназначатели и что изменения базовых стилей их скорее всего поломает.

Постепенно (постранично или даже по частям страниц) переводить сайт на новый дизайн при этом продолжая использовать стандартные бутстраповские элементы не получится.

Примеры:

https://www.kickstarter.com/ – за последние пару лет сайт как минимум дважды глобально передизайнивали, не считаю отдельных локальных экспериментов.

4. Промосайты и лэндинги

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

Как пример: http://um.mos.ru/promo/gosudarstvennyy_istoricheskiy_muzey/

5. Игры в браузерах

No comments.

Резюме

Да, у Бутстрапа есть своя зона применения. Но она точно не 80% сайтов. К 20-30% он подходит хорошо. Еще на столько же его можно натянуть, с весьма вероятными потенциальными проблемами. В остальных случаях сразу нет.

ну и надо всегда помнить, что проект обычно начинается как что-то простое и предсказуемое, а потом в процессе мутирует во что-то совсем другое. В случае с Bootstrap это будет большой проблемой, в случае с BEM или CSS Modules оно будет просто работать.

Юзабилити-тестирование — это проверка сайта на то, насколько удобно им пользоваться.

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

Зачем нужно проводить юзабилити-тестирование сайта

Глобальные цели. Юзабилити-тестирование помогает понять, почему пользователи уходят, не выполнив целевого действия, и повысить конверсию.

Узкие цели. Тестирование проводят, чтобы проверить, насколько удобно на сайте:

• найти товары, услуги или статьи в блоге;
• положить товар в корзину и оформить заказ;
• сориентироваться в личном кабинете;
• узнать подробности об услугах компании;
• получить ответ на часто задаваемый вопрос;
• связаться с консультантом.

Во время тестирования респонденты могут случайно выявить баги в работе сайта: в интерфейсе или серверной части.

Какие бывают типы юзабилити-тестирования

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

Тестирование можно проводить и с модератором. Он поможет респондентам пройти сценарий и составить отчет.

Хорошо, если модератором будет человек, который заинтересован в качестве сайта и принимает участие в его разработке: UI‑ или UX‑дизайнер, программист, маркетолог. Он будет замечать тонкости поведения респондентов и задавать наводящие вопросы, чтобы получить максимум результатов после тестирования.

Есть два основных типа юзабилити-тестирования: качественное и количественное.

Качественное помогает выявить проблемы в юзабилити сайта.

Количественное помогает понять, как часто эти проблемы встречаются и насколько они критичны.

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

Как провести юзабилити-тестирование сайта

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

Определить задачи тестирования

Задачи можно определить в зависимости от того, на какой стадии сейчас находится сайт.

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

• зарегистрироваться;
• оставить заявку;
• положить товары в корзину;
• сделать заказ.

Если сайт уже запущен и какое-то время функционирует, можно проверить тонкости взаимодействия с интерфейсом:

• удобно ли просматривать карточки товаров;
• насколько плавно работает скролл;
• легко ли считываются шрифты;
• гармоничны ли цвета визуального контента.

О том, как найти проблемные места в интерфейсе, расскажу в статье про маршрут клиента на сайте.

Составить сценарий тестирования

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

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

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

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

Например, у вас магазин стройматериалов, и есть подозрение, что покупатели не понимают, сколько ламината им нужно купить. Можно использовать такой сценарий: зайти на сайт → найти ламинат в каталоге → отметить в фильтре бренд Egger и цвет «Канадская сосна» → выбрать количество, нужное для комнаты 20 м².

Пригласить и проинструктировать респондентов

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

• через соцсети;
• через email-рассылку;
• через поп-ап на сайте;
• через физические точки продаж, когда клиенты что-то покупают или приходят в сервисный центр.

За участие в тестировании можно предложить скидку, небольшое денежное вознаграждение, ваш продукт или услугу бесплатно.

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

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

Как подготовить респондентов:

1. Перед началом тестирования важно обсудить с респондентами, что им нужно будет сделать.
2. Предупредить об аудио- или видеозаписи, если она будет.
3. Предупредить о том, что им нельзя разглашать подробности тестирования.
4. Попросить подписать соглашение об обработке персональных данных, если тестирование не анонимное.

Провести тестирование по сценарию

Юзабилити-тестирование можно провести онлайн или офлайн. Основная разница между ними в том, каким компьютером и интернет-провайдером будет пользоваться респондент: вашим или своим.

Онлайн

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

С модератором. Модератор связывается с респондентом по видеосвязи. Респондент запускает демонстрацию экрана и выполняет действия по сценарию. При этом есть два варианта комментирования:

• модератор задает респонденту вопросы, что он сейчас делает и насколько легко ему это удается;
• респондент комментирует каждый свой шаг и делится впечатлениями с модератором.

Офлайн

Без модератора. Респондент приходит в офис компании, садится за монитор, выполняет действия по сценарию, затем пишет отчет.

С модератором. Модератор наблюдает за действиями каждого респондента по отдельности. Общение можно построить так же, как при онлайн-тестировании:

• модератор задает респонденту вопросы, что он сейчас делает и насколько легко ему это удается;
• респондент комментирует каждый свой шаг и делится впечатлениями с модератором.

Проанализировать результаты

Результаты тестирования можно оформить в виде таблиц, графиков, диаграмм или инфографики.

Отчет по количественному юзабилити-тестированию лучше визуализировать цифрами.

Отчет по качественному юзабилити-тестированию можно оформить в виде тезисных отчетов.

Чек-лист: как провести юзабилити-тестирование сайта

1. Определите задачи тестирования. Они зависят от того, как долго функционирует сайт и есть ли у вас конкретные гипотезы, которые вы хотите проверить.
2. Составьте сценарий. Он должен быть подробным, если вы хотите, чтобы респондент прошел именно те шаги, которые вы считаете проблемными на сайте. Сценарий может быть коротким, если вы хотите проверить, какими путями респондент доберется до цели.
3. Назначьте модераторов. Хорошо, если это будет человек, который принимает участие в разработке сайта. Например, ваш маркетолог, разработчик или дизайнер.
4. Пригласите респондентов. Их лучше искать среди вашей целевой аудитории, например среди действующих клиентов. Пригласить людей можно также через специальные сервисы.
5. Проведите тестирование. Это можно сделать онлайн и офлайн, с модератором и без него.
6. Проанализируйте результаты. Для этого можно сделать таблицу, график или тезисно написать, какие проблемы чаще всего возникали у респондентов.

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

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

• Оновные параметры юзабилити;
• Дизайн;
• Коммуникация с клиентами.

Оригинал Как организовать юзабилити-тестирование сайта

RU-CENTER подготовил цикл статей о том, как прокачать юзабилити своего сайта. В первой расскажем об основных принципах, которые стоить учесть.

Чек-лист, что проверить на сайте

• Технический аудит (скорость загрузки и отсутствие ошибок). Главная страница загружается за 1–3 секунды (в идеале все остальные тоже). На сайте минимальное число технических ошибок.
• Адаптивность. Сайтом удобно пользоваться с разных устройств (смартфонов, планшетов, десктопов).
• Главная страница. Попав на домашнюю страницу сайта, пользователи сразу понимают, какие товары или услуги предлагает ваша компания.
• Навигация. У сайта чёткая простая структура и есть поиск. Названия всех элементов сайта (от домена до заголовков и кнопок) однозначно воспринимаются пользователями.
• Единообразие интерфейса и форм. У всех страниц и форм сайта сходная структура и оформление.
• Читабельность. Оформление текстов не затрудняет восприятие информации.

Рассмотрим каждый пункт подробнее.

Скорость загрузки и ошибки

Посетителям комфортно, когда страница загружается за 1–2 секунды. Добиться такой скорости помогут подходящий хостинг и оптимизация сайта. Оптимизированной считается страница с простой структурой, минимизированным кодом и без тяжёлых форм.

Узнать скорость загрузки своего сайта можно с помощью сервисов PageSpeed Insights, Loading.Express и подобных им. Вот результаты скорости загрузки Яндекса в PageSpeed Insights. Он загружается очень быстро. Это, с одной стороны, связано с тем, что на странице немного контента. А с другой — с тем, что содержимое страницы оптимизировано для оперативной загрузки:

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

Адаптивность

Адаптивность — это способность сайта выглядеть одинаково хорошо и на десктопе, и на смартфоне, и на планшете. Чтобы добиться этого, можно использовать адаптивную вёрстку или сверстать для каждого варианта свою версию.

Если у сайта простая структура и немного контента (например, сайт-визитка), выбирайте адаптивную вёрстку. Благодаря ей элементы страницы подстраиваются под экраны планшетов и смартфонов.

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

Например, мобильная версия сайта «ВКонтакте»: основные разделы сайта в виде иконок вынесены наверх:

Пример отсутствия адаптивной вёрстки или мобильной версии: сайт Большого театра. Из-за большого количества элементов и маленького шрифта сложно разобрать текст. А ещё есть шанс нажать не туда.

Главная страница

Главная страница на то и главная, чтобы выражать основной посыл вашего сайта. Убедитесь, что, оказавшись на главной странице сайта, пользователь поймёт, чем занимается ваша компания и что вы ему предлагаете.

Например, сайт интернет-магазина Asos. По главной странице понятны сфера (одежда) и направление (интернет-магазин). Разделы сайта повторяют классификацию товаров. Кнопка «Купить» намекает на то, что к целевому действию можно перейти с первой страницы:

Навигация

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

• Кликабельные «хлебные крошки» (путь от домашней (главной) страницы до текущей). Благодаря им пользователь понимает, на каком уровне сайта он находится, и может перейти на уровень выше в один клик.
• Кнопка «Наверх», если страница занимает больше одного экрана.
• Возможность вернуться на главную страницу благодаря кликабельному логотипу в шапке или текстовой ссылке в футере (информационном блоке внизу страницы).
• Кнопка возврата в браузере работает корректно на всех страницах сайта. Чтобы при нажатии пользователь попадал на шаг назад, а настроенные фильтры/формы сохранялись.
• Поиск по сайту, который позволит пользователю найти конкретные товар/услугу/статью. Принято размещать строку поиска (или иконку лупы) в правом верхнем углу.

Сайт Vichy — удачный пример. В нём есть «хлебные крошки», которые позволяют ориентироваться в каталоге. Названия разделов краткие и однозначные. Мы понимаем, что найдём в разделах «Лицо» (средства по уходу за лицом), «О марке» (История бренда/текст о компании). Отыскать конкретную позицию можно через поиск, он расположен в правом верхнем углу.

Чтобы пользователям было удобнее ориентироваться на сайте, используйте точные формулировки. Например, раздел «Коллекция» на сайте кажется слишком общим. Лучше выражаться конкретнее: «Пальто, куртки и пиджаки», «Свитеры и кардиганы».

Пользователь должен понимать, что произойдёт, когда он нажмёт на кнопку или перейдет по ссылке. Для кнопок лучше использовать глаголы в инфинитиве: «Подписаться», «Купить», «Перейти в корзину». Неудачный пример названия кнопок: «Готово», «Продолжить», «Дальше». Если человек отвлечётся от сайта и, вернувшись, увидит эти кнопки, он не вспомнит, на каком этапе находился.

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

Единообразие интерфейса и форм

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

Удачный пример — единообразный интерфейс сайта BAGAAR. Шапка сайта с логотипом и основными разделами закреплена и не пропадает при скролле страницы вниз. Футер повторяется на всех страницах сайта.

Позаботьтесь и о единообразии форм (инпута) на сайте. В формах должны быть чётко указаны обязательные поля, а также даны примеры/советы для заполнения. Приветствуется, если формы на разных страницах организованы единообразно.

Читабельность

Последнее общее правило: оформление текста не должно отвлекать пользователя от контента. Для этого подберите подходящий для чтения шрифт (чаще всего выбирают вариант с засечками: Times New Roman, Bodoni и др.). И придерживайтесь правила контрастности: тёмные цвета — для текста и светлые — для фона или наоборот.

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

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

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

• Дизайн;
• Коммуникация с клиентами.

Оригинал Чек-лист юзабилити сайта. Часть I: основные параметры

Визуальная составляющая — первое, с чем сталкиваются пользователи, попадая на сайт. По исследованию InstantShift (англоязычное digital-сообщество), для 94% людей дизайн — мерило, по которому они определяют, вызывает ли сайт доверие.

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

Чек-лист, что проверить в веб-дизайне

• Функциональность и умеренность. Убедитесь, что дизайн не отвлекает пользователей от содержания сайта и целевого действия.
• Композиция и акценты. Тщательно продумывайте структуру и расставляйте акценты, чтобы пользователи не пропускали нужную информацию.
• Цветовая гамма. Выбирайте подходящие цвета, которые не будут сливаться и затруднять чтение.
• Единообразие элементов. Следите, чтобы однотипные элементы на разных страницах сохраняли единообразие и последовательность.
• Типографика. Оформляйте тексты так, чтобы они быстро просматривались и легко читались.
• Качество визуального контента. Используйте оригинальный визуальный контент, чтобы проиллюстрировать важные тезисы.

Давайте рассмотрим каждый из пунктов детально.

Умеренность

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

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

На что обратить внимание, чтобы на сайте не было лишних элементов:

• Уберите с главной страницы всё второстепенное и не относящееся к цели пользователей. Оставляйте только то, что введёт их в курс дела и ответит на главные вопросы, расскажет о лечении их «боли». Для фильтрации подойдёт вопрос: «Зачем этот элемент здесь».
• Освободите место. На сайте должно быть достаточно «воздуха», то есть пустого пространства. Оно выделяет контент и позволяет сфокусироваться на нём.
• Отключите автозапуск видео, лупов и гифок. Оставьте пользователю иллюзию выбора. Кнопка Play позволит ему погрузиться в материал в удобное время. Кроме того, движение и мигание на фоне отвлекает от содержания.
• Будьте креативны в меру. Авторский дизайн — безусловно, украшение сайта, но с ним можно переборщить в интерфейсах. Если креатива слишком много, он может заслонить пользу и назначение сервиса. На первом месте должны стоять функциональность дизайна и решение задачи пользователя:

Композиция и акценты

Композиция — это то, как соотносятся между собой части целого. А акценты — то, как выделяются важные элементы. Если на сайте нет чёткой композиции — это сразу бросается в глаза. В нём «непонятно, что хотел сказать автор». При создании любого сайта стоит учитывать законы композиции.

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

Но есть базовые принципы. Они основываются на том, как работают внимание и восприятие человека. Не учитывая их, нельзя сделать цельный и понятный сайт.

Правило третей

Придерживайтесь правила третей. Оно пришло в дизайн из живописи и связано с золотым сечением. Чтобы применить его, наложите на страницу «сетку», которая разделит страницу на 3 равные части вдоль каждой из сторон. Получится 9 одинаковых прямоугольников. Четыре центральные точки пересечения будут притягивать больше всего внимания:

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

Паттерны сканирования

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

При движении он повторяет начертание буквы F. Верхняя перекладина слева направо → нижняя перекладина в том же направлении → вертикальный отрезок сверху вниз. Зная это, располагайте важные элементы в последовательности F-паттерна.

Кроме него есть Z-паттерн. Он характерен для сайтов с альбомным позиционированием. Взгляд скользит по траектории буквы Z: верхняя перекладина слева направо → диагональ → нижняя перекладина слева направо.

Акценты

Не забывайте об эффективности простых акцентов. Акцент — это выделение элемента из ряда однотипных. Он привлекает внимание за счёт того, что отличается от других. Сделать акцент можно самыми разными способами. Начиная от выделения цветом, размером, расположением, заканчивая нестандартной анимацией.

Цветовая гамма

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

• Если у бренда есть корпоративные цвета, используйте их. Это повышает узнаваемость и вызывает доверие. Согласитесь, на сайте Сбербанка странно бы смотрелась цветовая гамма, отличная от фирменного зелёного:
  
• Избегайте цветов, которые не подходят под тематику сайта или резонируют с ней. Например, розовый не ассоциируется со сферой недвижимости, поэтому не подойдёт для оформления сайта ЦИАН. Его связывают с отношениями или товарами для женщин:
  
• Используйте 2–3 цвета в оформлении интерфейса. Чем больше цветов, тем сложнее их гармонично сочетать. Для трёх цветов используйте соотношение 60-30-10. 60% — одноцветный фон, 30% — цвета иллюстраций или текста, 10% — для акцентных элементов.
  

  

  Выбирайте для фона неяркие цвета, которые не мешают сосредоточиться на контенте. Подойдёт белый и оттенки серого, бежевого.

  Чтобы проверить, будут ли сочетаться цвета интерфейса, используйте колористические цветовые круги. Это диски, размещённые на одной оси. На их поверхностях отображаются все основные цвета светового спектра и возможные оттенки и контрасты:

  

  Также можно использовать различные онлайн-сервисы (colorscheme.ru и другие).
  Подробнее о подборе цветов можно прочитать в статьях Как сделать свою цветовую схему и Как пользоваться цветовым кругом.

• Делайте элементы контрастными, то есть отличающимися по яркости.
  

  

Единообразие

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

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

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

Типографика

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

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

• Разбивка текста на абзацы до 10 строк. Это помогает избежать сплошной простыни, которую тяжело воспринимать:
  

  

• Оптимальный размер кегля основного текста: 16–20 px. Мелкий шрифт не вызывает желания погрузиться в чтение. В сочетании с простынёй текста является убийственным приёмом для глаз пользователей.
• Внутренние отступы меньше внешних. Рассмотрим на примере. Если вы установили межстрочный интервал 1,3, то расстояние между абзацами должно быть как минимум в два раза больше (от 2,6 px). Это позволяет визуально группировать однотипные элементы и отделять их от других.
• Размер заголовков отличается от размера основного текста.
  

  

• Умеренное количество выделений. Выше мы говорили об акцентах, а ещё выше — о минимализме. Пришло время совместить эти два принципа в третьем. Не переусердствуйте с выделениями. Если в тексте через слово полужирное начертание, сочетающегося с курсивом, подчёркиванием и цветовыми врезками, это произведёт эффект разорвавшейся бомбы. В негативном смысле.
• Не используется больше трёх шрифтов. Иначе возникнет ощущение небрежности и хаотичности.

Качество контента

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

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

Оригинал Чек-лист юзабилити сайта. Часть II: дизайн

Чек-лист, что проверить в коммуникации на сайте

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

Теперь рассмотрим пункты подробнее.

Онлайн-чаты

Онлайн-чат (чат поддержки) — это окошко для связи со специалистами в режиме реального времени. В чатах решаются срочные проблемы пользователей.

Что учесть, чтобы онлайн-чат был эффективен:

• В чате отвечают быстро (в течение одной минуты). Оперативность — главное свойство чатов. Если пользователи не получают быстрых ответов на вопросы, в этом канале связи нет смысла. 
• Чат недоступен, когда операторов нет в сети. Если у вас нет круглосуточной поддержки, настройте чат так, чтобы он отображался только в рабочие часы. Если чат нельзя отключить на время, предлагайте клиенту оставить контакты, и связывайтесь с ним позже. 
• Чат не открывается сразу вместе с сайтом. Пользователю нужно время, чтобы познакомиться с контентом. Открывайте чат на 3–4 экране или отложите появление на 20–30 секунд. Другой более радикальный выход — вообще отключить активные уведомления и оставить только кнопку. Протестируйте, какой вариант больше подходит вам.  
  

  

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

  

Форма обратной связи

В форме обратной связи люди оставляют развёрнутые отклики. Чтобы отправить сообщение, пользователь просто вводит свой email и отзыв в форму на сайте. Ему не нужно открывать почту в соседней вкладке. Это экономит время и удерживает на сайте.

Разберём, какими бывают формы:

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

   

2. Сообщить о проблеме. Клиенты описывают возникшие у них проблемы:
   

   

3. Вопрос руководителю. Для обращения к директору (любому начальнику):
   

   

4. Обратный звонок. Пользователь оставляет номер телефона, на который перезвонит консультант:
   

   

   Что учесть, чтобы форма была эффективна:

   • Форму должно быть легко найти. Обычно её размещают на странице «Контакты» или отдельным полем в подвале сайта.
   • Не больше 2–3 обязательных полей. Никто не любит сообщать о себе лишнее. Узнавайте только необходимую информацию: email для связи, само сообщение. Даже имя не должно быть обязательным полем. 
   • В форме можно писать длинные сообщения. Не устанавливайте ограничение в 1000–2000 знаков. Всегда есть риск, что клиент не уложится в лимиты и вы оборвёте его на полуслове. Добавьте в форму полосу прокрутки и автосохранение — это облегчить жизнь «многословным» клиентам. 
   • Клиент должен понимать, что его сообщение отправлено. Можно настроить всплывающее уведомление или ответ по электронной почте. Поблагодарите за обращение и объявите приблизительное время обработки его заявки. 
   • Если планируете собирать персональные данные пользователей, обязательно публикуйте политику конфиденциальности и добавляйте чек-бокс «Я ознакомлен с политикой конфиденциальности». К персональным данным относятся ФИО, email, паспортные данные, адрес, телефон и т. п. 

Формы подписки, поп-апы, пуш-уведомления

Формы подписки, поп-апы и пуш-уведомления — это инструменты, с помощью которых можно увеличивать базу клиентов (а значит продажи) и повысить лояльность. Их роднит нацеленность на увеличение конверсии.

Разберём эти каналы связи и рассмотрим основные ошибки, которых нужно избегать.

Форма подписки

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

Поп-ап

Поп-ап — всплывающее окно на сайте. Его используют по-разному: чтобы проинформировать о чём-либо, как форму подписки, как cookie-соглашение и так далее. Главное при разработке поп-апа — помнить, что он не должен мешать пользователям.

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

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

Пуш-уведомление

Пуш-уведомления (push) — это всплывающие сообщения, которые приходят в браузере или на мобильный телефон. Используются, чтобы взаимодействовать с теми подписчиками, которые разрешают отправку пуш-уведомлений.

Какие ошибки допускают при настройке этих каналов связи:

• Оповещения всплывают слишком быстро. Здесь работает та же логика, что и с онлайн-чатами. Клиенту нужно время, чтобы понять, подходит ли ему ваше предложение. Если оповещение, чат или форма подписки мешают ему, он покинет сайт. 
• Оповещения появляются несколько раз. Если пользователь закрыл поп-ап, проигнорировал форму подписки и блокировал пуш-уведомление — это значит, что он не заинтересован в предложении. От того что ему чаще придётся проделывать однотипные действия, чтобы отмахнуться от оповещений, — человек не передумает. 
• Пользователь не понимает, на что подписывается. Формулируйте пользу конкретно («Отправляем письма о новых акциях», «Присылаем новые товары раз в месяц» и т. п.). Не обманывайте ожиданий: присылайте то, что обещали и когда обещали (не реже и, тем более, не чаще). 
• Контент не персонализирован. Старайтесь сегментировать базу подписчиков и присылать каждому сегменту наиболее подходящие новости и предложения. Выделить группы пользователей поможет анализ данных, полученных при регистрации, или поведенческого фактора. 
• Не продумано время отправки пуш-уведомлений. Пуш-уведомления рассчитаны на то, что получатель отреагирует на них мгновенно. Если вы не учли часовой пояс пользователя или время, когда контент будет воспринят лучше всего, пуш-уведомление не достигнет предполагаемого эффекта. 

Служебные тексты

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

Пользователям не нужны канцелярско-бюрократический или недоступный юридический язык. Главное, чтобы тексты были полезны, а информация понятна. Уберите штампы и канцеляризмы, чтобы улучшить текст.

«Оплата осуществляется в начале следующего месяца», «во избежание похищения пароля» расходуют время клиента. Можно сказать короче и проще: «оплатите услуги в начале месяца» и «чтобы ваш пароль не украли». Однако следует избегать и другой крайности — панибратства и нарушения личных границ (переход на «ты», жаргоны, неуместные и неоднозначные шутки).

Если у вас нет опыта работы с текстами или редактора сайта, воспользуйтесь сервисом «Главред». Он оценивает слова и предложения в тексте по 10-балльной шкале. Текст содержит «стоп-слова» или конструкции, которые не несут информации и усложняют речь? Он получит меньший балл. Не обязательно бороться за высшую оценку, но учесть рекомендации сервиса стоит.

Контакты и соцсети

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

1. электронную почту компании,
2. телефон, 
3. адреса офисов,
4. карту проезда,
5. часы работы,
6. реквизиты для оплаты

Не забывайте и о социальных сетях. Компаниям, у которых есть страницы в Instagram, Facebook и Вконтакте, стоит указывать их на сайте, чтобы клиенты могли подписаться на них или поделиться понравившимся материалом у себя на странице, в ленте или истории.

Отзывы и комментарии

Отзывы и комментарии не являются непосредственным каналом коммуникации между организацией и клиентом. Но они демонстрируют открытость компании и помогают потенциальным клиентам принять решение на основании опыта других людей.

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

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

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

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

В следующей, заключительной, части цикла мы разберём, что точно должно быть в интернет-магазине.

• Чек-лист юзабилити сайта. Часть I: основные параметры
• Чек-лист юзабилити сайта. Часть II: дизайн
• Чек-лист юзабилити сайта. Часть IV: обязательные элементы интернет-магазина

Оригинал Чек-лист юзабилити сайта. Часть III: коммуникация с клиентами

Чек-лист, что должно быть в интернет-магазине

1. Общие параметры. На сайт установлен SSL-сертификат, все страницы сайта содержат однотипную шапку и подвал, а также проработаны каналы коммуникации с клиентами. 
2. Главная. Главная страница привлекает внимание и побуждает к покупке. Важно, чтобы сразу было понятно, что вы продаёте.
3. Каталог товаров. Пользователь может изменить количество товаров на странице. Настроены гибкие фильтры, а также добавлены привлекающие внимание категории. 
4. Страница товара. Указана необходимая информация о товаре, обязательно — стоимость и наличие. 
5. Корзина. Значок корзины расположен в привычном месте, на странице нет лишней информации, проработано взаимодействие с товарами.
6. Страница оформления заказа. Можно оформить заказ без авторизации. Страница простая, наглядная и предусматривает выбор способа оплаты и доставки. 
7. Помощь, условия доставки, оплаты, гарантии. На странице подробно изложены ответы на вопросы о работе магазина, условия доставки, возможные способы оплаты и гарантии для пользователей. 
8. Контакты. Перечислены данные для связи.
9. Личный кабинет. Понятна польза от регистрации на сайте. Соблюдены технические аспекты процедуры.
10. Программа лояльности. Выбрана подходящая система вознаграждений, которая мотивирует пользователей покупать чаще и при этом не работает в убыток. 
11. Новости. На сайте рассказывается об актуальных событиях и изменениях в жизни интернет-магазина. 
12. О компании. Повествование об истории и ценностях компании ведётся не обезличенным тоном и выделяет ваш интернет-магазин. 

Теперь эти же аспекты, но подробнее.

Общие параметры

Рассмотрим общие рекомендации ко всем страницам интернет-магазина.

SSL-сертификат

SSL-сертификат — криптографический протокол безопасности. После установки на сайт доступно безопасное соединение HTTPS. Этот префикс отображается в строке браузера и свидетельствует о том, что данные, которые вводит пользователь, защищены от третьих лиц.

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

Подробнее об установке SSL мы писали в статье.

Шапка и подвал

Шапка — это верхняя область сайта, в которой отображаются основные разделы. А подвал — нижняя, содержащая дополнительную информацию (договор оферты, лицензии и свидетельства, иконки соцсетей и так далее). Эти области должны быть идентичными для всех страниц сайта.

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

Если магазин работает в нескольких городах, в шапке размещают метку с выбором региона (города):

В подвале интернет-магазина помещается юридическая информация, необходимая для работы интернет-магазина.

Коммуникация с клиентами

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

Мы посвятили вопросу о коммуникации с клиентами отдельную статью.

От общих параметров перейдём к тому, какие страницы должны быть в интернет-магазине и какими их стоит делать.

Главная

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

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

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

На главной странице рекомендуется выставлять и товары со скидками. Демонстрация выгоды привлекает покупателей.

Каталог товаров

Каталоги содержат перечень товаров с кратким описанием (название, фотография, цена) и кнопкой для покупки. Если товаров немного, каталог делают одностраничным.

Главное в таких каталогах — удобная навигация. Добавьте возможность сортировать товары по цене, названиям, статусам (новинка, хит и т. п.) и выбирать их количество на странице (оптимально 15–20 штук):

 

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

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

Фильтры

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

• можно применить 2 и более фильтров одновременно;
• отображается число найденных товаров; 
• результаты быстро загружаются; 
• есть кнопка «Очистить», позволяющая сразу снять все фильтры. 

Страница товара

Страницы товаров должны быть информативными и однотипными. Основные элементы страницы товаров:

• Название товара: уникальное наименование. 
• Описание: краткое перечисление свойств и параметров товара, его артикул, оформляется списком.
• Фотография: одна или несколько фотографий товара с разных ракурсов, возможность увеличить изображение и рассмотреть детали. 
• Цена: должна выделяться на странице. Если на товар действует скидка, зафиксируйте новую цену рядом со старой. 
• CTA-кнопка: call to action — призыв к действию, кнопка должна выделяться, а надпись быть точной («Положить в корзину», «Купить», «Добавить в корзину» и т. п.). 

Корзина

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

Размещайте иконку «Корзины» в правом верхнем углу сайта. Пользователи привыкли видеть её там, и отсутствие значка в привычном месте не оправдает их ожиданий.

• На иконке отображается количество товаров, положенных в корзину. 
• Товары в корзине кликабельны, то есть на их страницы можно перейти. 
• Присутствует статус «есть/нет в наличии» и количество товаров. 
• Товар можно удалить или, наоборот, увеличить количество предметов. 
• Чётко видна конечная стоимость покупки. 
• Отражена информация о скидках, доставке, возврате и гарантиях.
• Добавлен блок промокода, если система промокодов используется.
• Контрастная кнопка перехода к оформлению заказа. 
• Авторизованные пользователи могут добавить понравившиеся товары в раздел «Избранное».

Вы можете использовать механику «похожие предложения» и настроить подбор смежных товаров, которые отображаются на странице заказа. Также её можно использовать, если товара, который выбрал пользователь, нет в наличии. Так вы предложите ему релевантную замену. Основной принцип — выбирать действительно соотносимые товары, а не рандомные:

Оформление заказа

Оформление заказа стоит продумать до мелочей и сделать максимально простым и удобным для пользователей. Ведь именно этот этап напрямую связан с получением прибыли.

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

Добавьте возможность быстрой регистрации или оплаты в один клик, чтобы упростить оформление заказа.

Упрощённая форма регистрации должна содержать минимум полей (ФИО, телефон для связи, адрес доставки и email).

Другие обязательные элементы оформления заказа: выбор способа оплаты и доставки. Оба эти компонента должны содержать варианты, из которых покупатель сможет выбрать удобный для себя. Также стоит позаботиться о безопасности, прозрачности и открытости. Покупатель должен видеть, сколько стоит доставка, когда заказ придёт, и получать чек о транзакции.

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

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

Оплата онлайн должна быть конфиденциальной и безопасной. Удостоверьтесь, что транзакции защищены от злоумышленников.

Если оформление заказа происходит в несколько этапов, покупатель видит, на каком именно он находится и сколько их осталось до совершения покупки:

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

Помощь, доставка, оплата и гарантии

Исчерпывающее описание способов оплаты, доставки, гарантий потребителей стоит собрать в особый справочный раздел. Отдельно можно зафиксировать справочную информацию о работе интернет-магазина (помощь по работе с сайтом).

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

• Опишите все предоставляемые способы доставки с указанием стоимости, сроков, тарифов и дополнительных сервисов. После прочтения этого мануала у покупателя не должно оставаться вопросов «Могут ли доставить покупку без моего участия/в субботу/рано утром» и т. п. 
• Опишите все варианты способов оплаты и всего, что касается биллинга вашего интернет-магазина (подарочные сертификаты, программа лояльности, бонусные баллы и т. п.).
   

  

• Разместите информацию о гарантиях на товар (возможности обмена или возврата). Предупреждён — значит вооружён. Вы сможете ссылаться на эти разделы в спорных ситуациях.
• Также этот раздел может включать договор оферты, соглашение об обработке персональных данных, прочую информацию юридического плана.

Контакты

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

На этой странице рекомендуется размещать следующие данные:

1. телефон (лучше, чтобы номер был закреплён в шапке или подвале сайта);
2. физический адрес (если у интернет-магазина несколько представительств в разных городах, указывать их все, добавлять виджет карты);
3. email для связи (на корпоративную почту могут поступать предложения о сотрудничестве или обратная связь); 
4. форма обратной связи (чтобы пользователи могли написать вам с сайта); 
5. ИНН, ОГРН, банковские реквизиты (и другие регистрационные данные продавца).

Личный кабинет

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

Но новых пользователей, у которых нет опыта работы с вами, нужно убеждать в том, что регистрация на сайте выгодна. Расскажите о пользе от того, что клиент потратит время на регистрацию, или предложите ему бонусы к заказам. Другие рекомендации к Личному кабинету:

• Регистрация ЛК простая и не занимает много времени. 
• Предусмотрена возможность быстрой регистрации через соцсети или Google-аккаунт.
• Нет лишних полей и сущностей (например, вместо логина стоит использовать почту пользователя). 
• Есть чек-бокс «Подписаться на рассылку». У пользователя должна быть возможность не ставить галочку и, соответственно, не получать письма. 
• Используется форма Double Opt-In (подтверждение регистрации при переходе по ссылке из письма). 

Программа лояльности

Программа лояльности — это система поощрений, которая стимулирует покупать больше и оставаться с компанией дольше. Чем больше покупательская активность клиента, тем больше вознаграждений (бонусов и привилегий) он получает. У компании при этом растёт оборот и прибыль.

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

• Работа в убыток. Так получается, когда на бонусы клиентам тратится больше средств, чем составляет конечная прибыль от их покупок. Проанализируйте средний чек и рассчитайте соотношение прибыли к убытку. 
• Неподходящая модель. Выбор системы должен основываться на количестве лояльных клиентов, среднем чеке и частоте покупок. Это очень индивидуальная история, в которой не бывает общих решений. Советуем не копировать чью-то программу, а прежде проанализировать свою целевую аудиторию и погрузиться в расчёты. 
• Недостаточная мотивация. Помните, что конечная цель программы лояльности — мотивировать клиентов покупать больше. Мало предложить большие бонусы, нужно, чтобы предложение было релевантно и имело ценность для ваших клиентов. 

Новости

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

О компании

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

Распространённые ошибки в рассказе о компании:

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

Заключение
В завершении цикла напомним о прошлых статьях:

Часть I. Основные параметры юзабилити.

Часть II. Юзабилити дизайна.

Часть III. Коммуникация с клиентами на сайте.

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

Оригинал Чек-лист юзабилити сайта. Часть IV: обязательные элементы интернет-магазина