Вступление и цель
Цель исследования: найти готовое решение, которое можно использовать для отображения подсказок по работе сложных интерфейсов. Должно быть просто, понятно и без занудств то есть не должно хотеться нажать Skip, Cancel или крестик. В идеале использовать эту же библиотеку как презентацию новых возможностей проекта, которые только появились или с которыми человек еще не знаком. Например если они появились давно, но человек их все еще не использовал ни разу.
Ключевые слова: intro, tour, walkthrough, whatsnew, guide.
Попытка 1. Готовые библиотеки
Я нашел статью в которой приводится два десятка готовых решений: http://ninodezign.com/25-free-jquery-plugins-for-doing-guided-tours-through-a-website/
Просмотрев все библиотеки я составил список тех, про которые можно было бы сказать хоть что-то хорошее или интересное. Галочка означает, что я написал в Twitter про эту библиотеку.
Intro.js
- https://github.com/usablica/intro.js
- Используется в субсервисе нашего проекта;
- Приятно затемняет все кроме нужного элемента на странице;
- Нужно попробовать добавить всплывашку;
- Недавно добавили Hints — чтобы по клику на него появлялся подсказчик;
- в топ 3.
EnjoyHint
- https://github.com/xbsoftware/enjoyhint
- Несколько раз как пример присылал тимлид команды;
- Умеет затемнять и подсвечивать элементы;
- Есть встроенная реакция типа нажми кнопку на странице чтобы продолжить(!);
- Уродские шрифты в демках (видимо по дефолту);
- Кнопка Skip которую сразу хочется нажать и нет кнопки Next (все можно настроить похоже см. пример http://xbsoftware.com/demos/enjoyhint/#!/issues/home:show=all);
- Разработчики заявляют что поддерживает мобильные;
- Нельзя вернуться на шаг назад;
- в топ 3.
Crumble
- https://github.com/tommoor/crumble
- Самый прикольный внешний вид;
- Не совсем заточен под шаги, то есть нельзя проскипать;
- Не факт что на мобилках будет смотреться нормально;
- в топ 3.
Bootstro.js
- https://github.com/clu3/bootstro.js
- Поддерживает Bootstrap до версии 3;
- Точно есть поддержка callback чтобы понять где человек остановился;
- Выглядит уродски.
Trip.js
- https://github.com/EragonJ/Trip.js
- Прикольно что у него можно включить анимацию тем самым привлекая к себе внимание, сделано через animate.css.
jQuery TourBus
- https://github.com/rfunduk/jquery-tourbus
- Ничего особенного, но можно делать специальные кнопки назад, есть ветвления;
- Можно затемнять интерфейс снаружи показываемого блока.
Hopscotch
- https://github.com/linkedin/hopscotch
- Очень простая штука, но из коробки например поддерживает переходы по страницам и сохраняет состояние на котором человек остановился;
- Поддерживает клики на элементах.
pageguide.js
- https://github.com/tracelytics/pageguide
- Страшный что жуть (страница страшная, для него еще розовый цвет сделали);
- Прикольно что показывает циферки в интерфейсе около элементов, тем самым как бы показывая человеку заранее про что будет рассказано;
- Блок с информацией показывает внизу страницы;
- С мобильными из коробки не очень дружит.
Bootstrap Tour
- https://github.com/sorich87/bootstrap-tour
- Bootstrap;
- Поддерживает разные затемнения, клики в интерфейсе.
jQuery UI tour
- https://github.com/maenu/jquery-ui-tour
- Если не брать уродские контроллы в самом начале, то вполне себе вариант, но страшноватый и допотопный.
anno.js
- https://github.com/iamdanfox/anno.js/
- Вполне себе такая штука чтобы делать свои сценарии. Много разного поддерживается.
Chardin.js
- https://github.com/heelhook/chardin.js
- Довольно приятный внешний вид подсказок, они правда без сценариев и всего такого и сразу все выводится на экране. Но если сценарий делать движком внутри то вполне заслуживает внимания.
Ни одна из просмотренных библиотек не подходит так, чтобы целиком решить всю задачу, да еще и с встроенной отправкой статистики, например в Google Analytics. 🙂 Закрывать экран и вести человека шагами — слишком жестоко и скорее всего говорит о сложном и непонятном интерфейсе. Если я вижу впереди что 10 шагов я сразу нажму Skip. Поэтому разбросанные по странице маячки, которые привлекают к себе внимание — более интересный подход. По клику на них уже можно запускать даже "модальный" интерфейс который при необходимости даже будет требовать выполнения определенных действий или их последовательности.
Попытка 2. Как делают остальные?
Вторая попытка была связана с тем чтобы посмотреть какие решения используют современные стартапы. Не сильно заморачиваясь я нашел какой-то список 37 самых быстрорастущих проектов и прошелся по нему. К сожалению ничего полезного найти не удалось.
Если вытаскивать из памяти, то Facebook и Twitter показывают просто кастомный hint рядом с новыми вещами. Facebook некоторые новые возможности показывает анимацией или как-то иначе в контексте того места, где их можно использовать. Кликнул на Like, он тебе показывает что лайк теперь не просто лайк.
Сервис api.ai, который недавно купил Google, использует https://www.tutorialize.me/ в своих интерфейсах внутри. Я зарегистрировался и оказалось что это то что нужно если говорить о первой части задачи, причем ни одной строчки кода можно не писать — все делается внутри сервиса, а подключить его можно через Google Tag Manager. Стоит денег, конечно.
Именно его мы пока и будем использовать.
Неожиданное продолжение поиска
Оказалось, что сервис tutorialize.me заброшен. Никаких обновлений с 2013 года в блоге нет. И не смотря на то, что он работает как надо, видимо с него придется уходить. Поэтому я тут продолжу список библиотек и решений с которыми надо будет ознакомиться когда придет время:
- tutorialize