I'm building a web app restaurant management system and this is like a prototype of how I display the list of tables of the restaurant: list of tables

-Green tiles for merged tables
-blue for available
-red for occupied
-gray for unavailable

It also shows the number of chairs and table it was merged for merged tables. When I click a tile an option will pop out. I made it like tiles because it's easy to click and gives less chance for error for tablet computers(at least that's what i think).

So my question is, am I doing it right? I need advice. I'm not sure about this. Should I just show the list using datatables?

  • What about colourblind people?
    – JonW
    Commented Aug 12, 2014 at 12:40
  • Would like to add - I know that in restaurants chairs can go all over the place. Is there a use-case for the chairs? I think maybe it's better to indicate the number of people seated per table and visually indicate the size of the table. Will provide Wireframe when I get a chance.
    – Pdxd
    Commented Aug 12, 2014 at 14:44

1 Answer 1


I dont like this approach. Not because its bad UI but because it's color intensive. When thinking of the order of elements (with regards to how much attention is gathered by the user) you should consider the following:

  1. Is it ok for the colorblind?
  2. Can I find an empty table right away?
  3. How much importance is placed on finding an occupied table (or unoccupied)?
  4. If the lights were dimmed, could I still find the right table?
  5. Are blue and green the same thing? (i.e. Available)

When you put all of this together, I think you would be better off with something like this:

Just a couple of notes:

  1. If blue and green mean available, why not have them together?
  2. Information that is important to the viewer should be a filled square versus empty
  3. Empty Squares (red or unavailable) are shown with reduced opacity and no fill
  4. Yellow (warnings) are on the same level of importance as open tables.

I think this is definitely a step in the right direction for you but add in the tables and other information. Just be sure to make sure they contrast nicely with the numbers but not so much against the background. Keyword here is "Where should I direct my user's attention?"

  • Also, in the case of the colorblind, this works well. A colorblind person can still detect the slight contrast differences between the green and the yellow. Even more against filled vs non-fill Commented Aug 12, 2014 at 13:25
  • Thanks for the feedback. I'll take note of that. The green one or the merged table is not always available since other occupied table is merged with an available one.
    – Damathryx
    Commented Aug 13, 2014 at 7:44
  • What about the number of chairs and the merged table number? Is it okay if I display it under the table number or should be somewhere else like at the side?
    – Damathryx
    Commented Aug 13, 2014 at 7:44
  • With regards to blue vs green, both can be included. Just try and use contrasting fill colors. As for the chairs and table numbers, they can still remain the way you had them before but I would try to have the color not match the tile. Keep them all the same (i.e. Black) and use a badge to represent the number. Example of badges -> tutorialspoint.com/bootstrap/bootstrap_badges.htm Commented Aug 13, 2014 at 13:09

Your Answer

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

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