Entdecke mit ClipConnect das ultimative Interface für effizientes und angenehmes Arbeiten in Videoschnitt-Programmen. Individualisiere es nach deinen Wünschen und belege die programmierbaren Tasten ganz nach deinen Bedürfnissen. Es ist Zeit für deinen nächsten Schritt.

Ideen

Thema

Da wir uns alle drei für das Thema Videoschnitt interessieren und auch schon viele Erfahrungen in dem Bereich gesammelt haben, war unser Thema an sich schnell klar. Allerdings stellte sich schnell heraus, dass wir unterschiedliche Programme zur Videobearbeitung nutzen, welche sich teils auch sehr stark voneinander unterscheiden.
Schlussendlich haben wir uns dazu entschieden, unser Projekt für das Programm Premiere Pro von Adobe anzupassen, da es der Industriestandard ist und wir dort mehr Möglichkeiten zur Verbesserung des Workflows gesehen haben.

Was wollen wir erreichen?

Zunächst haben wir uns also den Workflow in Premiere Pro genauer angeschaut und uns drei Hauptfunktionen ausgesucht, auf die wir uns fokussieren wollten.
Diese sind:

• die Navigation in der Timeline
• das Anordnen von Clips
• das Bearbeiten von Clips

Da wir weitere Bearbeitungsschritte wie Farbeinstellungen oder Effekte außen vor gelassen haben, konnten wir uns besser darauf konzentrieren, den Workflow beim Schneiden selbst zu vereinfachen. Genau das ist auch das Ziel, das wir uns bei diesem Projekt gesetzt haben.

Existierende Interface-Lösungen

Nachdem wir unser Ziel festgelegt hatten, stellten wir uns die Frage:
Welche Videoschnitt Interfaces gibt es schon auf dem Markt?
In einem gemeinsamen Board haben wir Beispiele gesammelt:

Erste Skizzen

Nachdem wir erste Eindrücke gesammelt hatten, ging es nun daran, diese zu visualisieren. Dabei haben wir verschiedenste Ideen dafür gesammelt, wie so ein Interface aussehen könnte. Zunächst war es uns erst einmal egal ,wie unrealistisch unsere Entwürfe sind, und wir haben uns nur darauf konzentriert, möglichst viele unterschiedliche Varianten zu bilden. So konnten wir sichergehen, dass wir ein großes Spektrum an Möglichkeiten abgedeckt haben, bevor wir uns auf ein Konzept festlegten.

Crazy 8:

Analoge Skizze:

Die Idee eines “Joysticks” hat uns direkt gefallen, da dieser viele unserer gewünschten Funktionen bereits abdeckt. Daraus entwickelte sich dann die Grundidee, ein Joystick-ähnliches Steuerelement mit weiteren Interface-Lösungen zu kombinieren.

Aus dieser Überlegung entstanden weitere Skizzen:

Finales Konzept

Schließlich haben wir uns auf ein Interface, bestehend aus vier einzelnen Elementen, festgelegt, welches alle von uns gewünschten Funktionen beinhaltete. Die Anordnung der Elemente soll dabei frei wählbar sein:

• ein Kreuzhebel-Steuerelement zur Bewegung und Navigation in der Timeline
• ein Drehregler zum Zoomen in der Timeline
• ein Slider zur Längenanpassung von Clips
• Tasten für verschiedene Shortcuts

Skizze des Konzepts:

Funktionen

Erste Übersicht der Funktionen der einzelnen Elemente:

Erster Prototyp aus Pappe

Dieses Konzept haben wir in einem einfachen Prototyp aus Pappe umgesetzt, um so ein besseres Gefühl für die Affordance, Größe und Anordnung der einzelnen Elemente zu bekommen.

Usability Testing

Diesen ersten Papp-Prototypen haben wir im Rahmen des Kurses “Usability” in einem Usability Testing auf die Probe gestellt.

Ziel

Dabei galt es herauszufinden, ob die einzelnen Interface-Elemente generell gut gewählt waren und ob das Mapping dieser funktioniert. Wir wollten uns an dieser Stelle weniger mit kleinen Details beschäftigen, sondern eher darauf achten, dass das Produkt insgesamt stimmig ist.

Die Leitfrage unseres Testings lautete:
Wird die Bedienung des Programms durch die Nutzung unseres Interfaces erleichtert?

Ergebnis

Wir haben Testings mit drei Nutzer:innen verschiedener Erfahrungsstufen durchgeführt und das waren unsere Erkenntnisse:

• das Mapping der einzelnen Elemente funktioniert gut → es hängt mehr an der Bedienung dieser
• der Joystick muss bezüglich Haptik, Größe und Platzierung der Tasten verbessert werden
• der Drehregler braucht einen Anschlagpunkt und darf sich nicht überdrehen lassen
• generell ist der Prototyp zu groß und muss insgesamt verkleinert werden

Prototyping

Da eine komplette Implementierung in Premiere zu zeitaufwändig gewesen wäre und ein Teil unserer Funktionen aktuell auch noch nicht in Premiere Pro verfügbar sind, entschieden wir uns für eine eigens für den Prototypen aufgebaute Oberfläche. Hierzu entnahmen wir mithilfe von Bildschirmaufnahmen Teile des aktuellen Interfaces aus Premiere Pro und zerstückelten dieses in Figma, um es anschließend so wieder zusammenzubasteln, wie wir es brauchten.

Diese Oberfläche haben wir an ProtoPie übergeben und dort funktionsfähig gemacht. ProtoPie - in Kombination mit Blokdots (Software für Arduino) - erweckte unser Interface zum Leben. Entstanden ist eine Nutzeroberfläche, die unsere wichtigsten Funktionen simuliert und es den Betrachter:innen so erscheinen lässt, als befänden sie sich tatsächlich in Premiere Pro.

Funktionen

Folgende Funktionen sind final in unserem Prototypen verbaut:

3D-Modell

Nachdem nun alle Funktionen final festgelegt waren, haben wir uns um das tatsächliche Design gekümmert und unser Interface als 3D-Modell in Cinema 4D visuell aufbereitet.

Inspiration

Für Form und Materialien haben wir uns Inspiration aus dem Internet geholt. Teilweise haben wir uns dabei an ganz normalen Alltagsgegenständen, wie zum Beispiel dem Shutterbutton einer Kamera oder dem Button an einem Graftiktablett Stift, orientiert.

Umsetzung

Zunächst haben wir eine Illustrator-Datei mit Vektoren angelegt, welche die gewünschte Größe unserer Elemente hatten. Diese Vektoren konnten wir in Cinema 4D importieren und dadurch ein Modell schaffen, das auch unseren gewünschten Maßen entspricht.

Materialien

Wir haben uns für schlichte, elegante Materialien entschieden, welche den professionellen Kontext unseres Interfaces unterstreichen sollen. Dazu haben wir vor allem auf helles und dunkles, gebürstetes Aluminium, kombiniert mit Elementen aus Gummi gesetzt. Den Eyecatcher bildet hierbei der leuchtend orangene LED-Lichtstreifen, der alle Elemente umgibt, um so das Gefühl eines zusammenhängenden Produkts zu schaffen.

Fertiges Modell

Hier ist nun unser fertiges Modell zu sehen:

Marke

Um ein mögliches Zukunftsszenario zu simulieren, haben wir uns entschieden, eine Marke aufzubauen. Neben einem Namen und Logo entstand so unter anderem auch eine Verpackung.

Bei der Namensfindung entschieden wir uns für “ClipConnect”, da es einerseits die Verbindung zum Videoschnitt mit “Clip” vermittelt, und andererseits auf das modulare System mit dem Wort “Connect” verweist.

Als Farbe für unser Logo entschieden wir uns für ein knalliges, auffallendes Orange, das durch glänzende und matte schwarze Farben unterstrichen wird. Die viereckigen Elemente beziehen sich auf unser modulares, viereckiges System.

Bei der Verpackung für unser Interface war es wichtig, eine klare Verbindung zu unserem Produkt zu schaffen. Somit übernahmen wir die orangefarbene LED aus dem Interface und spiegelten sie in den Rändern der Verpackung wieder. Ebenfalls ergänzten wir Adjektive in glänzender Schrift auf matter Oberfläche, die unser Produkt und unsere Marke ausmachen.