UI-Styleguide: 9 Hinweise für Ihr einheitliches Look & Feel

Warum Sie mit einem User Interface (UI) Styleguide allein noch kein einheitliches Look & Feel sicherstellen.

Haben Sie auch viel Zeit oder Geld in einen UI-Styleguide investiert? Und, haben sich Ihre Hoffnungen an eine bessere Usability, ein konsistentes User Interface Design oder gar ein produktübergreifend einheitliches Look & Feel erfüllt?

Ursachen, wann Ihnen UI-Styleguides nichts nutzen

Falls nicht, sind Sie damit nicht allein. Bei gestandenen IT-Herstellern sah ich verschiedene Gründe dafür, warum der erhoffte Nutzen von UI-Styleguides ausblieb.

Um Ihnen das Lesen zu vereinfachen nenne ich die Nutzer der UI-Styleguides im Folgenden einfach User Interface Entwickler. Bitte verstehen Sie diese Bezeichnung stellvertretend für alle von Vertrieblern über die Designer bis hin zu den Entwicklern, die User Interfaces gestalten.

1. Ungewohntes Arbeitsmittel

Die Einführung eines UI-Styleguides verläuft bei vielen Herstellern ähnlich. Nach seiner Fertigstellung wurde er einfach an die User Interface Entwickler übergeben, die ihn ab sofort nutzen sollen. Doch das geschieht nicht und das User Interface Design wird ohne den UI-Styleguide entwickelt. Teils wird er einfach vergessen, teils missachtet, weil er einfach nicht zu den gewohnten Arbeitsmitteln zählt. Nur gewohnte Arbeitsmittel setzt jeder Mensch automatisch, also ohne darüber nachzudenken, ein.

2. Keine Nutzungskontrolle

Fehlende Kontrolle hinsichtlich der Nutzung eines UI-Styleguides ist ein weiterer kritischer Punkt. Ich erkläre mir diese fehlende Kontrolle durch das Verständnis der Führungskräfte vom Nutzen der UI-Styleguides. Vor ihrer Entscheidung über seine Einführung haben sie sich mit dem Für und Wider auseinander gesetzt. Ihre dabei gereifte Überzeugung scheinen sie während der Übergabe bei anderen unbewusst vorauszusetzen. Aus dieser Sicht stellt sich die Frage nach einer Nutzungskontrolle für sie nicht.

Natürlich gibt es auch Unternehmen, die sich der mangelnden Gewohnheit bewusst sind und den Einsatz ihres UI-Styleguides gezielt kontrollieren. Leider garantiert Nutzungskontrolle allein noch nicht die angestrebte, hohe Usability oder ein einheitliches Look & Feel.

3. Zu viele Freiheitsgrade

Ein Grund hierfür können zu viele Freiheitsgrade sein, die der gegebene UI-Styleguide zulässt. Ich vergleiche UI-Styleguides gern mit einem LEGO-Kasten.

Stellen Sie sich vor, ein Radio-Button wäre ein vierer Lego-Stein, eine Checkbox ein zweier Stein, usw. Je mehr verschiedene Arten von Bausteinen Ihnen zur Verfügung stehen, desto mehr Möglichkeiten haben Sie etwas zu bauen. Die Herausforderung besteht darin, ganz genau die Story zu kennen, für die ein User Interface gestaltet wird und die richtigen Steine für das angestrebte Ergebnis zu verwenden.

Dieses Problem hat LEGO in einer Zeit erkannt und gelöst, in der das Unternehmen hohe Verluste machte. Seitdem verkauft das Unternehmen Bausätze für Häuser, Auto, Flugzeug und so weiter um Geschichten nachspielen zu lassen. Der Erfolg gibt dem Unternehmen recht.

4. Zu detailliert

Den zu vielen Freiheitsgraden gegenüber stehen zu starke Detailfestlegungen im UI-Styleguide. Diese bereiten ebenfalls Schwierigkeiten. So passt beispielsweise ein Navigationskonzept nicht für jedes Produkt und definierte Pixelabstände zwischen den Elementen sind nicht ohne weiteres für ein produktübergreifendes Look & Feel zu realisieren.

UI-Styleguides sind also uneffektiv, wenn sie während der Entwicklung nicht ausreichend berücksichtigt werden oder nicht zum Einsatzzweck passen.

Wie ein UI-Styleguide Mehrwert schafft

Ausgehend von den genannten Ursachen möchte ich mit Ihnen nun fünf ausgewählte Gegenmaßnahmen für ein einheitliches Look & Feel sowie eine hohe Usability aufzeigen.

Sensibilisierung für UI-Design und Nutzen von Styleguides

Verhaltensänderung ist für keinen Menschen einfach. Das gilt auch für die Entwickler von User Interface Designs. Ein neues Verhalten wie die Verwendung eines UI-Styleguides wird nur ausprobiert, wenn es einen Nutzen wie Arbeitserleichterung oder nachhaltige Entwicklungsergebnisse erwarten lässt. Bestätigt sich das, wird es gelebt und langfristig genutzt.

Die Erwartung an den Nutzen eines UI-Styleguides ist am einfachsten in einem Coaching aufzubauen. Nach meiner Erfahrung sensibilisiert und motiviert ein Coaching Ihre UI-Entwickler am effektivsten für das UI-Design per Styleguide. In produktbezogenenen Übungen sammeln die Teilnehmer ganz nebenbei erste Erfahrungen mit dem Nutzen.

Messbare Qualitätskriterien definieren

Darüber hinaus leistet die Sensibilisierung für Usability, Design und UI-Styleguides noch mehr. Mit ihr merken die Entwickler auch, wann sie die angestrebte Usability sowie das einheitliche Look & Feel erreicht haben. Nur mit dem Wissen um überprüf- und vergleichbare Qualitätskriterien können sie ihr Designziel definieren.

Beispiele für derartige Qualitätskriterien sind:

• Konsistenz: Bedienelemente wie ein Filter verhalten sich in allen Ansichten Ihres Produktes gleich. Grafikelemente wie eine Schriftart werden einheitlich verwendet.
• Effektivität: 100% der Teilnehmer eines Usertests können alle ihnen gestellten Aufgaben mit Ihrem neuen Produkt ohne Erklärung erledigen.
• Markenbild: 80% der Teilnehmer einer Umfrage ordnen ein neues Produktdesign eindeutig Ihrem Unternehmen zu.

UI Abnahmeritual einführen

Die Abnahme des User Interface Designs erfolgt anhand der im UI-Styleguide vorgegebenen Qualitätskriterien. Da jeder für gewöhnlich eine gute Arbeit bestätigt haben möchte, nutzen Entwickler den UI-Styleguide. Natürlich gibt es auch hier Vorreiter und Nachzügler.

Abnahmerituale für das Design und passende Anreize fördern den Ehrgeiz der Entwickler UI-Konzepte vorzulegen, die möglichst beim ersten Anlauf die Tests bestehen. Darauf bereiten sie sich unter Nutzung aller verfügbaren Hilfsmittel vor, zu denen auch der UI-Styleguide gehört.

Abnahmerituale ersetzen bisherige Gewohnheiten während der UI-Konzeption durch ein neues Verhalten. Voraussetzung hierfür ist ein Abnahmeverantwortlicher mit genügend Ressourcen für seine Aufgabe, der auch die Bedeutung des UI-Styleguides als Prüfmittel vorlebt.

Regelmäßige Evaluation der UI Entwicklungsfortschritte

Für eine hohe Usability und ein einheitliches Look & Feel endet jede Gestaltungsrunde mit einer Evaluation. Hierbei wird überprüft, ob das Design den gesetzten Qualitätskriterien gerecht wird. Die aus der Evaluation gewonnenen Erkenntnisse fließen in die Weiterentwicklung des User Interfaces ein.

Da die Entwicklung erfolgreicher User Interface Designs auf einem iterativen Vorgehen beruht, sind mehrere Usabilitytests nötig. Dabei kommen je nach Reifegrad des Designs verschiedene experten- oder nutzerbasierte Methoden zum Einsatz. Die Auswahl pragmatischer Methoden ist eine weitere Aufgabe des Abnahmeverantwortlichen.

Entwicklungsframework inklusive UI-Styleguide

Alle bisher genannten Maßnahmen für hohe Usability und einheitliches Look & Feel zielten auf eine aktive Berücksichtigung durch die Entwickler der User Interfaces ab. Ein weiterer Ansatz ist den UI-Styleguide direkt in der Entwicklungsumgebung zu integrieren.

So kann bereits das Entwicklungsframework vorgeben, wie sich Bedienelemente (z.B. Navigationsmenü) verhalten und aussehen. Bedient sich der Entwickler dieser Elemente aus dem Framework sind diese in der Bedienoberfläche per Default styleguidekonform. Das reduziert Inkonsistenzen, weil die Entwickler nicht aktiv auf die Einhaltung des UI-Styleguides achten müssen.

Ihre Entwicklungskultur bestimmt den Nutzen Ihres UI-Styleguides

Mit den oben genannten Ansätze steigern Sie den Nutzen Ihres UI-Styleguides deutlich. Sie sind Teil der Entwicklungskultur, die das Verhalten der Entwickler prägt. Fangen Sie noch heute mit einer Maßnahme an. Schaffen Sie Anreize in Ihrer Entwicklungskultur, die zur aktiven Verwendung Ihres UI-Styleguides beitragen. Morgen ernten Sie die Früchte dafür, weil Ihre Kunden die hohe Usability Ihrer Produkte sowie das einheitliche Look & Feel schätzen.

 

Kennen sie noch weitere Gründe, warum ein UI-Styleguide nicht den erhofften Mehrwert erbringt? Oder kennen Sie noch andere Maßnahmen, die zu einer regen Nutzung von UI-Styleguides führen? Bitte teilen Sie uns diese per Kommentar mit!