Designing the UI for a Firefox Extension

Has anyone ever sent you a link to a big directory of photos? “Hi, I took 9,000 pictures on my recent trip. They’re each 5MB, and there might be a good one of you in there somewhere. Check it out!!!”

You click on the name of an image. Then you click back to the directory. Click. Back. This process is hella inconvenient! But I’ve done it often enough that I think I deserves a Special Tool, something Better. So I wrote a Firefox Extension! It auto-increments the URL of a photo (DSC_0001.JPG => DSC_0002.JPG) with just a click, so you can effectively just scroll through a huge pile of images very quickly and efficiently.

That’s all jolly good, and was kind of fun to make, until I started trying to figure out how to change the UI from what I’d made just-for-testing-it-out, to something that anyone else could use. I’m actually kind of stumped trying to figure out what sort of controls this should have, so I’m polling for your thoughts: How should I arrange things (buttons? clicks? icons? arrows?) that would make sense for this?

If you just want to try it out, you can see what I have so far:



Filed under Project Updates

9 responses to “Designing the UI for a Firefox Extension

  1. Button in the address bar? *spreads hands*

    Whatever you end up going with, it’d be brilliant if it highlighted the part of the URL it’s incrementing, in case it guesses wrong or the site has a weird numbering scheme.

    (This will be brilliant for backreading webcomics without ever moving the mouse.)

    • boranj

      I really wanted to put buttons in the address bar (like, right in there, with the URL and the RSS icon), but it turns out the address bar is super un-hackable because they don’t want anyone inserting a fake URL, and like, scamming people.

      I really like the suggestion to highlight the increment update, and to make it useable for comix. Cool!

  2. skye

    One of my friends actually used bookmarklets to implement this. He put them in the bookmark tray of his browser, which was pretty handy I thought (it’s near the built-in browser controls at least).

    Since you’re using an extension, you could create shortcut keys (maybe make it so you explicitly turn it on and off, so you can use the arrow keys or something else handy w/o getting in the way when it’s not needed).

    • boranj

      yeah, looks like key commands FTW. I like the bookmarklets solution! Can I check that out somewhere?

      currently this only works when the URL ends in “.jpg”, so no worry about taking over someone’s arrow keys at the wrong time. I had thought a bit about avoiding keybinding-theft.

  3. Use emacs keybindings. Sure, most of them are already taken by normal functions like copy/paste, but c’mon, who hasn’t installed Firemacs anyway?

    Seriously though, I would go for a keyboard interface instead of a button one. Nothing more annoying than trying to read through two years’ worth of webcomics during finals week, and having to hunt down the stupid ‘next’ arrow every time.

    • boranj

      I can’t believe your actual suggestion is to use emacs keybindings. You know Richard Stallman has carpal tunnel!?? I’ll file this with suggestions like “use vulcan nerve pinches” or “pain”.

      Editor wars aside :), I’m def. running in favor of a keyboard interface — thanks!

  4. paul.j

    I also vote for a keyboard interface… Perhaps throw a few oddball key functions… Space for a random image or something asinine “p” for the next prime numbered image in base 30 :p

  5. I’ve wanted something like this for a long time. Howabout an option to view the directory with thumbnails? a lot (not sure how common) of jpgs have a thumbnail in the header, so it wouldn’t always require reading the whole file.

  6. jack

    very nice info…let me add my 2 cents to this blog by sharing a really good resource of firefox add-ons to save online privacy. look

    they are sharing a nice set of addons.