1

I am a bit struggling (for several hours now) on how to design the following scenario for a mobile application:


  • A user is inside a creation process.

  • To create the element he has to select different items the element consists of.

  • Those item are either items that he himself has stored in his application (local),
  • or items from the community that are suggested based on the most used community items for the element he creates.

Of course it should be possible to search all the items (local & community) using a search where the user can enter text. Logically local and community items are the same and represent the same data model. The difference in showing the item is that for the community items something like "used by 200 people" will be visible.


Should I use tabs (local items, community items) and show a search bar in the top app bar with a checkable items list?
Should I use 2 subheaders "local" and "community" and each a "more" button that will expand the content?
Should I possibly instead use an empty list and a floating action button to add items that reveals two sub buttons "from local" and "from community"?
Or possibly even use expandable cards (one for community, one for local)? Possibly even a combination of a fab + a new view with tabs?
How would you handle such a situation?


Examples:
Example 1 Example 2 Example 3 Example 4

Somehow on the method with tabs & subheaders I miss the possibility to somewhere tell the user to "add items" like in the method with the fab (or better said, I do not know where to place it).

The application is for android and follows the material design guidelines.

Thank you already for your help!


UPDATE

To answer some questions:

  • The local and community items have to be separatd as the user might favor the local ones over the community ones
  • The list of local items will be around 50 items
  • The list of community items could potentially grow to infinite
  • I need to show a list of the items in the first place as those are going to be suggestions dependending on certain preconditions (so in the first place the user might not even know what items to select, thas why the suggestions are needed).
  • "The local and community items have to be seperated as the user might favor the local ones over the community ones" Is there a situation users might want to see both local and community items in the search results? Or is it always OR local OR community? – Luchadora Sep 9 '16 at 8:04
0

As allways, I tend to start my answers by asking additional questions. So also this time :-)

  1. Why do you want / need to separate your own items from the ones created by the community?
  2. How many Items are there to select? I.e. do you need a seach box or could you just do with a list to select from?
  3. Exactly what kind of items is the user going to use? Is a text search possible or is there some other (better) way to find the desired item?

Let's stick to that assumption that there are thousands of items to select from, that a separation is needed and each item has a descriptive name.

Suggestion:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This is a very simple UI and the user will understand what to do and how to do it. Just be sure to have one of the check boxes pre-checked when launching that UI. Also, remember what checkboxes were checked in the last search and check those same check boxes the next time you show this screen.

UPDATE

Here is a new suggestion based on the update of the original post:

mockup

download bmml source

There is no need to show a result page. When the user makes a search, the list below the search field will be updated instantly.

Another thought: Perhaps you do not need a search button. instead the search box will just act as a filter. When the user starts typing into the search/filter box the list below the tabs is updated instantly. When the user edits the text in that box, the list is again updated.

  • Thank you for your answer. I answered your questions in the original post. As mentioned there I already need to show a list of suggested items in the first place. It is possible that the user does not know what items to select in the first place and what to search. – JDC Sep 9 '16 at 7:28
  • Perfect, I'll update my anser with that additional information in mind. – Ilias Bennani Sep 9 '16 at 7:31
  • So basically you suggest the approach with the tabs I mentioned in my post? The only thing I am missing is that due to the fact that this selection of items is step 2 of a multi-step creation process, I somehow would like to show a label or something to tell the user what to do ("Select items"), but I do not find the correct spot (see picture of the mock above, in the bottom you see the stepper, in the top the title). – JDC Sep 9 '16 at 7:54
  • Yepp, basically I do agree with your first example, adding the search bar at the top since this is (probably) a very uses feature. If the item is not in the list, I will make a search. I do not think you need a pagination in the bottom of each page. Let the user scroll instead. Most users are used to scroll a lot on mobile devices. Let me update the post with the result screen. – Ilias Bennani Sep 9 '16 at 8:01

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.