Как сделать страницу faq
Website-create.ru
Зачастую на сайте требуется организовать раздел «Часто задаваемые вопросы» (FAQ). Как правило таких вопросов может быть какое-то число (иногда немалое), и, в итоге, страница либо становится очень длинной (ведь нужно еще и вместить ответы), либо ссылается на другие страницы. Оба варианта не очень-то удобны для пользователя. В этом уроке я покажу Вам как сделать удобный FAQ-раздел!
Суть организации FAQ-раздела, создание которого я Вам покажу, будет сводиться к тому, что пользователю не нужно будет переходить на другую страницу, щелкая по ссылке-вопросу. Все будет на одной странице: и вопросы и ответы. Однако, страница из-за этого не станет длинной и неудобной, так как ответы будут спрятаны до тех пор, пока пользователь не кликнет по интересующему его вопросу. В этот момент ему откроется блок с ответом на этот конкретный вопрос, а при повторном щелчке блок снова исчезнет.
Таким образом пользователь сможет видеть сразу все «Часто задаваемые вопросы», с легкостью и удобством выбирать нужный и при чтении ответа оставаться на той же самой странице. Он сможет открывать и закрывать ответы без перезагрузок, без ожидания загрузки контента на новой странице и прочих неудобных вещей. Таким образом Ваш FAQ-раздел будет гораздо эффективней и полезней.
И реализуем мы это при помощи библиотеки jQuery легко и просто. Давайте начнем!
Создаем удобный FAQ-раздел на сайте
1. Начнём мы как обычно с html-файла.
Я создам файл html и назову его «faq.html». Код в этом файле будет достаточно простой.
Между тегами «body» я создам тег «div» с классом «wrapper». Он в свою очередь будет содержать два других тега «div»: один с классом «header» (в нем просто будет располагаться логотип), а другой – с классом «content», в нем будет расположен еще один тег «div» с классом «main», в котором будут содержаться: заголовок; вопросы, также заключенные в теги заголовков; ответы, заключенные в теги «div» с классом «answer» и тег для футера.
В коде я прописала 3 вопроса и 3 ответа. Думаю, для демонстрации этого будет достаточно, но на практике вопросов и ответов, конечно же, может быть гораздо больше.
Также Вы можете увидеть, что в документе уже подключен файл таблицы стилей. Нам нужно его создать и сохранить в тот же каталог, что и html-файл.
Итак, создайте css-файл и дайте ему имя «faq_style.css».
Пока что наш css-файл пуст, поэтому если мы посмотрим html-страницу в браузере, то увидим следующее.
2. Сейчас мы сделаем так, чтобы наша страница имела более симпатичный вид и пропишем некоторые стили в css-файл.
Я создам основные стили, которые зададут фоновый цвет, выровняют страницу по центру, а также зададут стили для заголовков и абзацев.
Вот код, который я пропишу в файл таблицы стилей.
После этих преобразований наша страница будет иметь вот такой вид:
3. Основные приготовления закончены и пришло время заняться делом. Сейчас наши вопросы и ответы расположены друг под другом и если их будет больше, то страница может растянуться на много метров. Но скоро мы это исправим.
Вернитесь в html-файл и после подключения файла таблицы стилей подключите файл библиотеки jQuery.
4. Теперь создадим файл JavaScript, в котором будем писать наш код. Кода будет немного, однако, я предпочитаю создавать для кода JavaScript отдельный файл.
Итак, создаем файл. Я назову его «faq.js», помещу его в ту же папку, что и html-файл и подключу его к html-файлу сразу после подключения файла библиотеки jQuery.
Теперь можно открыть файл «faq.js» и приступить к написанию кода.
5. Код будет достаточно несложным.
В первой строчке мы скажем, что код нужно выполнять, когда html-документ загрузится и будет готов.
Во второй строчке кода мы скрываем все элементы, содержащие ответы на часто задаваемые вопросы (эти элементы имеют класс «answer»).
В третьей строке мы применяем ко всем нашим заголовкам вопросов функцию «toggle», которая работает как переключатель: если мы щелкаем один раз по заголовку – выполняется одно действие, если щелкаем повторно – другое. Эти действия определяются функциями, которые являются принимаемыми параметрами для функции «toggle». Первая функция будет показывать ответы, раскрывая их в течении одной секунды; вторая скрывать ответы также в течении одной секунды.
Теперь можно обновить страницу в браузере и увидеть, как это все работает. Вы увидите, что все ответы скрыты и можно видеть список всех часто задаваемых вопросов. Вам стоит только щелкнуть мышью по заголовку нужного вопроса и ниже появится ответ на него. Щелкните второй раз, и ответ снова исчезнет.
Все это без перехода на другие страницы, без перезагрузок и прочих неудобств. Найти нужный вопрос гораздо проще, потому что ответы скрыты и Вами не нужно долго скролить страницу вниз в поисках нужного вопроса.
Посмотреть пример работы этого примера Вы можете щелкнув по иконке «Демо» в начале урока.
Вот в общем то и все. На этом буду заканчивать данный урок. Надеюсь он был Вам полезен. Этот прием можно применять не только для раздела FAQ на сайте, но и для других задач. Я думаю, Вы найдете ему применение и под другие свои цели.
Жду Ваших комментариев! Делитесь уроком с друзьями при помощи кнопок социальных сетей ниже.
И также подписывайтесь на обновления блога.
Причины «неудавшихся» страниц FAQ
Вот несколько вещей, которые делают FAQ-страницу менее полезной.
Нечасто задаваемые вопросы
Представьте, что вы только запустили новый веб-сайт и включили в него страницу FAQ. Зачем? Если у вас нет посетителей, значит, вы еще не получали вопросов (тем более часто задаваемых вопросов).
Без обратной связи, вопросы на этой странице будут простыми предположениями владельца сайта на тему «что же пользователи хотят узнать?».
«Левые» вопросы
Мы все их видели: это вопросы, которые просто не могли прийти кому-либо в голову. Кроме владельцев сайтов.
Наш комментарий: Вопросы вроде «Почему был обновлен дизайн сайта?» с последующим развернутым ответом о том, что «мы шагаем в ногу со временем, молоды и динамично развиваемся» — никому не интересны. То же касается и привету из 2000-х — опросников. Это те, которые «Как вам наш новый сайт?». Да-да, и ответы будут «ошеломительно», «потрясающе», «хорошо» и «нормально».
Название страницы интуитивно непонятно
Впервые я увидел ссылку «FAQ» лет десять назад. Я задумался, но потом всё-таки узнал значение этой аббревиатуры. Дизайнеры должны учитывать пользователей, которые не разбираются в технических вещах. «Часто задаваемые вопросы» понятнее, чем «FAQ».
Однако описательная и стандартная маркировка важны. Например, Суд Калифорнии использует метку «Q&A» (вопросы и ответы — прим.перев.), но она еще более неоднозначна, чем FAQ. Если у вас нет серьезной причины, используйте стандартную метку «FAQ» или «Часто задаваемые вопросы».
Наш комментарий: А если пользователь — не англоговорящий? У него вызовет одинаковое затруднение как FAQ, так и Q&A (последнее можно перепутать с QA, кстати). Выход? Использовать исконный аналог «ЧаВо» — несолидно на серьезных корпоративных сайтах. Писать полностью «Часто задаваемые вопросы» — неудобно для проектирования дизайна. Более других приятны варианты «частые вопросы», «нас спрашивают» или те же «вопросы и ответы». Но и они не идеальны.
Q&A — это не совсем точный аналог FAQ. Разница как раз в букве F (frequency, «часто»). Раздел Q&A создается, скорее, как оперативный форум, а не для того, чтобы тыкать новичков носом в основы.
Страница FAQ в действительности не нужна
Множество сайтов имеют свою FAQ-страничку, но на самом деле она им просто не нужна. Иногда пользователи находят всё, что им нужно, и вопросов у них не остается. Это значит, что архитектура подаваемой информации была спроектирована хорошо.
Представьте, что на сайте интернет-магазина есть специальное место (допустим, на главной странице), где приведена полная информация по ценам. Но если на странице FAQ снова будет написано про ценообразование — это будет явно лишним. Пользователи ищут эту информацию? Дайте им ссылку на главную.
Важное правило: если одна и та же информация представлена на сайте несколько раз, значит, что-то не так в архитектуре сайта. Всё должно быть на своих местах.
Как спроектировать эффективную страницу FAQ?
Хорошая FAQ-страница облегчает нагрузку на службу технической поддержки и колл-центры, что приводит к экономии средств и повышению удобства пользователя (ему не нужно брать телефон, набирать номер, объяснять). Важность хорошей FAQ неоспорима.
Когда проектируете FAQ-страницу, держите следующие моменты в уме:
Скажите «Нет» страницам FAQ
Начните с этого простого слова. В веб-дизайне следует стремится к простоте и устранять вещи, которые не нужны. Страница FAQ призвана «поддерживать» остальной контент и если она с этой задачей не справляется — уберите ее из приоритетов.
Когда такая страница всё-таки необходима — действия ваших пользователей об этом «скажут». Вы будете получать одни и те же вопросы снова и снова — и тогда можно будет задуматься о создании отдельной страницы с вопросами и ответами.
Наш комментарий: Очень верный шаг. Не усложняйте, страница FAQ по большому счету — это протез. Если ваш сайт и сам справляется с потребностями посетителей, ему протез не нужен.
Соберите правильные вопросы
Вопросы в FAQ должны быть реальными. Если ваш сайт новый — выберите временной промежуток (например, месяц), в течение которого вы будете собирать и группировать вопросы ваших пользователей. Вместе с тем вы можете проанонсировать свой «месяц вопросов» на сайте, чтобы подогреть активность пользователей.
Если по истечении периода в вопросах будет вырисовываться определенная картина — станет ясно, какие категории вопросов должны быть на FAQ-странице. Когда страница уже будет запущена — ее можно обновлять, таким же образом. Этот метод эффективен, так как пользователи сами участвуют в ее создании, даже когда страница FAQ уже запущена.
Предоставление хороших «входных точек»
Чтобы использовать страницу с вопросами и ответами, пользователь должен найти ее. Обеспечьте точку входа: четкая, хорошо расположенная ссылка сделает свое дело. Два самых популярных места для такой ссылки — верхнее основное меню или футер (эти места обычно отличаются от других участков — цветом, насыщенностью, отделены линиями либо «воздухом»). И они выделяются.
Ставьте сразу две ссылки — одну в шапку сайта и в футер. И пользователи точно не заблудятся.
Читаемость
Страницы FAQ — преимущественно текстовые. Таким образом, их читаемость — важный фактор. Читаемость может быть улучшена несколькими путями: увеличением контраста между текстом и фоном, отбивкой абзацев, типографикой.
Наш комментарий: Выделениями курсивом и жирным начертанием, маркированными и нумерованными списками, написанными техническими писателями, смыслящими в вопросе.
А вот так делать не нужно:
Группируйте вопросы
Пользователь, который ищет FAQ, вероятно, запутался в каком-то другом месте на сайте. Не усугубляйте ситуацию.
Категории повышают читаемость — главный «кирпичик» эффективности. Называйте категории интуитивно понятно, чтобы избежать дальнейшей путаницы.
Идея: вкладывайте самые значимые вопросы в разные категории. IMDB так делает, и пользователи сайта не испытывают сложностей с поиском ответов.
У Mint тоже хорошо структурированная страница FAQ. Категории названы интуитивно понятно. В довесок к этому они создали список самых просматриваемых FAQ:
Поиск
Для повышения удобства, обширным FAQ подходит поиск. Когда на странице есть сложная структура с категориями — он становится более, чем актуальным инструментом.
Алгоритм поиска должен отличаться от такового на основном сайте, так как его назначение здесь — максимально сузить область поиска. IMDB добавляет заголовок, говорящий о том, что поиск будет производиться исключительно на странице FAQ:
Предоставьте картинки к ответам
Часто одна картинка стоит тысячи слов. Если картинки могут помочь пользователю решить его вопрос — не стесняйтесь их использовать.
Советы по структуризации страницы FAQ
Если у вас есть всего несколько вопросов и ответов, соберите их вместе вместо того, чтобы разносить по отдельным страницам.
Конечно, длина страницы должна быть также учтена. Бесконечный скроллинг надоест пользователю прежде, чем он успеет найти ответ на свой вопрос. Старайтесь сделать страницу настолько компактной, насколько это возможно. Убедитесь, что каждый вопрос и ответ является ценным.
При некоторых обстоятельствах длинные страницы становятся неизбежными. Ссылка на автоскроллинг вверх — хороший тон.
Ради удобства чтения отличать вопросы от ответов по цвету, размеру или шрифту.
Наш комментарий: Лично мы взяли на вооружение интерактивный FAQ с кликовым разворачиванием / сворачиванием ответов. Для небольших страниц — это оптимальный вариант.
Заключение
Проектирование страниц FAQ может быть сложной работой. Помните о том что «FAQ» — это общее название для типа страниц, которые отвечают на реальные вопросы и помогают пользователям. Посетителей страницы с «вопросами и ответами» привели туда настоящие проблемы, так постарайтесь сделать так, чтобы после их визита на страницу FAQ эти проблемы были решены.
Раздел FAQ на сайте: все, что нужно знать (перевод)
Одно из главных правил маркетинга – отвечайте на все вопросы до того, как они поступают. Иначе можно потерять клиентов. Это правило применимо также и к SEO. Если клиент не может быстро найти ответ на свой вопрос на вашем сайте или в Google, он скорее всего обратится к сопернику.
Как с этим справиться? Создать лёгкий для понимания продуманный FAQ. Этот раздел сайта предоставит клиентам ответы на вопросы, которые у них могут возникнуть.
6 причин, по которым сайту нужен раздел FAQ:
Ну что убеждены? Тогда давайте перейдем к как и почему.
Как найти вопросы, на которые нужно отвечать
Мы написали очень подробную статью об исследовании вопросов для Moz. В ней перечислены разные виды инструментов, включая SEO – управляемые (основанные на том, какие вопросы люди вводят в поле поиска Google) и пользователи-также-ищут (вопросы, отображаемые в разделе Google People Also Ask), которые собирают вопросы с онлайн-форумов, а также инструменты, отслеживающие вопросы в Twitter и Reddit.
Кроме того, команда поддержки – главный ресурс при поиске вопросов. Нужно разузнать, что конкретно спрашивают клиенты, когда связываются с вашей компанией. Также используйте другие источники информации, чтобы создать своего рода информационную базу, которую можно по ходу менять и улучшать.
Ответы должны следовать принципу ПУФ (быть Понятными, Убедительными и Фактическими)
(Да, мы только что придумали эту аббревиатуру. Но она работает)
Золотое правило – писать короткие ответы на все вопросы. Двух-трех предложений будет вполне достаточно. Если ответы слишком длинные, то клиенты вряд ли захотят читать стену текста.
Если информации слишком много, добавьте видео или прикрепите подробную инструкцию по ссылке.
Снять видео с ответами на некоторые вопросы – почти всегда хорошая идея. Видео – отличный инструмент продвижения (они могут попасться кому-то в рекомендациях YouTube или Google), и существует множество способов их снимать без особых затрат. Некоторые из них вы найдете здесь.
Ещё одна полезная программа для создания видео называется Renderforest. Она предлагает несколько удобных шаблонов, которые идеально подходят для ответов на вопросы.
Другие способы сделать ответы на вопросы короче:
В целом, используйте много визуала по возможности. Это поможет пользователю лучше усвоить и запомнить материал.
Воспользуйтесь FAQ-schema
Google любит показывать точные ответы на вопросы, поэтому создание FAQ – хорошая идея. Более того, Гугл любит ответы так сильно, что они создали специальную схему: FAQ Page schema.
С ней вам будет легче сделать FAQ и появиться на первой странице гугла.
Совет: гиперссылки также увеличат ваш шанс оказаться на первых страницах поисковиков.
Внутренние ссылки: Используйте ваш FAQ в качестве карты сайта
Каким будет следующий шаг пользователя при поиске конкретных ответов?
Если вопрос касается цены доставки, скорее всего клиент уже близок к покупке и хочет узнать конечную цену. Похвастайтесь тем, какие у вас классные партнеры по доставке и добавьте ссылку на товар, а также опцию «добавить в корзину», чтобы легче оплатить покупку.
Если пользователь спрашивает о времени доставки, он, скорее всего, будет вашим текущим клиентом, поэтому ссылка на страницу информации о доставке будет более полезной.
Мониторинг страницы FAQ и анализ того, как клиент ею пользуется поможет разобраться с ее оформлением и тонкостями вопросов.
Если вам нужно вдохновение для создания правильных ссылок в FAQ, обратите внимание на Shopify, который делает потрясающую работу по сопоставлению различных пользовательских намерений с помощью внутренних ссылок:
Структура – наше все
Некоторые пользователи сети, которые активно ищут ответы на свои вопросы, а есть те, кто просто просматривает сайт и изучает бренд.
Ваша страница часто задаваемых вопросов должна быть полезна и тем, и другим.
У PayPal отлично получается это совмещать:
Чтобы определить наилучшую структуру страницы FAQ, попробуйте Text Optimizer, который использует семантический анализ для поиска вопросов по теме. С ним легче будет определить некоторые ключевые слова и распространенные вопросы:
Если вы уже разобрались со структурой вашей странички FAQ, добавьте анкорные ссылки, чтобы пользователь мог быстро перейти к разделам сайта, которые его интересуют. Чтобы организовать такую навигацию на сайте, обратитесь к Adobe FAQ page:
Что сделать, чтобы страница часто задаваемых вопросов была действительно полезной: интегрировать, анализировать и контролировать
В правильной странице FAQ должны быть учтены потребности и намерения пользователя, чтобы в дальнейшем она помогла на разных этапах воронки продаж. Именно поэтому мониторинг страницы – очень важная задача.
Как именно контролировать контент? Есть несколько способов.
1. Анализ in-FAQ поисковых запросов
Если ваш сайт работает на WordPress, существует множество плагинов FAQ, которые имеют расширенную функциональность поиска. С помощью программы можно узнать о:
2. Отслеживайте пути пользователей на вашу страницу FAQ
Какие страницы (или каналы вне сайта) обычно приводят людей на страницу часто задаваемых вопросов? Какие разделы сайта они затем посещают? Это важный аспект для понимания роли FAQ в воронке продаж.
Для отслеживания эффективности любой страницы при отправке конверсии можно использовать Finteza. Программа позволяет одновременно мониторить и сравнивать неограниченное количество воронок продаж и различных путей прохождения пользователей через ваш сайт:
3. Мониторинг раздела «Люди тоже спрашивают»
Вы скорее всего уже отслеживаете трафик страницы. Начните также следить за разделом «люди также спрашивают».
Этот раздел Google может не только стать источником новых вопросов, но и показателем того, насколько эффективен ваш FAQ. SE Ranking является одним из немногих инструментов, который может с этим помочь. Он отслеживает большинство элементов поисковых запросов в Google и сообщает о вашем прогрессе.
Если все сделано правильно, вы, скорее всего, увидите, что ваши позиции PPA растут.
4. Мониторинг отзывов клиентов
Наконец, сбор отзывов пользователей о каждом ответе в FAQ поможет вам сделать его более полезным и исправить существующие недочеты. Опять же, большинство готовых решений FAQ поставляются с этой опцией, но есть и отдельные плагины для нее (как этот).
FAQ о FAQ
Давайте рассмотрим несколько распространенных вопросов, которые возникают у людей при создании страницы FAQ.
Раздел FAQ – точно хорошая идея?
Да, определенно, но только если Вы относитесь к нему серьезно.
Можно использовать «складные» ответы, чтобы сэкономить место?
Почему нет? Многие бренды так делают. Но многие SEO считают, что контент, скрытый за вкладками или кликами, имеет меньшую ценность, чем контент в открытом доступе.
Можно ли повторно использовать ответы с чужих сайтов или страниц? Является ли такой контент плагиатом?
Обязательно, чтобы была одна страница, или лучше создать многостраничную базу знаний?
В зависимости от того, сколько вы хотите сказать, в любом случае это не будет лишним.
Выводы
Раздел FAQ влияет на ранжирование – ссылка на раздел может попасть в сниппет, и он станет заметнее. Раздел FAQ влияет на путь пользователя – может склонить его к покупке именно у вас.
Вот основные советы, которые помогут оформить раздел на сайте правильно: