Web apps are always getting more complex and distributed, so it’s important that Tracelytics both lets you cut right to the heart of your data and is also dead-simple to use. We’re always pushing the envelope on consumable, insightful data with innovative visualizations, customizable interfaces and timely delivery of information, so it’s good to take a step back and make sure that Tracelytics is also dead-simple to use. It’s fine for your app to be complicated, but that doesn’t mean that managing its performance needs to be as well.
Since performance data is complex and there are many ways to examine it, we wanted to make sure you are getting the most out of the Tracelytics interface. Some apps tackle the problem with persistent contextual help paired with key page elements (we’ve tried that). Other apps use offsite documentation where they can elaborate on use cases (we have that too). Still others use more conversational documentation such as blogs to call attention to features (hopefully why you’re reading this).
What we decided to do
Today we are announcing the Tracelytics Page Guide. This is a dynamic in-page contextual help system that we use to call attention to important page features, use cases, tips & tricks and anything else to help you reach insightful understanding of your data as fast as possible. Unlike persistent help (those little ? icons you see in some apps), the page guide doesn’t get in your way after you’ve learned about the features of a page. But it’s always waiting for you on the sidelines, just in case you need a refresher. Unlike documentation sites and manuals, it is attached to page elements so there is no confusing where the feature is located. Finally, the Page Guide is dynamic: the items in the guide depend on what features you see on the screen.
How does it work?
Pinned to the right side of your browser window, on pages with features and elements we think you should know about, you will see the Page Guide icon.
Click on the Page Guide icon and you will see numbered flags get attached to various elements on the page.
We highlight the element that the Page Guide description is about. Clicking on any of the numbered flags updates the description at the bottom of the screen with info on the item you’re interested in.
You can also scroll through the Page Guide items using the previous and next arrows in the description area, providing a tour-like experience:
You won’t see the Page Guide on all pages in the app–currently, it’s applied to a few representative pages–but that doesn’t mean we’re done! Feel free to email us, tweet us, or jump in our IRC channel at #tracelytics on freenode and let us know what pages or features we should make sure to get into the guide in the coming days.
One more thing…
We think that pageguide.js could help a lot of other apps and sites so we’re thinking about open sourcing it. Just like feature requests, email, tweet, or IRC if you think this is a good idea, want to contribute, or just want to say hi!