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.

We would like users to specify certain pages an action can occur on. There are two conventional ways:

  1. textarea with some delimiter (whitespace, commas) between the urls. This is OK since usually the users are webmasters and proficient enough with computers.

  2. Separate Inputs: Plus button allows to add another input, Remove button is shown on every input on hover, clicking on the last and empty input creates another one. This is complicated and makes the user click or press tab to move between inputs.

Those are the general solutions I'm aware of. Any better ones?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this question
1  
Doing my best to empathise with your described user, I see the textarea as the most appropriate solution. Permit any whitespace as a delimiter so they could trivially paste a selection from Excel or any other source without thinking too hard. I think the other option (which forces a lot of clicking or other relatively complex navigation) isn't ideal (especially for a technical audience). –  Kit Grose Mar 1 '12 at 12:05
    
I see you've changed accepted answer. What changed your mind? –  dnbrv Jul 30 '12 at 23:27
    
Implementing it and testing with users. I think your answer is what should be but users are not trained enough for this. If a major site like facebook will implement this it might be a viable option, just like infinite scroll becoming a normal thing. –  CamelCamelCamel Jul 30 '12 at 23:39
add comment

2 Answers

up vote 5 down vote accepted

Using a free-form textarea input is risky because it requires either the user to follow the rules of delimiting data or having a versatile processing script capable of discerning URLs regardless of how they have been entered.

The multiple text inputs aren't a great idea either if their number is fixed. You should do something similar to what Google Docs Forms do:

gdocs form
You start with only 1 option but as you click on the last field a new line is added. A simpler implementation of this approach would be having just one text input and adding the content above it like in the mockup:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
Yes. That's what I tried to show in the mockup. Is this considered good? It still looks clunky and makes the user click a million times. –  CamelCamelCamel Feb 27 '12 at 21:22
1  
This is a perfectly fine pattern: it clearly delimits adding new data & removing old data. Free-form text areas are confusing because they allow users to do anything & directions about delimiters can be confusing. –  dnbrv Feb 27 '12 at 21:26
add comment

How about a mix of both your suggestions?

starting off with a single blank textarea input (or with a grayed out example URL)

User types URL, and upon tab or enter, that input becomes an entry (below the text area)

Once list entries exist, the trashcan icon appears on hover

In this setup, the user just types and tabs/returns (natural form filling actions) and only clicks when deleting.

share|improve this answer
    
That's a great suggestion! I'm a little concerned it will scare people, especially if there's no urls yet, but I guess with a little design magic it will look simpler. –  CamelCamelCamel Feb 28 '12 at 2:00
    
Far from most people know that Enter key can be used for form submission: good usability requires the Add button. –  dnbrv Feb 28 '12 at 15:49
    
I see your point, but it's a bit subjective, wouldn't you say? How many people are aware that enter submits an entry is exactly the type of thing that we can't really know, and so the designer should take his target users into account. Changing the suggestion text in the initial field to something like "Enter your URL and press return" would solve the issue just the same. –  dennislees Feb 28 '12 at 18:47
    
@dennislees: When you aren't sure about something, the best UX is to go with the lowest common denominator, i.e. least literate users who don't know that the Enter key submits the form. –  dnbrv Feb 29 '12 at 23:34
add comment

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.