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:
- 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
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
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.
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.
Aza Raskin has also explored this topic in his post, Rapid Prototyping with Greasemonkey.
March 15, 2012 · Tags: user experience