Ansprechende Benutzeroberflächen gestalten

Über Nero

Nero entwickelt und vertreibt Technologien im Bereich Liquid Media, welche das Erstellen und Nutzen von Inhalten jederzeit, überall und auf zahlreichen Geräten ermöglichen. Mit der Entwicklung plattformneutraler, standardisierter Lösungen ermöglicht das Unternehmen seinen Kunden, Musik, Fotos und Videos einfach zu genießen – unabhängig von Hardware oder Dateiformat. Mehr als 300 Millionen Einheiten von Neros preisgekrönten Softwarelösungen sind bei Anwendern auf der ganzen Welt im Einsatz – zu Hause, unterwegs und geschäftlich. Nero liefert strategischen Partnern Applikationen, Codecs, Tools, Software Development Kits und Programmierschnittstellen, die sich mit einer Vielzahl aktueller Plattformen und Geräte nutzen lassen. Die Produkte von Nero erhalten Kunden weltweit von Hardwareherstellern, internationalen Partnern und Händlern sowie direkt über den Nero-Onlineshop unter www.nero.com.

Nero bietet eine weltweite Marktabdeckung durch die Nero AG mit Hauptsitz im deutschen Karlsbad und regionalen Niederlassungen in Karlsbad, Deutschland; Glendale, Kalifornien, USA; und Yokohama, Japan; sowie Entwicklungszentren in Karlsbad, Deutschland; und Hangzhou, China.

Über Nero BackItUp & Burn

Die Softwarelösung Nero BackItUp & Burn sichert Familienfotos, wichtige Finanzdokumente, die Musiksammlung und vieles mehr. Systemabstürze, Festplattenfehler und Schädlinge wie Viren können Dateien zerstören. Unabhängig davon, ob einzelne Dateien, ganze Partitionen oder Festplatten gesichert werden sollen – Nero BackItUp beherrscht alle Varianten. Seit der Markteinführung zusammen mit Nero 6 im Jahr 2003 wurde die Funktionsvielvalt dieser Anwendung stetig erweitert.

Für Nero BackItUp 5 stand eine komplette Überarbeitung der Benutzeroberfläche an – mit dem Ziel, Backups und das Wiederherstellen von Daten für den Benutzer deutlich zu vereinfachen. Neben diesen Usability-Aspekten sollte auch eine rein visuelle Überarbeitung stattfinden. Die 5. Generation der Datensicherungssoftware sollte ein komplett neues Design erhalten. Dabei standen Benutzerfreundlichkeit und eine klare, durchgängige grafische Gestaltung im Vordergrund.

Diese Situation nahm Nero zum Anlass, Expression Studio von Microsoft zum ersten Mal im größeren Stil einzusetzen. Zum damaligen Zeitpunkt lag Microsoft Expression Studio in Version 2 vor. Auf neue Funktionen wie beispielsweise SketchFlow konnte daher leider noch nicht zugegriffen werden.

Schritt 1: Analyse des vorhandenen Oberflächendesigns

Im ersten Schritt analysierten die Usability-Experten von Nero die Vorgängerversion von BackItUp & Burn. Dabei standen verschiedene Aspekte im Vordergrund:

• Die Benennungen der verschiedenen Funktionen: Verstehen die Nutzer diese ohne weitere Hilfe?
• Wie viele Mausklicks sind nötig, um festgelegte Aufgaben zu bewältigen?
• Wie viele Bildschirmseiten muss ein Anwender durchlaufen, um sein Ziel zu erreichen?

Bereits in dieser frühen Projektphase wurden viele Verbesserungswünsche und Anforderungen an die neue Version definiert.

Abb. 1: Die grafische Benutzeroberfläche der Vorgängerversion Nero BackItUp 3

Schritt 2: Definition verschiedener Anwendungskonzepte

Erste Konzeptideen entstanden im Anschluss an die Analyse. Dabei verfolgte Nero zunächst zwei gegensätzliche Konzepte:

Eine Alternative der Benutzerführung war ein einfacher Assistent – bekannt aus Nero Express 8, einer weiteren Softwarelösung aus dem Hause Nero. Die einzelnen Steuerelemente sollten dabei genauso aussehen wie vom Betriebssystem vorgegeben. Diese erste Alternative bot verschiedene Vorteile. Zum einen würde sich die Gestaltung der Benutzeroberfläche nahtlos in vorhandene Nero-Anwendungen einfügen. Zum anderen würde diese Variante dem Benutzer klare Einstiegspunkte für die meisten Anwendungsmöglichkeiten von BackItUp bieten. Eine klare Führung des Benutzers und eine aufgabenorientierte Herangehensweise standen bei diesem Konzept im Vordergrund – unter Berücksichtigung einer einfachen Umsetzung mit herkömmlichen Technologien wie den Microsoft Foundation Classes.

Andererseits gab es aber auch einige Anforderungen an BackItUp, die ein Assistent nicht optimal widerspiegelte. Neben gestiegenen Anforderungen an das Branding der Softwarelösung gab es auch den Wunsch, das Aussehen des Programms von der Optik des Betriebssystems abzuheben. Darüber hinaus sollten auf einer zentralen Übersichtsseite die aktuell laufenden Backups des Nutzers angezeigt und so die Bedienung verbessert werden.

Abb.2: Konzept 1: Nero BackItUp 5 im Stil von Nero Express

Die andere Alternative der Benutzerführung sah vor, dass der Benutzer auf einer Übersichtsseite startet. An dieser Stelle sollte er gleichermaßen den Status der zuletzt ausgeführten Backups einsehen und neue Backups erstellen können. Für komplexere Aufgaben plante auch dieses Konzept den Einsatz eines Assistenten. Zudem bestand der Wunsch, die optische Aufmachung des Programms moderner und ansprechender zu gestalten und sich etwas vom Betriebssystem abzuheben.

Beide Konzepte wurden von den Usability-Experten bei Nero in den üblichen Grafikprogrammen entworfen und in PowerPoint zu „Click-Dummies“ zusammengesetzt – unter Einsatz von „Styled Wireframes“. Wireframes zeigen nicht das finale Design, sie liefern nur eine grobe Layoutübersicht. „Styled“ bedeutet in diesem Fall, dass die Layouts mit ein wenig Design angereichert wurden. Diese Art der Darstellung macht es für Außenstehende deutlich einfacher, sich ein Bild vom Konzept zu machen. Georg Christoph von Nero: „Aus heutiger Sicht würden wir diese langwierige Arbeit sofort mit Expression Blend 3 und SketchFlow erledigen. Damit wäre dieser Schritt deutlich schneller und einfacher gewesen. Leider stand die Version aber zum damaligen Zeitpunkt noch nicht zur Verfügung.“

Zu diesem Zeitpunkt diskutierte Nero auch über die Technologie für die Programmierung der Benutzeroberfläche. Die Entscheidung fiel auf WPF, wodurch sich beide Konzepte leicht umsetzen ließen. Die Gründe für diese Entscheidung waren laut Georg Christoph von Nero vielfältig: „Zum einen war es für unsere Entwickler spannend, mit der neuesten Technologie zu arbeiten. Zum anderen versprachen wir uns eine deutlich kürzere Entwicklungszeit für die Benutzeroberfläche.“ Die problemlose und effektive Gestaltung aufwändiger grafischer Benutzeroberflächen spielte darüber hinaus eine entscheidende Rolle.

Abb.3: Konzept 2: Am Ende hat Nero sich für diese Alternative entschieden.

Nachdem die Entscheidung aus diversen Gründen auf das zweite Konzept fiel und auch WPF als technologische Plattform feststand, ging es an die detaillierte Ausarbeitung. Diese wurde sowohl im Bereich Usability als auch im Bereich Design vorangetrieben.

Schritt 3: Erstellen erster Prototypen

Die Usability-Experten bei Nero beschäftigten sich nun intensiv mit dem ausgewählten Konzept. Das Ziel dieser Projektphase war es, Prototypen zu erstellen – einen Prototyp für jeden wichtigen Anwendungsfall, den Nero BackItUp 5 abdecken sollte. Als „Prototyp“ dienten hier noch PowerPoint-Dateien (s. g. „Papierprototyp“). Sie sollten jeden einzelnen Benutzerschritt für den jeweiligen Anwendungsfall aufzeigen.

Mitarbeiter aus unterschiedlichen Abteilungen begutachteten „fertige“ Prototypen, die Usability-Experten bewerteten Änderungswünsche und passten den Prototyp dann gegebenenfalls an. Dieser Prozess lief so lange iterativ ab, bis das Usability-Team und das Produktteam zufrieden waren.

Dieses iterative Vorgehen barg jedoch einige Nachteile:

• Trotz optimierter Vorarbeit dauerte das Erstellen der Prototypen länger als geplant.
• Grundlegende Änderungen mussten in allen PowerPoint-Dateien und dort teilweise in jeder einzelnen Folie getrennt vorgenommen werden. Der Aufwand, alle Dokumente auf dem aktuellen Stand zu halten, war daher enorm.

Georg Christoph von Nero: „Gerade für diesen Bereich erhoffen wir uns eine erhebliche Erleichterung durch Expression Blend 3 und der dazugehörigen SketchFlow-Funktion. Soweit wir das jetzt schon sagen können, dürfte dieses Tool das Erstellen von klickbaren Prototypen deutlich beschleunigen!“

Abb. 4: Ausschnitte aus frühen Papierprototypen

Parallel zu den Usability-Experten arbeiteten auch die Designer an ersten Entwürfen. Zuerst galt es, eine grundlegende, grafische Stilrichtung zu entwickeln. Diese sollte zum einen modern sein und das Branding von Nero vermitteln, sich andererseits aber auch in zukünftigen Anwendungen einsetzen lassen. Dazu entwarfen und evaluierten die Designer auf Basis eines ausgesuchten Wire-Frames mehrere grafische Konzepte – und zwar mit den gängigen Pixel-Grafikprogrammen. Dank dieser Programme konnten die Designer „aus dem Vollen“ schöpfen und intensiv mit Ebenen, Masken, vielen Effekten, Transparenz, Schatten und sonstigen Werkzeugen arbeiten.

Später, bei der finalen Umsetzung des Designs, erwies sich auch dieses Vorgehen als unvorteilhaft, weil der Schwerpunkt dabei zu stark auf den Möglichkeiten der Grafikprogramme lag. Ob nun kompliziertere Schatten-, Ebenen- und Transparenzeffekte mit mehrfacher Überlagerung oder kompliziertere Beleuchtungseffekte: Die Aspekte einer einfachen Umsetzung oder Besonderheiten von Vektorgrafiken kamen dabei nicht zum Tragen. Erst ein Wechsel zu Expression Design ermöglichte den Designern eine umfassende Gestaltungsfreiheit, ohne die Möglichkeiten zur Umsetzung auch nur ansatzweise zu gefährden.

Abb.5: Frühe Designentwürfe für Nero BackItUp 5

Die verschiedenen in Expression Design erstellten Designkonzepte wurden möglichst vielen Nero-Mitarbeitern vorgestellt. Nach Rückmeldungen und Anmerkungen kristallisierte sich relativ schnell ein Favorit heraus.

Die Designer sahen sich nun mit einer langen Liste von Änderungswünschen konfrontiert. Neben reinen Branding-Themen standen sie vor allem Usability-Problemen (Kontrast und Lesbarkeit) gegenüber.

Bei den ersten Versuchen stieß das Team von Nero an die Grenzen des klassischen Designer-Entwickler-Workflows: Die Entwürfe der Designer ließen sich nur mit massivem Aufwand für die Entwickler umsetzen oder die Implementierung entsprach nicht annähernd den Entwürfen. Eine Lösung fand sich hier in einem für Softwareentwickler verwertbaren Format: XAML.

Nero stellte daher den gesamten Designprozess auf Microsoft Expression Design um. Dieses Werkzeug wurde im Rahmen von WPF explizit zum Erstellen von Grafiken entwickelt, was die Umsetzung der Designs garantierte.

Aus der Anforderungsliste und dem favorisierten Entwurf entstand so mithilfe von Expression Design der erste Entwurf für das finale Design. Für die Designer war die Umstellung relativ problemlos: Expression Design stellt die üblichen Werkzeuge zur Verfügung. Dementsprechend verlief die Lernkurve recht steil.

Abb.6: Das finale Design in Microsoft Expression Design

Schritt 4: Implementierung

Unmittelbar nach dem Fertigstellen der ersten Prototypen der Usability-Abteilung und der ersten Designvorlagen startete der klassische Softwareentwicklungsprozess. Der technische Rahmen stand: Entwickelt wurde in WPF mit Microsoft Visual Studio 2008 und Microsoft Expression Blend 2, die Designs wurden mit Expression Design 2 erstellt und als XAML exportiert.

XAML diente hier als Verbindungsstück zwischen Designern und Entwicklern: Exportiert aus Expression Design, zu einer funktionierenden Benutzeroberfläche zusammengefügt und animiert in Expression Blend wurden die Bestandteile anschließend in Visual Studio mit dem eigentlichen Programmcode zusammengefügt.

Dank des verbesserten Workflows landeten die meisten Designs nicht wie bisher im Papierkorb, sondern direkt in der Anwendung.

Drei Vorgehensweisen beschleunigten das Projekt deutlich:

• Entwickler mit einem Verständnis für Grafikdesign an der Benutzeroberfläche arbeiten zu lassen (oft auch als „Integrator“ bezeichnet)
• Diese Integratoren sehr eng und dauerhaft mit den Grafikdesignern zusammenarbeiten zu lassen
• Zugriff auf Expression Design und Expression Blend für Integratoren und Designer.

Schnell stellte sich heraus, dass die Übergabe nicht als XAML, sondern besser im nativen Expression Design-Format stattfinden sollte. Die Integratoren benötigten also auch Zugriff auf Expression Design. So konnten sie die relevanten Bereiche innerhalb des Grafikdesigns einfacher und schneller identifizieren. Die Integratoren kopierten diese Bereiche und fügten sie in Expression Blend ein. Dieser Vorgang führte zu einer automatischen Erzeugung von XAML-Code.

In Expression Blend erstellten die Integratoren dann aus den Grafiken wiederverwendbare Brushes, Stlyes oder gar ganze Steuerelemente. Im Fall von Steuerelementen bekamen die Integratoren jeden einzelnen Status als Vektorgrafik geliefert. Anschließend sorgten sie für die richtige „Verknüpfung“.

Sobald der Integrator seine Arbeit an einem Steuerelement beendet hatte, bekam es der Grafikdesigner – diesmal in Expression Blend. Er konnte nun Animationen einfügen (beispielsweise Statusübergänge) und gegebenenfalls Korrekturen an der Umsetzung des Grafikdesigns vornehmen.

Abb.7: Implementierung und Umsetzung der Designs in Microsoft Expression Blend

Schritt 5: Fazit und das fertige Produkt

Die Einführung von Expression Studio hat den Entwicklungsprozess bei Nero verändert. Nachdem sich sowohl Entwickler als auch Designer an Microsoft Expression Studio und die vielen neuen Möglichkeiten gewöhnt hatten, traten die Vorteile sehr schnell zutage: Das Design wird Bestandteil der zu entwickelnden Anwendung und kann direkt in der Entwicklungsumgebung visuell bearbeitet werden. Nachbauen oder gar Nachprogrammieren, Zerstückeln von Grafiken in Einzelteile und programmierte Animationen (die nicht so weich und fließend ablaufen, wie sie sollten) werden überflüssig.

Das ermöglicht XAML – das technische Verbindungsstück zwischen Design und Entwicklung. Zum ersten Mal können Designer nicht nur gestalten (in Expression Design), sondern jederzeit auch den aktuellen Stand der Entwicklung in Expression Blend begutachten. Ein Eingreifen und Verändern des Designs ist ohne jegliche Programmiererfahrung möglich – noch während der Entwicklung.

Gerade im Bereich Animation ergeben sich daraus enorme Vorteile. Animationen werden in modernen Anwendungen immer wichtiger und lassen sich in Microsoft Expression Blend sehr komfortabel erstellen. Das Erzeugen einer Vorschauanimation entfällt. Die Entwickler müssen diese auch nicht mehr nachbauen. Damit erübrigen sich sowohl mühsame Absprachen zwischen Designern und Entwicklern als auch die sonst nötigen iterativen Korrekturen. Der Designer erstellt die Animation selbst, direkt am laufenden Produkt.

Das Ergebnis fiel dementsprechend deutlich aus: Das fertige Nero BackItUp 5 entspricht den Entwürfen! Designkompromisse mussten nicht geschlossen werden. Ein Erfolg, der bei Nero für Aufsehen gesorgt hat – und der WPF und Expression Studio zu einem festen Bestandteil auch zukünftiger Entwicklungen macht.

Abb.8: Zum Vergleich: Nero BackItUp 5 in Expression Design und ...

Abb.9: ... Nero BackItUp 5 – die laufende Anwendung

Nähere Informationen zu Nero BackItUp & Burn finden Sie hier: www.nero.com/nero-backitup-wpf