Scrumptious, a social bookmarking/comments app I began building recently, has a bookmarklet.
The bookmarklet is added from the demo homepage.
It’s not the first time I’ve made a bookmarklet for a website, the first time being WebWait.
I found the Scrumptious edition more challenging though, for several reasons. This brief article outlines the challenges. Some I’ve solved to an extent, but all need further work.
Launch UI Challenge
The most obvious challenge is, how do you explain to users what they can do with a bookmarklet. Most users aren’t geeks and I suspect most people still haven’t heard of bookmarklets. Or what are sometimes called “favelets”, since IE users have favourites, not bookmarks, which further highlights the problem. Here, I’ve explained with some text, but it ideally needs a diagram and perhaps a link to a separate page with a more detailed explanation, alongside a video.
Overlay UI Challenge
The next obvious challenge is UI design of the comments overlay. We’re overlaying comments onto a page. One of the issues was using a z-index that’s higher than what’s on the site, hence my article on max z-index. Other questions too. How much transparency, if any? What kind of positioning and scrolling, and how wide should it be?
A bookmarklet is not the only place Scrumptious injects itself into the page. There’s also a Greasemonkey script under construction, and I’ve experimented with JetPack. I’ll also be building support for a site toolbar, so that an intranet operator could let you click on a “comments” link and inject Scrumptious comments on the page (so that users don’t have to bother installing the bookmarklet, at least to comment on intranet sites). The bookmarklet script has to be flexible enough to cover these subtly different scenarios. For example, the Greasemonkey script wants the comments overlay to be closed initially with a small button to launch it; the bookmarklet wants it to be open initially; and the Jetpack and toolbar want it to be off altogether until its explicitly launched.