What am I working on now?

Process & Documentation

1. robertaccettura 06.02.07 / 10pm

   I think it would be more intuitive if “tags” were 1 word and spaces delimited. Fine grain control (”laptop computer” vs “laptop” “computer” vs, “laptop” vs “computer”), and easier to type. Literally stream of thought. Tab also.
2. William Swanson 06.03.07 / 7am

   The whole button/textbox thing is weird and confusing. Why can’t this interface be something simple, like a single text box that lets you enter a list of freeform space-separated tags? I guess what I’m asking is, what are the design goals of this interface, and is there a way to meet those goals with something simpler?
3. funkcmonk 06.03.07 / 8am

   Hi William. I am not the one who created the original mockups, but I think that the goal of this interface design is to give a more tangible and visual appearance to the tags (e.g, a new tag from textbox will gain a button appearance, and the user can also click on that button to edit the tag, and etc…). That’s why the mockup included button-textbox interface rather than the simple textbox interface you suggested.
   I mentioned it in the earlier post, but here’s the link to the original mockup done by Alex Faaborg. http://wiki.mozilla.org/Places:User_Interface/Tagging_a_Page
   I hope that helped answer at least some parts of your questions.
4. William Swanson 06.03.07 / 8pm

   I see. The original mockup does make more sense visually that what you have here. Even so, I think it feels like a gimmick. To really work well, the control would still have to work like an ordinary textbox, with the tag graphics acting simply as a visual decoration.

   There are some things you can do in a textbox that you can’t do in your interface:

   * It should be possible to backspace from one tag into another.
   * It should be possible to highlight multiple tags for copy/paste/deleting, etc.
   * If I paste some comma-separated text into your mockup’s edit box, it does not automatically parse the input as a series of tags. For example, if I enter “some, text, tags” in notepad and paste it into your edit box, I get one tag with the value “some, text, tags.” A regular textbox would parse this input as a series of tags, regardless of whether it was typed, pasted, or entered by some other means.

   Is it possible to create a rich-edit box in XUL? It seems like that would be the way to go, with an oninput handler that parses the input and replaces each comma-separated term with a css-formatted to provide the tag visuals. That way, you get the funky visuals while still maintaining the user interaction of an ordinary textbox.

   PS. Sorry for these long, highly opinionated posts. You asked for feedback, you got it!
5. William Swanson 06.03.07 / 8pm

   Oops. The blog ate my HTML. 4th paragraph should read “css-formatted span element”
6. DigDug 06.04.07 / 1pm

   There’s some error in editing already entered tags where the buttons reorder themselves. Is that known? Duplicate tags aren’t found either.

   Maybe another mockup to make would be one where already entered tags appear below the textbox. You type one in and hit comma, tab, or enter and they appear below. You click on one and the text appears in the textbox for editing.

   Deleting tags needs some UI in both models too (an x button on the tag, or at least a right click menu with some options). I think just deleting the text deletes the tag, but that’s not really clear at all.
7. funkcmonk 06.04.07 / 9pm

   Hi DigDug. Thanks for the feedback… always greatly appreciated =].

   As a response,
   1. Yes, I am aware of the the reordering and duplicate tags. The prototype currently is mostly focusing on the textinput to button (vice-versa) interaction. So it’s not as robust as a fully working implementation.

   2. Your suggestion for the mockup sounds good. I am not sure if you checked it out, but there’s something similar in the tagging mockup. http://wiki.mozilla.org/Places:User_Interface/Tagging_a_Page

   Thanks again for the feedback and the interest.

Copyright 2008. Sungjoon Steve Won

Entries RSS Comments RSS