0

I need to represent a food menu from the admin side. It is most likely to be updated/created weekly.

Here are what I have tried:

  • Calendar View
    • Pros
      • Looks natural since it's based on date
    • Cons
      • Lack of control? Where to put edit? delete?

Calendar view

When clicking on + number more link on the date, it'll show a mini popup of the extended list:

Calendar mini popup

  • List View
    • Pros
      • Will be based on weekly view. Food menu is updated every week.
    • Cons
      • Lack of control too?

List view

Other ideas that I'm planning to do would be:

  • Change the popup into a modal that will allow me to do what I need like add button at the bottom for Edit, Delete or whatever

  • Use table that has "Available Data", "Lunches", "Dinners", "Actions" columns (Most simplest one)

  • Cards in grid that can be sorted or filtered maybe?

Any suggestions or opinions to those who have encountered a situation like this before?

EDIT:

I tried to use a table and planning to stick with it.

I made a table that shows 5 rows to represent the weekly menu excluding the weekends. It looks like:

[Menu date] [Lunches] [Dinners] [Actions]

4
  • What functionality do you need to include under 'Edit'? I'm assuming 'Delete' would simply delete that meal but 'Edit' could do all sorts of stuff and that would help to define the UI required. Feb 8, 2017 at 8:17
  • @AndrewMartin Edit is for editing foods on the menu for that day, delete is for deleting the menu itself. I might put the deleting/adding of foods on the menu editing page.
    – jen
    Feb 8, 2017 at 8:20
  • What can I edit about the foods? Their position/order within the menu? Their name/label? As this is menu construction, there must be some sort of preparation involved with the food on each menu so can I just type anything or do I need to choose from a preset list? Can I move items from one day to another? Can I select foods based on dietary requirements (vegetarian, but free, gluten free, etc) rather than picking out a specific dish? Feb 8, 2017 at 8:31
  • @AndrewMartin editing food info is on the other page and that is completely done. Editing in this context is for adding/deleting food on the menu for that day like I said on the previous comment. Just two dropdowns (multiple value): lunch dropdown and dinner dropdown. Position doesn't matter also.
    – jen
    Feb 8, 2017 at 8:36

2 Answers 2

1

I guess the OS X Calendar App's Week View design should do the trick for you. You can have the view of a complete week at your disposal, switch weeks, add or remove items.

To remove items (events in the calendar app) you could incorporate a cross on the top of the item. And you could double click an item to edit it. I guess that would serve the purpose for you.


You could add a new menu item by double clicking anywhere in the column.

Add new menu item

You could edit an added item by double clicking on it.

Edit an added menu item

You could delete an item by hovering over it and clicking the cross as it appears.

delete a menu item

You could navigate between weeks by clicking the arrows on the top right.

Navigate between calendar weeks.

3
  • I don't have any access to any OSX. I have only used Linux (my main) and Windows. Images might not help me see things I can do with it. Can you show me your idea? Take screenshot from an OSX?
    – jen
    Feb 10, 2017 at 9:26
  • Tried looking at Google for a sample and it seems similar to the first pic I have in OP
    – jen
    Feb 10, 2017 at 9:28
  • Have updated the answer with screenshot adding a more personal touch wherever needed. Do check it out.
    – ikartik90
    Feb 10, 2017 at 9:42
0

It is good to show the weekly calendar in the general (Add/Edit) view. Provide monthly view if required. So that, there will be enough space to display Add/Edit buttons, As per I understood. Also I'm new to the UX space, this may not be a good solution. Something like this, enter image description here

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.