Как сделать красивый faq
11 советов по созданию идеального раздела FAQ на вашем сайте
В ходе недавнего опроса, проведенного компанией Zendesk, 67% респондентов сообщили, что скорее справятся с проблемой собственными силами, чем будут обсуждать ее с представителем компании. При этом 91% участников утверждают, что для удовлетворения своих потребностей в плане обслуживания они предпочитают использовать раздел часто задаваемых вопросов, или FAQ.
FAQ позволяет клиентам найти ответы на вопросы самостоятельно, без необходимости в создании тикета и ожидания отклика со стороны службы поддержки. Благодаря тому, что ваши пользователи получают мгновенное решение проблем, количество обращений в клиентский сервис и нагрузка на сотрудников отдела заметно снижаются.
Хорошо продуманные FAQ действительно могут облегчить жизнь вам и вашим посетителям, но как добиться этого? Читайте далее.
1. Сделайте его доступным
Ваш раздел FAQ может содержать лучшие пояснительные статьи, видео-уроки и пользовательские руководства, но если читатели не могут получить к нему доступ, во всем этом попросту нет смысла. Убедитесь, что к часто задаваемым вопросам можно перейти с ключевых страниц вашего сайта, мобильных устройств, браузеров и т. д.
Вот краткий чек-лист:
1. Контент вашего ресурса должен ссылаться на FAQ. Вы можете разместить ссылку в выпадающем меню в хедере сайта или пойти еще дальше и задействовать на своей домашней странице поисковую строку, которая будет направлять пользователей прямо в нужный раздел, как это сделали мы:
2. Справочные статьи в виде всплывающих подсказок. Один из лучших способов ввести клиентов в курс дела — это провести экскурсию по вашему продукту. Создайте всплывающие подсказки, которые ссылаются на FAQ и объясняют возможности продукта по мере того, как пользователь его изучает.
3. Правильное отображение на всех мобильных устройствах, планшетах, браузерах и операционных системах. Это само собой разумеется, особенно если ваши покупатели пользуются различными платформами и девайсами. Важность мобильной адаптации раздела FAQ невозможно переоценить.
2. Сделайте его легким для чтения
Никому не нравится читать «простыню» из слов. Тем более вашим клиентам, когда они хотят найти информацию, которая бы помогла им справиться со срочной задачей, например, разобраться в конкретной функции или уточнить детали биллинга. FAQ должен предоставлять ответы быстро и таким образом, чтобы их хотелось прочесть.
Ниже приведены некоторые общие правила для улучшения читабельности:
1. Пишите короткими абзацами. Вы можете составлять абзацы всего лишь из двух предложений. Разберите ваши идеи и запишите их фрагментарным образом, чтобы клиентам не приходилось читать «простыню» из слов.
2. Позаботьтесь о заголовках и подзаголовках. Заголовки и подзаголовки позволяют эффективно подытоживать концепции и идеи. На самом деле большинство онлайн-читателей обращают внимание только на заголовки, тогда как оставшийся контент они просто сканируют.
3. Структурируйте информацию при помощи буллитов и списков. Перечисление пунктов (listicle) является наиболее предпочтительным форматом написания FAQ. С их помощью вы можете предоставить информацию шаг за шагом, и тем самым сделать ее более читабельной и понятной.
3. Создайте список популярных статей
Разместите на главной странице раздела часто задаваемых вопросов список избранных или популярных статей. В качестве примера воспользуйтесь FAQ от LinkedIn, который создан, чтобы предоставлять быстрые ответы занятым профессионалам.
Раздел оформлен в стиле Википедии, что существенно упрощает поиск информации. Однако, ключевую роль здесь играет список популярных постов, отмеченный надписью «Рекомендовано вам», которая сразу же заставляет пользователей обратить внимание на предложенные статьи.
4. Убедитесь в том, что всю информацию можно найти
Вероятно, наиболее важной составляющей FAQ является возможность поиска. Чем проще найти информацию в этом разделе, тем лучше. Ниже представлено несколько элементов, которые помогут вам продвинуться в этом плане:
1. Вездесущая поисковая строка. В вашем FAQ обязательно должна быть поисковая строка. Вот пример от Squarespace, которые могут похвастаться одним из самых красивых и хорошо организованных разделов с вопросами. Большое поле поиска работает подобно Google, что позволяет находить ответы незамедлительно.
2. Структурированное оглавление. Оглавление значительно упрощает изучение информации. Для примера взгляните на базу знаний ProProfs Knowledgebase, где читатели могут с легкостью переключаться с одной темы на другую за счет грамотно составленного оглавления.
3. Перелинковка статей. В большинстве своем контент вашего FAQ раздела взаимосвязан, и пользователи довольно часто изучают статьи на приближенные темы. Благодаря внутренним ссылкам вы можете помочь этим людям найти релевантную информацию.
5. Видео часто работают лучше всего
Большинство людей предпочитают смотреть пояснительные видео и не очень любят читать статьи, чтобы разобраться в чем-либо. При наличии видеоуроков вы сможете без затруднений обучить клиентов основным принципам использования вашего продукта. Отличным примером реализации данного подхода является Photoshop — одна из самых популярных программ для редактирования изображений и дизайна, отличающаяся довольно высоким порогом входа.
Photoshop существенно облегчает жизнь начинающим фотографам и дизайнерам, стремящимся побыстрее изучить основы этого программного обеспечения. Они предлагают подробные видеоуроки, благодаря которым любой человек может освоить их графический редактор.
Вам определенно стоит создавать видеоинструкции, даже если ваша программа имеет относительной низкий порог входа.
6. Живой чат — это плюс
Предположим, что вы разработали идеальный раздел FAQ. Ответили не только на все общие вопросы, но и на технические. Вы также предоставили пользователям множество видеоинструкций, руководств по стилю, HTML руководств и даже задействовали шпаргалки для более любознательных читателей.
Контент хорошо документирован и организован по вспомогательным категориям, которые значительно упрощают поиск любой информации. Вы также разместили большую поисковую строку прямо в хедере раздела, чтобы никто не упустил ее из виду. И несмотря на все это, вы видите, что клиенты не могут найти то, что ищут. Что делать в таком случае?
Иногда недостаточно просто сделать все правильно. Добавление «живого чата» может обеспечить посетителям помощь по требованию, а также позволит собрать фидбек, чтобы понять, почему именно ваш раздел FAQ не дает клиентам необходимые ответы.
7. Используйте изображения и примеры
Все темы в ваших часто задаваемых вопросах должны подкрепляться качественными изображениями. Помимо этого, сделать сложную информацию более легкой для восприятия также помогают примеры, которые иллюстрируют тему, превращая ее в историю.
В качестве примера можно рассмотреть Live Chat Inc, чей раздел FAQ выполнен в формате блога. Благодаря такому подходу читать справочные посты становится легко и приятно. Также стоит отметить и тот факт, что они используют много хороших изображений и дают примеры, основанные на реальных ситуациях.
8. Добавьте форму обратной связи
Хотя цель создания FAQ заключается в снижении количества тикетов для службы поддержки, вам все равно нужно, чтобы ваши клиенты имели возможность оставить отзыв или задать вопрос. Это решается при помощи формы обратной связи. В конце каждой статьи вы можете просто попросить читателей оценить текст — если человек нажмет на кнопку «не нравится», на экране появится форма с просьбой оставить более подробный фидбек.
Это очень простой инструмент, который с одной стороны позволяет вам узнать мнение читателей, а с другой — помогает вам отслеживать успех вашего FAQ контента.
9. Позвольте поисковым системам найти ваш FAQ
Ваш раздел с вопросами и ответами — это не только инструмент поддержки. Он также может функционировать как лендинг, информирующий новых пользователей о вашем продукте.
Руководствуясь этой мыслью, вы должны оптимизировать ваши FAQ посты для поисковых систем, ведь когда потенциальные клиенты будут искать в Сети решение, которое предлагает ваш продукт, статьи из вашего FAQ отобразятся в поисковой выдаче.
Чтобы убедиться в том, что ваши справочные посты были проиндексированы поисковиками, нужно учитывать два важнейших фактора:
1. Ссылайтесь на них. Если на все страницы раздела FAQ можно попасть по гиперссылкам с домашней страницы, значит поисковые системы тоже смогут их найти. Вы должны не только вручную проверять весь ваш справочный контент, но и следить за тем, чтобы получить доступ к страницам FAQ можно было с главной страницы сайта.
2. Убедитесь в том, что каждая справочная страница имеет свой уникальный тег Title. Просмотрите исходный код каждой страницы и проверьте title-теги. Этот текст будет отображаться в поисковой выдаче, поэтому его определенно стоит проверять на наличие ошибок.
10. Следите за актуальностью контента
По сути, FAQ представляет собой базу знаний о ваших продуктах и услугах, и потому он всегда должен содержать только самую актуальную информацию. Это особенно важно для крупных компаний, предлагающих продукцию, которая прошла через несколько обновлений.
Для примера возьмем FAQ компании SAP, который является воплощением того, как должна выглядеть справочная документация. Как ведущий в мире поставщик программных решений практически в каждой отрасли информационных технологий в своих часто задаваемых вопросах SAP дают массу подробных и актуальных сведений о релизах их продукции, обновлениях функций и многом другом.
11. Интеграция с другими инструментами
Основная идея интеграции заключается в расширении области применения вашего FAQ, чтобы этот раздел стал чем-то большим, нежели простым инструментом клиентской поддержки. К примеру, вы можете интегрировать FAQ в вашу CRM-систему, дабы отправлять туда фидбек, который вы собираете посредством раздела. С другой стороны, вы также можете отправлять клиентские тикеты из вашей CRM в раздел FAQ и превращать их в справочные статьи.
Помимо этого, интеграция возможна в популярные средства автоматизации маркетинга и программное обеспечение службы поддержки.
Вместо заключения
Компании, разрабатывающие справочные страницы, сообщают о росте продуктивности работы своих сотрудников, коллаборации труда и потребительской вовлеченности. Создать раздел FAQ для своего бизнеса — значит принимать решения, прежде всего, с мыслью о клиентах.
Помните, что 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 (Frequently asked questions) — это часто задаваемые вопросы, которые собраны и выделены на отдельной странице. Благодаря ей пользователь сможет найти ответ на волнующий его вопрос не обращаясь к форуму или службе поддержки (support). Идеальная страница FAQ помогает разобраться с сайтом без какой-либо сторонней поддержки, к сожалению, в большинстве случаев этого не происходит. Успех FAQ зависит от того как насколько грамотно спроектирована данная страница и что на ней размещается. В этой статье, написанной по мотивам публикации Designing Effective FAQ Pages, я хочу разобрать некоторые аспекты и основы правильного, работающего раздела в часто задаваемыми вопросами.
Перед тем как перейти непосредственно к эффективному FAQ, давайте рассмотрим некоторые ошибки, которые можно встретить по данному вопросу.
В FAQ должны быть представлены вопросы которые на самом деле волнуют посетителей.
Допустим вы только что запустили новый сайт и сражу же добавляете туда страницу с частыми вопросами. Зачем? У вас же, по сути, даже и посетителей нет, откуда вы знаете какие вопросы будут задавать наиболее часто? Не стоит придумывать вопросы самому, FAQ должен формироваться на основе реально поступающих вопросов, то есть, благодаря обратной связи. Только в этом случае раздел будет реально полезен дляпосетителя. Регулярно дополняйте FAQ вновь поступающими вопросами/ответами.
Раздел часто задаваемых вопросов должен быть назван так чтобы было понятно всем.
Есть общепринятое обозначение раздела с часто задаваемыми вопросами — FAQ (Frequently asked questions). Оно используется уже очень давно и большинство пользователей (даже в рунете) понимают о чем идет речь. Поэтому не стоит изобретать что-то свое. Если вы решите назвать раздел «ВиО» (вопросы и ответы), далеко не каждый посетитель догадается, что кроется за этой таинственной аббревиатурой.
Делайте раздел FAQ только там где он нужен.
Некоторые сайты не нуждаются в разделе FAQ, тем не менее, он на них зачем-то присутствует. Зачастую пользователи сами находят нужную им информацию на сайте без каких либо дополнительных подсказок. Не стоит по этому поводу переживать — это значит, что структура проекта весьма хорошо проработана. И наоборот, если вы одну и ту же информацию можете получить на многих страницах, то скорее всего архитектура сайта продумана не лучшим образом. Не стоит делать раздел FAQ только ради того, чтобы он был.
Разрабатываем эффективный раздел FAQ
С ошибками разобрались, перейдем к созданию страницы наиболее популярных вопросов. Хорошая страница FAQ может значительно облегчить нагрузку на службу поддержки сайта, поэтому нужно уделить ей должное внимание.
Скажите «нет» разделу FAQ
Резюмирую рассмотренные выше ошибки, научитесь избавляться от лишних «ненужных» элементов дизайна и веб сайта в целом. Раздел FAQ должен дополнять основной контент сайта, а не дублировать его, если помощи от этой страницы нет никакой — просто уберите ее. Чтобы понять насколько востребованы часто задаваемые вопрос нужно прислушаться к посетителям сайта, просмотреть обращение в службу поддержки, добавить форму для вопросов и т.п.
Собирайте вопросы
Не обязательно дожидаться пока к вам начнут поступать вопросы. Если у вас новый сайт, вы можете (как вариант) устроить опрос посетителей/клиентов и выявить круг вопросов, требующих дополнительных разъяснений. Для этого можно, например, опубликовать в разделе призыв, вроде «Не нашли ответа на вопрос, свяжитесь пожалуйста с нами» или сделать специальные анонсированный период в течении которого пользователи могли бы задавать вопросы по телефону или email. Метод «сбора вопросов» весьма эффективен, потому что сами пользователи участвую в разработке страницы FAQ.
Разместите ссылки на FAQ в структуре сайта там где их привык видеть пользователь
Для раздела FAQ есть привычные «точки входа» — в основном меню навигации, или обособленно — в правом верхнем углу сайта или в «подвале» (можно совмещать несколько вариантов размещения). Ссылка должна быть заметна и (как мы уже выяснили ранее) правильно называться. Иногда ссылка на страницу часто задаваемых вопросов может быть специально выделена шрифтом или соответствующей иконкой.
Проявите максимум знания в юзабилити сайтов и не заставляйте посетителя искать этот раздел.
FAQ должен быть оформлено разборчиво
Раздел вопросов/ответов по-большей части текстовый, а текст, в свою очередь, должен быть оформлен так, чтобы читать его было удобно. Или, как минимум. вы сразу должны отличать вопросы от ответов дабы дополнительный раз не вчитываться в тексты. Для этого используются разные приемы типографики, например, текст может быть выделен за счет контрастных цветов шрифта или отступов:
Группируйте родственные вопросы/ответы в категории
Таким образом вы существенно облегчите посетителю процесс поиска и навигации по разделу, если вопросов достаточно много. Называете категории часто задаваемых вопросов просто и понятно дабы не создавать дополнительную путаницу (для разделов FAQ можно использовать тематически иконки):
Кстати, дополнительно можно также выделить секцию с наиболее популярными вопросами/ответами (имеется ввиду «самых часто задаваемых, популярных в самом FAQ»).
Добавьте поиск по FAQ
Если ваш раздел FAQ достаточно обширный с несколькими категориями и большими страницами, вы просто обязаны обеспечить возможность поиска. Не забудьте только, что область данного поиска должна быть ограничена FAQ и отличаться от глобального блока поиска, который будет искать по всем страницам проекта. Понятно, что такой локальный поиск по FAQ будет располагаться только в разделе часто задаваемых вопросов.
Где это уместно используйте изображения
Иногда одна картинка может рассказать больше чем 1000 слов, поэтому там где целесообразнее использовать изображения, используйте! В качестве примера: вот таким образом на сайте «The Bank of Washington» (с помощью принтскрина соответствующей страницы) дается совет по восстановлению пароля. Видимо вопрос, ответ и картинку-подсказку, которая весьма наглядно все разъясняет.
Не превращайте FAQ в бесконечную «простыню»
Не стоит заставлять пользователя бесконечно долго прокручивать страницу FAQ в поиске нужно вопроса/ответа. Создайте удобную структуру и средства для использования раздела. Для этих целей можно: разбить FAQ на страницы, сгруппировать категории, добавить скрипт «раскрытия и скрытия ответа» и ссылку в начало страницы к списку все вопросов.
В принципе, есть разные варианты оформления часто задаваемых вопросов. Главное — раздел FAQ должен быть удобен! Помните, что пользователь заходит сюда для того чтобы найти ответы на свои вопросы, поэтому дизайн и структура страницы должны максимально этому способствовать.