Создание подсказок для сайта с помощью EnjoyHint

    Друзья мои! Время от времени каждый из нас сталкивается с ситуацией, когда, попав на новый для себя сайт, приходится хорошенько поразмыслить минуту-другую, чтобы понять, как там все устроено. Примерно в таком же положении можно оказаться, обнаружив радикальные (или не очень) перемены во внешнем облике любимых сайтов, будь то last.fm или Кинопоиск. Существуют разные способы примирить пользователей с новым дизайном: от постепенного знакомства с привнесенными новшествами («Попробуйте бета-версию обновленного сайта прямо сейчас!») до создания пошагового гайда по новым возможностям. О последнем варианте мы сегодня и поговорим.

    finding a way

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

    Одной из зависимостей является jQuery версии 1.7 или выше. Другая его зависимость — KineticJS версии 5.10, но, поскольку эта библиотека уже включена в EnjoyHint, беспокоиться о ней лишний раз не стоит.

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

    EnjoyHint. Немного теории


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

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

    Основные фичи:

    1. Автоматический фокус и подсветка выбранной области
    2. Изменение формы и границ- выделенной области
    3. Возможность задатьзадержку появления подсказки
    4. Возможность продолжитьпрерванную последовательность подсказок
    5. Кросс-браузерная поддержка (Chrome, FireFox, IE10+, Safari)
    6. Поддержка устройств с сенсорным экраном под управлением Android, iOS и Windows

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

    Создание подсказки


    В качестве примера я сделал вот такую маленькую модель поисковика:

    TurboSearch

    Итак, приступим. Для начала подготовим необходимые файлы. Вы можете установить EnjoyHint с помощью менеджера пакетов Bower:

    bower install enjoyhint
    


    Или скачать его с этой страницы на GitHub. В качестве примера мы используем второй вариант.

    Добавляем jQuery и необходимые js- и css-файлы из архива EnjoyHint:

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    
    <script src="enjoyhint/enjoyhint.min.js"></script>
    <link href="enjoyhint/enjoyhint.css" rel="stylesheet">
    

    Я поместил весь код, необходимый для создания подсказок, в отдельный файл `hint-sequence.js`:

    <script src="hint-sequence.js"></script>
    


    Инициализация EnjoyHint


    Для начала нужно создать новый экземпляр объекта EnjoyHint:

    var enjoyhint_instance = new EnjoyHint({});
    


    Теперь мы можем создать описание подсказки:

    var enjoyhint_script_steps = [
    	{
    		 /*код подсказки*/
    	}  
    ];
    

    Или, если вам нужно создать последовательность из нескольких подсказок:

    var enjoyhint_script_steps = [
    	{
    		/*код первой подсказки*/
    	},
    	{
    		/*код второй подсказки*/
    	}
    ];
    

    Далее, с помощью метода `set` мы выбираем созданную последовательность в качестве конфигурации:

    enjoyhint_instance.set(enjoyhint_script_steps);
    

    Все готово. Теперь можно запустить наш скрипт:

    enjoyhint_instance.run();
    


    Описание подсказки


    В качестве первого примера мы создадим подсказку, которая расскажет посетителю сайта о предназначении кнопки «Фильтр»:

    var enjoyhint_script_steps = [
    	{
    		'click .btn' : 'Эта кнопка позволяет фильтровать результаты поиска'
    	} 
    ];
    enjoyhint_instance.set(enjoyhint_script_steps);
    enjoyhint_instance.run();
    

    Результат показан ниже:

    first hint

    Вот как это работает. `click` — это событие, которое запустит следующую подсказку. В данном случае — нажатие кнопки. Выбрать элемент страницы, который будет выделен и для которого появится подсказка можно с помощью селектора. В нашем случае этим элементом является кнопка «Фильтр» со значением атрибута `class=btn`. Далее, после двоеточия, следует текст подсказки.

    Поскольку мы создаем единственную подсказку, после того, как мы нажмем на кнопку «Фильтр» или на кнопку «Skip», она исчезнет. Кнопка «Skip» появляется по-умолчанию. Но, поскольку все наше руководство состоит из одного-единственного шага, она смотрится немного неуместно. В данном примере попросту нечего пропускать. EnjoyHint позволяет добавлять собственные CSS-классы и названия к своим элементам, что будет полезно, если вы хотите добавить описание к единственному элементу вашей страницы.

    Вы можете изменить надпись на кнопке с помощью свойства `skipButton`:

    'click .btn' : /*текст подсказки*/,
    'skipButton' : {className: "mySkip", text: "Понял!"}
    

    Этот код также добавит к ней CSS-класс `mySkip`. Используя, например, такой CSS-код:

    .mySkip {
    	color: white;
    	border-color: white;
    }
    

    Можно изменить цвет кнопки:

    change skip button

    Если же кнопка «Skip» покажется вам лишней, ее можно вообще убрать с помощью свойства `showSkip: false`.

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

    Последовательность подсказок


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

    Первая подсказка. Событие 'next'


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

    'next .navbar-brand' : /*текст подсказки*/
    

    В этот раз было использовано событие `next` и вот что мы получили в результате:

    first hint next

    Как видите, заголовок сайта теперь выделен. На этот раз у нас две кнопки: «Next», которая запустит следующую подсказку и «Skip», которая прервет работу скрипта. Изменить кнопку «Next» можно почти таким же способом, что и кнопку «Skip» из предыдущего примера:

    'nextButton' : {className: "myNext", text: "Конечно!"},
    'skipButton' : {className: "mySkip", text: "Обойдусь"}
    

    Вот что вы получите в качестве результата:

    next button redefined

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

    Вторая подсказка. Событие 'key'


    Этот шаг руководства расскажет пользователю, как использовать строку поиска. Для этого мы используем событие `key`. Оно запустит следующую подсказку после нажатия определенной клавиши:

    'key #mySearchButton' : /*текст подсказки*/,
    'keyCode' : 13
    

    Обратите внимание, что в этом случае в качестве селектора было использовано значение атрибута `<id=mySearchButton>`. Свойство `keyCode` определяет код клавиши, нажатие которой запустит следующую подсказку. В данном случае это код клавиши Enter.

    Давайте посмотрим на результат:

    result

    После нажатия клавиши, появится следующая подсказка.

    Третья и четвертая подсказки. Меняем форму


    В качестве третьего шага мы используем уже знакомый нам пример для кнопки «Фильтр»:

    'click .btn' : /*текст подсказки*/
    

    После нажатия кнопки будет вызвана четвертая подсказка. И на этот раз мы изменим форму выделенной области на круг. Для этого используем свойство `shape`:

    'next .about' : /*текст подсказки*/,
    'shape': 'circle'
    

    В результате ссылка «О сайте» будет выделена как показано на скриншоте:

    image

    Последний шаг. Меняем размер


    EnjoyHint прекрасно справляется с подсветкой элементов разного размера. Но если размер выделенной области по-умолчанию вас не устраивает, можно его изменить с помощью свойства `radius`. Сейчас мы создадим последнюю подсказку с использованием этой возможности. Поскольку это последний шаг нашего руководства, кнопка Skip нам больше не понадобится. Можно убрать ее с помощью свойства `showSkip: false`.

    Итак, код для последней подсказки:

    'next .contact' : 'Ждем ваших отзывов и предложений :)',
    'shape': 'circle',
    'radius': 80,
    'showSkip' : false,
    'nextButton' : {className: "myNext", text: "Закрыть"}
    

    Результат:final step

    Коллбеки


    Последнее на сегодня. Коллбеки. Для их вызова можно использовать события скрипта `onStart` и `onEnd`. Событие `onStart` запускается в самом начале работы, перед первой подсказкой. Событие `onEnd` запускается после последней подсказки. Например:

    var enjoyhint_instance = new EnjoyHint({
    	onStart:function(){
    		// вызывается перед первой подсказкой
    	},
    	onEnd:function(){
    		// вызывается после последней подсказки
      }
    });
    

    Доступно также событие для отдельной подсказки `onBeforeStart`. Оно запускается перед появлением подсказки на экране:

    var enjoyhint_script_steps = [
    	{
    		/* описание подсказки */
    		onBeforeStart:function(){
    			// вызывается перед подсказкой
    		}
      }
    ];
    


    Заключение


    С помощью EnjoyHint можно быстро добавить на сайт одиночные подсказки или пошаговый гайд по основным элементам. Для того, чтобы добавить подсказку, нужно просто привязать ее к нужному селектору, а для описания самой подсказки можно использовать HTML-теги. Скачать EnjoyHint, а также почитать инструкцию, содержащую описание доступных фич можно здесь.
    • +18
    • 23,4k
    • 9
    Поделиться публикацией
    Комментарии 9
      0
      Заменить «Этак кнопка...» на «Эдак кнопка...» )
        0
        поправил, спасибо)
        +1
        Спасибо, хорошая статья.
          0
          Вопрос, а как правильно сделать следующее:

          Есть страница(сайт), где время от времени появляются новые элементы. Хотелось бы чтобы подсказки показывались пользователю лишь раз и если он зашел второй раз и добавилась лишь одна кнопка, то все проигрывалось бы только для этой новой кнопки?
            0
            Нужно создать для этого новый инстанс для новых подсказок и запускать его после предыдущего. Таким образом новый юзер получит подсказки по всем фичам, а вернувшийся только по новым.
            А чтобы не показывался предыдущий, через колбеки добавить сохранение статуса прохождения подсказок текущего инстанса в том виде, в котором вам удобно.
              0
              Или можно динамически генерировать массив подсказок enjoyhint_script_steps и добавлять в него только определенные шаги
            0
            del
              0
              В предпоследней картинке исправьте «возможностейц», и выше, где «Добро пожаловать в ТурбоПоиск» слово «руководтво» :)
              А так — очень классно!
                0
                исправил, спасибо.

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

              Самое читаемое