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:
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:
- Having users input a comma-separated list of page names.
- 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:
- Display the multiple text fields side by side. Probably won't fit on most small mobile screens.
- Display the multiple text fields vertically, and stretch the bar. This would make the top bar take up a significant amount of space.
- Display only one text field, but try to fit controls for switching between them
- 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?