Matrix 11

Design of a routing matrix for Ardour.


(Click on the thumbnails for full size view)

Added mute, solo and rec buttons. Decided to not replicate them on both sides, so it’s mute and solo for sources and rec for destinations, which should be just fine in most cases.

The colours for the active states of these buttons are taken from the editor and mixer for consistency. They don’t add much here and could be considered distracting, though.

In-/Outputs, Sends, Inserts are no longer options below Ports, but also apply to the Bundles level.

Sends have a different connection symbol as first used in the detailed bundle-view mockup.

A simple experiment in indicating gain levels:

Matrix 10


About thorwil
I'm a designer from Germany. My main interests are visual and interaction design, free/open-source software and (electronic) music.

5 Responses to Matrix 11

  1. Dieter_be says:

    Hey, I’m not really fond of the “colorless” grids such as

    It marks the borders of rows and columns but since they dont share the color with the actual src’s &dst’s and since the color of the lines & bg is the same on the whole grid, this isn’t very efficient imho.

    I can imagine 2 directions to take:
    1) color the grids depending on the color of the src and dst. But since we’re using different colors for src and dist this cannot be easily done. You already figured out some workarounds for this yourself in the form of just using light/dark instead of real colors, like seen here, or marking both colors at once as seen here and some other variants.
    For this type of thing I have two additional suggestions:
    a) Using something like this but the background colors of all the “crossings” would be the mix of the colors of the src and dest. eg src=yellow, dest=red, then the background of the crossover would be orange. I think this would be pretty clean!
    b)The other one involves re-arranding the grid a bit so that both colors can be in place at the same time without disturbing each other, while still being clear.

    Both of them are illustrated here: (the 2nd idea can be finetuned a bit more. but the idea of having both the color of the dst and the src in the grid without disturbing each other, is something very powerfull and clear imho. but you can still juggle with the details)

    2) While typing/drawing all of the preceding, I forgot what I was going to say here. But when I remember I’ll let you know 🙂

  2. thorwil says:

    Dieter_be: all other approaches but the colour-less grid have been shot down. Mixing colour doesn’t work out, because the reults are only intuitive for base colours (maybe not even that for users without any colour mixing experience).

    I don’t quite get your mockup, but I tried coloured lines … and decided to not even post the result.

    Thanks for the feedback!

  3. Dieter_be says:

    I understand why mixing colors is a no-go.
    The idea in the upper half of my drawing realises the goal of having 2 colors (source and destination) displayed at the same time without mixing them, nor creating little rectangles and dividing them in two.
    This is the problem: when you have full lines from both source (horizontal) and destination (vertical), they will “override” each other: only one can be on top (visible) at the same time. This is what we are trying to create a fix for.

    If you look at the destinations: they all have rectangles going vertically upwards, so the eye can clearly distinguish them and recognize which destination they belong to. If we would do the same thing for sources (horizontally), the horizontal lines would “override” the vertical ones.
    This is why I added some extra space between sources: it makes the surface bigger that displays the source color. You’ll see that horizontal lines between the sources match the color of the corresponding source. This area is not supposed to be “overridden” by the vertical lines.
    This way we have the color of the sources and the destinations displayed, without hindering each other. The eye can see the color of the destination by looking at the vertical pattern, and the color of the source by looking at the horizontal pattern.

    It might need some further tweaking but imho this is the way to go. (the 2nd column is an example of such a further enhancement: it uses split lines in the color of the source)

    Here’s another, more furtherly developed version:

    it also uses the space between the vertical bars to show the source color..
    The 2nd and 3rd row are the most basic ones. But on the first row, first column we have the same color for source and destination, Too make this more clear we could add some subtle borders/lines, i drew some examples on the first row.

  4. thorwil says:

    Dieter_be: I now see what you’re trying to do. It’s an interesting idea I should have thought of.

    But wider spacing is not an option, as the need to scroll should be limited. There’s no way around the fact that applying the colours all over the place makes for one busy display.

  5. Dieter_be says:

    Hmm… well.. take a look at my last picture, since it has the source colors “in between” the vertical bars, we could get rid of the wider spacing (the horizontal rows in the source colors)

    Imho, it would be pretty easy on the eye *and* allow for very fast recognition of the src/dst when looking at a point in the grid.