User blog:AimeePlaysMSM/Testing a breeding table - Part 2: Compact

In my previous blog post I posted a potential table design for breeding combinations that gives a more intuitive view of monster combinations and potential results. I actually had to make that post to see what it might look like on a wiki page, considering the editor's preview feature is even more limited than the actual wiki, and I didn't want to create a junk page.

After seeing the result, it's clear that a horizontal scrollbar does get introduced. On the up side, that means content is not cut off. On the down side - ugh, scrollbars, right?

So how could the table be made more compact? The major horizontal culprit is each monster's name; "Toe Jammer", even in the small font, is just a length thing... and "Rare Toe Jammer" doesn't do it any favors either. The major vertical culprit are the elements on the left, the name, and the breeding times.

So what could reasonably be eliminated, and what should be kept, if trying to make things compact - and how does it affect usability?

If I make the reasonable presumption that people who would use the table are pretty familiar with each monster's looks, then their name can certainly be dropped. What this affects: 1. Names are not immediately obvious, and 2. removing the name also removes the link: Solutions: 2. The article link be put on the portrait picture instead, which also partially solves 1. as the Monster's name becomes part of an on-hover tooltip. It's partial because the reader still has to hover over the tooltip and touch interface devices don't have a 'hover' function (thanks, Apple, for regressing that) and require additional not immediately obvious invocations to show the tooltip content.

That certainly makes it a lot more compact horizontally, but still leaves some expansion from the breeding times. Let's drop those as well. What this affects: In the case of multiple possible results, it is now no longer possible to tell which result was obtained. E.g. is it a failed attempt, a regular, a rare, or an Epic? Solutions: Only a partial solution - the breeding time can also be set in the tooltip by manually specifying it. This has the same caveats as the monster name 'solution' with regard to touch interfaces. On the other hand, it provides ample space for all possible breeding times, including for Rares, which wasn't in the original table to begin with.

This didn't actually affect height much, because the elements for each monster at the start of the row are listed below that monster. Let's put them next to the monster instead. What this affects: Possibly ease of interpretation given the proximity of the elements to the portrait. Solutions: None.

This is now very compact. The width is about 2/3rds of the original, and the height about 3/4. This still leaves an obvious element that can be removed; the elements: What this affects: Ease of telling which element a monster is. Solutions: Can also be added to the tooltip.

However, I think that is going too far. Any combination of monsters - even the new Epics - rely on combining elements so far. The Epic Noggin needed the four-element monster to be combined with a two element that had at least Earth, with the other element being unique to the four islands it's on. The Epic Furcorn is a combination of a 3-element with a 2-element, where the 3-element and the 2-element share only 1 element, the other elements being unique to their respective monsters. It stands to reason that future Monsters follow similar patterns, even if those patterns appear opaque at first.

Sacrificing a little bit of vertical space allows the re-introduction of the monster names as well:

What of the four-element monsters? Surely their elements would increase space quite a bit? True:

Rescaling the icons used - which necessitates not using their template pages - can help. What this affects: legibility, especially on high-dpi displays with browsers that don't compensate. Solutions: None

Now what happens if that is applied to the entire table? ( Note: just the element alignment - I did not set up the tooltips in this as they don't affect space used. )

So close. So very, very close - in fact, I'm not sure it won't be fine when I hit Publish, or put it on an actual page. Either way, this is about as tight as it's going to get. The PS Vita exclusive Monster(s) could be removed, which saves an entire column's worth. The elements may not be strictly necessary on the left side considering they can be looked up in the top row if needed, and with the left side elements gone they no longer give an excuse to put the Monster names back in:

But, at what cost? Does it go too far?