{"id":3833,"date":"2013-05-02T17:20:36","date_gmt":"2013-05-02T15:20:36","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/en\/?p=3833"},"modified":"2020-02-13T16:25:29","modified_gmt":"2020-02-13T15:25:29","slug":"desktop-modern-ui","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/desktop-modern-ui\/","title":{"rendered":"Desktop Modern UI"},"content":{"rendered":"

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\u00fcssen sich Entwickler von Windows-Software damit besch\u00e4ftigen, dass viele ihrer bew\u00e4hrten 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<\/a>\u00a0zum Flat UI tendieren. Wir haben zehn Gestaltungsprinzipien aus der Arbeit an solchen Modernisierungen gesammelt und fassen sie hier unter dem Namen \u201eDesktop Modern UI\u201c zusammen.<\/p>\n

<\/p>\n

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

\"\"<\/a><\/p>\n

Ein m\u00f6gliches Beispiel ist Office 2013, das von Office 2010 vor allem durch eine Neuerung unterscheidet: Modern UI. Da sich das Interaktionsdesign kaum ge\u00e4ndert hat, wirkt Modern UI in Office 2013 wie eine oberfl\u00e4chliches, rein visuelles Update bestehender Software. So einfach ist die Sache nicht: Microsoft hat Office 2007 und 2010 stark ver\u00e4ndert, 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\u00e4nderte 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\u00e4nderungen, allerdings\u00a0mit reduzierter Komplexit\u00e4t. Doch auch in Zukunft wird es m\u00e4chtige 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<\/em>. Ihr fehlen aber leicht zug\u00e4ngliche offizielle Design Guidelines. Unsere zehn Gestaltungsprinzipien f\u00fcr Modern UI versuchen, diese L\u00fccke zu f\u00fcllen. Sie sind unabh\u00e4ngig von Betriebssystem, Programmiersprachen und Anwendungen.<\/p>\n

1. Rechteckiger Grundstein<\/h3>\n

\"\"\"\"Worauf bauen wir unser Modern-UI-Layouts auf? Apple\u00a0verwendet seit den sagenumwobenen Tagen des ersten Macintosh abgerundete Rechtecke<\/a>. Mit Modern UI macht sich Microsoft das Rechteck<\/a> zu eigen. Rechteckige Pixel sind unsere kleinsten Bauteilchen, und der rechteckige Bildschirm ist unsere Arbeitsfl\u00e4che. Das Rechteck ist das passende Symbol f\u00fcr einen authentisch digitalen Stil. Rechtecke bilden die Grundlage unserer Layouts. Das scheint offensichtlich, da fast alle Layouts f\u00fcr den Bildschirm als neben- und ineinander liegende Rechtecke abgebildet werden k\u00f6nnen. Aber jede Anwendung von Modern UI vermeidet auch in Details wie Icons geschwungene Kurven und abgerundete Ecken. F\u00fcr Desktop Modern UI setzen wir die einfachen, geometrischen Icons aus unserer PlainSeries<\/a> und MonoSeries<\/a>\u00a0ein, um den Modern-UI-Look zu unterst\u00fctzen.<\/p>\n

2. Wei\u00dfraum<\/h3>\n

\"\"Nachdem wir die Arbeitsfl\u00e4che und die Bausteine kennen, k\u00f6nnen wir anfangen, unsere Wireframes in Desktop Modern UI umzusetzen. Ein guter erster Schritt ist es, die K\u00e4sten der Wireframes nicht mit Rahmen, sondern durch Wei\u00dfraum zu gruppieren. Artemij Lebedev fasste es 2006 treffend zusammen: \u201eobjects lying close to\u00a0one another are perceived in\u00a0a\u00a0coherent way<\/a>\u201c – nah beieinander liegende Objekte werden als zusammenh\u00e4ngend wahrgenommen. Jedes Wort, Icon und Diagramm muss platziert werden, also k\u00f6nnen wir die Position nutzen, um zusammengeh\u00f6rige Elemente in Rechtecken zu gruppieren. Je offensichtlicher diese Gruppen sind, desto weniger Hintergrundtexturen, Schatten, Farben und Trennlinien m\u00fcssen wir zur Gruppierung verwenden. Damit sind wir auf einem guten Weg zur reduzierten, klaren Wirkung von Modern UI.<\/p>\n

Mit Wei\u00dfraum k\u00f6nnen wir bei der Gliederung unseres Layouts auch Hierarchie abbilden: viel Wei\u00dfraum um ein Element hebt es st\u00e4rker hervor und gibt ihm Bedeutung. Niemand \u00fcbersieht das einzelne, zentral angeordnete Eingabefeld der Google-Suche, aber einige \u00fcbersehen die Menus am oberen und unteren Rand der gleichen Seite. Word 2013 l\u00e4sst Freiraum um den Text, um dessen Bedeutung zu zeigen. \u00dcberschriften im Allgemeinen werden von zus\u00e4tzlichem Wei\u00dfraum eingerahmt und hervorgehoben. Wei\u00dfraum um ein Element sch\u00fctzt auch vor visuellen Ablenkungen. Warum sonst haben zum Beispiel unz\u00e4hlige Buchgestalter seit der Renaissance auf jeder Seite so viel Fl\u00e4che unbedruckt gelassen?<\/p>\n

3. Positiv\/Negativ<\/h3>\n

\"\"Wir nutzen Wei\u00dfraum, um Bereiche hervorzuheben. Wir m\u00fcssen aber auch unterschiedliche, aber gleich wichtige Bereiche voneinander trennen, zum Beispiel bearbeitbaren Inhalt von Menus. F\u00fcr Craig Gannell<\/a> erschweren die reduzierten Gestaltungsmittel von Desktop Modern UI diese Aufgabe, w\u00e4hrend 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.<\/p>\n

In unseren Layouts verwenden wir h\u00e4ufig Positiv-Negativ-Kontrast, um Menus von Inhalt zu trennen. Vor allem von Texten sind wir an positive Darstellung, dunkle Inhalte auf hellem Hintergrund, gew\u00f6hnt, deshalb ist es naheliegend, uns diese Konvention zu Nutze zu machen. So machen wir Texte zu hellen, vorwiegend einfarbigen Bereichen.<\/p>\n

Um die Menus abzusetzen, k\u00f6nnen wir hier wei\u00dfe 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\u00fcn 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.<\/p>\n

4. Grauwert<\/h3>\n

\"\"\"\"Excel 2013 und Word 2013 stellen beide den Dokumentinhalt in den Mittelpunkt und geben ihm so viel Raum wie m\u00f6glich. Im Vergleich dazu sind die Menus vergleichsweise gedr\u00e4ngt. Die Priorit\u00e4t ist klar: Inhalt geht vor. Die Aufteilung beeinflusst auch die Wirkung der beiden Bereiche. Der Inhalt ist gro\u00dfz\u00fcgig und fl\u00e4chig, die Menus klein und dicht. Dadurch sind sie leicht zu unterscheiden. Wieder arbeiten wir mit Wei\u00dfraum und Anordnung, diesmal innerhalb der Gruppen, in Textzeilen, zwischen Schaltf\u00e4chen und Icons. Auf dem einfarbigen Hintergrund k\u00f6nnen 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\u00e4che verschmelzen.<\/p>\n

\"\"Der Grauwert ergibt sich rechnerisch aus dem Verh\u00e4ltnis von bedruckter zu unbedruckter Fl\u00e4che, oder Zeichenfl\u00e4che zu Hintergrund. Praktisch wird er durch Schriftart, Laufweite, Zeilenh\u00f6he, Schriftgr\u00f6\u00dfe, Textfarbe und Hintergrundfarbe beeinflusst. Wir k\u00f6nnen den Grauwert in unseren Interfaces nutzen: weit verteilte Icons mit grauen Labels ergeben ein luftiges, helles Menu, w\u00e4hrend ein eng gesetzter Textblock mit gelblichem Hintergrund dunkler wirkt. Selbst aus einigen Schritten Entfernung sind Menu und Text auf den ersten Blick zu unterscheiden.<\/p>\n

5. Raster<\/h3>\n

\"\"Mittlerweile sind alle Elemente an Ort und Stelle, durch Wei\u00dfraum 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\u00f6he von 22 Pixeln im Flie\u00dftext an. Wenn wir diese H\u00f6he halbieren, erhalten wir alle 11 Pixel eine horizontale Rasterlinie. Gegen\u00fcber der vollen Zeilenh\u00f6he erm\u00f6glicht die halbe Zeilenh\u00f6he als feineres Raster elegante halbzeilige Abst\u00e4nde zwischen Abs\u00e4tzen oder Zeilenh\u00f6hen von 33 oder 55 Pixeln bei gr\u00f6\u00dferer Schrift. Mit dem Grundlinienraster wird das Auge in regelm\u00e4\u00dfigen Schritten \u00fcber den Bildschirm gef\u00fchrt und kann nach Freir\u00e4umen den Rhythmus leicht wieder aufnehmen.<\/p>\n

Wir k\u00f6nnen die 11-Pixel-Schritte auch f\u00fcr Breiten einsetzen, aber wir m\u00fcssen unserem Layout kein horizontales Raster aufzwingen. Die L\u00e4nge einer einzelnen Zeile ist beispielsweise schwerer zu \u00e4ndern als die ihre H\u00f6he. Wir wollen den Inhalt nicht einsperren. Das Raster ist ein Kletterger\u00fcst, kein K\u00e4fig, wie Regina und Andreas Maxbauer es in ihrem \u201ePraxishandbuch Gestaltungsraster\u201c ausdr\u00fccken. Ein Kletterger\u00fcst ist zum Spielen da.<\/p>\n

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\u00e4llig unser Layout. Und falls das Layout \u00fcber den Bildschirm hinaus w\u00e4chst und Benutzer scrollen m\u00fcssen, geht die Welt auch nicht unter: Wischen und Tippen\u00a0werden 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\u00a0zu \u00fcberdenken: brauchen die Benutzer alle Elemente gleichzeitig? K\u00f6nnen sie sich in dem komplexen Layout \u00fcberhaupt orientieren?<\/p>\n

6. Animation<\/h3>\n

\"\"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\u00e4hrend der Datei-Bildschirm von links hereingleitet, dreht sich synchron das zugeh\u00f6rige Pfeil-Icon. Wichtige Ereignisse auf dem Bildschirm sind verkn\u00fcpft mit kleinen Bewegungen, die unsere Aufmerksamkeit fordern. Diese Animationen geben unserem Layout Zusammenhalt<\/a> \u2013 es wirkt, als ob eine gro\u00dfe Mechanik die einzelnen Elemente antreibt. Bei \u00dcberg\u00e4ngen zeigen Animationen auch Verbindungen und helfen uns, ein mentales Modell des Interface zu bauen.<\/p>\n

7. Schnitt!<\/h3>\n

\"\"Unternehmenssoftware muss oft viel Information auf begrenztem Raum darstellen. Wir k\u00f6nnten alles auf einen Bildschirm quetschen, es gibt aber auch andere M\u00f6glichkeiten, die Ordnung, Lesbarkeit und die Gr\u00f6\u00dfe von Klick-Zielen weniger gef\u00e4hren. Wir k\u00f6nnen den Screen erweitern, scrollen oder bl\u00e4ttern, nur m\u00fcssen wir diese M\u00f6glichkeiten den Benutzern klar zeigen, auch in mehreren Bereichen, Paletten oder Fenstern gleichzeitig.<\/p>\n

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\u00e4ttern. W\u00e4hrend unsere Neugier uns antreibt, die Fragmente zu vervollst\u00e4ndigen, nimmt unsere Mustererkennung wahr, dass Linien, Buchstaben und Bilder entlang einer gemeinsamen Kante abgeschnitten sind. Auf diese Art zeigen wir ohne zus\u00e4tzliche Designelemente eine \u00dcberlagerung. Diese Darstellung von \u00dcberlagerungen hilft uns auch, Pop-Ups zu positionieren: sie sollten m\u00f6glichst \u00fcber Content auftauchen, damit ihre Kanten deutlicher werden.<\/p>\n

8. S\u00e4ttigung<\/h3>\n

\"\"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\u00e4rbt, w\u00e4hrend die hinteren Gipfel ins Graue verblassen: schwebende Staubteilchen brechen das Licht und lassen Farben \u00fcber die Entfernung undeutlicher werden. Dieser Effekt ist Teil unserer Wahrnehmung; automatisch wissen wir, dass niedrige S\u00e4ttigung auf gro\u00dfe Entfernung hindeutet. Mit S\u00e4ttigung k\u00f6nnen wir auch unseren Layouts Tiefe geben: die vorderste Ebene bleibt bunt, w\u00e4hrend die hinteren verblassen. So treten Pop-Ups und Fenster in den Vordergrund.<\/p>\n

9. Einfarbige und bunte Icons<\/h3>\n

\"\"Desktop Modern UI verwendet zwei Icon-Stile: einfarbige Piktogramme<\/a>, 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 \u00fcbernehmen in unserem Layout unterschiedliche, aber sich erg\u00e4nzende Rollen. Die einfarbigen Icons bieten sich f\u00fcr vertraute Funktionen an, die in den meisten Programmen vorkommen: \u201ex\u201c f\u00fcr Schlie\u00dfen, eine Lupe f\u00fcr die Suche, ein Plus f\u00fcr Hinzuf\u00fcgen 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\u00f6\u00dfe. Im Webdesign werden diese Icons sogar in Schriftarten zusammengefasst eingesetzt.<\/p>\n

\"\"<\/a><\/p>\n

Die farbigen Icons dagegen k\u00f6nnen die Aufmerksamkeit auf die besonderen Funktionen eines Programms lenken. Durch ihre \u00c4hnlichkeit zu kleinen Illustrationen erkl\u00e4ren sie besser die neuen, ungewohnten Funktionen. Wir verwenden sie daher auch wie Illustrationen, au\u00dferhalb des Textflusses, auf wei\u00dfen Hintergrund, wenn n\u00f6tig beschriftet.<\/p>\n

10. Noch einmal Typographie<\/h3>\n

\"\"Die einzenen Gestaltungsmittel sind im reduzierten Desktop Modern UI wirkungsvoller als in \u00fcberladenen Designstilen. Zum Beispiel muss Typographie nicht mit Texturen, Effekten und Schlagschatten um Aufmerksamkeit k\u00e4mpfen. So reicht eine gut gew\u00e4hlte Schriftart in mutigen Gr\u00f6\u00dfen und Farben, um unseren Layouts Charakter zu geben.<\/p>\n

In Desktop Modern UI liefert die Gro\u00dfschreibung zus\u00e4tzliche Informationen \u00fcber Texte: Menupunkte verwenden Versalien (in Office 2013), \u00dcberschriften nur Kleinbuchstaben (in Windows Phone). Die Gro\u00df- und Kleinschreibung tritt normalerweise zusammen mit bestimmten Textgr\u00f6\u00dfe auf: Versalien schrumpfen etwas, um sich Texten in gemischter Schreibweise anzupassen. \u00dcberschriften in Kleinbuchstaben in Desktop Modern UI sind gr\u00f6\u00dfer als in anderen Interface-Stilen. Diese Kombinationen sind eine klare Hervorhebung. Die Buchstabenformen unserer gew\u00e4hlten Schriftart kommen gro\u00df zur Geltung, auch durch den normalerweise hohen Kontrast in Desktop Modern UI.<\/p>\n

Texte in reiner Gro\u00df- und Kleinschreibung gelten als schwer leserlich, was vor allem an unserer Gew\u00f6hnung an gemischte Schreibweise<\/a> zu liegen scheint. In unserem Fall m\u00fcssen die Benutzer aber keinen Roman lesen: in Menus und \u00dcberschriften k\u00f6nnen wir die Lesegeschwindigkeit vernachl\u00e4ssigen, solange wir im Inhalt auf gemischte Schreibweise achten. So gewinnen wir eine weitere M\u00f6glichkeit, Textelemente zu unterscheiden, zus\u00e4tzlich zu ihrer Farbe, Position, Helligkeit, ihrem Hintergrund und ihrem Inhalt.<\/p>\n

Ergebnis<\/h3>\n

Oft muss Unternehmenssoftware\u00a0viele Information gleichzeitig darstellen. Wenn wir Desktop Modern UIs f\u00fcr diese F\u00e4lle gestalten, ist mein Vorbild die Arbeit von Edward Tufte. Unter anderem sammelt und analysiert er elegante Diagramme, die trotz hoher Informationsdichte m\u00fchelos zu lesen sind. Das sollte auch unser Ziel sein: Zug\u00e4nglichkeit und viel Information pro Designelement. Ein gutes Layout ist mehr als die Summe seiner Teile.<\/p>\n

\"\"<\/a><\/p>\n

Von Edward Tufte stammt auch der Ausdruck \u201eChart-Junk\u201c: nutzlose Bestandteile eines Diagramms, die keine Information transportieren und so das Verh\u00e4ltnis von Information pro Element senken. Im Interface Design m\u00fcssen wir ebenfalls \u201eJunk\u201c vermeiden. Wir wollen auf alles verzichten, das nicht genug zu unserem Layout beitr\u00e4gt: St\u00f6rger\u00e4usche, Schn\u00f6rkel und Ablenkungen. Wir werfen den M\u00fcll raus. Klassische Grafikdesigner gestalten seit achtzig Jahren erfolgreich mit dieser Maxime. Modern UI ist mehr als ein aktueller Look, weil es\u00a0die gleichen Prinzipien mit ungekannter Konsequenz im Interface-Design anwendet.<\/p>\n

All trademarks or registered trademarks are properties of their respective owners.<\/span><\/p>\n","protected":false},"author":26,"featured_media":0,"template":"","tags":[43,154,29,62,198,189],"class_list":["post-3833","blog","type-blog","status-publish","hentry","tag-look-and-feel","tag-typografie","tag-user-interface-design","tag-visuelles-design","tag-windows-8-de","tag-windows-8"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/3833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/26"}],"version-history":[{"count":1,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/3833\/revisions"}],"predecessor-version":[{"id":11292,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/3833\/revisions\/11292"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=3833"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=3833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}