Ratgeber

Designprinzipien: Diese 7 Regeln gelten immer und überall

Designprinzipien sind nicht in Stein gemeißelt. (Foto: Pixabay.com)

Lesezeit: 6 Min. Gerade keine Zeit? Jetzt speichern und später lesen

Design ist nur zu einem geringen Teil Geschmackssache. Zum größeren Teil ist es solides Handwerk, das ähnlichen Gesetzmäßigkeiten folgen sollte wie das Errichten eines Hauses.

Design betrifft sowohl die Form wie auch die Funktion eines Produkts. Im Webdesign findet ihr immer noch die verbreitete Auffassung, Designs müssten individuell sein und sich von der Masse abheben. Optisch beeindruckende, aber kaum bedienbare Site-Boliden sind häufig die Folge dieser Philosophie. Im Grunde bedarf es nur wenig Nachdenkens, um zu erkennen, dass das nur falsch sein kann.

Nix mehr verpassen: Die t3n Newsletter zu deinen Lieblingsthemen! Jetzt anmelden

Richtig ist hingegen, dass Design umso besser wird, je mehr es bestimmten Gesetzmäßigkeiten folgt. Diese Prinzipien gelten auf mehreren Ebenen. Sie müssen für das Design des Motors, den Code, ebenso beachtet werden, wie für das Design der Oberfläche, das Layout.

Designprinzipien: Der Mensch muss stets im Mittelpunkt stehen. (Foto: Stockfour / Shutterstock)

Dabei ist der oberste Grundsatz stets der, dass unsere Produkte den Menschen helfen müssen, ein vorhandenes Problem auf die bestmögliche Art und Weise zu lösen. Alle Designaktivität muss demnach ausgehend vom potenziellen Benutzer gedacht werden, nicht umgekehrt. Trends spielen nur eine Rolle, wenn und soweit sie dem Ziel der Benutzerzentrierung unserer Produkte dienen. Rein optischen Aspekten ohne praktischen Nutzen solltet ihr keinerlei Beachtung schenken.

Im folgenden Beitrag schauen wir uns die verschiedenen Ebenen nebst der dazugehörigen Gesetzmäßigkeiten näher an. Denn sowohl auf der Seite des Quellcodes wie auf der Seite des Layouts solltet ihr eigenständig verschiedene Prinzipien beachten.

Code: Designprinzipien

Wenn ihr Code schreibt, solltet ihr wenigstens auf die folgenden Grundsätze achten.

Design ist zugänglich

Das Thema der Zugänglichkeit eines Designs ist immer noch ein heißes Eisen. Vielfach findet sich die Einstellung, dass es doch nun wirklich nicht wirtschaftlich sei, für einen geringen Prozentsatz an Nutzern einen hohen Aufwand zu treiben, zumal man der fertigen Seite ihre Zugänglichkeit nicht einmal ansehen kann.

Zugänglichkeit hat mehrere Dimensionen. Diese hier ist nicht gemeint. (Foto: Pixabay.com)

Zugänglichkeit hat mehrere Dimensionen. Diese hier ist nicht gemeint. (Foto: Pixabay.com)

Das ist grundsätzlich ein verständlicher Standpunkt. Wenn ihr es euch aber mal genauer überlegt, werdet ihr erkennen, dass er zu kurz greift. Lasst uns ein paar Punkte der Web Content Accessibility Guideline (WCAG 2.1) aufgreifen. Dann wird es deutlich.

Die WCAG listen eine ganze Reihe einfacher Punkte, die ihr beachten solltet, um eure Designs zugänglicher zu gestalten. Und obwohl diese Punkte tatsächlich nicht kompliziert sind, werdet ihr vermutlich überrascht sein, dass ihr längst nicht alle davon einsetzt, obwohl es dafür eigentlich keinen triftigen Grund gibt. Ihr denkt halt einfach nicht daran.

Das fängt teilweise schon bei den Basics an. Bietet stets Text-Alternativen für nicht textliche Inhalte an  – den guten alten ALT-Tag. Ihr kennst ihn, aber bestückt ihr ihn auch konsequent?

Stellt alle Features eurer Site auch über Tastatur-Kürzel bereit. Ich würde fast wetten, dass ihr das nicht tut.

Design ist performant

Gerade dieser Punkt wird in allen Entwickler-Magazinen der Erde besonders häufig behandelt und gehört dennoch zu den absoluten Schwachstellen fast jeder Website da draußen. Nehmt einfach mal eine beliebige URL und speist sie in das Pingdom-Tool. Ich wette, ihr werdet überrascht sein.

Geschwindigkeit ist leider nicht immer so offensichtlich zu erkennen wie hier. (Foto: Pixabay.com)

Geschwindigkeit ist leider nicht immer so offensichtlich zu erkennen wie hier. (Foto: Pixabay.com)

Der Aufbau einer performanten Website ist sicherlich kein Hexenwerk, erfordert aber akribische Arbeit und viel Liebe zum Detail. Hier geht es um das sinnvolle Caching dynamischer Websites, die Optimierung von multimedialen Inhalten wie Bildern und Videos, die Einbindung und Optimierung von Scripten, Stylesheets und Frameworks.

Das Ziel dabei ist, das kleinstmögliche Dateigewicht für jede einzelne Seite des Webprojekts zu erreichen. Im Zweifel wird es der Nutzer nicht sehen, aber der Vorteil für die Suchmaschinenplatzierung ist den Aufwand bis zu einem gewissen Punkt auf jeden Fall wert. Außerdem schützt ihr damit den Planeten.

Design ist responsiv

Responsives Design kennt ihr, sagt ihr. Macht ihr auch. Sicher, responsives Design ist der Megatrend der letzten paar Jahre. Webseiten, die sich automatisch an unterschiedliche Viewports anpassen, sind quasi zum Standard geworden. Egal, ob per Media-Queries oder voll responsiv, kaum eine aktuelle Website wäre heutzutage nicht variabel.

Leider gilt diese Variabilität in der Darstellung vielfach nur oberflächlich. Denn sehr viele Websites reagieren zwar mit Größenänderungen auf die Veränderungen des Browserfensters, das ist es aber dann auch schon.

Responsives Design will gut geplant sein. (Foto: StockSnap.io)

Responsives Design will gut geplant sein. (Foto: StockSnap.io)

Zu echtem responsivem Design gehört aber auch das Zuschneiden von Inhalten auf unterschiedliche Devices, das Weglassen von Optionen, die nur auf bestimmten Devices Sinn ergeben, auf dem jeweils anderen Gerät oder die automatische Bereitstellung unterschiedlicher Bildauflösungen anstelle des bloßen Skalierens der Ansicht.

Layout: Designprinzipien

Hinsichtlich der optischen Darstellung, die gleichzeitig auch die Benutzeroberfläche darstellt, gibt es ebenso unumstößliche Prinzipien, die ihr einhalten solltet, um den klaren Fokus auf den Nutzer nicht zu gefährden.

Design ist vorhersehbar

Der Mensch mag es nicht, wenn er ein Produkt nicht direkt bedienen kann. Er wird nur im Notfall bereit sein, zu einem Handbuch zu greifen. Zunächst wird er versuchen, mithilfe seines bisherigen Erfahrungsschatzes zum Erfolg zu kommen.

Lasst also diese tolle Idee mit dem vollkommen neuen optischen Konzept fallen und schaut, was sich als Best Practice in dem Produktbereich, in dem ihr tätig seid, erwiesen hat.

Für Dr. Web bastelte ich schon vor Jahren zu diesem Thema den folgenden Cartoon:

tasse_drweb

Disruptives Design. (Cartoon: Dieter Petereit / Dr. Web)

Übrigens gehört der Grundsatz der Vorhersehbarkeit auch zu den Zugänglichkeits-Richtlinien WCAG 2.1, die ihr weiter oben schon kennengelernt habt.

Design lenkt

Wirklich strikt befolgt wohl nur Apple den Grundsatz, dass Design lenkt. Deren Designer definieren eine Funktionalität ganz eindeutig und lassen sich durch nichts aus der Ruhe bringen. Seit Jahren schon wird von manchen gefordert, Apple möge doch etwa Benachrichtigungs-LEDs in seine iPhones integrieren. Nö, sagen die Designer bei Apple. Sie haben die Entscheidung getroffen, das nicht anzubieten.

Gerade mit Blick auf das iPhone gibt es etliche weitere Beispiele, etwa den Verzicht auf den Klinkenanschluss oder die Verweigerung, immer dickere Akkus zu verbauen. Interessanterweise verbaut inzwischen auch kaum noch ein Android-Hersteller Klinkenanschlüsse und die Benachrichtigungs-LED ist ebenfalls sehr selten geworden.

Das mag den einen oder anderen stören, zeigt jedoch im Grunde nur, dass die Designer ihre Verantwortung ernst nehmen. Denn ihr als Fachleute seid diejenigen, die definieren müssen, wie euer Produkt am besten genutzt werden kann. Ihr seid in der Lenkungsverantwortung. Stehlt euch da nicht aus Feigheit oder Faulheit heraus.

Design ist schnell

Als Designer müsst ihr im Kopf haben, dass eure potenziellen Nutzer stets den schnellsten Weg suchen, um ein bestimmtes Problem zu lösen. Übersetzt auf das Webdesign bedeutet das: je weniger Klicks, desto besser. Wenn es also einen Weg gibt, euer Produkt zu beschleunigen, dann findet ihn und setzt ihn konsequent um.

Dabei spielen Mikrointeraktionen eine bedeutende Rolle. Um das Thema Minimal Webdesign haben wir uns ebenfalls bereits gekümmert.

Design ist menschlich

Design muss stets den zutiefst menschlichen  Aspekten Rechnung tragen. Der Mensch will belohnt werden. Er braucht Feedback. Hin und wieder mag er auch Überraschungen. Klingt plausibel,  soll aber was genau bedeuten?

Der Mensch agiert nicht rein rational. (Foto: Fizkes / Shutterstock)

Menschliches Design fängt schon da an, wo ihr Texte verwendet, die für Menschen geschrieben wurden. Wer kennt nicht die Fehlermeldung „Systemkonstante XVEW fehlt. Fataler Abbruch?“ Keiner? Stimmt. Die ist ausgedacht, aber ihr versteht, worum es geht?

Menschliches Design setzt sich in den bereits erwähnten Mikrointeraktionen fort. Der Benutzer muss ein Feedback darüber bekommen, ob seine Interaktion erfolgreich war oder nicht. Apropos „oder nicht“, menschliches Design stellt sicher, dass es dieses „oder nicht“ möglichst nicht gibt.

Ganz dosiert könnt ihr dann auch überraschende Elemente oder eine Prise Humor einsetzen. Dabei ist es aber wichtig, sicherzustellen, dass solche Elemente nicht etwa den Flow stören oder gar unterbrechen. Eine unaufdringliche Möglichkeit, den Nutzer zu überraschen, wäre beispielsweise die automatische Änderung des Farbschemas je nach Tageszeit der Nutzung.

Kein Beitrag zu Designprinzipien kann jemals vollständig sein ohne die Erwähnung von Dieter Rams. Er hat selbst zehn Prinzipien guten Designs aufgestellt, die es zu beherzigen lohnt. Natürlich muss man das ein oder andere Prinzip im Kontext eines Lesers, der 40 Jahre später lebt, betrachten. Aber in der Abstraktion liegt Rams nach wie vor richtig.

(Der Beitrag wurde am 23. Oktober 2020 umfassend überarbeitet.)

Meistgelesen

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 70 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Luca Caracciolo (Chefredakteur t3n) & das gesamte t3n-Team

Anleitung zur Deaktivierung