Wenn wir ehrlich sind, warten wir alle verzweifelt auf die Zukunft, auf den nächsten Boom, der so nah scheint, aber in den letzten 5 Jahren eigentlich nicht viel nähergekommen ist. Microsofts Fluent Design ist einer dieser Trends, der einen weiteren Schritt zu diesem Boom verspricht. Wird es den hohen Erwartungen der UI Designer Gemeinschaft gerecht werden können? Was können Designer, was können Entwickler im Moment daraus machen? Ich habe mir das Fluent Design System angesehen und es während meiner Arbeit an einem ersten Testprojekt untersucht. In diesem Artikel werde ich Ihnen mitteilen, was ich bisher gelernt habe.
Ein enttäuschender Start für Designer
Für mich war der Trailer von Microsofts Fluent Design riesig. Ein kurzes Video mit Einblicken in die gesamte Microsoft-Welt und wie sie durch diesen neuen Designansatz zusammenkommt, unterstützt von einer sehr kraftvollen Musik. Übrigens, haben Sie gesehen, wie in einem Trailer eine E-Mail in ein Formular eingegeben wurde und das System mit „falsch formatierter E-Mail-Adresse“ reagierte? Jemand bei Microsoft hat einen dunklen Sinn für Humor.
Das Redesign einer unserer internen Apps war meine erste Annäherung an ein praktisches Projekt von Fluent Design. Als ersten Anlauf nahm ich mir tatsächlich vor, den Style Guide komplett durchlesen. Ich habe es bis zur Hälfte geschafft, bevor ich aufgegeben habe. Die offizielle Dokumentation richtet sich meiner Meinung nach eher an Entwickler als an Designer, was für die Umsetzung großartig ist. Allerdings sind visuelle Beispiele selten – der Hauptanteil der Designsegmente wird durch Code und dessen Umsetzung repräsentiert. Auf diese Weise können Entwickler leicht auf die Kernfunktionen von Fluent Design zugreifen. Für die Designer stehen leider nur ein unvollständiges Toolkit für einige Prototyping-Softwares zum Download zur Verfügung. Weder der Style Guide noch der Kit beschreiben wirklich irgendwelche Aspekte des Designs im Detail, so dass es notwendig ist, weitere Medium-Artikel und Fluent Design Prototypen zu durchforsten, um das Gesamtbild zu erhalten. Da sich das Toolkit selbst in ständiger Entwicklung befindet, wird es wahrscheinlich bald die offizielle Dokumentation einholen. Aber im Moment war die Anfangserfahrung für mich als Designer, gelinde gesagt, mittelmäßig.
Aber zurück zu meinen Plänen, eine App zu bauen. Während der Arbeit an diesem Projekt habe ich ein paar Dinge bemerkt: Das Layout-Redesign fokussiert mehr auf eine reibungslose Userinteraktion als das damalige Metro-Design-System. Die horizontale Navigation mit dem neu gestalteten Ribbon, einst „die umstrittene Registerkarten-Implementierung, die 2007 ihr Debüt gab“ (neowin.net) und sich nun zu einem herrlich vereinfachten Navigationsbereich entwickelte, war eine der ersten Änderungen an einem geradlinigem Benutzererlebnis in der Microsoft Office Software.
Ribbon in MetroDesign vs ribbon in Fluent Design (Courtesy to howtogeek.com and winfuture.de)
Auffälliger ist jedoch die Verspieltheit von Licht und Tiefe in den neuen Fluent Design Beispielen, die tatsächlich als natürlich und nicht wie billige Effekthascherei herüber kommen.
Bei der Arbeit mit dem Designstil färbte diese Nachdenklichkeit über die Darstellung der Physik auf mich ab. Eine der Kernfunktionen der App, an der ich arbeitete, war die Konvertierung von SVGs in XAML. Für die in das Design eingebauten Aspekte überlegte ich, ob sein Verhalten so natürlich wie möglich wirkt. Ich gebe zu, dass es manchmal nicht so reibungslos geklappt hat, wie es hier klingt. Für den Hintergrund habe ich ausschließlich Acryl verwendet, um der Software eine Leichtigkeit zu verleihen.
Auch die Navigation wird durch das extrem strukturierte vertikale Layout so minimal und organisiert wie möglich gehalten. Ich habe das Reveal-Highlight im Prototyp gefälscht, da es eine wichtige Rolle bei der Handhabung des Cursors spielt. Ich wünschte, ich hätte diese Funktion von Fluent Design sowie die native Animation besser in dem Prototyp integrieren können. Hier zeigt sich auch, dass die Dokumentation stärker auf die Bedürfnisse der Entwickler zugeschnitten ist. Für die Designer ist es noch nicht möglich, ohne viel Aufwand diese Aspekte in der Prototyping-Software nachzubilden. Ich glaube, wenn Adobe XD und Konsorten mal soweit sind, könnten wir den Designstil auf eine ganz neue Ebene bringen.
Kurz gesagt, die Stileigenschaften wie Acryl, die nativen Animationen und der Einsatz von Licht bilden die Brücke zwischen Skeumorphic Design und Flat Design. Auf diese Weise verbindet es die Benutzung von interaktiven Oberflächen mit einer futuristischen und gleichzeitig vertrauten Sensation. Der Vormarsch des Acryls verwandelt die ebene Oberfläche des Bildschirms in ein dreidimensionales Universum, mit Tiefe und einem Gefühl der Physik, während die Annäherung des Lichts andererseits der menschlichen Berührung Superkraft zu verleihen scheint. Warum funktioniert es so gut? Ich lese gerade „Microinteraction“ von Dan Saffer, und ich habe das Gefühl, dass es auch jemand vom Microsoft Design Team getan hat. Wie Saffer in seinem Buch lehrt, nutzt Fluent Design die bereits vorhandene Schnittstelle, um mit der Verbindung von Licht und Cursor eine neue Dimension zu schaffen. Durch die Betrachtung solcher Details belebt Fluent Design die übersehenen Dinge, wie zum Beispiel die Hervorhebung des Cursors. Meiner Meinung nach wirken diese visuellen Effekte deshalb so natürlich und nicht wie ein Hollywood-Blockbuster überlagert.
Im Vergleich zu der Vielzahl an Möglichkeiten nutzt Microsoft selbst Fluent Design auf vorsichtige, ja sogar schüchterne Weise. Die Office 365-Software wurde leicht überarbeitet, und die Benutzerfreundlichkeit wurde verbessert, ja. Aber alles in allem sehen das Acryl und das vertikale Layout sehr ähnlich wie eine etwas andere Version von macOS aus, und einige Leute, die nicht genau aufpassen, haben die Änderung wahrscheinlich nicht einmal bewusst wahrgenommen.
Acrylic Backgrounds and the vertical layout can also be found in macOS.
Das Potenzial besteht darin, eine Benutzeroberfläche mit den Eigenschaften zu verbessern und noch weiter zu gehen, die Software auf einem Laptop so spannend zu machen wie auf einem VR-Headset. Meiner Meinung nach liegt es nun an uns, die Idee aufzunehmen und eine eigene Interpretation des Designstils zu starten. Machen wir es riesig, indem wir die Interpretation von Licht, von Verhaltensanpassungen und schließlich die im Designstil implementierte Kernidee aufgreifen.
Unterstützung der Barrierefreiheit
Der beste Aspekt an Fluent Design ist jedoch auf den ersten Blick nicht sichtbar. Microsoft erinnert die Entwickler und Designer noch einmal daran, dass Inklusion wichtig ist. In gewisser Weise ist es traurig, dass wir immer dazu immer noch aufgefordert werden müssen und es nicht einfach schon Bestandteil der Arbeitsweise ist, aber was soll man machen. Microsoft hilft uns nicht nur, indem sie uns End-to-End-Support von Bildungsarbeit bis hin zu Tests anbieten, sie wollen auch das Verständnis von Inklusion ändern. So sind ihre 4 Prinzipien der Barrierefreiheit weit entfernt von der Unterstützung von Screenreading oder großen Schriftgrößen. „Think universal“, „Make it personal“, „Keep it simple“ und mein absoluter Favorit „Create delight“. Zwei dieser Prinzipien finden sich in vielen Produkten von selbst wieder. „Keep it simple“, eine von vielen Varianten von „Keep it simple stupid“, wurde in das Gehirn jedes Designers und Managers eingeprägt und ist auch einer der Kernaspekte von Fluent Design. „Make it personal“ war der Grund, warum wir für fast jede App ein Konto einrichten und uns alle Passwörter merken müssen. Das ist jedoch auch der Grund, warum sich unsere Apps an unsere Vorlieben in Bezug auf Helligkeit, Farben, Schriftgrößen und Lieblingsinhalte erinnern, um uns das beste Erlebnis zu bieten. Darüber hinaus verwendet Microsoft die Programme „Think universal“ und „Create delight“. Die Kombination aller vier Prinzipien bildet die Grundlage für eine integrative und zugängliche Erfahrung. “ Create delight: Delightful experiences evoke wonder and discovery. Sometimes it’s magical. Sometimes it’s a detail that’s just right. We design these moments to feel like a welcomed change in tempo. The result is an experience that has momentum and flow.“ Es ist schwierig, die Prinzipien zu kombinieren, und ohne Zweifel braucht es Zeit, um sie in die täglichen Prozesse des Designs aufzunehmen. Da die App ein Prototyp ist, habe ich versucht, kontrastreiche Farben innerhalb der App zu verwenden. Für die weitere Umsetzung der Barrierefreiheit freue ich mich darauf, diese für das endgültige Design und die Entwicklung des eigentlichen Produkts voranzutreiben.
Bottom line
Fluent Design hat einige sehr starke Vorstellungen, die das UI- und UX-Design einen Schritt weiterbringen könnten. Es streckt gerade jetzt noch die Fühler aus und verpasst daher die Gelegenheit, die Wirkung zu entfalten, die es haben könnte, insbesondere indem es sich hauptsächlich an Entwickler richtet und Designer in der Luft hängen lässt. Aber es gibt Inspiration und für uns Designer könnte es unsere Verantwortung sein, diese Inspiration auf die nächste Stufe zu bringen. Aber es liegt definitiv in unserer Verantwortung, die Integration in unseren Designprozess endlich umzusetzen.
