Intro.js: дает посетителям правильное направление

Вы знаете о том, насколько важно, чтобы веб-сайт был полностью понятным, а навигация – очевидной. Посетители не хотят задумываться о том, как попасть в тот или иной раздел, и если для использования вашего сайта у вас есть специальная инструкция, то ваш сайт обречен на провал. Но! Представьте, что вы так незначительно изменили что-то на сайте, что ваши постоянные посетители даже не заметили этого, но вам нужно, чтобы они увидели эти изменения, потому что они могут быть важны и для них тоже! Как вы думаете, было бы неплохо очень аккуратно намекнуть пользователям о чем-то новом на сайте, чтобы они заинтересовались и смогли узнать об этом? Указать им правильное направление? Intro.js – это фреймворк, который позволяет реализовать это. Он направляет ваших пользователей к чему-то новому, что появилось на вашем сайте.


Вы знаете эту систему гидов. Очень часто крупные ресурсы вроде Facebook используют их, чтобы указать на новшества и нововведения в интерфейс сервиса. Если вы вносите какие-либо незначительные изменения на сайт, но вам хочется рассказать об этом пользователям – не нужно создавать отдельную новость, можно просто воспользоваться подсказками.

Гиды на Intro.js

Intro.js предлагает вам фреймворк, который позволяет реализовать небольшие гиды по нововведениям в виде подсказок на сайте. Все что вам нужно сделать для начала работы, это встроить javascript-код и сопутствующие каскадные таблицы стилей в ваш проект. Затем вам нужно обозначить HTML-элемент, который вы хотите включить в гид, при помощи следующих атрибутов данных:

<div data-intro="This is essential information" data-step="2"></div>

Атрибут data-intro определяет фрагмент кода, который будет отображен внутри подсказки. data-step определяет, на каком этапе гида будет отображена подсказка. Ссылки на переход к следующему или предыдущему этапу добавляются автоматически. Таким образом, пользователь имеет возможность быстро прощелкать весь гид.

Как только гид будет запущен, весь сайт будет затемнен, и нормальными останутся только те HTML-элементы, о которых рассказывается в этапе гида.

Атрибут data-position используется для расположения подсказок рядом с HTML-элементом.


После того, как вы определите все необходимые этапы, вы можете запустить гид при помощи следующего запроса:

introJs().start();

IntroJs() может быть запущен при помощи кнопки, либо, что более удобно (как, например, это происходит в Facebook), при полной загрузке страницы.

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

В завершение

Intro.js предлагает невероятно простой и быстрый способ добавить коротенькие гиды по нововведениям на сайте. Если вам нужно будет быстро реализовать подобный интерфейс, не стесняйтесь воспользоваться Intro.js. Если вам нужно что-то более серьезное или строгое, вы всегда можете изменить CSS-код по вашим требованиям. Intro.js работает со всеми современными версиями Firefox, Chrome и Internet Explorer. Так как здесь используется HTML5 и CSS3, вы вероятно уже догадались, что вряд ли стоит ожидать поддержки в старых версиях браузеров.

Ссылки

* Intro.js: javascript-фреймворк для знакомства пользователей с вашим сайтом