Desktop Modern UI

Microsofts Designsprache Modern UI gibt es mittlerweile in vielen, unterschiedlich erfolgreichen Anwendungen. Modern UI ist fast jedem Benutzer begegnet, vielleicht schon unter dem Arbeitstitel Metro, und Microsoft scheint entschlossen, daran festzuhalten. Deshalb müssen sich Entwickler von Windows-Software damit beschäftigen, dass viele ihrer bewährten Interfaces nicht mit einer Modern-UI-Umgebung harmonieren. Die Software muss sich modernen Interfaces anpassen, die auch bei der Konkurrenz von Apple mit iOS 7 zum Flat UI tendieren. Wir haben zehn Gestaltungsprinzipien aus der Arbeit an solchen Modernisierungen gesammelt und fassen sie hier unter dem Namen „Desktop Modern UI“ zusammen.

Auf den ersten Blick scheint der klassische Desktop mit Fenstern, Icons, Menus und Mauszeiger, im Englischen als WIMP abgekürzt, ungeeignet für Modern UI. Modern UI steht für Touch- und Gesten-optimierte Bedienung und Inhalte, für Konzentration auf einzelne Aufgaben, für Kommunikation, Konsum und Freizeit – weniger für Arbeit am Schreibtisch. Wie passen die kommenden Versionen von Unternehmenssoftware in diese Umgebung? Gibt es Spielraum für Kompromisse?

Ein mögliches Beispiel ist Office 2013, das von Office 2010 vor allem durch eine Neuerung unterscheidet: Modern UI. Da sich das Interaktionsdesign kaum geändert hat, wirkt Modern UI in Office 2013 wie eine oberflächliches, rein visuelles Update bestehender Software. So einfach ist die Sache nicht: Microsoft hat Office 2007 und 2010 stark verändert, um den Einstieg zu erleichtern, und mit dem Modern-UI-Stil von Office 2013 zieht das visuelle Design nach. Zusammen betrachtet zeigen die letzten drei Versionen von Office, dass es Modern UI nicht ohne Anpassung an die veränderte Benutzung von Computern in den letzten zehn Jahren geben kann. Auch das Modern UI in Windows 8 und Windows Store-Apps sind eine Anpassung des Desktops an diese Veränderungen, allerdings mit reduzierter Komplexität. Doch auch in Zukunft wird es mächtige Anwendungen mit hoher Informationsdichte geben, die anders als Windows Store-Apps am besten mit Tastatur und Maus zu bedienen sind. Und es gibt ein dazu passendes Modern UI, wie Office 2013 zeigt. Wir nennen diese Variante der Designsprache Desktop Modern UI. Ihr fehlen aber leicht zugängliche offizielle Design Guidelines. Unsere zehn Gestaltungsprinzipien für Modern UI versuchen, diese Lücke zu füllen. Sie sind unabhängig von Betriebssystem, Programmiersprachen und Anwendungen.

1. Rechteckiger Grundstein

Worauf bauen wir unser Modern-UI-Layouts auf? Apple verwendet seit den sagenumwobenen Tagen des ersten Macintosh abgerundete Rechtecke. Mit Modern UI macht sich Microsoft das Rechteck zu eigen. Rechteckige Pixel sind unsere kleinsten Bauteilchen, und der rechteckige Bildschirm ist unsere Arbeitsfläche. Das Rechteck ist das passende Symbol für einen authentisch digitalen Stil. Rechtecke bilden die Grundlage unserer Layouts. Das scheint offensichtlich, da fast alle Layouts für den Bildschirm als neben- und ineinander liegende Rechtecke abgebildet werden können. Aber jede Anwendung von Modern UI vermeidet auch in Details wie Icons geschwungene Kurven und abgerundete Ecken. Für Desktop Modern UI setzen wir die einfachen, geometrischen Icons aus unserer PlainSeries und MonoSeries ein, um den Modern-UI-Look zu unterstützen.

2. Weißraum

Nachdem wir die Arbeitsfläche und die Bausteine kennen, können wir anfangen, unsere Wireframes in Desktop Modern UI umzusetzen. Ein guter erster Schritt ist es, die Kästen der Wireframes nicht mit Rahmen, sondern durch Weißraum zu gruppieren. Artemij Lebedev fasste es 2006 treffend zusammen: „objects lying close to one another are perceived in a coherent way“ – nah beieinander liegende Objekte werden als zusammenhängend wahrgenommen. Jedes Wort, Icon und Diagramm muss platziert werden, also können wir die Position nutzen, um zusammengehörige Elemente in Rechtecken zu gruppieren. Je offensichtlicher diese Gruppen sind, desto weniger Hintergrundtexturen, Schatten, Farben und Trennlinien müssen wir zur Gruppierung verwenden. Damit sind wir auf einem guten Weg zur reduzierten, klaren Wirkung von Modern UI.

Mit Weißraum können wir bei der Gliederung unseres Layouts auch Hierarchie abbilden: viel Weißraum um ein Element hebt es stärker hervor und gibt ihm Bedeutung. Niemand übersieht das einzelne, zentral angeordnete Eingabefeld der Google-Suche, aber einige übersehen die Menus am oberen und unteren Rand der gleichen Seite. Word 2013 lässt Freiraum um den Text, um dessen Bedeutung zu zeigen. Überschriften im Allgemeinen werden von zusätzlichem Weißraum eingerahmt und hervorgehoben. Weißraum um ein Element schützt auch vor visuellen Ablenkungen. Warum sonst haben zum Beispiel unzählige Buchgestalter seit der Renaissance auf jeder Seite so viel Fläche unbedruckt gelassen?

3. Positiv/Negativ

Wir nutzen Weißraum, um Bereiche hervorzuheben. Wir müssen aber auch unterschiedliche, aber gleich wichtige Bereiche voneinander trennen, zum Beispiel bearbeitbaren Inhalt von Menus. Für Craig Gannell erschweren die reduzierten Gestaltungsmittel von Desktop Modern UI diese Aufgabe, während Nathan Pitman in den Kommentaren von Gannells Artikel darauf hinweist, dass nicht Desktop Modern UI an sich das Problem ist, sondern die schlechte Anwendung des Stils.

In unseren Layouts verwenden wir häufig Positiv-Negativ-Kontrast, um Menus von Inhalt zu trennen. Vor allem von Texten sind wir an positive Darstellung, dunkle Inhalte auf hellem Hintergrund, gewöhnt, deshalb ist es naheliegend, uns diese Konvention zu Nutze zu machen. So machen wir Texte zu hellen, vorwiegend einfarbigen Bereichen.

Um die Menus abzusetzen, können wir hier weiße Texte und Icons auf dunklem, farbigen Hintergrund verwenden. Oft bietet sich die Hausfarbe des Anbieters oder der Software an. Beispielsweise verbindet Microsoft konsistent Word mit Blau, Excel mit Grün und PowerPoint mit Rot. Der Einsatz von Farbe in unserem Layout zeigt auch die Einflussgebiete: das Menu stammt vom Anbieter der Software, dort sind seine Farben festgelegt. Der Inhalt ist das Reich der Benutzer, hier bestimmen sie die Farben.

4. Grauwert

Excel 2013 und Word 2013 stellen beide den Dokumentinhalt in den Mittelpunkt und geben ihm so viel Raum wie möglich. Im Vergleich dazu sind die Menus vergleichsweise gedrängt. Die Priorität ist klar: Inhalt geht vor. Die Aufteilung beeinflusst auch die Wirkung der beiden Bereiche. Der Inhalt ist großzügig und flächig, die Menus klein und dicht. Dadurch sind sie leicht zu unterscheiden. Wieder arbeiten wir mit Weißraum und Anordnung, diesmal innerhalb der Gruppen, in Textzeilen, zwischen Schaltfächen und Icons. Auf dem einfarbigen Hintergrund können wir mit Kontrast und Helligkeit arbeiten und das typographische Stilmittel Grauwert einsetzen. Es beschreibt die Helligkeit eines Textblocks. Um den Grauwert zu beurteilen, entfernt man sich vom Text oder kneift die Augen zusammen, bis die Zeilen zu einer grauen Fläche verschmelzen.

Der Grauwert ergibt sich rechnerisch aus dem Verhältnis von bedruckter zu unbedruckter Fläche, oder Zeichenfläche zu Hintergrund. Praktisch wird er durch Schriftart, Laufweite, Zeilenhöhe, Schriftgröße, Textfarbe und Hintergrundfarbe beeinflusst. Wir können den Grauwert in unseren Interfaces nutzen: weit verteilte Icons mit grauen Labels ergeben ein luftiges, helles Menu, während ein eng gesetzter Textblock mit gelblichem Hintergrund dunkler wirkt. Selbst aus einigen Schritten Entfernung sind Menu und Text auf den ersten Blick zu unterscheiden.

5. Raster

Mittlerweile sind alle Elemente an Ort und Stelle, durch Weißraum gruppiert, durch Kontrast und Grauwert unterschieden. Jetzt ist der Zeitpunkt, mit einem Raster unseren Layouts einen gemeinsamen Rhythmus zu geben. Wir wollen uns aber Gestaltungsfreiheit erhalten, wenn wir unser Grundlinienraster einsetzen. Nehmen wir als Beispiel eine Zeilenhöhe von 22 Pixeln im Fließtext an. Wenn wir diese Höhe halbieren, erhalten wir alle 11 Pixel eine horizontale Rasterlinie. Gegenüber der vollen Zeilenhöhe ermöglicht die halbe Zeilenhöhe als feineres Raster elegante halbzeilige Abstände zwischen Absätzen oder Zeilenhöhen von 33 oder 55 Pixeln bei größerer Schrift. Mit dem Grundlinienraster wird das Auge in regelmäßigen Schritten über den Bildschirm geführt und kann nach Freiräumen den Rhythmus leicht wieder aufnehmen.

Wir können die 11-Pixel-Schritte auch für Breiten einsetzen, aber wir müssen unserem Layout kein horizontales Raster aufzwingen. Die Länge einer einzelnen Zeile ist beispielsweise schwerer zu ändern als die ihre Höhe. Wir wollen den Inhalt nicht einsperren. Das Raster ist ein Klettergerüst, kein Käfig, wie Regina und Andreas Maxbauer es in ihrem „Praxishandbuch Gestaltungsraster“ ausdrücken. Ein Klettergerüst ist zum Spielen da.

Verschwenden wir mit dem Raster Platz? Mit dem Einsatz eines Rasters braucht ein Layout meistens mehr Platz, der aber nicht verschwendet ist. Er gliedert unauffällig unser Layout. Und falls das Layout über den Bildschirm hinaus wächst und Benutzer scrollen müssen, geht die Welt auch nicht unter: Wischen und Tippen werden auf Aluminium-Touchpads und Glasbildschirmen immer leichter und angenehmer. Wenn nicht der ganze Inhalt auf einen Bildschirm passt, kann es auch ein Hinweis sein, die Wireframes noch einmal zu überdenken: brauchen die Benutzer alle Elemente gleichzeitig? Können sie sich in dem komplexen Layout überhaupt orientieren?

6. Animation

Kleine Animationen sind ein weiteres Gestaltungsmittel von Modern UI, um mehrere Layouts zu verbinden. In Office 2013 huscht der Cursor beim Tippen von Buchstabe zu Buchstabe, Zahlen gleiten in ihr Tabellenfeld. Während der Datei-Bildschirm von links hereingleitet, dreht sich synchron das zugehörige Pfeil-Icon. Wichtige Ereignisse auf dem Bildschirm sind verknüpft mit kleinen Bewegungen, die unsere Aufmerksamkeit fordern. Diese Animationen geben unserem Layout Zusammenhalt – es wirkt, als ob eine große Mechanik die einzelnen Elemente antreibt. Bei Übergängen zeigen Animationen auch Verbindungen und helfen uns, ein mentales Modell des Interface zu bauen.

7. Schnitt!

Unternehmenssoftware muss oft viel Information auf begrenztem Raum darstellen. Wir könnten alles auf einen Bildschirm quetschen, es gibt aber auch andere Möglichkeiten, die Ordnung, Lesbarkeit und die Größe von Klick-Zielen weniger gefähren. Wir können den Screen erweitern, scrollen oder blättern, nur müssen wir diese Möglichkeiten den Benutzern klar zeigen, auch in mehreren Bereichen, Paletten oder Fenstern gleichzeitig.

An den Grenzen der scrollbaren Bereiche vermeidet Desktop Modern UI Schlagschatten und starke Rahmen und schneidet den Inhalt einfach und elegant ab, am besten mitten im Text oder im Bild. In den Panorama-Layouts von Windows Phone werden sogar Titel abgeschnitten. So sehen wir, dass noch mehr kommt, wir werden herausgefordert, zu scrollen oder umzublättern. Während unsere Neugier uns antreibt, die Fragmente zu vervollständigen, nimmt unsere Mustererkennung wahr, dass Linien, Buchstaben und Bilder entlang einer gemeinsamen Kante abgeschnitten sind. Auf diese Art zeigen wir ohne zusätzliche Designelemente eine Überlagerung. Diese Darstellung von Überlagerungen hilft uns auch, Pop-Ups zu positionieren: sie sollten möglichst über Content auftauchen, damit ihre Kanten deutlicher werden.

8. Sättigung

Wir sehen Tiefe nicht nur anhand von Schatten. Auch andere Signale helfen uns, die Entfernung und Reihenfolge wahrzunehmen. Bei einem Gebirge am Horizont beispielsweise scheinen uns die vorderen Berge satter gefärbt, während die hinteren Gipfel ins Graue verblassen: schwebende Staubteilchen brechen das Licht und lassen Farben über die Entfernung undeutlicher werden. Dieser Effekt ist Teil unserer Wahrnehmung; automatisch wissen wir, dass niedrige Sättigung auf große Entfernung hindeutet. Mit Sättigung können wir auch unseren Layouts Tiefe geben: die vorderste Ebene bleibt bunt, während die hinteren verblassen. So treten Pop-Ups und Fenster in den Vordergrund.

9. Einfarbige und bunte Icons

Desktop Modern UI verwendet zwei Icon-Stile: einfarbige Piktogramme, zum Beispiel in den Kacheln der Windows-8- und Windows-Phone-Startbildschirme, und bunte, flache Icons, wie zum Beispiel in den Ribbon-Menus von Office-2013. Diese unterschiedlichen Stile übernehmen in unserem Layout unterschiedliche, aber sich ergänzende Rollen. Die einfarbigen Icons bieten sich für vertraute Funktionen an, die in den meisten Programmen vorkommen: „x“ für Schließen, eine Lupe für die Suche, ein Plus für Hinzufügen und so weiter. Die Benutzer sind diese Metaphern gewohnt. Ich gehe davon aus, dass diese Piktogramme wie Worte gelesen werden, und verwende sie auch so: ohne Trenner, im Lesefluss, in Textfarbe und -größe. Im Webdesign werden diese Icons sogar in Schriftarten zusammengefasst eingesetzt.

Die farbigen Icons dagegen können die Aufmerksamkeit auf die besonderen Funktionen eines Programms lenken. Durch ihre Ähnlichkeit zu kleinen Illustrationen erklären sie besser die neuen, ungewohnten Funktionen. Wir verwenden sie daher auch wie Illustrationen, außerhalb des Textflusses, auf weißen Hintergrund, wenn nötig beschriftet.

10. Noch einmal Typographie

Die einzenen Gestaltungsmittel sind im reduzierten Desktop Modern UI wirkungsvoller als in überladenen Designstilen. Zum Beispiel muss Typographie nicht mit Texturen, Effekten und Schlagschatten um Aufmerksamkeit kämpfen. So reicht eine gut gewählte Schriftart in mutigen Größen und Farben, um unseren Layouts Charakter zu geben.

In Desktop Modern UI liefert die Großschreibung zusätzliche Informationen über Texte: Menupunkte verwenden Versalien (in Office 2013), Überschriften nur Kleinbuchstaben (in Windows Phone). Die Groß- und Kleinschreibung tritt normalerweise zusammen mit bestimmten Textgröße auf: Versalien schrumpfen etwas, um sich Texten in gemischter Schreibweise anzupassen. Überschriften in Kleinbuchstaben in Desktop Modern UI sind größer als in anderen Interface-Stilen. Diese Kombinationen sind eine klare Hervorhebung. Die Buchstabenformen unserer gewählten Schriftart kommen groß zur Geltung, auch durch den normalerweise hohen Kontrast in Desktop Modern UI.

Texte in reiner Groß- und Kleinschreibung gelten als schwer leserlich, was vor allem an unserer Gewöhnung an gemischte Schreibweise zu liegen scheint. In unserem Fall müssen die Benutzer aber keinen Roman lesen: in Menus und Überschriften können wir die Lesegeschwindigkeit vernachlässigen, solange wir im Inhalt auf gemischte Schreibweise achten. So gewinnen wir eine weitere Möglichkeit, Textelemente zu unterscheiden, zusätzlich zu ihrer Farbe, Position, Helligkeit, ihrem Hintergrund und ihrem Inhalt.

Ergebnis

Oft muss Unternehmenssoftware viele Information gleichzeitig darstellen. Wenn wir Desktop Modern UIs für diese Fälle gestalten, ist mein Vorbild die Arbeit von Edward Tufte. Unter anderem sammelt und analysiert er elegante Diagramme, die trotz hoher Informationsdichte mühelos zu lesen sind. Das sollte auch unser Ziel sein: Zugänglichkeit und viel Information pro Designelement. Ein gutes Layout ist mehr als die Summe seiner Teile.

Von Edward Tufte stammt auch der Ausdruck „Chart-Junk“: nutzlose Bestandteile eines Diagramms, die keine Information transportieren und so das Verhältnis von Information pro Element senken. Im Interface Design müssen wir ebenfalls „Junk“ vermeiden. Wir wollen auf alles verzichten, das nicht genug zu unserem Layout beiträgt: Störgeräusche, Schnörkel und Ablenkungen. Wir werfen den Müll raus. Klassische Grafikdesigner gestalten seit achtzig Jahren erfolgreich mit dieser Maxime. Modern UI ist mehr als ein aktueller Look, weil es die gleichen Prinzipien mit ungekannter Konsequenz im Interface-Design anwendet.

All trademarks or registered trademarks are properties of their respective owners.