4

I have a widget which is composed of 1 text input, and 2 lists below it. By clicking the list title, "List 1" or "List 2", the user sets which list gets populated when they press enter.

List 1 is active

List 1 is the active list, meaning if the user presses Enter, List 1 will receive a new list item with the value of the input.

enter image description here

Here, List 2 is the active list.

To me, it's not obvious at first glance that this behavior exists. I did set cursor: pointer on each title, but the user has to actually mouse over them to see that. It just looks like one title has a background color and the other doesn't. How can I make the functionality more apparent?

4

Allow users to select the List first in the same element before they type and hit enter. Keep the mostly used category (based on research) as default: It appears as well organized and efficient approach.

enter image description here


It's similar to what Amazon does:

enter image description here

  • 3
    Good option too, although Amazon one is meant for search. I feel the input from the question looks like a search field rather than a text input to add elements. – Alvaro Mar 10 '17 at 9:07
  • @Alvaro Yes, the question had confused me too. It seems the OP wants to search for items available in selected list. – DPS Mar 10 '17 at 9:10
  • I like this answer, thanks. My input is an autocomplete/search. When they select an option, it gets added to the "active" list. – Eric Guan Mar 10 '17 at 16:13
3

give the input field directly in the list so that user can enter the value directly by clicking. and it is easily understandable at first look.

enter image description here

  • Exactly. Specially considering there is more than enough space for two inputs. – Alvaro Mar 10 '17 at 8:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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