I'm working on an ordering system for school lunches which is already in use.

We offer an option called "automated ordering" where the user can choose the weekdays and a starting date and the system will automatically order lunch on the selected days from the specified day on. For example: Monday, Tuesday and Thursday from 1.10.2015 on.

The User can also set up a change of days in the future: Change to: Monday, Tuesday, Thursday and Friday from 1.11.2015 on.

And of course, the user can set an end date: Stop on 1.12.2015.

Today, we use a very bad and incomprehensible way, which most users don't understand. And i can't blame them for that.

I started to work on something like this:

My Idea

But i'm not sure how to add changing options to that.

So my question is: What is the best way to display the current settings for this and also provide a good way to set changes?

Edit1: This will go on a Website.

  • Is this on the school's website where someone has to login and specify their automated orders or is this an app? Sep 18 '15 at 7:58
  • It's for a website. Sep 18 '15 at 10:01

If there is only one option to order and/or to display an overview of my orders over time, I would prefer a slidable calendar widget like this:

calendar as slidable weeks

1 click to start ordering on e.g. Tuesdays since 22 September (inclusive) and another click to end ordering on 15 December (with the last lunch on 15 December)...

If there are more options, you could toggle options via clicking (1st click = start ordering option 1, 2nd click = toggle on that day to option 2, 3rd click = last lunch on that day, 4th click = continue lunches with option 1)..?

And obviously, you have to think/test/decide about:

  • horizontal/vertical layouts
  • round corners (half cirles) for start/end dates
  • start of dragging should move the calendar and not click a date? or should it select only the dates in selected rectangle et the end of dragging?
  • useful tooltips of what will happen if you click (or a separate legend on mobile)
  • display info that there are lunches ordered in the future (or a separate link to "cancel all orders since...")
  • perhaps a log of events below the calendar (e.g. "last lunch on Tuesdays set to 15.9.2015 (canceled since 22.9.2015)")
  • ...
  • I like this approach. It's easy to recognize all needet information and to enter changes. Plus: You can enter an end-date for each weekday. But this will require a big change in our database. Sep 18 '15 at 11:32
  • if you store the data as start/end records, it is possible to do all the view logic in .. view (e.g. using React or Riot), no need to change the database IMO - feel free to give it a try and if you have problems, ask on Stack Overflow
    – Aprillion
    Sep 18 '15 at 11:49
  • the data object you can pass from DB to the view can look e.g. like {tuesdays: [{start: 20150922}, {end: ...}]} sorted by dates and in the view you would iterate over the records and set/unset a flag to remember status between starts and ends
    – Aprillion
    Sep 18 '15 at 11:57

Here's something I assembled quickly.

automated ordering

The initials for the weekdays are easy enough to guess on which days the ordering will be done.

Plus, blue for current, green for changing and orange to signify End.

Horizontally placed to signify a timeline.

  • what about M-T?
    – Aprillion
    Sep 18 '15 at 10:36
  • I didn't get you. They are the initials for the Weekdays. Sep 18 '15 at 10:39
  • but for which ones?
    – Aprillion
    Sep 18 '15 at 10:39
  • That will be in the Edit column specified as the complete day with their initials. In the summarizing column, they'll be Initials without a key since it'll be specified in the editing section. Sep 18 '15 at 10:42
  • please don't hide vital info from users e.g. Start ⚫⚫⚪⚫⚪ Change ⚪⚫⚪⚫⚫
    – Aprillion
    Sep 18 '15 at 10:47

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.