Business Card: bowen@dwelle.org
Smoothbeats.com
KALX Berkeley    WSUM radio

WFMU radio
You found me. Work-wise, I'm CEO of AdMonsters, a professional association and conference series that I founded in 1999, co-founder of PrefPass, and co-founder of CreditCovers. I do a bunch of other things as well - have a look around. I don't really write much here though, so don't look for too much of that...

I’ve been thinking about tagging UI as well, and this discussion about tags, commas, spaces, etc got me thinking a bit more today. For one, I tend to agree that spaces are bad delimiters, and I agree that “what’s wrong with commas, anyway?”. More importantly, however, is how to get users to understand how to use a delimiter. As others have noted, they do understand the comma as a delimiter for email addresses, but search engines have trained us to use spaces to seperate words in free text fields.

So, here’s an idea - what about a dynamic UI that provides some visual feedback as I type. If I type without any delimiters, each word is highlighted seperately (two "tags"). A visual cue (perhaps a comma fading in to the right of the text field?) reminds me of the delimiter. If the user then adds a comma -- -- then the highlighting changes to show that the words are treated as a phrase, or single "tag". Here's a crude illustration of how I'm thinking it would look:

tag ui

I’m sure someone can figure out how to do this sort of word-by-word highlighting inside an HTML form field…

2 Responses to “Tagging delimiters, UI”

  1. Ken Norton Says:

    Very interesting idea! I’d love to see it prototyped.

  2. Christian Heindel Says:

    I also like this idea, so I just played around a little bit.

    Different background colors (because off the seperator) seem to be impossible in an input field. Even with CSS3.

    I can make the input formular invisible to you and copy its content to a div, then highlighting it there. But it is very slow and the blinking cursor is missing. I even could emulate the cursor with an animated gif but you would still notice a difference…

    Maybe it works fast in Macromedia Flash… A flash expert here?

Leave a Reply

Twitter
Recent Posts
Another strike for AMEX - AMEX “Platinum” underwriting process = customer service disgrace - 12 years of mobile phones - AMEX Platinum, very impressive? - Bashed up another iPhone - iPhone 2.0.2 update - ditching Outlook, part 2 - iPhone 3G review/notes - how to hack iPhone text - Great writing? Monocle, check -
Bowen elsewhere online
recent Delicious links
Categories/Tags
*3 - *4 - *5 - *done - *perm - *todo - 3g - admonsters - adtech - advertising - ad_blocking - ajax - amazon - amex - anagram - apache - apa_2003 - arancello - art - article - audi - austria - autohotkey - baja - basta - berkeley - berlin - bigbox - birthday - biz - blackberry - blogging - blogs - bluetooth - bookmarklets - bowen - brett - browsers - bryant - bug - building - bulgaria - burningman - business - california - cars - cayucos - chicago - china - chris_walter - climbing - clothing - coffee - color - comcast - consulting - convergence - cool - covers - credit cards - creditcovers - croatia - css - cuba - culture - cydia - deadwood - del.icio.us - democracy - demographics - denver - des - design - desktop - disgrace - domains - donnas - dreams - duke - dvr - eastern_sierras - ebay - economics - edu - element - email - emerging - eng - environment - estonia - eur04 - europe - events - extensions - f250 - fabric8 - family - fashion - favorites - film - firefox - flickr - food - ford - forums - france - friendfeed - future - gags - garc - gcal - general - geo - germany - gizmos - gmail - google - greasemonkey - green - gretchen_kelley - hacking - hardware - history - honda - hopes - household - humor - hungary - ical - idiocy - images - imatch - inconsiderate - investing - iphone - italy - itunes - javascript - julie_chiapelone - kale - kitesurfing - ktm - landuse - language - ldap - leed - lifehacks - linkedin - linux - listmanagers - ljubljana - local - lola - loren - lycos_europe - mac - madison - madrid - makoto - management - maps - marine - markets - mega - megan - meredith - mexico - michigan - microsoft - minneapolis - misc - mobile - moblog - motorcycles - mozilla - music - mysql - nasty - nature - net - netflix - networking - news - new_orleans - new_york - nicklas - noises - nokia - now - now_playing - ny2004 - nyc - online - org - outlook - panama - paris - parties - people - performance - perl - personal - philiosophy - philosophy - photography - php - picasa - pim - pirates - places - planning - playa - politics - potrero - powerpoint - predictions - prism - privacy - programming - punk - questions - quicken - quotation - quotes - radio - rails - reading - realestate - recipes - recipies - reference - references - remote - rent - reporting - review - reviews - romania - rome - rss - rtm - sailing - samantha - san_diego - san_francisco - sayulita - science - scotland - scottsdale - search - semantics - semweb - serbia - shortcuts - sierras - signs - silvia - sk8 - slovenia - slurping - small_world - smartphone - socialsoftware - socialtextb - social_software - sofia - software - solar - space - spam - speed - sql - stockholm - surfing - surveys - sustainability - switzerland - syncml - system:unfiled - tacoda - tagging - tahoe_with_dclk - tech - technology - technorati - textiles - thinkpad - thunderbird - tivo - toga_2004_10 - transportation - travel - trieste - triumph - turkey - tv - ui - unbox - urbanism - urban_planning - us12 - usenet - vals - venice - vermont - vespa - virtual - visualization - voip - water - web - webdav - webtools - windows - wine - wink - wireless - wisconsinwmlwordpresswritingzacatecaszurich
Archives
Search
 
Meta
vpn service