Dieter Petereit 1. März 2018

7 Designprinzipien, die nicht zur Diskussion stehen

Natürlich ist Design zu einem Teil auch Geschmackssache. Aber zum größeren Teil ist es solides Handwerk. Dabei gelten Regeln, die du nicht einfach umstoßen kannst, bloß weil du dich für einen disruptiven Kreativen hältst.

Im folgenden müssen wir ein kleines bisschen differenzieren, denn Design betrifft sowohl die Form wie auch die Funktion eines Produkts. Im Webdesign findest du indes 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. Du brauchst nicht lange darüber nachzudenken, 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, also die Programmlogik, den Code, ebenso beachtet werden, wie für das Design der Oberfläche, das Layout. Damit betreffen sie Designer im Sinne von Gestalter und Coder im Sinne von Entwickler gleichermaßen.

Das Ziel muss stets im Mittelpunkt stehen. (Foto: Pixabay.com)

Oberster Grundsatz muss stets sein, dass unsere Produkte den Menschen helfen, 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 solltest du keinerlei Beachtung schenken.
Im folgenden Beitrag schauen wir uns die verschiedenen Ebenen nebst der dazugehörigen Gesetzmäßigkeiten näher an.

Designprinzipien für Entwickler

Hinsichtlich der codemäßigen Umsetzung unserer Designs gilt es im Wesentlichen, drei Prinzipien zu folgen.

Design ist zugänglich

Zugänglichkeit eines Designs ist natürlich 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 derart hohen Aufwand zu treiben, zumal du der fertigen Seite ihre Zugänglichkeit nicht einmal ansehen kannst.

Zugänglichkeit hat mehrere Dimensionen. (Foto: Pixabay.com)

Das ist grundsätzlich ein verständlicher Standpunkt. Wenn du es dir aber mal genauer überlegst, wirst du erkennen, dass er zu kurz greift. Lass uns ein paar Punkte der Web Content Accessibility Guideline (WCAG 2.0) aufgreifen. Dann wird es deutlich.

Die WCAG listen eine ganze Reihe einfacher Punkte, die du beachten solltest, um deine Designs zugänglicher zu gestalten. Und obwohl diese Punkte tatsächlich nicht kompliziert sind, wirst du überrascht sein, dass du selbst längst nicht alle davon einsetzt, obwohl es dafür eigentlich keinen Grund gibt. Du denkst einfach nicht daran.

Das fängt teilweise schon bei den Basics an.

  • Biete stets Text-Alternativen für nicht textliche Inhalte an,
    der gute alte ALT-Tag. Du kennst ihn, aber bestückst du ihn auch konsequent?
  • Stelle alle Features deiner Site auch über Tastatur-Kürzel bereit.
    Ich würde fast wetten, dass du das nicht tust.

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. Nimm einfach mal eine beliebige URL und speise sie in das Pingdom-Tool. Ich wette, du wirst überrascht sein.

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.

Wenn du deine Projekte auf der Basis von WordPress abwickelst, wie es die meisten Leserinnen und Leser des Dr. Web-Magazins tun, dann wird dich unsere Serie zum Thema sicherlich interessieren.

WordPress-Websites wirklich schnell: die Serie

Design ist responsiv

Responsives Design kennst du, sagst du. Machst du 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 bedeutet Denken in Modulen. (Foto: Pixabay)

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.

Designprinzipien für Gestalter

Hinsichtlich der optischen Darstellung, die gleichzeitig auch die Benutzeroberfläche darstellt, gibt es ebenso unumstößliche Prinzipien, die du einhalten solltest, 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, aus seinem bisherigen Erfahrungsschatz heraus alleine zum Erfolg zu kommen.

Lass also diese tolle Idee mit dem vollkommen neuen optischen Konzept fallen und schau, was sich als Best Practice in dem Produktbereich, in dem du tätig bist, erwiesen hat. Der Designer aus unserem Cartoons hat das Problem leider nicht verstanden:

Cartoon: Disruptives Design

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

Design lenkt

Wirklich strikt befolgt wohl nur Apple diesen Grundsatz. 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.

Das mag den einen oder anderen stören, zeigt jedoch im Grunde nur, dass die Designer ihre Verantwortung ernst nehmen. Denn du als Fachmann bist derjenige, der definieren muss, wie dein Produkt am besten genutzt werden kann. Du bist in der Lenkungsverantwortung. Stiehl dich da nicht aus Feigheit oder Faulheit heraus.

Design ist schnell

Als Designer musst du im Kopf haben, dass deine potenziellen Nutzer stets den schnellsten Weg suchen, um ein bestimmtes Problem zu lösen. Umgesetzt auf Webdesign bedeutet das: je weniger Klicks desto besser. Wenn es also einen Weg gibt, dein Produkt zu beschleunigen, dann finde ihn und setze ihn konsequent um.

Dabei spielen Mikrointeraktionen eine bedeutende Rolle. Wie es der Zufall will, haben wir erst kürzlich einen Beitrag zu diesem Thema veröffentlicht.

Design ist menschlich

Design muss stets dem Menschlichen Rechnung tragen. Der Mensch will belohnt werden. Er braucht Feedback. Hin und wieder mag er auch Überraschungen. Klingt plausibel, oder? Aber was soll es bedeuten?

Menschliches Design fängt schon da an, wo du Texte verwendest, die für Menschen geschrieben wurden. Wer kennt nicht die Fehlermeldung „Systemkonstante XVEW fehlt. Fataler Abbruch”? Keiner? Stimmt. Die ist ausgedacht, aber du verstehst, 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 kannst du dann auch überraschende Elemente oder eine Prise Humor einsetzen.

Dabei ist es aber wichtig, sicherzustellen, dass solche Elemente nicht etwa den Workflow 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 hat Rams nach wie vor Recht.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

4 Kommentare

  1. Was soll das jetzt aussagen HL1234? Ist deine Kundenwebsite etwa auch ein Onlinemagazin, das vom Anzeigenverkauf angetrieben wird?

  2. Diese Seite mal mit dem Pingdom-Tool getestet – echt stark:

    Load time 6.49 s
    Page size 3.0 MB
    Requests 77

    Performance tipps:
    Minimize request size
    Minimize redirects
    Combine external JavaScript
    Connection error = 2

Schreibe einen Kommentar zu klawischnigg Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück