8

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

Improve this question
3
  • 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, 2012 at 12:05
  • I see you've changed accepted answer. What changed your mind?
    – dnbrv
    Jul 30, 2012 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, 2012 at 23:39

2 Answers 2

Reset to default
5

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

Improve this answer
2
  • 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, 2012 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, 2012 at 21:26
7

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.

Improve this answer
4
  • 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, 2012 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, 2012 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, 2012 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, 2012 at 23:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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