1

I've got a web app that involves users inputting a title of a Wikipedia page. It needs to work as an interface on both desktop and mobile. Right now, the interface looks like:

this

It's got a single input. I'd like to adapt this interface to allow for a variable number of multiple inputs. I think I can accomplish this either by:

  1. Having users input a comma-separated list of page names.
  2. Using an interface like this:

which allows users to press the + button to add another input field.

I'm convinced that the second approach would provide a much better user experience.

Now I'm faced with a tough decision: how should I visually present the multiple inputs? Right now, the controls fit in a small top bar. I don't think it's a good idea to increase the size of this.

The possible solutions I see are:

  1. Display the multiple text fields side by side. Probably won't fit on most small mobile screens.
  2. Display the multiple text fields vertically, and stretch the bar. This would make the top bar take up a significant amount of space.
  3. Display only one text field, but try to fit controls for switching between them

  1. Display the multiple text fields vertically, but keep the bar the same size. This would mean that the user could scroll this portion of the webpage.

I think I'm leaning towards the last option, rather than adding more buttons or stretching the bar. But which of these approaches yields the best user experience? Is the best solution something I haven't thought of?

Improve this question
1
  • 1
    I don't know how legalities work in the UX world (I just signed up to this SE out of curiosity) but you might check how Gmail deals with email addresses. As I recall, once it's parsed them (which it does semi-on-the-fly, IIRR), it puts them in a coloured block with an X, which makes it easy to tell where each starts and end. (It also replaces the address with the name from your Contacts, but that's beside the point.) It's kind of like the tags etc. in RememberTheMilk. I find it elegant and functional.
    – Mathieu K.
    Commented Mar 20, 2016 at 7:38

3 Answers 3

Reset to default
1

I would not try to place as many inputs as items. It would consume a lot of space, and it may not be so useful, considering that the user would care about one Wikipedia page at a time.

Why not considering this alternative solution?

enter image description here

Improve this answer
1

How do you know users need this? "I'd like to adapt this interface to allow for a variable number of multiple inputs."

The problem you are trying to solve is interesting and complex, but I wanted to know what user scenario people are trying to solve that makes the current UI incomplete?

If users need to search multiple entries at a time, they are familiar with just typing their words in, commas are fairly known as well. Google has made it pretty easy. I could see in this case that it becomes complicated because the search term actually has to map to an actual Wikipedia article. I honestly can't even think of a case where I'd want this, so I just want to ask the question, because it might be saving you a lot of trouble.

Most multi-search cases create tabs that a user can switch between or the hub and spoke model, where a user knows to back navigate to get back to the other search options (Google). So if you really need it, then that would be the best and most familiar model.

Improve this answer
1
  • The purpose is not to have multiple separate search entries, but rather to compare multiple entries at the same time. It was requested as a feature here towards the end of that post.
    – Luke Taylor
    Commented Mar 20, 2016 at 13:00
0

The solution I ended up going with was in fact a comma-separated list. However, I built a custom input to make entering comma-separated lists much more intuitive. It gives visual feedback to a user entering multiple items in a way similar to StackExchange's tag input

Input

It works basically the same way as StackExchange's. This approach makes it clear to the user that their multiple inputs are being registered.

Improve this answer

Your Answer

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

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