Choosing Multiple List Items While Allowing User Generated Content

Question

I have a mobile app that allows a user to select multiple items e.g. item a, b, c and so forth and have this items displayed in his profile. However, the mobile app should be flexible enough so that it would allow the user to create his own item e.g item e,f,g which are not included in the in-apps database and have this added into his profile.

As of the moment, the way I designed is as follows. User is presented with his item list screen

When he clicks the + button he will be redirected to the item select screen. Where he can select multiple items or use the search box to search for a specific item.

Screen 3 appears if the item he entered in the search box is not included in the app and would have the option to add it to the User Item Screen. On-click to Add to My List will redirect user back to the User Item Screen and have item XYZ included in his item list.

The problem here is if the user has selected multiple items already and then suddenly types an item that is not part of the database. On click to add to my list only that item that is not part of the database is added.

I have two solutions for this problem 1. Have the item added to the item list screen and placed on top of the list 2. On click of add to my list will place the item along with other items the user has selected to the User item screen

Kindly comment on the proposed flow of the application and recommend other alternatives if possible. Thanks!

Answer 1

The main problem seems to be that you have a single area to display both selected items and items that are a match for your current search filter. If the user can change the text search to hide items they just selected, this will be confusing (as well as being confusing when they vanish entirely in your last screen mockup). You need to display selected items in one area, and search filter related stuff in another. Since you have limited screen space for this use case, you could add selected items to a sliding panel at the bottom so they are available if required, but not wasting screen space while the user is focused on searching.

Once you split selections and search, the "add to my list" option in your 3rd screen mockup makes more sense.

I would also avoid using all caps in your titles / buttons, as this is harder for users to scan.