As product designers, we want people to get the most out of our apps. This can be difficult when adding new features or iterating on designs and functionality. People can feel frustrated or lost and might stop using the app. What if there was a way to make sure that people understand your app and use it to the fullest?
Today we're excited to release Joyride, an awesome jQuery plugin that lets you take users on a custom tour of your app. You'll be able to get your users shifting gears in no time when they see what your app has to offer!
How Did We Start?
We put a couple heads together and started brainstorming on how we'd make Joyride really easy to use. We wanted designers and companies without engineering departments to be able to show off their apps in style, without needing to know any advanced jQuery skills. Anyone who can write HTML and CSS will be able to use Joyride like a boss.
Why is Joyride So Useful?
After we completed our initial build, we wanted to test this baby out in the wild. It just so happened that we finished Joyride just as some new features were being released in Notable. This was perfect: we'd hook Joyride up inside Notable and see how engagement was affected.
When Joyride was used to point out Sets in Notable, we saw a 75% increase in set creation from new and engaged users within 2 weeks. Need we say more? People were pleased because they knew what the new changes meant; we pointed them out with Joyride.
'We saw it right away, every webapp should have something like this to show off new features.' 'Notable Customer
Now it's Time for the Juicy Bits
At a glance, Joyride seems like a pretty simple plugin, but when you dig into it you'll see the magic. We took special care to write really clean code and to keep Joyride light-weight; it's only 12Kb in its uncompressed format! When you download the kit, you'll notice that we didn't include an image folder. In fact, we didn't use a single image for the default styling of Joyride.
We decided to use some newfangled CSS to make triangles, rounded corners and gradients. All these techniques work on modern browsers, but we relied on graceful degradation to include fall-backs for old-school browsers.
Joyride uses custom HTML5 data attributes to specify each tooltip's target element and button text, and auto sorts the tooltips based on their order in the ordered list. This provides a very simple, copy and past solution for setting up your pages. Just match up the right content and write your tour stops and your ready to go!
After you're done testing your tooltips, you can add a cookie option. By setting a custom name for each tooltip's cookie you can run multiple Joyride instances on one page. We recommend setting the cookieDomain option for your Joyride instance when you enable cookies. If you set the domain to '.yourdomain.com' your Joyride instance will be subdomain specific, that way if you allow visitors to access the same page from different subdomains'such as yourcompany.notableapp.com'it will still load properly.
What Are You Waiting For?
Joyride is available now, so get on over to our playground page and give a ride. It only takes a couple minutes to configure the options and get your customers cruising on their way.
Check out Joyride on the ZURBplayground »
