i'm programming in php, javascript. This isn't a programming question but rather User Interface/Experience one. suppose i want to create a crossing matrix for dog breeds. I initially created a table where the breeders can specify parents as rows and columns.

To illustrate:

Female/Male | Doberman | Husky | German Shepherd | 
Poodle      |          |       |        x        | 
Bulldog     |    x     |   x   |                 | 
Beagle      |          |   x   |        x        |

This is my crossing matrix design having checkboxes inside table cells that are referring to the cross. So the above matrix means that i crossed female 'Bulldog' with male 'Doberman', a female 'Beagle' with a male 'Husky' and so on, you get the idea.

it's a really nice user interface, it's user friendly, it can be easily seen.

However i need to support crossing of atleast 30 females and 30 males. and how about 50 females and 50 males? considering the size of the table, the number of headers. How big would the table be, and how hard it is for the breeder?

Say the doberman is in the 45th male , and poodle is at 32nd female? I need to have an alternate user interface for this so that i could retain the usability. Any ideas? thanks!

  • 1
    What do you get if you cross a bulldog with a shitzu? – AndroidHustle Oct 18 '13 at 8:26
  • actually above isn't really practical.. but to demonstrate, i just used dogs, anyway i get the joke :) – muffin Oct 18 '13 at 8:28
  • I stole the joke from Jeff Daniels though, hope he doesn't mind... =) – AndroidHustle Oct 18 '13 at 8:34
  • Is the table required or just pair for some dog is searched? – Alexey Kolchenko Oct 18 '13 at 8:38
  • @Aelexey Kolchenko : no, not really.. the table is an alternate UI, however if the table could be retained and just modified somehow then it's good – muffin Oct 18 '13 at 8:48

Large table has usability issues, as headers could became invisible.

enter image description here

As you matrix is rather sparse, you could use table with appropriate pairs. Grouping in some meaninfgul way will enhance perception. For static vesion it could look like this.
enter image description here

For interactive version solution could be even better.
enter image description here

  • this is actually good, thanks for the mockups btw.. – muffin Oct 18 '13 at 10:39

It seems to me that the information would be easier to consume and more practical to manage if you were to present the pairings more explicitly. The interface below could in theory support an unlimited number of pairings.

enter image description here

  • if there are 50 males, however, and the user is scrolling for 50 items in the dropdown lits, wouldn't the dropdown be too long then? – muffin Oct 18 '13 at 8:29
  • *lists , sorry typo error – muffin Oct 18 '13 at 8:50

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.