Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Diese 7 Designprinzipien sind unumstößlich

    Diese 7 Designprinzipien sind unumstößlich
(Foto: Shutterstock)

Design ist nur zum Teil Geschmackssache. Zum größeren Teil ist es solides Handwerk, das ähnlichen Gesetzmäßigkeiten folgt wie das Errichten eines Hauses.

Design betrifft sowohl die Form wie auch die Funktion eines Produkts. Im Webdesign findest du 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, den Code, ebenso beachtet werden, wie für das Design der Oberfläche, das Layout.

Der Mensch muss stets im Mittelpunkt stehen. (Foto: Pixabay.com)
Designprinzipien: Der Mensch muss stets im Mittelpunkt stehen. (Foto: Pixabay.com)

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 solltest du keinerlei Beachtung schenken.

Im folgenden Beitrag schauen wir uns die verschiedenen Ebenen nebst der dazugehörigen Gesetzmäßigkeiten näher an.

Code: Designprinzipien

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

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

Für Dr. Web bastelte ich 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.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. Um das Thema „Minimal Webdesign” haben wir uns ebenfalls jüngst gekümmert.

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

Finde einen Job, den du liebst

2 Reaktionen
Gute Übersicht
Gute Übersicht

Gute Auflistung.

Die Keywords hätte als ersten Satz unter jeder Regel erklären sollen.
Das sind dann ja EinWort-Fachbegriffe für diese Konzepte welche nicht jeder kennt.

Die Leute werden älter und tragen ihre Brillen nicht:
http://meedia.de/2016/10/07/us-umfrage-unter-50-jaehrige-wollen-nachrichten-als-text-nicht-als-bewegtbild/
Schon das ist Zugänglichkeit. Die bezahlen natürlich ein Premium ("Aufpreis") von 150 für Lautsprecher welche die Nachrichten vorlesen und die oft verhasste und unbenutzbare Fernbedienung und die oft völlig misratenen User-Interfaces ersetzen. Beobachte Rentner vor dem Fahrkarten-Automaten und erkenne die Ehre der BITKOM.
Überalterte Gesellschaft. Rot-Grün-Blindheit. Gesetz oder Verordnung über "einfache Sprache" auf Behörden-Webseiten usw.
DM - DrogerieMarkt ist schlau und hat Lupen an den Einkaufswagen. Das Payback-Self-Scanning könnte zehn mal besser sein und wäre besser während der ganzen Transaktion zwischen Scan des ersten Produktes bis zur Bezahlung oder Schliessen der Kassenschublade aktiv statt nur direkt nach der Bezahlung oder wann auch immer.
In einem Land ohne Abmahnungen hätte ich längst einen Server dafür wo wir kleinen Kunden klarmachen dürfen was wir wollen und die Firmen oder deren Konkurrenten das endlich aufgreifen.

Und der Automat für Ersatz-Netzteile, SD-Karten, USB-Kabel und steht nicht in Nerd-Studentencenter sondern extra-teuer (da lohnt sogar oft Amazon-Direct-Delivery mit 1-Stunden-Aufpreis) am Flughafen wo 99% der Vorbeilaufenden oft die Sprache nicht mal können wenn es große Exchange-Flughäfen wie Dubai oder Singapur oder Seoul sind odr deutsche Bahnhöfe oder alles an der Autobahn für Ost/West/Süd/Nord-Europäische LKW-Fahrer oder Touristen.

Daher hatte ich vor Jahren schon die hier neulich bei einem Roboter beschriebene Idee mit den Icons als Kommunikation. Die meisten Alltags-Icons sind oft leider unverständlich.

Wenn Mr Bean bzw. seine schlauere Freundin die Ikea-Möbel aufbaut muss Ikea nie wieder was übersetzen. Das fordere ich schon langsam seit 10 Jahren.

Das fast keine Firma das bisher macht und wir Kunden denen (Boni-Mis-Managern) oft genug wohl egal sind, ist allgemein bekannt.

Antworten
E.
E.

Sonst wär es ja auch Kunst. :)

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden