5 UX Tips for Designing a Chrome Extension
What are Chrome Extensions?
A Chrome extension is a small software program that is made up of HTML, CSS and JavaScript that modifies or enhances functionality within the Google Chrome browser. There is a centralized Chrome Web Store that allows you to browse and search for all publicly made Chrome extensions; similar to the App Store for IOS or Google Play for Android.
Why are Chrome Extensions useful?
In 2013, the Google Chrome browser consumed up to 53% of the world’s usage in web browsers. Now, in 2016, the Google based web browser is used amongst about 69% of the market and is steadily increasing. With a simple interface and its access to the World Wide Web; it can be an extremely handy platform to build a product on top of that leverages a large potential user base.
5 Basic Rules for Designing a Chrome Extension
Below are some simple rules to follow when designing a Chrome extension that interacts with sites or web applications on the web:
1. Understand the key use cases
Understand what the use cases are for both the existing site or application as well as your extension. Who are your target users? How do they use the current site or application? What pain points do they have and what problems are you trying to solve? Diving deep into these areas will allow you to understand the holistic experience of your users.
2. Content, Context & Timing.
When your goal for the extension is to be present at all times, or frequently alongside with a particular site or application, it’s important to decrease distractions by making the extension a more transparent part of the browsing experience. If the extension is only meant to be used infrequently or within a limited context, you may have more flexibility with how it is designed in order to draw attention to the extension itself. Remember that your goal is to optimize for the user’s workflow, not to draw all attention to your extension. Here’s an example of how we achieved this balance at SalesforceIQ:
- We implemented a way for users to show and hide our sidebar while in their Gmail inbox, allowing users to remain in control.
- We surfaced contact information for email recipients when hovering over their name; allowing for quickly surfacing relevant bits of information at the point in which it is needed.
3. Think outside of your own brand
Consider how to balance your own branding with the broader experience in which your extension appears. There is a fine line between being different and being too different. It is important to communicate to your users who you are and what your brand is all about, but you must play well with others. Here are some tips for building a brand that will mindful of working with others:
- Understand what norms, patterns, and design choices of the existing application or site. Is the extension applicable across the web , or with only certain sites?
- Build a consistent journey of messaging, colors, tone, UI & interactions to help clearly separate your extension from the existing site or application. Have a good understanding of the types of elements your extension will be interacting with or along-side of while designing these elements.
4. Performance cannot be sacrificed
We live in an age where speed is no longer a nice-to-have; it is a critical factor of the user experience. Users will notice a difference if your extension slows down their browsing experience, and that can easily cause them to uninstall your extension. Additionally, think through how other extensions and plugins may influence how users perceive the extension and how frequently they may want to use it.
5. Be Creative
There is a lot of flexibility and creativeness that can come with designing Chrome extensions. Below are some tips for boosting creativity:
- Browse existing Chrome extensions and see how they are creatively solving problems.
- Experience different services that act as complimentary services such as how Uber has integrated with Google Maps.
- Take advantage of Chrome browser patterns such as new window tabs, notifications, alerts, global access button, right-click actions, etc.
- Experiment with different ideas that you have, set goals, and measure what may be working better than others.
The SalesforceIQ Chrome Extension
Did you know that a salesperson can spend up to 28 hours a week answering emails? A typical workday for a sales rep can consist of actions entirely in their inbox. Rather than competing against Gmail and attempting to get our users to use an entirely different email experience, we worked with Gmail to create an inbox experience tailored to sales reps by building a Chrome Extension that sits next to Gmail inbox and provides contextual information about your sales contracts and deals.
We also learned how important it is to remain productive while managing your inbox. Alongside the compose window, we have a simple feature set that allows sales reps to remain productive and stay on top of their game.
Interested in designing fun and engaging experiences like this? We are hiring talented product designers to join our team! Shoot us an an email if you are interested at recruiting@salesforceiq.com
