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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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:

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

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.

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 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?

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.)