Looperator GUI & UX Design

Kategorie: Case Study

Die Audio-Software-Schmiede Sugar Bytes liefert mit Looperator ein umfangreiches Tool zum Kreieren von Sound-Loops (musikalischen Schleifen). Ein massives Aufgebot an Effekten schafft dabei grenzenlose Möglichkeiten der Soundmanipulation. Gleichzeitig geben benutzerdefinierte Effekte dem User noch mehr Kontrolle. Klar ist: Nur wenn vor der ausgefeilten Engine ein ebenso abgestimmtes Interface steht, kann die Software ihr volles Potential entfalten.

Looperator Main Screen

Mondon Design wurde damit beauftragt das komplette Design für den Looperator zu entwickeln: Dazu gehörten Bildsprache, Konzeption, Graphic User Interface Design (GUI Design) und User Experience Design (UX Design). Zusätzlich entwarfen wir das Looperator Logo, die App Icons, Promotionsmaterial und auch die Grafiken für den Installer. Dadurch hatten wir die Möglichkeit ein komplett konsistentes Nutzererlebnis zu gestalten.

UI Design mit Blick nach vorne

Wir entwickeln Interfaces auflösungsunabhängig. Das bedeutet, dass die Oberfläche auf jedem Anzeigegerät optimal aussieht. Von Projektbeginn an behielten wir den potentiellen Release des Looperators auf hochauflösenden Displays (Retina iPad, High-Res Monitore) im Blick. Die GUI wurde bereits beim Entwurf in Photoshop komplett vektorbasiert angelegt. Dies ist ein großer Vorteil gegenüber pixelbasierter Gestaltung, da das komplette Interface verlustfrei vergrößert und verkleinert werden kann. Natürlich muss im Prozess fortwährend sichergestellt werden, dass alle Elemente in allen Auflösungsstufen visuell „funktionieren“. Dank solcher Standards in unseren Arbeitstechniken können wir ein User Interface sehr schnell auf andere Plattformen übertragen – sauber und unkompliziert.

Die Looperator GUI ist komplett aus Vektoren gebaut.

Effizienz durch Reduktion

Unsere Arbeit für den Looperator zeichnete sich durch hohe Effizienz aus, speziell bei der Konzeption der GUI-Elemente: So einfach wie möglich, so komplex wie nötig. So war z.B. die Größenänderung eines Dropdown Menüs während der Entwicklung blitzschnell realisierbar, da nur ein einziges Vektorobjekt manipuliert werden musste. Die Reduktion zwang uns natürlich auch dazu, die Gestaltung der Elemente auf den Punkt zu bringen. Ein willkommener Nebeneffekt.

Jedes UI-Element besteht aus einem einzigen Vektorobjekt.

Prozess

Die Entwicklung einer Benutzeroberfläche ist ein evolutionärer Prozess. Für den Looperator warfen wir zunächst einen Blick auf die Alpha Version der Software: Wo liegen die Stärken und Besonderheiten? In welchen Situationen müssen wir den User stärker an die Hand nehmen? Im Wireframing optimierten wir anschließend den Workflow, schlugen zusätzliche Funktionen vor und sorgten für eine intuitive Bedienung. Eine klare Aufteilung der Arbeitsbereiche, ein farbiges Leitsystem und eine inhaltlich begründete Anordnung aller Controls schaffen ein übersichtliches Arbeitsumfeld. Schnelligkeit ist Trumpf: Alle Effekte lassen sich über Popups kurzerhand auswählen. Im Prozess legten wir großes Augenmerk darauf, die erlernten Bedienungskonventionen der User zu respektieren – eine besondere Herausforderung, schließlich geht der Looperator an einigen Stellen neue Wege um die Bedienung zu beschleunigen. Dass die Lösungen sowohl für die Mausbedienung als auch auf Touch-Devices funktionieren mussten, versteht sich von selbst.

Effect Icons Design

Im Looperator stehen ungewöhnlich viele Effekte zur Verfügung, deren Vielfalt den User nicht irritieren sollte. Mit einem von Grund auf neu gestalteten Icon-Set schafften wir hier Übersicht. Alle Funktionen werden dem User durch eine konsistente Bildsprache vermittelt. Auch abstrakte Effekte können eindeutig identifiziert und zugeordnet werden. Ein zweistufiges Beschriftungssystem ermöglicht es zudem, Variationen von Effekten klar voneinander abzugrenzen. Das Icon Design wurde durchweg minimalistisch umgesetzt, bedient sich aber dennoch starker visueller Signale.

Skizzen

Looperator Effect Icons

Looperator Branding

Sound-Loops begründen Ihre Ästhetik durch Wiederholung. Eine treffende Bildmarke haben wir mit der Unendlichkeits-Schleife gefunden, die Kernfunktion des Looperators ist hier Programm. Die Schleife findet sowohl im App Icon als auch im Looperator Schriftzug Verwendung.

Looperator App Icon und Logo

Résumé

Kern unserer Arbeit am Looperator war der komplexen Software ein klares, visuell konsistentes und auflösungsunabhängiges Interface zu verleihen, mit dem der User intuitiv und flexibel arbeiten kann. Unbegrenzte Möglichkeiten ohne zu überfordern. Explorieren und Experimentieren oder den direkten Weg zum gewünschten Sound einschlagen. Live Einsatz auf Touch Screens und Mausbedienung im Studio – der Reiz dieses Projektes lag für uns auch in diesen Kontrasten. Wir konnten Sugar Bytes ein Interface liefern, das von einem blitzschnellen Workflow geprägt wird – sorgfältig bis ins kleinste Detail.

Screenshots