Calling attention to new features in our React Native app
How to keep users from getting lost (or at least, reducing the confusion)
→ Find React Native Walkthrough Tooltip on Github
What’s THIS new thing? Where’d THAT feature go?
When altering the arrangement of an interface or changing how to access a feature, undoubtedly customer support is going to hear from users wondering where something went or why it changed. Likewise, upon release of new features it can be imperative to point out to a user what’s new and provide a simple explanation of the feature. Release notes can only do so much — a simple callout identifying what’s changed can go a long way.
At CompanyCam, we found the need to implement a way to call out features to the users of our React Native application. We wanted a solution that (1) did not clutter up our code, (2) allowed the user to interact with the highlighted element, and (3) was not intrusive to the user’s experience or workflow.
In this article, we’ll briefly look at how we implemented this technically and our opinions on doing this in a tasteful way. Here’s our tooltip in action:
The Tooltip Library
When looking for tooltip libraries for React Native, there were some viable candidates, but none of the libraries had all the features we were looking for, and many were outdated. Ultimately, we ended up creating our own library, utilizing react-native-popover as a starting point.
→ Priority #1: One key element to our implementation was minimizing clutter created in our existing code, namely we wanted the tooltips to be implemented in place and to have a simple API that wouldn’t be intrusive. Here’s an example of what it looks like in a render function:
→ Priority #2: We wanted the wrapped element to be interactive. What’s the point of calling something out if you can’t interact with it? Given our starting point, this took some reengineering, since the tooltip is rendered in a React Native Modal over the current view, thus our wrapped element is actually under the modal.
Our solution is to simply render a second instance of the element in the Modal next to our tooltip callout bubble, at the exact layout coordinates as the first instance. This allows for limiting the user to two options: interact with the wrapped element or to exit the tooltip.
Strategy for Displaying
Say it, display it, and get out of the way
→ Priority #3: Do not bombard the user with too much text or unnecessary steps. We want to quickly inform and then get out of the way. We did this by keeping our copy to a single sentence and allowing the user to interact with the element organically.
The screenshot further up shows just how concise our messaging is. Once a user has seen this information, it is never displayed again. This keeps things from getting annoying and allows the user to continue their workflow without interruption.
React Native Walkthrough Tooltip
That’s it! Want to implement something similar in your React Native application? We’ve open-sourced our library for your use! Check it out here: React Native Walkthrough Tooltip.
Finally, we leveraged this component to build out a full-featured walkthrough library that allows you to seamlessly walk users through a multi-step process in your app — from screen to screen, guiding them the whole way and allowing them to interact with the app as they go. Be looking for this to be released soon!
About CompanyCam
We built CompanyCam to take the guess work out of your daily work. In realtime, see what, where, and when projects are going on. Think of it like an organized news feed for your business and only your business.
