Prototyping: Using Browser Extensions
As a manager of User Experience Designers, one of my jobs is to encourage them to come up with experimentation methods for gaining the most amount of learning for the least amount of time and effort. Doing this keeps our iteration cycles lean allowing us to act on our learnings quickly. For this reason, coding is sometimes seen as a risk during early solution discovery, due to the assumption that it will result in increased iteration cycles. In most cases, I do agree, but the “to code or not code” conversation is much more nuanced than a simple yes or no. Like all things, “it depends”.
While I’ve used a variety of approaches to rapidly create code-based prototypes in my career, leveraging Chrome-based Browser Extensions has proven to be both effective and efficient in specific scenarios. In this post I will share a few examples of how and why I decided to use browser extension instead of a traditional prototype, hopefully adding one more tool to your tool chest.
Before I get ahead of myself, here is a quick introduction to what browser extensions are.
What is a Browser Extension?
It’s likely you already use browser extensions. These micro-applications typically have very specific jobs like storing highlights, clipping content to store in another service or sending quick messages to your favorite social network without having to go anywhere. These extensions are quite handy and can be found on Google’s Chrome Extension Store. Once loaded they show up on the top right corner of your Chrome Browser.
Below is an example of a color picker extension I use. Notice how the eyedropper is inside the browser.
While simple applications like this are the traditional use of browser extensions, being able to extend and override the code of any website, including your own, can be advantageous in many ways. Here are a couple of examples explaining how I’ve used browser extensions as a rapid prototype tool.
Example 1: Testing Notification Text
Several years ago we redesigned one of our applications, a homework system for college students. While the notion of offering our students a fresh new look sounded exciting, some individuals in the organization were very concerned about how students and instructors would react to an extremely noticeable change to the design during the semester. There was also some misalignment on the copy used we presented the change. This created a divide in the organization between those that felt the updates would be positive and should be made immediately and those that felt we should hold off until the following semester so we don’t create anxiety for both our students and instructors. Since both sides made compelling arguments we decided to run an experiment that would help us make a decision.
As I started designing the experiment, I began to question using traditional methods in order to learn how our customer was going to react. Showing “before” and “after” designs and asking them how they think about how they would react after they read a notification felt risky. In order to get a more genuine response I wanted them to experience the notification in the context of their own account, however, we did not have the time or resources to get that set up in our production environment.
To create a scenario that would result in more authentic responses from our participants I created a browser extension whose only job was to create the notification below and add it on top of any website that showed up in the browser.
Once it was working we invited participants of the study to our office. After some light warmup questions, I asked them to show me the homework system they used in class. Once they typed in the URL and hit return, my rigged notification popped up on the log-in screen, then I waited for any reaction. We spent a few minutes discussing how it made them feel.
In the end, the results of the studies showed that students are much more open to change than we initially expected, especially if the change is going to make their lives easier. There was, however, a certain point that change would create anxiety. For example, if the school decided to change their Learning Management System providers completely such as moving from Blackboard to Canvas, which happened to a student I interviewed, then they would have to relearn the entire system. Luckily our redesign was more of a facelift than a foundational reinvention. Students agreed that they expect incremental improvement in both user experience and functionality to be pushed out to them as the semester progresses.
Here is the code
Browser extensions use a combination of files to do their work: CSS to provide visual styling information, Javascript to provide functionality, and a JSON manifest file to tie the pieces together and specify when they run.
Since this is a simple application, I kept all the files live in the same folder.
Here is what those files look like, I’ve left a comment in the code to explain what is going on.
In this example, the manifest is set up to have the extension work across <all_urls>, which means every site that I go to will have this notification added to the top of it. You could specify specific domains if you would like by adding the URL inside of the quotes ( “matches”: [“http://*.nytimes.com/*"]). Learn more about the Manifest File Format on the Google Developer Website. The CSS is what is adding the “the look” of the notification, such as color and positioning. Lastly, the Javascript is creating the is programmatically creating elements that are being added on the website to build the notification UI. Below you will see what the code above would look like on Google.com.
Example 2: Inserting a “Button to Nowhere”
After running a handful of class tests, we received some feedback that students and instructors wanted their eBooks to be readily available from their homework system. Ebooks take on various roles in the student experience such as reading for understanding content (comprehension) and reading for reference as they complete another task such as writing an essay (handbook) or finding an answer for a homework problem. In the image below you will notice that navigation is limited to a back-button. While our users can locate and understand that button well, it has created some navigation oddness in some of our more complex tools that did not match expectations.
While it is completely possible to take a traditional approach by quickly creating a few screens in software such as Sketch or Figma, if we plan on creating an authentic task, the amount of screens and time required to create them increase substantially. To that end, most people would decide to select the Sketch and Invision route of interactive mocks with a less than ideal task. This is a perfectly fine approach that we all do when weighing the cost and benefit of our time invest, however, as mentioned earlier I’d want to spend the least amount of effort for the most amount of learning, so I like to push the boundaries and think of creative ways of getting closer to that ideal task scenario to get closer to an authentic response by the participant.
Spend the least amount of effort for the most amount of learning.
In this particular example, going with the traditional method would qualify for the “least amount of effort”, but I wanted to learn more, because I am stubborn like that. For example, how do they leverage the accessibility of an eBook in the variety of situations noted earlier?
Looking at the task, I’d needed to do 4 things in order to have the results I’d want:
- hide the top bar that has the back arrow
- recreate the menu in javascript and add it to the screen
- creating a breadcrumb in javascript and add it to the screen
- add a left margin to make space for the menu
Once the extension was completed, any time a person lands on an activity the extension would activate and make it look like the image below.
Here is the code
In the example below I’ve created an extension that inserts placeholder text into Amazon’s search box and also creates an additional link in their sub-nav named “Alex’s Super Secret Page”, creating a new menu link similar to the problem above.
Since I need to interact with existing elements on the page, I need to make sure that the page is loaded before the script launches. To do that, I need to add “run_at” value to “document_end”. That instructs the extension to push its code to the browser only after all the elements of the page have loaded. Now I could locate elements from the website in my javascript and do whatever I’d like with them.
The first thing we need to to do is gather the ID and Class names for any elements we’ll manipulate. To do this you will need to open up the Chrome Inspector using View>Developer>Inspect Elements. Look at the image below and locate the inspect button on the top left.
Once that is selected, you can hover over any element on the screen and you will see its associated markup get highlighted on your inspector. Then note the element's id and class names so that you can reference them from your code. Amazon’s search box has an id name of “twotabsearchtextbox”.
All we need to do now is use a few Javascript functions. I suggest you look these up to get a good handle on how to create HTML via Javascript. Below are a few highlights:
Create a variable that stores the location of the search box using querySelector.
let amazonSearch = document.querySelector("#twotabsearchtextbox");- https://www.w3schools.com/jsref/met_document_queryselector.asp
- https://www.w3schools.com/cssref/css_selectors.asp
To add placeholder text to the search box is even easier. All we need to do is add an attribute of placeholder to the search box.
amazonSearch.setAttribute("placeholder", "Add Placeholder text here");Done, that was easy! If you inspect the element once you test your code, it will look something like this.
Next, let's work on the more complex task of adding a menu item!
First, create elements and add them to the browser view using createElement and appendChild.
//store the name of parent that contains all the menu items
let menu = document.querySelector("#menu");//create a div ele and add some text into it
let menuItem = document.createElement("div");
menuItem.innerHTML = "Super Secret Page";
menu.appendChild(menuItem);
- https://www.w3schools.com/jsref/met_document_queryselector.asp
- https://www.w3schools.com/jsref/met_document_createelement.asp
- https://www.w3schools.com/jsref/prop_html_innerhtml.asp
- https://www.w3schools.com/jsref/met_node_appendchild.asp
Amazon has CSS that it uses to style their items. You will need to identify them with Inspector and us classList to insert them. Amazon gives those items a class name of nav-a.
//From above: create a div element
let menuItem = document.createElement("div");
menu.appendChild(menuItem);menu.classList.add("nav-a");
Here is the full code, which didn’t take much time to write at all, keeping to my “least amount of effort for most amount of learning” goal.
Additional Information
Loading the extension
When using an extension in a small scale test, you don’t need to submit it to the Google Browser Extension store. We can get our extension up and running in a few clicks. First go to the extension screen which could be found at chrome://extensions/ in the browser. That will take you to the screen below. All you need to do is turn on “Developer mode”, and then click on “Load unpacked”. That will ask you to select your folder and that is it. You are done!
Running the test
When running an in-person user-test there is no difference other than making sure the extension is loaded before the participant arrives. It gets a bit tricky when you’d like to run a remote test since the extension only works in a browser in which it has been installed. To get around this, we use a remote meeting tool that allows us to pass control of the facilitator’s screen to the participant, like Zoom.
Final Thoughts
Being a scrappy prototyper and not falling prey to “rinse and repeat” research habits that feel safe, will enable to truly maximize learning with little effort. Using tactics like browser extensions, may not be the answer 95% of the time, but when an experiment that falls in that 5% can make a sizable impact, you want to make sure you are setting up the best possible research method that capitalizes on learning. Like all things, there are no silver bullets.
You can take this style of thinking to the next level and run a similar experiment with real users on live products if you have an A/B Testing solution like https://www.optimizely.com/. There you are able to do pretty much everything I spoke about in this article, and run some pretty impressive A/B testing experiments.
If you are worried about not being a coder, you don’t have to be. The lightest touch of some basic CSS, and learning just a handful of JavaScript (most of which I’ve linked in this article) is enough to be dangerous and do 90% of the work I’ve described. Remember, one of the most important rules in prototyping is minimizing time to iteration, so no experiment should be complicated to create. If it is, you might want to think about some other creative way of testing that. Along with browser extension, at Macmillan Learning we’ve used concierge and wizard of oz experiments. Check out a co-worker's article about Wizard of Oz experiments.
