A Better Onboarding Experience in your Angular.js Application
<p>“Onboarding” is one of those things we sometimes forget about when developing an application, but it really deserves more attention. Showing the user how to use your app can be critical in retaining them. Some people might say that if you need onboarding, your app just needs to have a better UX, but I don’t think this is practical in all situations, particularly complex business applications.</p> <p>For my current Angular app, I wanted a nice way to point out and explain the various features of the application right after signup. I looked through a few javascript plugins such as <a href="http://easelinc.github.io/tourist/">Tourist.js</a>, <a href="http://jeffpickhardt.com/guiders/">Guiders.js</a>, and a few others, but none seemed to work well with angular, so I decided to write my own, which I’m calling <a href="https://github.com/adamalbrecht/ngOnboarding">ngOnboarding</a>.</p> <p><img src="/assets/images/ng_onboarding_screenshot-d1c682a2.png" alt="ngOnboarding" /></p> <p></p> <p>The library consists of a directive (<code><onboarding-popover></code>) that requires an array of ‘steps’ to be setup in your controller. Each step represents a popover element that may optionally point to an element on the screeen. Your step configuration might look something like this:</p> <div class="highlight"><pre class="highlight javascript"><code><span class="nx">$scope</span><span class="p">.</span><span class="nx">onboardingSteps</span> <span class="o">=</span> <span class="p">[</span> <span class="p">{</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Welcome!</span><span class="dl">"</span><span class="p">,</span> <span class="na">position</span><span class="p">:</span> <span class="dl">"</span><span class="s2">centered</span><span class="dl">"</span><span class="p">,</span> <span class="na">description</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Welcome to my app!</span><span class="dl">"</span><span class="p">,</span> <span class="na">width</span><span class="p">:</span> <span class="mi">300</span> <span class="p">},</span> <span class="p">{</span> <span class="na">title</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Account Setup</span><span class="dl">"</span><span class="p">,</span> <span class="na">position</span><span class="p">:</span> <span class="dl">"</span><span class="s2">right</span><span class="dl">"</span><span class="p">,</span> <span class="na">description</span><span class="p">:</span> <span class="dl">"</span><span class="s2">This is the form for configuring your account.</span><span class="dl">"</span><span class="p">,</span> <span class="na">attachTo</span><span class="p">:</span> <span class="dl">"</span><span class="s2">#account_form</span><span class="dl">"</span><span class="p">,</span> <span class="na">position</span><span class="p">:</span> <span class="dl">"</span><span class="s2">bottom</span><span class="dl">"</span> <span class="p">}</span> <span class="p">];</span> </code></pre></div> <p>Unfortunately, I had to make a design decisions that I don’t particularly like, which is forcing you to reference CSS selectors in the controller. This is generally frowned upon in Angular, but I don’t see a another way to support anchoring the popovers to elements on the page. If you can think of a better way to implement this, I’d love to hear it.</p> <p>While it’s still in development and not well-tested, it seems to work pretty well, so check it out!</p>