Crafting successful tests is as much about clever ideation as it is about skillful execution. These seven Chrome Extensions should be in every optimization craftsperson’s toolbox. They help simplify the technical tasks, expedite the mundane tasks and optimize the whole creation process. Add them to your toolbox and work smarter, not harder!
Systematize: UX Check
This brand new UX Chrome Extension is so comprehensive, you can literally build the entire ideation phase of your testing strategy around it. Its benefits are three-fold: it provides a framework for UX evaluation, it records screenshot/annotation combinations for every element that you may foreseeably test and it packages it into a nice neat .docx file for clean documentation. Learn more about it from the app’s creator.
Pro Tip: Save the exported .docx files to your Google Drive Folder and keep all your testing and optimization documentation in the same, easily accessible and shareble place.
Collabogreement: Awesome Screenshot & Screencastify
Testing and optimization is collaborative work and communication is key. Before you launch a test, you will likely have to get the approval of other site stakeholders. Screenshots for static elements and screencast for interactive elements offer a quick way to point out optimization opportunities and share mockups. Both of these extensions integrate with and send files directly to Google Drive which, chances are, you are already using to manage your testing plan and schedule.
Cookie Info: Edit this Cookie
Cookies are what your browser uses to tell your testing platform what test, variation or segment a given visitor is in. Edit this Cookie allows you to easily set the specific values and expiration dates for cookies for specific sites or clear all the cookies for a site at once.
Pro Tip: Sometimes clearing your cookie is not the best way to go. Use URL parameters to force experiment variations.
Color Picker: ColorZilla
If you are testing the effect of color on your site, don’t let your test fail because your color choices are inconsistent with your site’s branding. Whether you want to draw attention to or away from an element give your test its best chance of winning and your users the best comprehensive experience with consistent color.
Pro Tip: Maybe you can’t find the perfect color on the page or you need a good contrasting color to test. Use paletton.com to find complementary or contrasting colors.
Measure Twice, Cut Once: Page Ruler
How big does your new image have to be? How much space do you have for text? Exactly how far should you move that element? What screen widths should your test run on? Page Ruler allows you to measure everything on your page in pixels. Don’t guess and check. Measure twice and edit once.
Pro Tip: Use the tool’s “Element Mode” to automatically select elements to measure. This provides a good reference point for resizing elements.
Be Selective: jQuery Selector Inspector
Optimizely uses jQuery to make transformations to experiment pages. If you are new to jQuery, this tool can help you define the CSS/jQuery selectors that you need for selecting elements to transform or track clicks for goals.
Pro Tool: Are you spec’ing a site that doesn’t currently have jQuery on it? Use the following code to make a bookmarklet to add jQuery to any page. Just create bookmark a new bookmakr and paste in the following code where the URL would go. Go to the page and click the bookmark. Boom! all the jQuery goodness at your fingertips.
Fixing Breakpoints: Responsive Inspector
Its the 8th year of the mobile web and there are more screens to think about than ever. The truth is, in order to create effective tests and give your good ideas the best chance of winning, you have to create text experiences that are both flawless and consistent across multiple devices. This tool tells you what breakpoint you need to be aware of in creating a test.
Pro Tip: Consistency is key. Optimizely allows you the capability to unify a user’s experience across devices using a user’s unique id.
Double Bonus: Conversion.com’s Optimizely Chrome Extension
This is pretty much exactly what I mentioned above. This Chrome Extension let’s you easily view information about current tests and switch between test variations. There are also a couple especially convenient features: a link to the editor URL for the experiment and the QR code generator for easy viewing on mobile. Check it out, it will save you a lot of time fiddling with URL query strings.
Bonus: Optimizely Extension???
More access to experiment info on the page you are on. I have seen it with my own eyes. I hear its only a matter of time until it gets released. Get excited!