Как сделать страничку faq
Как сделать эффективный раздел FAQ на сайте
Что такое FAQ
Раздел FAQ — он же «Frequently Asked Questions», или «Часто Задаваемые Вопросы», или на манер середины нулевых — ЧаВо. Он существует в сети очень давно и представляет собой специальный справочный раздел сайта, веб-портала, социальной сети или приложения. Данный раздел также может называться «Справка», «Центр поддержки» или иначе.
Зачем нужен раздел FAQ
Его цель — заблаговременные ответы на возможные вопросы посетителей. FAQ применим на любых ресурсах — от интернет-магазина до сайта онлайн-игры. Перед приобретением товаров или услуг или принятием решения об участии в какой-либо активности клиент или просто посетитель может озадачиться вопросами. Например, всех интересуют условия оплаты и доставки, если речь идёт об онлайн-покупках. Новички сообщества могут ознакомиться с правилами поведения в данном разделе.
Другая альтернатива — обратный звонок, с помощью которого посетитель заказывает звонок от специалиста. Так он может проконсультироваться по всем интересующим вопросам с реальным представителем компании.
Предметом вопроса далеко не всегда может быть дефект или проблема. Иногда требуют прояснения простые вещи, которые очевидны для создателей и постоянных пользователей продукта или информационного ресурса, но далеко не очевидны для новичков. Это может быть вызвано нехваткой их времени, сложностью продукта или не самым лучшим юзабилити ресурса.
FAQ облегчает жизнь администраторам ресурсов, избавляя их от необходимости многократно отвечать на типичные вопросы. Практика показывает, что люди нечасто стараются решить проблему самостоятельно. Многие обращаются за помощью, не пытаясь разобраться. Для таких особенно важно указать наличие блока с ответами.
Как сделать хороший FAQ
Расположение на видном месте
Сделайте так, чтобы часто задаваемые вопросы было легко найти. Когда вы создаёте новую проблему пользователю, пытающемуся решить уже существующую, вместо того чтобы помочь, ему это не нравится.
Структура
Разбив вопросы по категориям, вы существенно упростите UX. Кстати, необязательно ждать, пока вопросы возникнут — раздел FAQ лучше начать составлять, опираясь на отзывы коллег, сотрудников или клиентов.
Хороший пример — у iTunes.
Оптимизация под устройство
Пользователи должны иметь возможность получить адекватную и удобную поддержку в разных форматах и на разных платформах, а не страдать от проблем с вёрсткой или низкой скорости сайта.
Удобство для чтения
О вёрстке и оптимизации было сказано только что. Здесь же вопрос в типографике. Пользователю должно быть элементарно удобно читать. Шрифт, размер, контраст — всё должно быть максимально естественным. Если затронутая проблема не решается парой коротких абзацев, развёрнутая инструкция должна быть комфортной для использования.
Есть поиск
Поисковая строка в данном случае имеет почти такое же значение, как на главной Google. Сделайте её доступной, закрепите её в хедер.
Перелинковка
Перелинковка — это сквозные ссылки между материалами. Вопросы пользователей, скорее всего, будут связаны между собой, и гиперссылки в тексте на ключевые слова, темы или вероятные косвенные запросы помогут им ориентироваться.
Выпадающие списки
Ещё один хороший инструмент, позволяющий давать короткие ответы там, где это возможно. Он экономит место, позволяя охватить наибольшее количество тем.
Инстаграм не только удачно группирует сбоку основные запросы, но и даёт в выпадающих списках сразу несколько подтем. Получается практически исчерпывающее руководство на одном экране и фактически в рамках одной веб-страницы.
Apple предлагает быстрые ссылки при клике на поисковую строку.
Видео-инструкции
Не везде они нужны, но если ваше программное обеспечение, сервис или продукт, обладает высоким порогом входа для использования, раздел с видео будет очень полезен. Пользователи оценят возможность обучения или решения распространённой проблемы через видео, кроме того такой контент усваивается существенно лучше.
Пример: Photoshop. Действительно сложное ПО с огромными возможностями и подробными инструкциями.
Актуальность
Помогите пользователям быть в курсе событий. Особенно если ваш продукт технически сложный, быстро развивается или находится в стадии разработки и внедрения новых функций. Новым возможностям часто сопутствуют новые вопросы, хотя вы даже не представляли, что они могут возникнуть. FAQ должен их закрывать как можно раньше.
Виджет обратного звонка для сайта
Обратная связь
Даже составив самый подробный и дружелюбный FAQ, оставьте возможность просто обратиться за помощью. Это может быть почта или стандартная форма обратной связи. Хорошо себя работают виджеты чата, если они не слишком навязчивы, особенно на десктопах. Разместите его в свёрнутом виде в правом нижнем углу страницы. Если боитесь снижения конверсии — поставьте на таймер.
Адекватная поддержка для читателей, потребителей или пользователей составляет ценность продукта. FAQ отлично оптимизируют коммуникацию, решает многие распространённые проблемы. Он даёт ценную обратную связь и помогает решить проблему на корню. Кроме того, подобная предусмотрительность повышает лояльность в глазах пользователей — они действительно видят, что об их возможных затруднениях побеспокоились.
Измеряйте трафик ваших страниц FAQ. Бывает так, что они очень востребованы, и вполне целесообразно размещать там больше рекламы. Установите сквозную аналитику и принимайте нестандартные решения:
Создаем FAQ страницу на WordPress с плагином Quick and Easy FAQs
Как вы уже могли видеть на многих ресурсах, в частности, хостинги, рекламные сети, присутствует некий раздел, именуемый как FAQ. В русскоязычном сегменте более известный под названием ЧАВО «Часто задаваемые Вопросы и Ответы». На такой странице формируют список вопросов, которые могут задаваться снова и снова. И чтобы избежать от написания повторяющих ответов, и представить пользователя сразу интересующею его информацию о деталях использования продукта, создается отделение «ФАК».
В сегодняшней статьи мы реализуем свою страницу FAQ на всем известной платформе WordPress с помощью плагина Quick and Easy FAQs. Он довольно простой и легкий в применении, имеется несколько вариантов вывода контента, включая, группировку по категориям, фильтрацию и тумблер открытия. Дизайн больше походит на минималистичный, что делает его подходящим практически для любого оформления сайта. Но, если по какой-то причине цвет текста, тумблера, фона вам не подойдет, то у плагина присутствует визуальная настройка цвета элементов.
Создаем страницу FAQ
Устанавливаем плагин Quick and Easy FAQs любым вам удобный способам. В левой панели инструментов, после раздела «Медиафайлы», появится новый пункт FAQs с тремя вкладками.
Самая первая вкладка All FAQs показывает весь список вопросов, которые вы могли создать, в ней же можно редактировать уже опубликованные вопросы. Вторая отвечает за добавление и публикацию вопросов в стиле обычного поста. В третьей создаем категории вопросов, они же будут фильтрами для быстрого поиска ответа.
Для начала организуем категории вопросов – переходим в третью вкладку FAQ Group. После чего открываем вторую вкладку Add New и добавляем вопросы (Название – это вопрос. Описание – это ответ.)
Когда закончите с написанием вопросов, перейдем к их выводам на отдельной странице. Первым делом переходим во вкладку «Страницы-Добавить новую», прописываем название, к примеру, ЧаВО и выводим контент через подходящий шорткод в зависимости о технической документации плагина. Более приемлемые варианты:
[faqs style=»toggle» grouped=»yes»] – выводит весь список вопросов по категориям в стиле тумблера.
[faqs style=»filterable-toggle»] — выводит весь список вопросов с фильтром в стиле тумблера.
Результат.
Чтобы изменить цвета элементов, как говорилось выше, нужно в админ-панели открыть вкладку «Плагины-Quick and Easy FAQs». Здесь как раз находятся настройки цвета.
Стильная страница FAQ с использованием только CSS3
Обычно страница FAQ представляет собой длинный текст с большим количеством вопросов и ответов на них. Данную страницу ищут тогда, когда нужна дополнительная информация по работе сайта. В данном уроке мы сделаем стильную страницу FAQ с помощью только CSS3, без использования JavaScript.
Help Center Facebook использует отличный эффект для предварительного показа ответа на вопрос. Там выводится отрывок маленьким шрифтом и с затемнением. А когда посетитель нажимает на вопрос, текст ответа увеличивается и выводится полностью.
В нашем уроке мы создадим подобный эффект, используя только CSS3.
Начнем с разметки структуры документа:
Принцип действия
Ниже приводится код с комментариями:
Поддержка браузерами
Как насчет вывода нашей страницы в старых браузерах? Отличный вопрос. И ответом является приемлемая деградация внешнего вида:
С помощью следующего кода мы заботимся о браузерах IE8 и старше, чтобы сохранить содержание нашей страницы для посетителей, использующих старые инструменты.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/fancy-faq-page-using-css3-only
Перевел: Сергей Фастунов
Урок создан: 24 Февраля 2012
Просмотров: 32612
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Что такое FAQ-страница, и как ее организовать
К сожалению в 2018 году многие до сих пор не знают, для чего нужна FAQ-страница.
Но ответить на этот вопрос не так уж и сложно, достаточно просто расшифровать устоявшуюся аббревиатуру.
FAQ обозначает страницу с часто задаваемыми вопросами, от английского “Frequently Asked Questions”.
Это значит, что в данном разделе сайт публикует ответы на самые частые вопросы, которые задает его аудитория.
Но это только одна из нескольких задач, которые выполняет данная страница.
Правильно выполненный FAQ-раздел также эффективно выполняет следующие функции:
Если вы не уверены, что ваша FAQ-страница реализует весь свой потенциал, советуем вам обратить внимание на следующие вопросы, которые вы в идеале должны себе задавать в процессе работы над этим разделом.
Что такое FAQ-страница?
Страница часто задаваемых вопросов (FAQ) — это раздел сайта, на котором размещена информация, содержащая ответы на самые частые вопросы и решающая распространенные проблемы, с которыми могут столкнуться ваши клиенты или посетители.
Это страница отличается от страницы “О компании”, на которой вы делитесь общей информацией и историей создания вашего бренда. FAQ-раздел более специфичен. Это такое место назначения для людей, которые хотят быстро найти ответ на интересующий их вопрос.
Также этот раздел может работать как первый этап решения какой то проблемы — пользователи сначала самостоятельно пытаются найти в нем нужную информацию. Им это удалось? Да? Отлично! Нет? Следующий этап – служба поддержки.
«Самообслуживание через FAQ-раздел позволяет уменьшить колличество писем в службу поддержки.»
Правильно организованный FAQ-раздел решает большую часть проблем и помогает покупателям во многих вопросах, будь это желание понять, как выполнен ваш товар, или же банальные проблемы с заказом на этапе покупки.
В каких случаях необходима FAQ-страница?
Данный раздел может быть приятным и полезным или, наоборот, отталкивающим и безобразным: все зависит от того, как вы его организуете.
Но чтобы убедиться, что он вообще вам нужен, сверьтесь со следующими пунктами:
Где найти “часто задаваемые вопросы”?
В первую очередь поищите у себя в электронном ящике и в сообщениях службы поддержки.
Также следует заранее выявлять специфические особенности вашего продукта/бизнеса/сервиса, которые в дальнейшем могут вызвать вопросы.
Подумайте, какие вопросы вы можете поднять, чтобы ответы на них дали посетителю понимание того, что вы продаете, и создали спрос на ваш товар.
При выборе вопросов для FAQ-раздела руководствуйтесь их релевантностью, полезностью и возможностями, которые они предоставляют с точки зрения дальнейшего подогревания посетителя и его конвертации в покупателя.
Если лист вопросов кажется вам большим, придумайте и разделите все вопросы по категориям, например, “Доставка”, “О продукте” и тому подобное.
Как лучше всего отвечать на вопросы в FAQ-разделе?
Вообще, залог хорошей FAQ-страницы — это правильные ответы на поставленные вопросы.
Запомните, даже если вопрос о явных недостатках вашего товара или сервиса, всегда старайтесь отвечать в позитивном ключе.
И не пытайтесь поразить всех своими писательскими навыками: посетителям нужно давать только ту информацию, которая их интересует.
Задавайте вопросы от лица ваших покупателей (“Как мне узнать…?”) и давайте ответы от лица компании (“Мы предоставляем…”).
Работайте над коммуникативной составляющей ваших ответов и всегда следите, чтобы они давали точную информацию по заданному вопросу.
Можно использовать изображения в том случае, если они лучше слов ответят на поставленный вопрос.
Создать свой доходный онлайн-бизнес — мечта многих. Но 95% предпринимателей никогда не дойдут до своей цели, потому что попадут в «ловушку» и не смогут оттуда выбраться…
Чтобы этого не случилось, приходите на бесплатный онлайн-мастер класс «Система стабильных интернет-продаж знаний и услуг, которая принесла уже более 0,5 млрд. выручки» и узнайте как получать максимум клиентов и продаж, не сливая бюджет на рекламу.
Кстати, никто не запрещает вам включить чувство юмора и сделать пару–тройку забавных ответов, конечно, если это не противоречит имиджу вашей компании.
Многие часто упускают отличную возможность вставить в конец некоторых ответов призыв к действию, который перенаправит посетителей на другие страницы (например, на лендинг) и таким образом заставит их двигаться дальше по воронке продаж.
Подумайте, куда дальше отправится человек, нашедший ответ на интересующий его вопрос, и вставьте в конце конкретного ответа ссылку на релевантную страницу.
Как FAQ-страница может помочь поисковой оптимизации сайта?
Многие сайты организуют FAQ-раздел в формате одной страницы, на которой даны ответы на распространенные вопросы. Но в то время как основной функцией такого раздела является устранение трений на пути к покупке, вы можете пойти дальше и создать перелинковку FAQ-раздела с другими страницами для того, чтобы лучше оптимизировать ваш сайт под поисковые системы.
Перенаправляя каждый вопрос на отдельную страницу, вы помогаете поисковым роботам Google и Яндекс быстрее проиндексировать их и вывести в результаты поисковых запросов.
Допустим, пользователи могут не искать информации именно по вашему бренду, но они, например, могут искать через Google ответ на вопрос по вашей нише. И если вам удастся грамотно оптимизировать ваши страницы под поисковые системы, он попадет в топ, и люди будут переходить на него, хотя изначально они не были заинтересованы именно в вас.
HubSpot демонстрирует, как можно организовать FAQ-раздел с линками на разные лендинги под каждый вопрос. При такой структуризации раздела некоторые страницы могут быть выведены сервисами Google и Яндекс первую тройку поисковой выдачи.
Где разместить FAQ-раздел?
Если сердце вашего бизнеса – сервис, лучше создать полноценную службу поддержки и сделать FAQ-раздел частью данной службы.
Но если вы просто продаете продукт или услугу и получаете много вопросов, достаточно будет разместить ссылку на FAQ-страницу в шапке сайта.
Также можно размещать FAQ-информацию непосредственно на странице продукта, как это делает компания Vat19.
Несколько важных мыслей под конец
Если вы хотите выжать все из вашей FAQ-страницы, вам необходимо сделать ее ссылку на нее яркой, заметной и легкодоступной.
Вы могли заметить, что на большинстве сайтов линк на FAQ-раздел расположен в самом низу страницы. Это не совсем правильно. Разумнее сделать данный раздел частью страниц службы поддержки или разместить линк в основном меню, чтобы найти FAQ-страницу было всегда просто.
Также не забывайте обновлять FAQ по мере необходимости, основываясь на тенденциях в вопросах клиентов и нововведениях в возможностях, которые предоставляет ваша компания.
Увы, зачастую работа с FAQ-разделом не стоит в приоритете у веб–разработчиков. У этого, конечно, есть свои причины, но если использовать этот раздел грамотно, он сделает для вас много полезного, начиная с облегчения работы службы поддержки и заканчивая доверием клиентов.
Понравилась статья? Поделитесь ей со своими друзьями, и мы обязательно расскажем о FAQ-разделах еще больше.