Мне попался один интересный способ создания пошаговой инструкции. Я установил его у себя на блоге. Для того чтобы посмотреть как всё работает надо нажать на кнопку - "Краткий экскурс по блогу".



Такую пошаговую инструкцию очень легко установить. Она очень быстра в установке имеет минимальные размеры.

Большинство людей склонны бояться новых интерфейсов. Такая наглядная инструкция упростит восприятие и понимание.

Создаваемая инструкция получается простой, а навигация очевидной и понятной. Большинство посетители не хотят задумываться даже простые инструкции оказываются для них не эффективны.

А что делать если вы незначительно что то изменили. Посетители вряд ли это заметят. Хорошо бы было им очень аккуратно это намекнуть. Мол вот теперь доступна вот такая вот новая возможность.

Используя Intro.js можно это легко сделать. Практически вы указываете посетителю направление в котором просматривая шаг за шагом можно указать все новшества внедренные в интерфейсе вашего сервиса.

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

Список используемых атрибутов данных: 

 

data-intro  - определяет фрагмент кода, который будет отображен внутри подсказки.

data-step - указывает на каком этапе гида будет отображена подсказка.

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

Вот скриншот как это выглядит на этом блог. Перейдите на главную страницу сайта www.ifin.pp.ua и по нажатию на кнопку - "Краткий экскурс по блогу" вы сможете всё увидеть сами. 



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

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

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

Ссылки
Intro.js: javascript-фреймворк для совершения экскурсов (удобные подсказки для знакомства с вашим сайтом)