Web browsers—despite their diversity of histories, intents, and development paradigms—largely mirror each other’s user interfaces with traditional drop-down menus (a.k.a “File” menus), either in the standard place or under a top/right corner button, an address/search bar just right of the main navigation button cluster, tabs either above or below it, and the view area below it. Aside from adding tabs and hiding the menu bar under a button, very little about the user interface has changed in well over a decade of web browsers, and that is unfortunate. Considering the enormous expansion of the web browser’s duties (desktop apps are starting to be replaced by online alternatives) and the time an average person uses them, filtering this experience through an architecture from fifteen years ago seems anachronistic.

Well, thanks to increasingly extensible and sophisticated browser core technologies, this situation can be easily remedied! I’ve developed a different user interface to complement my preferred hardware setup (both my work and home systems use tablet pointing devices instead of mice) and make controlling the browser less consciously involved. It’s built on open-source and freely extensible software, so in that spirit I am publishing everything needed to replicate (and, hopefully understand/enjoy) my setup here.

First, you need Google Chrome and a copy of the Mouse Stroke plug-in for it. Once that’s installed, open the plugin’s options page and click “Backup / Restore Settings.” In the textbox shown, paste the contents of my config export file and press the restore button. Close the backup/restore page and save your new settings in the plugin’s options page. Check out my reference images (I set one to be my home/new tab pages) and try some gestures out. As long as my server tolerates the load, you can set my personal reference page as your home; it’s designed to be flexible and fast for Chrome, but it’s still onle 5 minutes of unchecked markup to format the area around a raw picture.

Versions of quick reference images:

• Gesture Reference Image, White Text/Black Background
• Gesture Reference Image, Black Text/White Background
• Gesture Reference Image, Black Text/Transparent Background
• Gesture Reference Image, White Text/Transparent Background

TwoSeveral important notes:

• You may find the motions to be a little complex or long for a mouse (or, to a lesser degree, for a trackball). They were designed for tablets and touchscreens which entailed some trade-offs, being ergonomically disparate controls. (Switching the gestures settings to use the right button instead of the middle helps.)
• Google Chrome doesn’t let plug-ins run on “special” pages like the default new tab page or the plug-in download/settings pages; it’s a security issue so there’s no way around it for now.; it’s considered a security feature, so changing this behavior takes some work.
• Update 1 (2011/03/21): I discovered a work-around that lets the new tab page support plug-ins (including my gestures). Install the Empty New Tab Page plug-in for Chrome, go to the its install directory and edit the empty_ntp.html file to be a valid HTML file like mine with a redirect to some other URL. This preserves the empty URL bar/tab title but shows the new page and supports plug-ins!
• Update 2 (2011/04/09): My previous work-around is less effective in newer releases of Chrome and may soon stop working entirely. I’ve come up with a modified way to enable gestures in new tabs while keeping the address bar and tab titles empty for simplicity. The change is essentially to embed the reference webpage in an iframe rather than using a redirect on load. This also slightly reduces load times for the first few tab opens, which is a nice bonus. Applying the update is pretty trivial: Simply replace the file from the previous instructions with the new version that supports the recent Chrome changes. Let me know if you know a better solution or if mine gets broken again and I’ll be happy to update this post.

In the end, though, the intent is not to target all general pointing devices but rather for exploring potential controls on touchscreens/tablets that often neglected in other UI design processes.

Have fun and share your thoughts and experiences!