I am trying to get ideas to revamp a dashboard representing a series of resources in a large (html) table. My problem: I have very limited "screen estate" to represent the resources and need to cram as much information as possible without making things too cluttered.

In order to give a concrete example, imagine a table where each row is a hotel (let's say you have on average 50 rows) and the columns are days of the month (so max 31).

Each Hotel/Date cell must represent how "full" a given hotel is - with the following extra problems:

I cannot write inside the cell (each cell already has a short text code such as "AC" or "K3b" that indicates if there is a specific event for which special booking conditions apply... i.e. assuming I have opened my dashboard on San Francisco data, during Apple World Developer Conference at Moscone Center, maybe 20 to 40 of the cells would be marked with "AWD".

Currently the we are using colours (Green=more or less empty, Yellow: some room types are sold out or close to sold out, Red: most room types are sold out or close to sold out, Gray: hotel unavailable due to renovation or something similar).

The real problem is that the colours (apart from gray an green) aren't very helpful, unless a cell it is green or gray we don't really know what chances are for someone to find a place - any hotel may have 7-8 different types of room (e.g. singles, doubles, suites, single - smoking allowed, and so on) with an uneven distribution: most hotels have 50%+ double rooms (which can also be sold as singles) maybe 25% doubles which can accomodate a 3rd bed or a small child, and suites and mini-suites are usually <10% of the number of rooms.

So if I have a small hotel with 100 rooms, of which 4 are suites, the fact that I have sold 4 doubles means it should be green (i.e. you have 100% chances to find an accomodation, no matter the type of room you need) while if the I have sold all the suites it should be... something else, because while the hotel is still basically empty, you don't have one of room types available anymore.

Any suggestions about either fiddling the algorithm (at the moment it is not very smart and you basically see "green" until over 50% of the room types are below 20% capacity) or being able to find some other kind of visual hint, so that the dashboard is actually useful and does not force you to visit all the hotel cells to see the actual situation? (clicking on the cell opens a popup with extra information).

The cells are quite small (the whole dashboard is just part of the main dynamic html screen so we don't have the full screen area) so I don't think we can add icons or graphical elements in there (I am still interested in ideas about that, too, if I find something worth fighting for I will propose a complete redesign).

  • $\begingroup$ There is a site for ux & ui here. If you don't get answers here, you might consider flagging the question for migration by the moderators. $\endgroup$ – Bryan Hanson Jul 12 '15 at 12:52
  • $\begingroup$ @BryanHanson - yeah, I was tempted to cross-post by creating a question there and pointing to this one, but I think it's more specifically a data representation problem - I'll wait for some more anyway, thanks for the suggestion. $\endgroup$ – p.marino Jul 12 '15 at 19:32

From a data representation point of view, it sounds like a use for filtering. That is, if you can somehow filter on "four suites", the colors reflect only each hotel's ability to accommodate four suites. The downside of filtering is that you only see one slice of the data at a time, so it helps to be able to quickly switch between filter conditions.

An alternative if you have a small number of categories is to break the cell up into that many sections and assign each section a different color. Then the data is represented by a couple intensity levels of that color, with white representing the common state so uncommon things stand out.

  • $\begingroup$ In a sense we have some prefiltering already - the user will ask first for what period you are interested in, input the relevant data and get back the aforementioned "grid" of hotel vs. date centered on the period dates you want - the job of the operator is to then engage the caller into a conversation getting more details about their needs... now the workflow is to start suggesting hotels ("there is Hotel X which is ... close to the Train Station" but to select which hotel to drill down first we would like to give a cue about which one has more rooms left .... $\endgroup$ – p.marino Jul 15 '15 at 14:36
  • 2
    $\begingroup$ I like @xan's second alternative, and I'll add on to it. Pick THREE of the most common guest categories (not room types). They might be "Single", "Couple", and "Family/Group", all non-smoking. Your fourth category is "Other" which includes every other category of guest including smokers. You would then color code the corners of each cell according to the probability that this hotel can accommodate each guest type, given available rooms. (You'd need a white, grey, or black border around each cell.) $\endgroup$ – MrMeritology Jul 16 '15 at 6:01

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.