1

for the app that I'm working on, a restaurant owner/manager has the option to customize their menu. The flow is that:

  1. The system suggests a list of items that can be served by a restaurant. This list will be large (say ~1000), so will be searchable. The manager can only pick as many items from this list.
  2. Each item of this list has: Name, Category, Tags and Image.
  3. When the manager clicks on one of these items, they need to enter some additional info about the item - like, Price, Discounts, and ServingHours(one or many); before the item gets added to their menu.
  4. Ideally the manager should be able to view their current menu as they update (add/remove items) it.

My Current Approach:

The UI that I've in mind is: having two sections side-by-side - the left one, for restaurant's current menu; and the left one to show list of available items. The right section has a saerch bar on top, and the items are shown as cards. On clicking an item from the right section, the manager is presented with a popup with a form to enter additional fields, after which they can click on a SAVE button to close the popup and add this item to their menu.

Problem:

The user has to scroll quite a bit on the right side, and the flow does not seem very fluent which in turn makes the experience feel tedious and unpleasant, especially when it needs to be repeated for more than a few times.

Any suggestions in UI/UX to make this experience smoother and pleasant ?

PS: This ui is for a web app to be used on a desktop and large screens, which means a typical desktop sized screen space is available.

Thanks.

enter image description here

Edit: Added a hand-drawn mockup for reference of current approach.

6
  • Can you show us some mock-ups of what you thought of so far. It is hard to get the idea from text alone. Mar 30, 2020 at 11:48
  • 1
    @locationunknown updated question with a hand-drawn mockup. Hope that helps.
    – MrClan
    Mar 30, 2020 at 12:09
  • Is the current menu on the left side really necessary? If the searched (or filtered) items show whether they are in the current menu or not, would that be sufficient?
    – jazZRo
    Mar 30, 2020 at 15:39
  • The right list is in itself too long, merging it with selected item list on left ... would cause even more scrolling and confusion; don't you think ?
    – MrClan
    Mar 30, 2020 at 16:47
  • 1
    @jazZRo I'm sorry, if I sounded otherwise but "out of the box" ideas is exactly what I'm looking for. The current approach- it works, but it feels like it can definitely be improved - especially the no. of clicks and scrolling required to select and add an item to the menu. And, probably because I'm a backend developer myself, I'm out of ideas to come up with a better UX than this. So, any ideas regarding UI modifications and changes, are really appreciated.
    – MrClan
    Mar 31, 2020 at 9:51

2 Answers 2

1

It is a good thing you mentioned that your users have large screens. But what happens to those who don't? How responsive is the solution? The first thing I would do is find 5 users and test it out. If they understand this layout and complete tasks successfully then develop it. I would like to give more insight but the problem is that I am not one of your users so you will have to test with them.

1

Does the list really need to be 1000 items long? Can it be categorized in some way? Assuming this is food, having categories like italian, chinese, american, healthy, hearty, vegan, vegetarian, keto, high protein, etc. can make it so the user doesn't have to scroll through 1000+ items at one time. It keeps things organized and minimizes scrolling. Also perhaps an option to "hide" or otherwise shrink the left current column as it seems most of the work is being done in the right list, while the left list is mainly visual. This creates more space for your right column, again, minimizing scrolling since you have more horizontal space.

Your Answer

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

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