Was ist ein Designsystem und warum es wichtig ist.
Stellen Sie sich Ihr Lieblingsprodukt oder Ihre Lieblingswebsite vor. Sie ist für Sie relevant. Sie ist schnell und funktioniert so, wie Sie es erwarten. Sie ist leicht zu bedienen.
Letzteres? Das mit der Benutzerfreundlichkeit? Hinter dieser erfreulichen, zufriedenstellenden Benutzererfahrung steckt ein Designsystem, eine Sammlung visueller und technischer Definitionen, die ein Produkt bestimmen. Innerhalb dieses Designsystems gibt es Style Guides, Komponentenbibliotheken, Module und wahrscheinlich noch viel mehr.
Style Guides legen visuelle Elemente fest: Typografie, Farbpaletten, Regeln für Inhalt und Bildmaterial, Markenmuster, Logoverwendung, Rasterstrukturen und vieles mehr.
Komponentenbibliotheken definieren die visuellen Gestaltungsregeln für Produktkomponenten, die von Entwicklern verwendet werden. Denken Sie dabei an die richtige Beschriftung, klare Beschreibungen und Rahmengestaltung. Ein Beispiel hierfür sind die Buttons. Eine Komponentenbibliothek für eine Schaltfläche würde Farbe, Form, Größe, Textgröße, Abstände, Standardzustand, aktiver Zustand, wo die verschiedenen Schaltflächen verwendet werden sollen, usw. definieren.
Module sind " Bereiche ", die im gesamten Produkt verwendet werden. Sie können aus Text, Bildmaterial, Video, Designelementen usw. bestehen. Durch die wiederholte Verwendung von Modulen wird eine konsistente, erwartbare Erfahrung geschaffen.
Ideal für Designer und Entwickler... und Benutzer
Designsysteme sind entscheidend für eine effiziente Produktentwicklung. Designer und Entwickler schätzen sie. Doch auch die Unternehmensteams sollten sie zu schätzen wissen, denn ohne Designsysteme verlieren die Benutzer den Überblick und werden unzufrieden. Sie verschwinden. Sie machen keine Umsätze.
Der renommierte Usability-Experte Jakob Nielsen definierte die 10 Heuristiken oder "goldenen Regeln" der User Experience. Drei davon sind besonders relevant für den Wert, den Designsysteme den Benutzern bieten...
KONSISTENZ UND STANDARDS
Menschen besuchen eine Vielzahl von Websites. Ob sie es wissen oder nicht (sie wissen es nicht), sie sind an Industriestandards gewöhnt. Bei der Entwicklung von Designsystemen ist es wichtig, diese Standards zu berücksichtigen, damit Sie Ihre Benutzer nicht zwingen, neue Wege zu erlernen, damit sie ihre Interessen verfolgen können. Beispiel: Der Industriestandard für das Menü befindet sich oben auf der Seite - entweder eine ausgeschriebene Liste oder eine "Hamburger"-Schaltfläche in der oberen rechten Ecke. Wenn Sie sich dafür entscheiden, dass Ihr Menü ein unbeschrifteter Kreis in der unteren linken Ecke Ihrer Seite sein soll, müssen Ihre Benutzer neu lernen, wie man eine Website benutzt.
FEHLERVERMEIDUNG
Mit Hilfe von Design-Systemen erkennen die Benutzer die Aktionen, die sie ausführen sollen, indem sie visuellen Hinweisen folgen. Sobald sich ein Nutzer sicher ist, was er tut, ist die Wahrscheinlichkeit geringer, dass er auf der Website Fehler macht, was zu weniger Frustration und besserer Benutzerfreundlichkeit führt. Indem Sie dem Benutzer die visuellen Hinweise und Hilfsmittel zur Verfügung stellen, die er braucht, um sich auf der Website zurechtzufinden, beseitigen Sie Hürden, die es von vornherein nicht hätte geben müssen. Wenn z. B. alle Schaltflächen für den nächsten Schritt in einem Formular blau sind und sich in der rechten unteren Ecke befinden, aber in einem anderen Schritt plötzlich die Schaltfläche "Abbrechen" blau ist und sich in der rechten Ecke befindet, ist die Wahrscheinlichkeit höher, dass der Benutzer versehentlich auf diese Schaltfläche statt auf die Schaltfläche "Weiter" klickt, weil er darauf trainiert ist, die blaue Schaltfläche unten rechts zu drücken, um weiterzugehen.
WIEDERERKENNEN, NICHT ERINNERN
Ähnlich wie bei der Fehlervermeidung erkennt ein Benutzer anhand der visuellen Hinweise, die er erhält, schnell, welche Aktionen er auf einer Website ausführen muss. Dadurch muss der Benutzer nicht auf jeder Seite eine neue Aktion erlernen, da er Informationen wiedererkennt, die er bereits gesehen hat. Letztendlich wird dadurch die Gedächtnisbelastung reduziert und der kognitive Aufwand minimiert, was zu einem besseren Nutzererlebnis führt. Indem Sie auf die blaue Schaltfläche "Weiter" zurückgreifen, trainieren Sie den Benutzer, dass er zum nächsten Schritt im Formular gehen muss, wenn er unten rechts auf der Seite die blaue Schaltfläche finden will.
Es geht um Vertrauen
Ein durchdachtes Systemdesign schafft Vertrauen bei den Nutzern. Sie helfen ihnen, mit minimalen Reibungsverlusten zum gewünschten Ziel zu gelangen. Unternehmen, die in Designsysteme investieren, verschaffen sich einen Vorsprung vor ihren Mitbewerbern - ganz einfach, indem sie die Dinge einfacher machen.

Julien Lieske Senior Interface-Designer und Frontend-Entwickler mit Full-Stack-Ambitionen.