Microsoft setzt bei Office-Icons auf neue Designprinzipien

Microsoft Office Design, Quelle: Microsoft

Microsoft führt mit dem nächsten Update der Office-Suite neue Icons ein. Das auf dem Prinzip der Einfachheit basierende, nutzerorientierte Design betone den Inhalt und spiegele die Geschwindigkeit des modernen Lebens wider.

Das letzte Redesign, das Microsoft bei den Icons der Office-Suite vorgenommen hatte, liegt fünf Jahre zurück. Seitdem habe sich viel verändert, nicht nur die Art und Weise wie Menschen miteinander kommunizierten, etwa mit Hilfe von Selfies und Emojis, sondern auch, wie sie Dinge erledigten, so das Unternehmen. Eine Milliarde Menschen aus den unterschiedlichsten Branchen, Regionen und Generationen nutzen laut Microsoft Office. Sie arbeiteten auf verschiedenen Plattformen und Geräten und in Umgebungen, die schneller und vernetzter seien als je zuvor – gleichzeitig bringe diese Dynamik auch viel Ablenkung mit sich.

So sehen die aktuellen Office-Icons aus

Microsoft Office 365 Icons, Quelle: Microsoft

Microsoft Office 365 Icons

In Reaktion auf diese sich verändernde Arbeitswelt, habe man Office zu einer kollaborativen Suite weiterentwickelt, mit der Anwender in Echtzeit von nahezu jedem Gerät aus arbeiten könnten. Um diese Produktänderung gegenüber Kunden sichtbar zu machen, wurden auch die Office-Symbole neu gestaltet und vereinfacht.

Und so sehen die neuen Icons aus

Microsoft Office Icons, Quelle: Microsoft

Das Designprinzip, das bei den neuen Icons zur Anwendung kommt, basiert auf der Idee der Entkoppelung von Buchstabe und Symbol, wie Jon Friedman, Head of Microsoft Office design, in einem Beitrag auf Medium erklärt. Im Ergebnis führt dies zu zwei eigenständigen Feldern, eines für den Buchstaben und eines für das Symbol.

Die Felder können sowohl als Einheit wie auch getrennt von einander in Erscheinung treten. Auf diese Weise bleibe Vertrautes erhalten, und gleichzeitig werde die Einfachheit von Apps betont. Die Trennung in zwei unterschiedliche Einheiten erzeuge zudem Tiefe, wodurch Möglichkeiten im Kontext 3D entstünden. In den sorgfältig gestalteten Formen vereine sich Tradition und Zukunft, so Friedman. Design sei nunmehr das Herz und die Seele von Office.

Kommentar

Bemerkenswert, wie sich mit den Jahren das Verständnis bei Microsoft hinsichtlich User-Centered Design gewandelt hat. Die Gestaltungsprinzipien, mit denen Microsoft im Zuge der Einführung der Designsprache Metro seinerzeit für Furore sorgte und die tausende (Web)Designer in der ganzen Welt animierte, ebenfalls Anwendungen im „Flat Design“ und in Kachel-Optik zu entwerfen, sie spielen nunmehr keine Rolle mehr. Aus Metro wurde Modern UI, und seit 2017 setzt man bei Microsoft auf die Designsprache Fluent Design.

Mit Minimalismus und vereinfachter Formensprache haben die nach den Prinzipien von Fluent Design gestalteten neuen Office-Icons nichts mehr zu tun. Die mit Schattenwurf ausgestatteten und auf diese Weise Räumlichkeit erzeugenden, bunten Symbole sind vielmehr Ausdruck der gestiegenen Bedeutung der Themenkomplexe Bewegtbild und 3D. In diesem Kontext sind simplifizierte, monochrome Zeichen deutlich weniger sexy als modular aufgebaute Designs, die sich in Sequenzen zerlegen und schick animieren lassen. So oder ähnlich wird man es jedenfalls bei Microsoft sehen.

Farbverläufe sind wieder en vogue, so wie schon vor 12 Jahren. Beleg dafür, dass Design eben auch Moden unterliegt. Der Geschmack der Menschen ändert sich, und mit ihm auch die Gestalt digitaler Anwendungen. Deshalb muss man die neuen Icons nicht mögen – besser und ansprechender als die alten sind diese aber allemal. Der Fehler, die Buchstaben innerhalb der Icons zu verzerren, wird mit dem neuen Design korrigiert, endlich.

Es ist allerdings weniger die Form als solche, die Word, Excel und Powerpoint unterscheidbar machten, als vielmehr die Farbe. Wie wichtig die Farbcodierung als identitätsstiftendes und erklärendes Element ist, wird deutlich, wenn man den Icons einmal ihre Farbe entzieht. Denn dann bleibt nicht viel mehr übrig als eine Ansammlung kontrastarmer Kleckse (siehe eigene Darstellung unten).

Mir ist zudem nicht klar, weshalb ein in Bezug auf die Wahrnehmung derart eingeschränktes Design Ausdruck unseres schneller gewordenen Lebens sein soll. Unterstellt man, dass wir tatsächlich weniger Zeit hätten als früher – wäre es nicht dann aus Sicht des Anwenders klüger, ein klareres Design zu entwerfen, sodass die Unterschiede leichter zu erfassen sind?

Mediengalerie

Weiterführende Links

22 Kommentare zu “Microsoft setzt bei Office-Icons auf neue Designprinzipien

  1. Da Achim sehr richtig hervorhebt, wie wichtig die Farbe für den Wiedererkennungswert und die Unterscheidbarkeit der Logos ist, ist es für mich absolut unverständlich, dass es 6 blaue Icons, aber nicht ein einziges gelbes gibt.

    Bis vor einigen Jahren hatte Outlook die Signaturfarbe Gelborange. Dann wurde irgendwann ohne ersichtlichen Grund die blaue Palette von Word copy-pastet.

    • Verstehe ich auch nicht.

      Ich hätte noch verstanden, wenn Outlook, Yammer und Skype für den gleichen Themenkomplex stehen (zum Beispiel „Kommunikation“) und deswegen die gleich Farbe erhalten. So hätte man nur noch Word und der Cloud eine neue Farbe verpassen müssen, was aber bei Word wohl aufgrund der langen Tradition nicht möglich ist.

    • Die Berücksichtigung von Farbenblindheit und Farbenfehlsichtigkeit sind im Bereich barrierfreier bzw. -armer Gestaltung ein zentraler Aspekt. Wenn das wesentliche Unterscheidungsmerkmal etwa einer Beschilderung oder, so wie in diesem Fall, eines Icon-Sets ihre Farbe ist, dann bedeutet dies für einen nicht geringen Anteil von Menschen, dass sie die damit verbundenen Botschaften nicht oder nur eingeschränkt verstehen können. Menschen beispielsweise mit Rot-Grün-Sehschwäche können den Unterschied zwischen Rot und Grün nicht erkennen. Von dieser Sehschwäche sind gut 8 % aller Männer und 0,4 % der Frauen betroffen (Quelle). Daraus leitet sich für Designer eine besondere Verantwortung ab! Ein solches Design, bei dem die erklärende Funktion im Mittelpunkt steht, darf nicht nur rein aus formal-ästhetischen Gesichtspunkten gestaltet sein; es sollte vielmehr darüber hinaus Anforderungen erfüllen, wie sie etwa im Kontext barrierearmer Gestaltung bestehen.

      • Okay, da habe ich tatsächlich nicht dran gedacht. Dann verstehe ich den schwarz-weiß Vergleich natürlich.

  2. Interessante Kehrtwende. Die Icons sehen natürlich „moderner“ aus. Aber wäre es evtl. nicht eine gute Idee gewesen sich komplett auf die Buchstaben zu fokussieren und die Illustrationen einfach wegzulassen? Ähnlich handhabt das Adobe. Denn wie du schon geschrieben hast orientiert sich der Nutzer viel mehr am Farbcode. Zudem sind es zu viele blaue Icons, was die Orientierung wiederum erschwert. Seit wann ist Outlook eigentlich nicht mehr gelb?

    • Ich hätte es gerne mal anders herum gesehen: Keine Buchstaben mehr, nur noch Icons und Farbe.

      Natürlich sehen die neuen Icons frischer und moderner aus. Wo da jetzt aber der Unterschied zu Googles Material Design liegen soll habe ich beim „Fluent Design“ noch nicht ganz verstanden…

  3. Metro und Modern UI waren auf jedenfalls mutige Schritte von Microsoft. Doch das durchdachtere und schlüssigere Designkonzept ist Google Material Design gewesen. Dort hat m. E. auch Microsoft die „Tiefe“ wieder entdeckt, ohne diese hat der Flatdesignkram halt eben flach ausgesehen.
    Ich lasse die Icons mal noch ein wenig wirken, bisher ist sind sie mir zu indifferent und die Unterscheidbarkeit ist ist für mich ein Hauptkriterium einer Icon-Serie. Farbe und Form sollten da eine Rolle spielen. Ob Buchstaben als Icon taugen wage ich zu bezweifeln, für die Programmikonen auf dem Desktop mag es funktionieren, aber nicht für die einzelnen Funktionen in der Anwendung selber. Gefällig und gut ausgearbeitet sind sie jedenfalls, bis die Mode sie uns wieder als altbacken erscheinen lässt.

    • Gegen Flatdesign spricht eigentlich nix. Nur hat bei MS zuviel reduziert. Rein weiße Icons wie in Windows funktionieren nicht, wenn man >100 davon hat. Material von Google ist da schon besser, auch wenn die es auch verstehen, dauernd unnötigerweise Sachen zu verstecken, obwohl der Monitor fast leer ist.

  4. Meine Meinung ist vielleicht etwas kontrovers, aber ich persönlich kann mit dem neuen Design überhaupt nichts anfangen. Als Microsoft damals, zusammen mit diversen anderen Firmen, auf Flat-Design gesetzt hat, habe ich das sehr begrüßt, da mir dieser „Glossy Look“, die Farbverläufe und Schlagschatten, immer ein Dorn im Auge waren. Vielleicht haben diese in einigen Bereichen ihre Daseinsberechtigung. Für ein Betriebssystem jedoch finde ich diesen Look völlig daneben. Betriebssysteme sollten nicht aufdringlich sein. Sie sollten sich selbst nicht in den Vordergrund drängen, denn sie sind nur ein Werkzeug mit dessen Hilfe die Benutzer selbst etwas erschaffen können. Daher ist in ihrem Design Zurückhaltung geboten. Wie kann Microsoft hier von Einfachheit sprechen, wenn sie auf 3D, Tiefe und Animationen setzen? Was mich auch stört, ist der Trend hin zu einer runden Formsprache. Alle Ecken müssen abgerundet werden, alles muss irgendwie organisch wirken, weil man sich so offenbar den Look der Zukunft vorstellt. Apple hat damit schon länger angefangen, sowohl beim Design ihrer Geräte als auch bei iOS und Google beteiligt sich jetzt seit einiger Zeit auch an diesem Trend. Also ich weiß nicht: Mir gefiel die Metro-Oberfläche deutlich besser. Mein Betriebssystem muss mich beim Einschalten meines PCs nicht in den Arm nehmen. Es muss nicht warm und einladend aussehen. Es ist für mich in erster Linie ein Arbeitsgerät. Wer will, kann es ja selbst anpassen. Aber die Basis sollte zurückhaltend sein und da fand ich das jetzige bzw. alte Design deutlich besser.

    • Ich stimme deiner Auffassung persönlich zu und war auch großer Freund der Metro-Optik, auch wenn sie hier und da verbesserungswürdig wäre. Ein Betriebssystem als „Arbeitsgerät“, wie du schreibst, muss einen nicht „in den Arm nehmen“ und sollte möglichst wenig im Weg stehen. Da gebe ich dir vollkommen Recht.
      Wo dann aber wohl der Hase im Pfeffer liegt: Für Microsoft wird das klassische Betriebssystem immer unwichtiger. Die Office-Suite findet zunehmend „in der Cloud“ statt, der heutige, und vor allem zukünftige, Anwender sitzt nicht mehr vor dem klassischen Desktop-PC mit Maus und Tastatur. 3D und Animation bekommen in VR-/AR-Umgebungen gänzlich andere Rollen und Stellenwerte, als sie auf den Klicki-Bunti-Oberflächen von Windows XP hatten.
      Ob das nun alles bezogen auf die Arbeitseffizienz Hand und Fuß hat, muss sich sicherlich erst noch zeigen. Allgemein kann man aber schon feststellen, dass der professionelle Anwender einfach nicht mehr der Hauptgeldgeber ist. Weder bei Microsoft, noch bei Apple und noch nie bei Google.

      Aus gestaltericher Sicht muss man leider festhalten, dass Microsoft hier – abgesehen von den mutigen und radikalen Änderungen zu Zeiten von Windows 8 – nie wirklich ein glückliches Händchen hatte. Guckt man sich mal Windows 10 an, hat man nach wie vor einen Flickenteppich aus Icons verschiedener Äras. Da tummeln sich Darstellungen aus den vergangenen 15 Jahren und verwässern so immer mehr eine eigentlich klare Design-Linie.
      Vielleicht sollte Microsoft hier erstmal anfangen und einmal alle Anwendungen auf den aktuellen Stand bringen, bevor wieder der nächste große Anlauf genommen wird.

  5. Mich wundert es ein wenig, dass die Trapeze nicht beigehalten werden, in denen zuletzt die Buchstaben standen. Gemeinsam mit dem Office-Logo, dem Microsoft-Logo und dem Windows-Logo wollte man eigentlich ja einen „schlüssigen Markenverbund“ schaffen, wie es damals in diesem Blogeintrag genannt wurde: https://www.designtagebuch.de/das-neue-logo-von-microsoft/
    Entsprechend gespannt bin ich auch, wie weitere Logos und Icons angepasst werden.

    • Es könnte sich bei den Office Icons tatsächlich um einen Prototypen für einen weitaus umfangreicheren Neuaufbau des eigenen Iconsets von Windows/Microsoft handeln. Es gibt ja schon Gerüchte dass da einiges geplant ist für das zukünftige Windows und andere Produkte von Microsoft…

  6. Der Unterschied bei der Farbe zwischen Word und Outlook ist mir zu gering geworden. Outlook war ja sonst, seitdem es blau ist, immer heller als Word und man konnte die Apps auch von der Farbe her unterscheiden, Jetzt ist aber durch diese Farbverläufe der Unterschied verloren gegangen. Das O ist zwar auf einer hellblauen Ebene und das W auf einer dunkleren blauen Ebene aber die Farben dahinter im Farbverlauf sind in etwa die gleichen und darauf achtet man ja..

  7. Betrachtet man mal was diese Icons eigentlich leisten müssen, finde ich, machen diese neuen Entwürfe einen gravierenden Fehler. Die einzigen Momente wo diese nämlich eine Rolle spielen ist, wenn User das gewünschte Programm öffnen oder darauf zugreifen möchten. Heißt, es muss in Bruchteilen von Sekunde erkennbar sein welches Programm der User gerade sieht oder „ließt“.
    Ich glaube die Hierarchie wonach das Auge sich richtet ist wie folgt. 1: Schrift 2: Farbe 3: Form.
    Im Neuen Entwurf wurde demnach also zu sehr auf Form und Farbe gelegt. Ich muss beim betrachten der Icons auf den Mockups echt überlegen welches Icon für welches Programm steht.
    Alleine weil es viel zu viele Blautöne gibt. Wenn die Buchstaben größer wäre, hätte es etwas gegen wirken können. So aber leider gehen die Buchstaben unter. Dazu kommt, das sie sich in Form sogar alle sehr ähneln.

  8. Wäre echt super, wenn Microsoft den Usern in der Systemsteuerung die Möglichkeit gibt, das Design der Icons selbst zu wählen. Dann kann sich jeder das einstellen, was man gerne haben möchte, ich bin auch ein großer Fan des Flat-Design.

  9. Ich denke, das Meiste wurde bereits gesagt. Ich persönlich finde ebenfalls ein flacheres Design dann besser, wenn es im Prinzip um kleine, schnell zu erkennende Icons geht. Klare Formen, guter Kontrast und wenig Farbstufen sind hier von Vorteil. Absolut entteuscht bin auch ich von der Farbauswahl im Direktvergleich der Anwendungen… Dass Outlook nicht mehr gelb ist, wurde mir erst so richtig bewusst, als ich statt dem Outlook-Officeprogramm einmal die Outlook Web App verwendet habe. Absoluter Blödsinn!

    Vertrete auch die Meinung, dass Microsoft besser an anderen Stellen nachbessern sollte, statt mit ein paar Symbolen Zeit und Geld zu verschwenden. Am Ende zahlts eh der Kunde, ob ihm der neue Look nun gefällt oder nicht.

Kommentar verfassen

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="meineurl"> <a> <blockquote>