Здесь можно прочесть часть №1
Окна чата – лицо онлайн консультанта…
Эта часть обзора, посвящена, на мой взгляд, важнейшему моменту в системах веб-консультирования (далее ВК), а именно окну чата и кнопке вызова онлайн консультанта. Ни для кого не секрет, что сайт стал для многих компаний визитной карточкой, а для кого-то и прямым источником дохода. Поэтому все то, что отвечает за дизайн и удобство работы с сайтом, должно быть пристально изучено. ВК – являются неотъемлемой частью современного сайта и их дизайн и удобство невозможно переоценить для формирования положительного имиджа компании-владельца сайта. Неправильный подбор окна чата/приглашения радикально сказывается на частоте использования ВК. Поэтому чем более гибкие настройки окна есть в системе – тем лучше.
Разновидности окон чата
Практически все онлайн консультанты, в своих коммерческих вариантах, позволяют в той или иной мере изменить вид окна чата с посетителем. Есть множество разновидностей реализации окон.
Вот некоторые варианты:
Классический слайдер
Всплывающее с кнопкой вызова. Обратите внимание, что в данном примере, окно построено на чистом js, не оформляется как отдельное окно браузера (не popup) в соответствии со спецификацией HTML-5 и находится как-бы внутри странички.
Прим. Когда операторов нет на месте — кнопка на этой странице не отображается. На сайте окно можно посмотреть только в рабочие часы. Выглядит это так
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/a7e/d8d/7ff/a7ed8d7fff4ad7ddb56a789aee8e5881.png)
Встроенное Такой вариант реализации окна подходит для страницы контактов и форм обратной связи
Сам чат может быть встроен в окно приглашения, а может появляться в отдельном, специальном окне. Здесь не лишне упомянуть, что спецификация HTML-5 не поддерживает открытие popup окон и считает их вредоносными. Браузеры будут поддерживать их только для обратной совместимости. Поэтому к ВК с открывающимися popup окнами, стоит отнестись с подозрением. Хотя эти окна и более “помехоустойчивы” к ошибкам на сайте и различным браузерам, тем не менее, их проще заблокировать, да и вообще интернет нас научил, что всплывающее окно – это рекламный баннер, который нужно немедленно закрыть. Я уж не говорю о том, что особо ретивые дизайнеры оформляют чат, практически как рекламу. С массой цветов и элементов дизайна, которые только отвлекают посетителя, а в момент первого контакта, заставляют мгновенно закрыть онлайн консультанта.
Вот пример окна, которое буквально нашпиговано отвлекающими элементами
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/5f4/1f7/1c9/5f41f71c952cf866d0dbc705f05bded5.png)
Выезжающая вкладка чата – это просто, аккуратно и современно. Кроме того, такая реализация не противоречит спецификации. Посмотрите, например, внутренний чат в Facebook. Часто именно из-за выскакивающих popup окон пользователи онлайн консультанта жалуются, что при активном вызове посетители “убегают” с сайта. После этого рождается мнение, что активный вызов вреден. Поэтому современное решение – это плавно выезжающая вкладка. При такой реализации окна чата активный вызов максимально эффективен. Это не значит, что другие окна нельзя использовать в принципе, если вы отказываетесь от активного вызова посетителей, вполне подойдет всплывающее окно. А для страницы контактов можно использовать вариант встроенного окна. Не стоит сбрасывать со счетов и собственно дизайн сайта, на котором нужно разместить ВК. Поэтому чем больше вариантов настройки предлагается системой — тем лучше.
Вот еще забавный пример.Некоторые компании, у которых окна чата построены на старых технологиях, пытаются подделаться под вкладки.Кнопка вызова консультанта по виду как вкладка, но при нажатии на нее мы видим все то же popup окно.
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/aca/86d/be3/aca86dbe3c3ac8f6631451fba8344fb5.png)
На что обратить внимание?
Проверяйте, чтобы окна, построенные на java-script, наследовали начавшийся диалог между посетителем и оператором при переходе со страницы на страницу сайта посетителем.
Заказчикам следует обратить внимание на то, чтобы была возможность удалить лого поставщика услуги и рекламные ссылки. Как правило, это можно сделать только за дополнительные деньги в соответствующих конфигурациях.
Смотрим бесплатный, в кавычках, проект Livezilla. Как видите и обратные ссылки на поставщика и функция геотаргетинга с построением отчетов – не бесплатны.
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/6e0/1a8/4a6/6e01a84a6f3be40c96ca55ab1e6d14cd.png)
Еще один момент. Подавляющее большинство систем, называют первое окно, выскакивающее перед посетителем – окном приглашения. Если посетитель подтвердил готовность к диалогу – открывается новое окно, в которое переносится начавшийся чат.
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/493/094/16d/49309416dde826a0c5dfd849e99e97f8.png)
Это тоже, по современным меркам – лишнее. Чат должен открываться в один клик и посетитель должен иметь возможность сразу писать туда свой вопрос. Опять же, при нормальной реализации окно меньше всего должно быть похоже на баннер.
Выбирая систему ВК, обратите внимание на легкость настройки и изменения вида окна. Скорее всего, вы будете использовать систему на разных страницах, а возможно и на разных сайтах своей компании. Кроме этого, дизайн сайта рекомендуется менять время от времени, а уж дизайн окна посетителя можно менять еще чаще – по праздникам, в случае проведения акций, распродаж и т.д. Для этого предусмотрен механизм EasyWay Темы окна чата, создаются без HTML-верстки, а переключение между ними происходит “на лету”. Вы можете изменять настройки цветов, настройки расположения на сайте окна чата, включать и отключать целые блоки в окнах чата, менять шрифты в теме и другое. Все это без замены кода на сайте. Ваши темы хранятся в программе, также имеется окно предварительного просмотра, перед установкой на сайт, вы можете увидеть в нем как будет выглядеть ваш онлайн консультант для посетителя.
Приведу пару скриншотов.
Как видите изменить можно только цветовое оформление. Это типичное решение
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/746/201/1df/7462011df808ed263170c89264a80edc.png)
EasyWay позволяет менять гораздо больше параметров окна чата и видеть изменения в окне предварительного просмотра
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/fc3/fa4/800/fc3fa4800592fc9c9bc7052dd5e9762d.png)
Для самых требовательных пользователей есть загрузка собственного html-кода.
Фотография оператора – интересная функция, основанная на том, что посетителю приятнее видеть лицо реального собеседника, тогда у него складывается ощущение, что он разговаривает с человеком, а не роботом. Тем не менее, у многих компаний эта функция сделана “для галочки”.
Т.е. в системе есть возможность загрузить фото оператора и загрузить его в качестве логотипа.
В результате получаются казусы как на скриншоте
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/704/eb4/21e/704eb421ed6f81b9963bc8a2c55777fd.png)
Правильная реализация такая: в тот момент, когда оператор подключается, его реальное фото заменяет собой стандартное лого. Это называется — динамические фотографии. К этой функции стоит отнестись внимательно, так как в неправильном варианте исполнения, окно чата снова похоже на баннер из-за поля фотографии, содержащим множество цветов, ну а уж с фотографиями куколок-операторов, ничего общего с лицом оператора компании не имеющими, думаю, встречался каждый. Некоторые особо популярные фото кочуют от сайта к сайту.
Думаю, Людмила в жизни вряд ли выглядит как сошедшая со страниц Playboy, островитянка.
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/e78/b2a/2f7/e78b2a2f79ed28882aa1d50356d219b3.png)
Оффлайн форма
Пример оффлайн формы
Это специальная форма, которая позволяет собирать сведения о посетителях и аккумулировать их вопросы, когда операторов нет на месте. Функция есть у многих онлайн-консультантов, но тем не менее, не у всех. А между тем, эта форма позволяет увеличить возможность последующего контакта на 9%-47% от числа тех, кто увидел эту форму. Уточняйте!
Важным моментом здесь является возможность отключения/включения специальных полей формы: телефон, мейл, имя посетителя и т.д.
Плюсом выбранной системы, будет также и возможность отключать/включать оффлайн форму по желанию владельца сайта. И естественно, оффлайн форму тоже нужно иметь возможность гибко настраивать.
В следующей части я расскажу про дополнительные функции онлайн консультантов
Окна чата – лицо онлайн консультанта…
Эта часть обзора, посвящена, на мой взгляд, важнейшему моменту в системах веб-консультирования (далее ВК), а именно окну чата и кнопке вызова онлайн консультанта. Ни для кого не секрет, что сайт стал для многих компаний визитной карточкой, а для кого-то и прямым источником дохода. Поэтому все то, что отвечает за дизайн и удобство работы с сайтом, должно быть пристально изучено. ВК – являются неотъемлемой частью современного сайта и их дизайн и удобство невозможно переоценить для формирования положительного имиджа компании-владельца сайта. Неправильный подбор окна чата/приглашения радикально сказывается на частоте использования ВК. Поэтому чем более гибкие настройки окна есть в системе – тем лучше.
Разновидности окон чата
Практически все онлайн консультанты, в своих коммерческих вариантах, позволяют в той или иной мере изменить вид окна чата с посетителем. Есть множество разновидностей реализации окон.
Вот некоторые варианты:
Классический слайдер
Всплывающее с кнопкой вызова. Обратите внимание, что в данном примере, окно построено на чистом js, не оформляется как отдельное окно браузера (не popup) в соответствии со спецификацией HTML-5 и находится как-бы внутри странички.
Прим. Когда операторов нет на месте — кнопка на этой странице не отображается. На сайте окно можно посмотреть только в рабочие часы. Выглядит это так
![image](https://habrastorage.org/getpro/habr/post_images/a7e/d8d/7ff/a7ed8d7fff4ad7ddb56a789aee8e5881.png)
Встроенное Такой вариант реализации окна подходит для страницы контактов и форм обратной связи
Сам чат может быть встроен в окно приглашения, а может появляться в отдельном, специальном окне. Здесь не лишне упомянуть, что спецификация HTML-5 не поддерживает открытие popup окон и считает их вредоносными. Браузеры будут поддерживать их только для обратной совместимости. Поэтому к ВК с открывающимися popup окнами, стоит отнестись с подозрением. Хотя эти окна и более “помехоустойчивы” к ошибкам на сайте и различным браузерам, тем не менее, их проще заблокировать, да и вообще интернет нас научил, что всплывающее окно – это рекламный баннер, который нужно немедленно закрыть. Я уж не говорю о том, что особо ретивые дизайнеры оформляют чат, практически как рекламу. С массой цветов и элементов дизайна, которые только отвлекают посетителя, а в момент первого контакта, заставляют мгновенно закрыть онлайн консультанта.
Вот пример окна, которое буквально нашпиговано отвлекающими элементами
![image](https://habrastorage.org/getpro/habr/post_images/5f4/1f7/1c9/5f41f71c952cf866d0dbc705f05bded5.png)
Выезжающая вкладка чата – это просто, аккуратно и современно. Кроме того, такая реализация не противоречит спецификации. Посмотрите, например, внутренний чат в Facebook. Часто именно из-за выскакивающих popup окон пользователи онлайн консультанта жалуются, что при активном вызове посетители “убегают” с сайта. После этого рождается мнение, что активный вызов вреден. Поэтому современное решение – это плавно выезжающая вкладка. При такой реализации окна чата активный вызов максимально эффективен. Это не значит, что другие окна нельзя использовать в принципе, если вы отказываетесь от активного вызова посетителей, вполне подойдет всплывающее окно. А для страницы контактов можно использовать вариант встроенного окна. Не стоит сбрасывать со счетов и собственно дизайн сайта, на котором нужно разместить ВК. Поэтому чем больше вариантов настройки предлагается системой — тем лучше.
Вот еще забавный пример.Некоторые компании, у которых окна чата построены на старых технологиях, пытаются подделаться под вкладки.Кнопка вызова консультанта по виду как вкладка, но при нажатии на нее мы видим все то же popup окно.
![image](https://habrastorage.org/getpro/habr/post_images/aca/86d/be3/aca86dbe3c3ac8f6631451fba8344fb5.png)
На что обратить внимание?
Проверяйте, чтобы окна, построенные на java-script, наследовали начавшийся диалог между посетителем и оператором при переходе со страницы на страницу сайта посетителем.
Заказчикам следует обратить внимание на то, чтобы была возможность удалить лого поставщика услуги и рекламные ссылки. Как правило, это можно сделать только за дополнительные деньги в соответствующих конфигурациях.
Смотрим бесплатный, в кавычках, проект Livezilla. Как видите и обратные ссылки на поставщика и функция геотаргетинга с построением отчетов – не бесплатны.
![image](https://habrastorage.org/getpro/habr/post_images/6e0/1a8/4a6/6e01a84a6f3be40c96ca55ab1e6d14cd.png)
Еще один момент. Подавляющее большинство систем, называют первое окно, выскакивающее перед посетителем – окном приглашения. Если посетитель подтвердил готовность к диалогу – открывается новое окно, в которое переносится начавшийся чат.
![image](https://habrastorage.org/getpro/habr/post_images/493/094/16d/49309416dde826a0c5dfd849e99e97f8.png)
Это тоже, по современным меркам – лишнее. Чат должен открываться в один клик и посетитель должен иметь возможность сразу писать туда свой вопрос. Опять же, при нормальной реализации окно меньше всего должно быть похоже на баннер.
Выбирая систему ВК, обратите внимание на легкость настройки и изменения вида окна. Скорее всего, вы будете использовать систему на разных страницах, а возможно и на разных сайтах своей компании. Кроме этого, дизайн сайта рекомендуется менять время от времени, а уж дизайн окна посетителя можно менять еще чаще – по праздникам, в случае проведения акций, распродаж и т.д. Для этого предусмотрен механизм EasyWay Темы окна чата, создаются без HTML-верстки, а переключение между ними происходит “на лету”. Вы можете изменять настройки цветов, настройки расположения на сайте окна чата, включать и отключать целые блоки в окнах чата, менять шрифты в теме и другое. Все это без замены кода на сайте. Ваши темы хранятся в программе, также имеется окно предварительного просмотра, перед установкой на сайт, вы можете увидеть в нем как будет выглядеть ваш онлайн консультант для посетителя.
Приведу пару скриншотов.
Как видите изменить можно только цветовое оформление. Это типичное решение
![image](https://habrastorage.org/getpro/habr/post_images/746/201/1df/7462011df808ed263170c89264a80edc.png)
EasyWay позволяет менять гораздо больше параметров окна чата и видеть изменения в окне предварительного просмотра
![image](https://habrastorage.org/getpro/habr/post_images/fc3/fa4/800/fc3fa4800592fc9c9bc7052dd5e9762d.png)
Для самых требовательных пользователей есть загрузка собственного html-кода.
Фотография оператора – интересная функция, основанная на том, что посетителю приятнее видеть лицо реального собеседника, тогда у него складывается ощущение, что он разговаривает с человеком, а не роботом. Тем не менее, у многих компаний эта функция сделана “для галочки”.
Т.е. в системе есть возможность загрузить фото оператора и загрузить его в качестве логотипа.
В результате получаются казусы как на скриншоте
![image](https://habrastorage.org/getpro/habr/post_images/704/eb4/21e/704eb421ed6f81b9963bc8a2c55777fd.png)
Правильная реализация такая: в тот момент, когда оператор подключается, его реальное фото заменяет собой стандартное лого. Это называется — динамические фотографии. К этой функции стоит отнестись внимательно, так как в неправильном варианте исполнения, окно чата снова похоже на баннер из-за поля фотографии, содержащим множество цветов, ну а уж с фотографиями куколок-операторов, ничего общего с лицом оператора компании не имеющими, думаю, встречался каждый. Некоторые особо популярные фото кочуют от сайта к сайту.
Думаю, Людмила в жизни вряд ли выглядит как сошедшая со страниц Playboy, островитянка.
![image](https://habrastorage.org/getpro/habr/post_images/e78/b2a/2f7/e78b2a2f79ed28882aa1d50356d219b3.png)
Оффлайн форма
Пример оффлайн формы
![image](https://habrastorage.org/getpro/habr/post_images/8dc/d54/26c/8dcd5426c5179858014a97214c1b79b7.png)
Это специальная форма, которая позволяет собирать сведения о посетителях и аккумулировать их вопросы, когда операторов нет на месте. Функция есть у многих онлайн-консультантов, но тем не менее, не у всех. А между тем, эта форма позволяет увеличить возможность последующего контакта на 9%-47% от числа тех, кто увидел эту форму. Уточняйте!
Важным моментом здесь является возможность отключения/включения специальных полей формы: телефон, мейл, имя посетителя и т.д.
Плюсом выбранной системы, будет также и возможность отключать/включать оффлайн форму по желанию владельца сайта. И естественно, оффлайн форму тоже нужно иметь возможность гибко настраивать.
В следующей части я расскажу про дополнительные функции онлайн консультантов