Greasemonkey as a Tool for Interaction Design

Greasemonkey is a Firefox browser add-on (also available for Safari and included natively in Chrome) that loads JavaScript into a web page at runtime, allowing a viewer to inject code into a page via a userscript. The userscript is loaded after the page content is rendered, so the code can interact with the HTML markup in the page. You can interact with existing elements; add, rearrange or remove elements; change visual styles; and even pull in content from another page.

The practical applications of this are that you can make lightweight changes to existing pages to easily test real interactions, without a lot of commitment. Demonstrating a working prototype in a live environment can also make a powerful impression on stakeholders.

Greasemonkey as a Prototyping Tool

While not efficient for prototyping large, multi-page features, Greasemonkey can be a useful tool for quickly prototyping functional changes to an existing web page:

  • It’s possible to demonstrate rich functionality. Almost anything that can be done in JavaScript can be done using Greasemonkey, including keyboard shortcuts, transitions, or rewriting the entire DOM.
  • Because the page markup is already there you don’t have to reproduce it, which saves time.
  • Even if you don’t have access to the page’s source code, or if the code’s already in production and can’t easily be changed, you can still modify the experience.
  • Because you can test on live data on the site, potentially with a user’s own data and settings, you can get higher quality user feedback — though I wouldn’t test potentially destructive functionality on user data!
  • You can leave the script in place over several days, to see if issues surface with repeated use.

Of course, there are disadvantages to Greasemonkey as well:

  • Greasemonkey userscripts only work in Chrome and Firefox (and, with patience, Safari), which limits the user base.
  • Users must manually install the userscript (and, if they are using Firefox or Safari, the Greasemonkey add-on), which makes it more difficult to distribute broadly.
  • If you make updates, users have to update manually each time, which makes iterative testing a pain.
  • Since userscripts are loaded after the rest of the page content and scripts, there may be a delay before visual style changes from your userscript appear on the page.
  • If the page loads content asynchronously using Ajax, it’s hard to determine when the content is completely loaded, so race conflicts can occur.
  • If you rely on existing markup in the page, changes to that markup may break your userscript.
  • By the time you’re thinking about using Greasemonkey, your development team has already written a lot of code.

Case Study: Setup Enhancer for Salesforce

Navigation in the setup area of Salesforce is driven through a tree menu with several levels of links. The user experience team identified several changes that we felt would make navigation more efficient and make it easier for less-experienced or occasional users to find things. Using Greasemonkey, I created the Setup Enhancer for Salesforce userscript to insert the following elements into the page:

  • links to quickly expand/collapse all branches in the tree so nodes could be visually scanned
  • a “quick find” text field to filter visible nodes by keystroke and highlighted the found text

A portion of the setup tree, filtered by "Camp"

Initially I distributed the script to a handful of coworkers. Issues with the filtering quickly became obvious, so I tweaked it. The script started getting emailed around internally and several people asked if they could distribute it outside the company, so I got permission to release it on userscripts.org.

Customer adoption of Setup Enhancer spread almost entirely through Twitter and blogs. Although we were unable to observe users interacting with the tool we had plenty of informal positive feedback via social media. The high number of installs demonstrated the functionality’s value, and Salesforce released it natively to all users in the Summer ’11 release.

Case Study: “Find Object” in the Schema Builder

The Schema Builder is a recent tool that makes it easier for people who customize Salesforce to view and edit their objects, fields and relationships. Our first rounds of usability testing were done using an interactive prototype built using static HTML and JavaScript, which made iterative changes easy. But when we tested how users interacted with large numbers of objects we used a developer build of Schema Builder, where we couldn’t change the code on the fly.

Screenshot showing a left pane with a list of objects and right pane with visualization of objects

One thing that we discovered was that when users worked with a large number of objects, it was difficult to find the objects they cared about. The overview map in the bottom right corner of the window represents all of the objects in the canvas, and hovering over a rectangle shows the object name. But forcing a user to hover over 200 objects to find the one they want is not a great user experience. When asked to find a specific object, most of our participants gave up before they found it.

One of the testing methods we use at Salesforce is the RITE method (Rapid Iterative Testing and Evaluation). We test over two days with a day off between to incorporate findings from the first day. For this round we couldn’t change the development code. So I wrote a Greasemonkey script to add a “spotlight” icon to each of the object names in the left pane, that appeared on hover.

Hovering over the object name in the left pane shows a magnifying glass icon and hover text to FInd Object

Clicking on the magnifying glass icon moved the canvas so that the desired object was centered in the page. All of our participants on the second day of testing easily found this and the object we asked them to locate. Greasemonkey made it easy to make changes that worked in production so we could respond quickly to test feedback and prioritize adding the “Find Object” functionality into the next development sprint.

Greasemonkey as a Research Tool

The Setup Enhancer userscript had an unexpected side effect. Salesforce has an active developer community, many of whose members were early Setup Enhancer adopters. Some of these developers began to write and share their own customizations using Greasemonkey and Chrome’s extension capabilities, and dozens of userscripts and Chrome add-ons have since become available to add functionality or modify the Salesforce UI.

User customizations demonstrate pain points that your customers are trying to fix on their own. Use userscripts.org and the Chrome Web Store as tools to help understand where your UI is falling short.

Additional Resources

Kent Brewster of Netflix gave a presentation at BayCHI about rapid prototyping using Greasemonkey: Stone Knives, Bear Skins and Greasemonkey. His web site has additional notes from the presentation.

Aza Raskin has also explored this topic in his post, Rapid Prototyping with Greasemonkey.

March 15, 2012 · Tags:


No Comments »

RSS feed for comments on this post. TrackBack URL

Leave a Reply