it-swarm.com.de

Schnittstelle zum Konfigurieren einer Modulkette

Was ist aus UX-Sicht eine effektive Möglichkeit für Benutzer, eine Kette von Modulen zu konfigurieren?

  • Jedes Modul kann einen oder zwei Datentypen verarbeiten
  • Module können optional Eingaben akzeptieren (eine für jede Art von Daten, die sie unterstützen)
  • Module haben eine Ausgabe für jeden von ihnen unterstützten Datentyp
  • Ausgänge können mit vielen Eingängen verbunden werden
  • Meistens Mal unterstützen Module beide Datentypen und beide Ausgänge werden mit den entsprechenden Eingängen des nächsten Moduls in der Reihe verbunden.

Im Idealfall möchte ich das tun, was Propellerheads Grund tut:

Propellerheads Reason Rack Cabling

Ich würde verschiedene Farben für verschiedene Datentypen verwenden. Leider glaube ich nicht, dass ich dies leicht in eine Weboberfläche implementieren kann, daher denke ich über Alternativen nach.

Jeskola Buzz macht etwas, das einfacher zu implementieren wäre, und obwohl es ein klares Diagramm darüber liefert, was wohin geht, ist es nicht offensichtlich, dass jemand neue Verbindungen anklicken und ziehen kann:

Jeskola Buzz Block Diagram

Gibt es alternative Möglichkeiten, Benutzern das Konfigurieren einer Kette von Modulen zu ermöglichen, die ich möglicherweise übersehen habe?

4
Brad

Für die Prozessverarbeitung von Verbindungen ist ein Kettendiagramm sicherlich die bequemste Methode.

Es gibt bestimmte Momente, die Benutzeraktionen erschweren.

Verwendung von Metaphern

In einem Beispiel, das Sie bei der GUI-Erstellung gezeigt haben, werden perfekt Metaphern verwendet. Eine Rückseite des Geräts mit Schnittstellen möglicher Verbindungen und Drähte, die uns im Alltag bekannt sind, wird visuell dargestellt. Wenn Sie einmal mit der Verbindung von Audiogeräten beschäftigt waren, werden Sie die nicht schwierige Interaktion mit dem Computermodell definieren, da es das mentale Modell aus dem wirklichen Leben kopiert. Das zweite Beispiel basiert auf den allgemeinen Modellen mit ähnlichen Eigenschaften, die Wahrheit zeigt im Gegensatz zum Modell mit Metaphern einen etwas schlechteren Prozess. Und das ist der Grund: Es gibt ein angeschlossenes Gerät namens JGuitar oder BGuitar, aber es fällt mir schwer, persönlich genug zu definieren, was genau mit meinem Gerät verbunden ist. BGuitar ist die Abkürzung für Bassgitarre oder bedeutet, dass es sich um eine Bob-Gitarre handelt, oder gibt es einen Namen, den mein Soundproduzent diesem Gerät gegeben hat? In dieser Hinsicht gibt es Probleme, die ich im folgenden Absatz beschreiben werde, aber es sieht schon viel einfacher aus.

guitars

Verbindungskompatibilität

In den meisten Fällen sind die Verbindungen in Input & Output unterteilt, aber was beide Funktionen gleichzeitig ausführen können, erfüllt auch. Die Verwendung von Metaphern hilft mir bei der Definition der Reihenfolge der Verbindung. Zum Beispiel weiß jeder, dass Kopfhörer an einen Audioausgang angeschlossen werden sollten, daher besteht kein Wunsch, sie an einen Mikrofoneingang anzuschließen. Diese Verbindung funktioniert zwar auch, ist aber nicht korrekt.

Hier ist ein Beispiel für ein reichhaltiges Metaphermodell aus Line6 PodStudio

Line6 Pod

Hier ist es nicht so schwierig zu definieren, welches Gerät angeschlossen ist, aber es gibt ein anderes Problem als die von Ihnen angegebenen Beispiele. Selbst wenn ich die Verbindungsregeln dieser Geräte kenne, kann ich nicht definieren, in welcher Reihenfolge sie verbunden sind. Von links nach rechts oder in die entgegengesetzte Richtung? In Ihrem Beispiel mit Propellerheads GUI kann ich eindeutig sagen, dass sich die Richtung eines Signals von Ausgang zu Eingang erstreckt, in einem Beispiel mit Jeskola Buzz, obwohl ich auch nicht weiß, wo ein Eingang und ein Ausgang sind, sondern die Signalrichtung von einer Gitarre zu Mischer wird durch einen Pfeil angegeben.

Verbindungsmöglichkeit

Beispielsweise gibt es für Audiogeräte mindestens drei Arten von Verbindungen: Analog, Digital und Midi. Selbst wenn die Verbindungsstecker zusammenfallen, werden Sie kaum das gewünschte Ergebnis erzielen, wenn Sie den Analogausgang mit dem Digitaleingang verbinden. Daher ist es notwendig, dass der Benutzer eindeutig bestimmen kann, auf welche Weise das Gerät angeschlossen werden kann, oder die Möglichkeit der Verbindung inkompatibler Verbindungstypen einschränken kann. In diesem Plan ist das Beispiel mit Propellerheads viel besser als ein Beispiel mit Jeskola Buzz, da jede Ausgabe Informationen zum Verbindungstyp enthält. (L/Mono zum Beispiel)

Hier ist noch ein Bild, das hilft, ein Problem zu verstehen.

Pedalboard

Es ist kein Teil der Benutzeroberfläche, sondern lediglich ein Schema, das einen weiteren Vorteil der Propellerheads-Benutzeroberfläche zeigt. Hier ist es nicht so einfach zu definieren, dass es sich um eine Eingabe handelt und dass eine Ausgabe, rote Pfeile, dieses Problem in einer Kette lösen, die nicht bis zum Ende reicht. Die Anzahl der Geräte, die Sie anschließen können, ist perfekt sichtbar. Informationen zur Anzahl der verfügbaren Eingänge wie enthalten und in der Propellerheads-GUI. Es gibt nur eine mögliche Verbindung für CV In, zum Beispiel. Es ist sehr wahrscheinlich, dass es in der Jeskola Buzz-Benutzeroberfläche möglich ist, eine Verbindung zu jedem Gerät mit unendlich vielen Geräten herzustellen. Zumindest - visuell stört es nichts.

Ähnliche Prinzipien werden in SVaRTracker und Apple Midi Setup) verwendet. Hier können Sie Anzahl und Art der Verbindungen für jedes Gerät anzeigen. Die Verwendung ist bequemer, obwohl dies nicht der Fall ist schön wie Propellerheads GUI.

Svarsoft

Apple midi setup

Eigentlich nicht und es ist schwierig, dieses Problem auch mittels Kinderspiel zu lösen.

Different connections type

connection_quantity

Jetzt ist es leicht zu erkennen, dass Jessicas Gitarre und X-Delay unterschiedliche Verbindungstypen verwenden. Außerdem können Sie eine Gitarre direkt mit dem Mixer verbinden.

Es ist möglich, Farbe oder ein Formular für die Kennzeichnung von Verbindungen zu verwenden, aber in jedem Fall sind Modelle mit einer Metapher, die aus dem Leben bekannt sind, am einfachsten zu verstehen. Eigentlich macht es auch Propellerheads GUI.

connector types

[~ # ~] rvmf [~ # ~]

Rich Visual Modeless Feedback ist ein weiterer Aspekt der Sache.

Meiner Meinung nach wird es am besten in Reactable realisiert

Reactable

oder in Tangiblex Liveset

Tangiblex

RVMF hilft nicht nur zu definieren, welche Geräte angeschlossen sind, sondern auch die Richtung einer Verbindung und sogar deren Typ.

Ob es zusätzlich möglich ist, das Gerät zu definieren, funktioniert und einige Parameter seiner Arbeit abzuschätzen. Lautstärke zum Beispiel.

4
denis.efremov

Ich weiß nicht, ob es einen Begriff für diese Art der Programmierung gibt - ich nenne ihn selbst Visual Programing. Wie Sie gezeigt haben, ist es im Bereich der Musik durchaus üblich - DJ und VJ. und es gibt mehrere Software, die sein Muster verwenden. Sie erhalten Ihren Code sehr schnell und einfach, manchmal zur Laufzeit, auch bekannt als Live-Codierung - und er ist sogar kreativ, weil Sie nicht so tief im Bereich der Logik sind. Sie müssen sich nicht um fehlende Kommas oder Syntax kümmern. Wie Sie sehen, mag und benutze ich diese Software ziemlich oft. Mein Favorit ist VVVV.

enter image description here

Bildquelle VVVV.org

[~ # ~] vvvv [~ # ~] ist ein Mehrzweck-Toolkit, das stark unter DirectX eingerichtet ist. Die Benutzeroberfläche ist ziemlich ungewöhnlich/einzigartig, aber wenn man sie einmal gelernt hat, macht man sie sehr schnell. Zahlen, wie Sie sie sehen, können per Mouseover und Rechtsklick & Verschieben eingegeben oder geändert werden. Um Knoten zu verbinden, klicken Sie auf die kleinen Ausgabefelder am unteren Rand eines Knotens. Mögliche Eingabefelder anderer Knoten (abhängig vom Datentyp) werden hervorgehoben. Es ist kostenlos für nichtkommerzielle. Am besten laden Sie es einfach herunter und probieren es selbst aus.

enter image description here

Bildquelle Wikipedia

Quartz Composer wird mit OS X ausgeliefert. Die Knoten sind Listen möglicher Ein- und Ausgänge, die durch verschiedene Farben gekennzeichnet sind. Ich habe es nicht benutzt, daher kann ich Ihnen keine Beispiele für Verhalten geben. Auch diese Software ist eng in OpenGL (die Schwester von DirectX) eingebettet.

enter image description here

Bildquelle Audiovisualisierer

Eyesweb hat einige Jahre auf den Schultern, aber es lohnt sich zu zeigen, da es Symbole für die Knoten verwendet, um die Bedeutung anzuzeigen. (Ähnlich wie bei LEGOs Mindstorm-Programmierumgebung übrigens). Diese Software ist für Video-Tracking und Gestenerkennung, aber ich denke, sie ist veraltet (konnte keinen Download-Link finden). Es ist kostenlos für den nichtkommerziellen Gebrauch, für den PC und wurde von einer italienischen Universität entwickelt.

enter image description here

Bildquelle LEGO

Und natürlich sollte LEGO mindstorm erwähnt werden. Knoten haben hier Symbole und ich habe sie nur einmal verwendet. Ich fand es nicht so einfach in der Verwendung wie dh. VVVV. Aber Sie können es selbst versuchen.

4
FrankL