6

I'm having a bit a "UI designer's block" with a personal extension I need to build.

I'm currently using Better Bookmark, an incredibly simple Chrome extension that gives me a query-filtered Spotlight-style popup box of folder names. Here's the extension screenshot from the Chrome Web Store:

Screenshot of Better Bookmark

It's simple, but incredibly effective, especially if you want to keep to the keyboard. It's great.

But it only does one folder. Chrome's Bookmark API has no internal limitation on duplicating one bookmark into multiple folders, so I want to make a new extension (using a friendlier/faster search algorithm) to bookmark to however many folders I specify. (I prefer this method over the tagging systems already out there because the tags are extension-local - uninstall the extension, byebye tags; also, not all extensions sync properly.)

The part I'm utterly and completely stuck on is how to do the UI.

Where do I put the textbox? Do I keep the items in the textbox, or should I "collect" items somewhere as I hit eg the Space key (allowing me to clear the textbox and home the cursor)? If yes, where do I show the items that I've "collected" as I type, in such a way that I only need a minimum of keystrokes to get at them to delete errors?

Some random thoughts:

  • I can't use Left/Right, I need those for the textbox. So, horizontal navigation is out.

  • If I keep all the folders as a single string in the textbox, I slowly move rightwards across the screen as I type, so the point where the list entries line up and my editing reference drifts; it's no longer directly in line. Also, I potentially create ambiguity issues if I accidentally hit Enter on a partial entry.

  • I could put collected folders at the top, the textbox maybe 2/5 of the way down, then the list in the remainder, but I can't think of an intuitive single keystroke to jump into the list of collected items; I can only think of UpUpUpUpUpUpUp to arrow up the list of selections and into the collected list - and then I need to go DownDownDownDownDown once I'm done.

  • I thought of putting the collected items at the bottom, but this feels somehow... wrong. I'm not sure why.

There are probably a few things I haven't thought of, but this is what I remember of my mental notes thus far (I've been pondering about this for a couple days, finally decided help would be a good idea :P).

  • Is this to search within folders? Why not show the full hierarchy/contents and allow filtering on everything? Check out this dropdown I created here with categories and filtering: codepen.io/FritzAPI/pen/JJgZyZ – bfritz Aug 28 '17 at 17:36
  • That's a very useful idea, and one that I'll probably add to my implementation (I still haven't solved the original idea, hilariously). Chrome extension popups are so slow, so I'm thinking of editing the HTML of the webpage to add a full-width bar overlay to the top of the page. That gives me a lot of space to experiment with. – i336_ Aug 29 '17 at 2:46
  • This is a very big todo, as I currently have to dedicate whole days just to bookmarking and closing dozens of tabs at a time, as Better Bookmark takes 3-10+ seconds to open - for each folder I want to add my item to (!!!). However, it's not yet done because I'm also struggling with how to intelligently filter input text on 200+ folders, as I type, on a fairly old PC. A C implementation of levenshtein distance is instantaneous; the fastest/most optimized JS implementation I could find+come up with, not so much. – i336_ Aug 29 '17 at 2:50
  • (Better Bookmark currently uses a very fast but very very naive "fuzzy filtering" algorithm that very very very frequently gets the folder name completely wrong, to the extent that, if I type the exact folder name, I still have to navigate 10 items down into the list to select the folder name I typed. Very backward UI.) – i336_ Aug 29 '17 at 2:54
1

Tim Schlechter solved the "tag input UX problem" pretty good with his Bootstrap Tags Input Project.
It collects the tags in the input box (not actually but it looks like that). It allows efficient usage with the keyboard. Check it out!

It works like that: You have a div with the tags and a text input inside.

If the text input is empty you can:

  • move it with the arrow keys
  • remove the tag before it with backspace
  • remove the tag after it with delete

There are only two drawbacks of his implementation:

  1. You can't click between two tags to edit there.
  2. You can't move tags.

 

The thing is that this isn't as compact as the popover on your screen but it should give you an idea.

  • This is a very, very interesting exploration of a "Stack Exchange-style tags" system, and thanks for the pointer. There are definitely some pros to this approach that bear thinking about, and being able to use a working prototype has given me a few ideas, despite the fact I was thinking about going for a "single-column list" idea. Hrm, I wonder what I'll end up doing now... – i336_ Sep 7 '15 at 8:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.