Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm creating a dialog (modal) that asks the user to enter multiple email addresses to which an item on the website is shared to. The dialog is about 530x500 pixels big.

Right now I'm asking the user to enter an email address in a textfield and hit enter. Upon hitting enter, the email address appears as a box in a vertical stack of boxes below the text field. Each box has a remove link so the user can remove any email address they've entered. This basically looks like a vertical version of the usual 'tag' boxes used in Hotmail or Yahoo's webmail's to/cc/bcc text inputs.

Any better way of doing this? Especially taking into account common copy-paste scenarios, or integration with third-party address book services.

share|improve this question
1  
Are you able to provide an example of how this is currently set up? You should be able to add a simple Balsamiq diagram using the smiley-face icon in the question editor. –  JonW Mar 7 '12 at 11:53
2  
What you are doing is fine as far as i know !! Or you can just ask the users to add comma and add emails .. This is been used for a long time so people are used to it –  Pratheep ch Mar 7 '12 at 12:01

3 Answers 3

up vote 3 down vote accepted

The description you've given sounds just fine to me - the only change I'd make would be to allow the user to enter multiple comma (,) or semi-colon (;) separated email addresses at once, with your code separating/parsing them into distinct addresses when they user presses enter.

This takes care of the copy/paste scenario - the key trap is not to be too sensitive when parsing the addresses, as there is wide variety in "valid" addresses.

[Example: I've had an e-commerce site refuse my user registration because my email address contained a period (.)! I took my business elsewhere.]

share|improve this answer

You could provide a textarea to paste in clipboard information or comma separated email adresses. Upon pressing enter or on change to this textarea you could parse the content and list the email adresses in the stacked boxes like you already do. This way the user can remove unwanted adresses or add others

share|improve this answer

If you fancy a little javascript you could setup a simple "observer" textarea (or texfield);

1) you user starts typing some email address, and your js checks each typing;

2) once your script recognizes a potential end-of-address char (eg, space, comma, colon) parses the field's content

3.a) if it is a valid email, adds it to a (visible) list and clears the input field content

3.b) if it isn't a valid email address some error feedback appears somewhere

4) [repeat from 1) ]

note 1: consider that each built-up list element (the single added addresses) should have a simple removal icon;

note 2: you can store each correct address in some hidden field (easiest for removal).

share|improve this answer
2  
Such automation will be confusing to users: they won't understand right away why the text has disappeared. Also, since this is UX forum not SO, we prefer to see solutions that explain user behavior rather than just code. –  dnbrv Mar 7 '12 at 16:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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