Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a grid that represents a grid of seats. Each seat has several different properties (for simplicities sake, lets say seats are Standard or Advanced, with Advanced seats being more expensive).

Based on some given criteria, several different possible seating plans are created. I need to show each of these seating plans, along with a summary (e.g. the total price for booking that particular plan, based on how many are Standard and how many are Advanced).

The system currently has something similar to this:

Current system

This has some obvious problems, the biggest being it doesn't handle overlapping seating plans very well.

Currently I have this as an improvement:

New system

This handles overlapping seating plans a lot better. However, for the 80% case of non-overlapping seating plans, I think it is much harder to see how the seats group together.

Does anyone have any suggestions for further improvements? Most of the time there will be no overlapping seating plans, so I want it to be easy to see grouping for the common case, but it needs to handle up to 5/6 groups overlapping on the same seat. I can add some small dynamic behaviour such as highlighting groups/adding borders to groups on mouseover, but it also need to be clear on a static dead-tree printout.

share|improve this question
    
I realise some small touches would help, such as spacing between seating type and "Plans". This is just a quick mock-up. –  ICR Mar 15 '11 at 19:03
add comment

2 Answers

As Steve suggests, you can completely avoid this problem by making an interactive showing only one plan, changing with mouseover, and print separate plans.

If you need all plans in a single chart:

Some minor suggestions:

  • make standard / advanced less significant (e.g. just a "+" icon in the corner)
  • make the relative position of a specific plan within the cell fixed (e.g. "1" is always top left). This should improve the relationship between cell and plan
  • de-emphasize unused cells:

grid1

You can also make the color code fill the rectangle:

grid2

Again, use a small icon for "Advanced", you should still place colors, and you need to have different patterns for 3 or 4 plans / field.

A slight modification would be always using halves (or whatever shape you need) - I personally find that easiest, but YMMV:

enter image description here

share|improve this answer
    
I like both of these ideas. In the actual implementation there is more information than just Standard/Advanced which needs to be shown, some of which can't easily be reduced to obvious icons. There may be other ways of showing that information though. –  ICR Mar 16 '11 at 11:08
add comment

I think your solution is reasonable. But I do wonder about the nature of the seating plans. If it's common for people to have a seating plan preference, then you could filter the seats accordingly.

So perhaps you could have 5 different views -- one for each seating plan, and one that combines everything like in your example. This could be made to work with mouse rollovers, or by clicking labels as follows:

enter image description here

I didn't get too carried away, but you could certainly color-code the links, add pricing, and make this into a slick interface.

share|improve this answer
    
I like the idea of the tabs. –  ICR Mar 15 '11 at 20:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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