Interface for configuring a chain of modules

Question

From a UX point of view, what is an effective way for users to configure a chain of modules?

• Each module can process one, or two types of data
• Modules can optionally accept inputs (one for each kind of data it supports)
• Modules will have an output for each data type they support
• Outputs can be connected to many inputs
• Most times, modules will support both data types and both outputs will be connected to the corresponding inputs of the next module in line.

Ideally, I would like to do what Propellerhead's Reason does:

I would use different colors for different data types. Unfortunately, I don't think this is something I can readily implement in a web interface, so I am considering alternatives.

Jeskola Buzz does something that would be easier to implement, and while it does make for a clear diagram as to what is going where, it isn't obvious that someone can click and drag new connections around:

Are there any alternative ways of allowing users to configure a chain of modules that I might be overlooking?

Answer 1

For connections process vizualization a chain diagram certainly most convenient method.

There are some specific moments which complicate user actions.

Use of metaphors

In an example which you showed at GUI creation perfectly metaphors are used. A rear panel of the device with interfaces of possible connections and wires which are familiar to us in an everyday life is visually shown. If you once were engaged in connection of audio devices to you will define not difficult interaction with computer model as it copies mental model from real life. The second example is based on the general models possessing similar properties, the truth unlike model with metaphors shows process slightly worse. And that is why: There's an plugged devices named JGuitar or BGuitar, but it is difficult to me to define personally enough, what exactly is connected to my device. BGuitar it's abbreviation of bass guitar or it means that is a Bob's guitar, or it is any any name which my sound producer decided to give to this device? In this regard there are problems which I will describe in the following paragraph, but it already looks much more simply.

Connections compatibility

In most cases connections are divided into Input & Output, but what both functions at the same time can carry out meet also. Use of metaphors helps me with definition of sequence of connection. For example everyone know that headphones should be connected to an audio Output therefore there is no desire to connect them to a microphone Input. Though this connection also will work, but it won't be correct.

Here's an example of rich metaphor model from Line6 PodStudio

Here is not so difficult to define what device is connected, but there is other problem unlike examples which you gave. Even knowing rules of connection of these devices I can't define in what sequence they are connected. From left to right or in the opposite direction? In your example with Propellerheads GUI I can unequivocally tell that the direction of a signal extends from Output to Input, in an example with Jeskola Buzz though I also don't know where an Input and an Output, but the signal direction from a guitar to mixer is specified by an arrow.

Connection possibility

For example for audio devices there are at least three types of connection: analog, digital and Midi. Even if connections plugs coincide, you hardly will reach desirable result having connected Analog Output with Digital Input. Therefore it is necessary that the user unequivocally could determine on what by a method of the device can be connected or limit possibility of connection of incompatible connection types. In this plan the example of with Propellerheads is much better than an example with Jeskola Buzz because each Output contains information about connection type. (L/Mono for exmpl.)

Here's one more picture which will help to understand a problem.

It's not a part of the interface, it's simply a scheme showing one more advantage of the Propellerheads GUI. Here it is not so simple to define that is an Input, and that an Output, red arrows solve this problem in a chain not up to the end. Number of devices you can connect is perfectly visible. Information on quantity of available Inputs as contains and in the Propellerheads GUI. There's only one possible connection for CV In, for exmpl. It is quite probable that in the Jeskola Buzz GUI it is possible to connect to any device infinitely many any devices. At least - visually with it interferes nothing.

Similar principles are used in SVaRTracker and Apple Midi Setup. Where you can see quantity and type of connections for each device. It is more convenient in use though it's not so beautiful as Propellerhead's GUI.

Actually not and it is difficult to solve this problem even by means of children's game.

Now it is possible to tell with ease that Jessica's Guitar and X-Delay use different types of connection, but besides, you can connect a Guitar with Mixer directly.

It is possible to use color or a form for connections marking, but in any case models with a metaphor which are familiar from life are simplest for understanding. Actually it also does Propellerhead's GUI.

RVMF

Rich visual modeless feedbackis one more aspect of the matter.

In my opinion in the best way it is realized in Reactable

or in Tangiblex Liveset

RVMF helps not only to define what devices are connected, but also the direction of a connection and even its type.

Whether in addition it is possible to define the device works and to estimate some parameters of its work. Volume level for example.

Answer 2

I don't know if there is a term for this kind of programing - I call it myself Visual Programing. As you have shown its quite usual in the area of music - DJ and VJ. and there are several software using its pattern. You get very fast and easy your code, sometimes at runtime aka live coding - and its even creative, because you are not that deep in the realms of logik. Don't have to care about missing comma or syntax. As you see I like and use this software quite often. My favourite is VVVV.

Image source VVVV.org

VVVV is a multiporpose toolkit, which is heavily setup on DirectX. Its GUI is quite uncommon/unique, but once learned it makes you very fast. Numbers as you see them can be entered or changed by mouseover and right click & move. To connect nodes, you click on the small output boxes at bottom of a node and possible input boxes of other nodes (depending on datatype) will be highlighted. Its free for non-commercial. Best is you just download it and try for yourself.

Image source Wikipedia

Quartz Composer is shipped with OS X. And its nodes are lists of possible inputs and outputs marked by different colors. I haven't used it, so I can't give you examples of behaviour. Even this software is embeded closely with OpenGL (the sister of DirectX).

Image source audiovisualizers

Eyesweb has some years on its shoulders, but worth showing as it uses icons for the nodes to show the meaning. (Similar to LEGO's mindstorm programing enviroment btw). This software is for video tracking and gesture recognition, but I think its outdated (couldnt find a download link). Its free for uncommercial use , for PC and developed by a italian university.

Image source LEGO

And of course LEGO mindstorm should be mentioned. Nodes have icons here and I used it just once. I found it not that easy in useage like ie. VVVV. But you can try it for yourself.