Skoove Klaviertrainer UX & UI Design

Kategorie: Case Study

“Selbstständig und spielend leicht Klavier lernen”Skoove ist ein Online-Trainer für interaktive Klavierkurse.

Unsere Aufgabe war es, für den Klavier-Trainer und damit das Herzstück des Projekts ein User Interface (UI) zu entwickeln. Zudem waren wir für das Branding und die Website verantwortlich. Wesentlich für die Bewältigung dieser Aufgaben war zunächst ein umfassendes Verständnis des Produkts. Gemeinsam mit Skoove aus Berlin entwickelten wir dafür einen Projektplan, kartierten die Features und vereinbarten den Funktionsumfang eines MVPs (Minimum Viable Product).

MNDN Skoove UI Design Trainer Screenshot Interface Design Laptop Webapp

Skoove UI Design: Trainer Interface

User-Centered Design

Bei Skoove handelt es sich um Lernsoftware – dieses Verständnis ist für die Entwicklung der Skoove UI sehr wichtig gewesen. Das Erlernen eines Instruments verlangt eine hohe Aufmerksamkeit – jede Ablenkung beeinträchtigt den Lernprozess. Wir begegneten dieser Herausforderung mit „User-Centered Design“: alle Entscheidungen zur Bedienung der Software werden hierbei aus der Perspektive des Users getroffen.

Diese Ausrichtung betraf sämtliche Aspekte des Interfaces, u.A. die Navigation zwischen Kursen und Lektionen, die Anzeige des persönlichen Lernfortschritts und Erklärungen zu Lektionen.

Der Feedback-Loop

Test-User waren ein essentieller Bestandteil des Entwicklungsprozesses. Auf dem Papier kommt man selten zu einer schlüssigen Lösung, stattdessen müssen Entscheidungen und Konzepte stets in realen Situationen überprüft werden. Zu diesem Zweck wurden bei Skoove vor Ort kontinuierlich User-Tests durchgeführt, die aufzeigten, welche Elemente ein User wahrnahm und sofort verinnerlichte und welche Interaktionen hingegen den Zweck verfehlten. Die neu gewonnenen Erkenntnissen wurden in das nächste Design integriert – ein Loop, der sich von Iteration zu Iteration der perfekten Lösung annäherte.

Skoove UX Feedback Loop UI Design

Trainer VS Trackpad

Die Bedienung des Klaviertrainers stellte eine besondere Herausforderung dar, schließlich existieren hier zwei Bedien-Ebenen: das Interface des Trainers auf dem Bildschirm und die Klaviatur unter den Händen des Users. Müssen die Hände ständig vom Klavier zum Trackpad springen, steht der Trainer im Weg: jede Bedienung bremst den Spielfluss und somit auch den Lernerfolg. Das Ergebnis: Eine frustrierende User-Experience.

Steuerung mit Klaviertasten

Trainer und Klavier dürfen dehalb nicht in separaten Welten „spielen“, sondern müssen auf einer Bedienebene zusammengeführt werden. Unsere Lösung: Speziell belegte Klaviertasten zur Steuerung des Trainers. Der Vorteil liegt darin, dass der User nicht zum Trackpad springen und dort Start/Stopp klicken muss, sondern die Klaviatur mit den Händen gar nicht erst verlässt. Statt den User zu behindern, integriert sich der Trainer unmittelbar in den Spielfluss: zwischen Trainer und Klavier existiert eine feste Verbindung.

Skoove Web App GUI Design Key Controls

UI Iterationen der Klaviersteuerung

Fehlerquellen minimieren

Den Trainer durch die Klaviatur zu bedienen bringt weitere Herausforderungen mit sich: Wie kann verhindert werden, dass der User beim Spielen versehentlich ein belegte Taste trifft? Die Platzierung der Weiter- und Zurück-Buttons am linken Rand der Klaviatur ergab sich in User-Tests schnell als effektivste Lösung. Bei der User-Interaktion zum Starten und Stoppen einer Übung waren jedoch weitaus mehr Iterationen nötig. Getestet wurden verschiedene Tastenkombinationen bis hin zu ganzen Tastaturbereichen. Auch mit der Dauer des Tastendrucks wurde experimentiert um unabsichtliches Auslösen zu verhindern.

ERROR PREVENTION
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them.
– Jakob Nielsen, Usability Heuristics for User Interface Design

Branding & Website-Design

MNDN war neben dem Klaviertrainer auch für das Erscheinungsbild der Marke Skoove zuständig. Das Logo ausgenommen, entwickelten wir das komplette Corporate Design für Skoove inkl. Landing Page und den Seiten zur Kursauswahl.

Skoove Website Landing Page Design

Skoove Website Landing Page Design

Résumé

Dieses Projekt ist ein gutes Beispiel dafür, dass sich Interface-Entwicklung nicht immer nur auf dem Monitor abspielt. Durch konstante Exploration, Iteration und das intensive User-Testing nahm Skoove nach und nach Gestalt an und konnte zu einem benutzerfreundlichen und marktfertigen Produkt reifen.

Skoove hat eine sehr erfolgreiche Beta-Phase durchlaufen, das Interface wurde vom Skoove-Team weiterentwickelt und um viele neue Funktionen ergänzt. Nun wurde Skoove offiziell released.
Jetzt Skoove ausprobieren!

Neue Antwort




close