Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
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ö­ße­ren Teil ist es soli­des Handwerk. Dabei gel­ten Regeln, die du nicht ein­fach umsto­ßen kannst, bloß weil du dich für einen dis­rup­ti­ven Kreativen hältst.

Im fol­gen­den müs­sen wir ein klei­nes biss­chen dif­fe­ren­zie­ren, denn Design betrifft sowohl die Form wie auch die Funktion eines Produkts. Im Webdesign fin­dest du indes immer noch die ver­brei­te­te Auffassung, Designs müss­ten indi­vi­du­ell sein und sich von der Masse abhe­ben.

Optisch beein­dru­cken­de, aber kaum bedien­ba­re Site-Boliden sind häu­fig die Folge die­ser Philosophie. Du brauchst nicht lan­ge dar­über nach­zu­den­ken, um zu erken­nen, dass das nur falsch sein kann.

Richtig ist hin­ge­gen, dass Design umso bes­ser wird, je mehr es bestimm­ten Gesetzmäßigkeiten folgt. Diese Prinzipien gel­ten auf meh­re­ren Ebenen. Sie müs­sen für das Design des Motors, also die Programmlogik, den Code, eben­so beach­tet wer­den, wie für das Design der Oberfläche, das Layout. Damit betref­fen sie Designer im Sinne von Gestalter und Coder im Sinne von Entwickler glei­cher­ma­ßen.

Das Ziel muss stets im Mittelpunkt ste­hen. (Foto: Pixabay.com)

Oberster Grundsatz muss stets sein, dass unse­re Produkte den Menschen hel­fen, ein vor­han­de­nes Problem auf die best­mög­li­che Art und Weise zu lösen. Alle Designaktivität muss dem­nach aus­ge­hend vom poten­zi­el­len Benutzer gedacht wer­den, nicht umge­kehrt. Trends spie­len nur eine Rolle, wenn und soweit sie dem Ziel der Benutzerzentrierung unse­rer Produkte die­nen.

Rein opti­schen Aspekten ohne prak­ti­schen Nutzen soll­test du kei­ner­lei Beachtung schen­ken.
Im fol­gen­den Beitrag schau­en wir uns die ver­schie­de­nen Ebenen nebst der dazu­ge­hö­ri­gen Gesetzmäßigkeiten näher an.

Designprinzipien für Entwickler

Hinsichtlich der code­mä­ßi­gen Umsetzung unse­rer Designs gilt es im Wesentlichen, drei Prinzipien zu fol­gen.

Design ist zugäng­lich

Zugänglichkeit eines Designs ist natür­lich ein hei­ßes Eisen. Vielfach fin­det sich die Einstellung, dass es doch nun wirk­lich nicht wirt­schaft­lich sei, für einen gerin­gen Prozentsatz an Nutzern einen der­art hohen Aufwand zu trei­ben, zumal du der fer­ti­gen Seite ihre Zugänglichkeit nicht ein­mal anse­hen kannst.

Zugänglichkeit hat meh­re­re Dimensionen. (Foto: Pixabay.com)

Das ist grund­sätz­lich ein ver­ständ­li­cher Standpunkt. Wenn du es dir aber mal genau­er über­legst, wirst du erken­nen, dass er zu kurz greift. Lass uns ein paar Punkte der Web Content Accessibility Guideline (WCAG 2.0) auf­grei­fen. Dann wird es deut­lich.

Die WCAG lis­ten eine gan­ze Reihe ein­fa­cher Punkte, die du beach­ten soll­test, um dei­ne Designs zugäng­li­cher zu gestal­ten. Und obwohl die­se Punkte tat­säch­lich nicht kom­pli­ziert sind, wirst du über­rascht sein, dass du selbst längst nicht alle davon ein­setzt, obwohl es dafür eigent­lich kei­nen Grund gibt. Du denkst ein­fach nicht dar­an.

Das fängt teil­wei­se schon bei den Basics an.

  • Biete stets Text-Alternativen für nicht text­li­che Inhalte an,
    der gute alte ALT-Tag. Du kennst ihn, aber bestückst du ihn auch kon­se­quent?
  • Stelle alle Features dei­ner Site auch über Tastatur-Kürzel bereit.
    Ich wür­de fast wet­ten, dass du das nicht tust.

Design ist per­for­mant

Gerade die­ser Punkt wird in allen Entwickler-Magazinen der Erde beson­ders häu­fig behan­delt und gehört den­noch zu den abso­lu­ten Schwachstellen fast jeder Website da drau­ßen. Nimm ein­fach mal eine belie­bi­ge URL und spei­se sie in das Pingdom-Tool. Ich wet­te, du wirst über­rascht sein.

Geschwindigkeit ist lei­der nicht immer so offen­sicht­lich zu erken­nen wie hier. (Foto: Pixabay.com)

Der Aufbau einer per­for­man­ten Website ist sicher­lich kein Hexenwerk, erfor­dert aber akri­bi­sche Arbeit und viel Liebe zum Detail. Hier geht es um das sinn­vol­le Caching dyna­mi­scher Websites, die Optimierung von mul­ti­me­dia­len Inhalten wie Bildern und Videos, die Einbindung und Optimierung von Scripten, Stylesheets und Frameworks.

Das Ziel dabei ist, das kleinst­mög­li­che Dateigewicht für jede ein­zel­ne Seite des Webprojekts zu errei­chen. Im Zweifel wird es der Nutzer nicht sehen, aber der Vorteil für die Suchmaschinenplatzierung ist den Aufwand bis zu einem gewis­sen Punkt auf jeden Fall wert.

Wenn du dei­ne Projekte auf der Basis von WordPress abwi­ckelst, wie es die meis­ten Leserinnen und Leser des Dr. Web-Magazins tun, dann wird dich unse­re Serie zum Thema sicher­lich inter­es­sie­ren.

WordPress-Websites wirk­lich schnell: die Serie

Design ist respon­siv

Responsives Design kennst du, sagst du. Machst du auch. Sicher, respon­si­ves Design ist der Megatrend der letz­ten paar Jahre. Webseiten, die sich auto­ma­tisch an unter­schied­li­che Viewports anpas­sen, sind qua­si zum Standard gewor­den. Egal, ob per Media-Queries oder voll respon­siv, kaum eine aktu­el­le Website wäre heut­zu­ta­ge nicht varia­bel.

Leider gilt die­se Variabilität in der Darstellung viel­fach nur ober­fläch­lich. Denn sehr vie­le Websites reagie­ren zwar mit Größenänderungen auf die Veränderungen des Browserfensters, das ist es aber dann auch schon.

Responsives Design bedeu­tet Denken in Modulen. (Foto: Pixabay)

Zu ech­tem respon­si­vem Design gehört aber auch das Zuschneiden von Inhalten auf unter­schied­li­che Devices, das Weglassen von Optionen, die nur auf bestimm­ten Devices Sinn erge­ben, auf dem jeweils ande­ren Gerät oder die auto­ma­ti­sche Bereitstellung unter­schied­li­cher Bildauflösungen anstel­le des blo­ßen Skalierens der Ansicht.

Designprinzipien für Gestalter

Hinsichtlich der opti­schen Darstellung, die gleich­zei­tig auch die Benutzeroberfläche dar­stellt, gibt es eben­so unum­stöß­li­che Prinzipien, die du ein­hal­ten soll­test, um den kla­ren Fokus auf den Nutzer nicht zu gefähr­den.

Design ist vor­her­seh­bar

Der Mensch mag es nicht, wenn er ein Produkt nicht direkt bedie­nen kann. Er wird nur im Notfall bereit sein, zu einem Handbuch zu grei­fen. Zunächst wird er ver­su­chen, aus sei­nem bis­he­ri­gen Erfahrungsschatz her­aus allei­ne zum Erfolg zu kom­men.

Lass also die­se tol­le Idee mit dem voll­kom­men neu­en opti­schen Konzept fal­len und schau, was sich als Best Practice in dem Produktbereich, in dem du tätig bist, erwie­sen hat. Der Designer aus unse­rem Cartoons hat das Problem lei­der nicht ver­stan­den:

Cartoon: Disruptives Design

Übrigens gehört der Grundsatz der Vorhersehbarkeit auch zu den Zugänglichkeits-Richtlinien WCAG 2.0, die du wei­ter oben schon ken­nen­ge­lernt hast.

Design lenkt

Wirklich strikt befolgt wohl nur Apple die­sen Grundsatz. Deren Designer defi­nie­ren eine Funktionalität ganz ein­deu­tig und las­sen sich durch nichts aus der Ruhe brin­gen. Seit Jahren schon wird von man­chen gefor­dert, Apple möge doch etwa Benachrichtigungs-LEDs in sei­ne iPhones inte­grie­ren. Nö, sagen die Designer bei Apple. Sie haben die Entscheidung getrof­fen, das nicht anzu­bie­ten. Gerade mit Blick auf das iPhone gibt es etli­che wei­te­re Beispiele.

Das mag den einen oder ande­ren stö­ren, zeigt jedoch im Grunde nur, dass die Designer ihre Verantwortung ernst neh­men. Denn du als Fachmann bist der­je­ni­ge, der defi­nie­ren muss, wie dein Produkt am bes­ten genutzt wer­den kann. Du bist in der Lenkungsverantwortung. Stiehl dich da nicht aus Feigheit oder Faulheit her­aus.

Design ist schnell

Als Designer musst du im Kopf haben, dass dei­ne poten­zi­el­len Nutzer stets den schnells­ten Weg suchen, um ein bestimm­tes Problem zu lösen. Umgesetzt auf Webdesign bedeu­tet das: je weni­ger Klicks des­to bes­ser. Wenn es also einen Weg gibt, dein Produkt zu beschleu­ni­gen, dann fin­de ihn und set­ze ihn kon­se­quent um.

Dabei spie­len Mikrointeraktionen eine bedeu­ten­de Rolle. Wie es der Zufall will, haben wir erst kürz­lich einen Beitrag zu die­sem Thema ver­öf­fent­licht.

Design ist mensch­lich

Design muss stets dem Menschlichen Rechnung tra­gen. Der Mensch will belohnt wer­den. Er braucht Feedback. Hin und wie­der mag er auch Überraschungen. Klingt plau­si­bel, oder? Aber was soll es bedeu­ten?

Menschliches Design fängt schon da an, wo du Texte ver­wen­dest, die für Menschen geschrie­ben wur­den. Wer kennt nicht die Fehlermeldung „Systemkonstante XVEW fehlt. Fataler Abbruch”? Keiner? Stimmt. Die ist aus­ge­dacht, aber du ver­stehst, wor­um es geht?

Menschliches Design setzt sich in den bereits erwähn­ten Mikrointeraktionen fort. Der Benutzer muss ein Feedback dar­über bekom­men, ob sei­ne Interaktion erfolg­reich war oder nicht. Apropos „oder nicht”, mensch­li­ches Design stellt sicher, dass es die­ses „oder nicht” mög­lichst nicht gibt.
Ganz dosiert kannst du dann auch über­ra­schen­de Elemente oder eine Prise Humor ein­set­zen.

Dabei ist es aber wich­tig, sicher­zu­stel­len, dass sol­che Elemente nicht etwa den Workflow stö­ren oder gar unter­bre­chen. Eine unauf­dring­li­che Möglichkeit, den Nutzer zu über­ra­schen, wäre bei­spiels­wei­se die auto­ma­ti­sche Änderung des Farbschemas je nach Tageszeit der Nutzung.

Kein Beitrag zu Designprinzipien kann jemals voll­stän­dig sein ohne die Erwähnung von Dieter Rams. Er hat selbst zehn Prinzipien guten Designs auf­ge­stellt, die es zu beher­zi­gen lohnt. Natürlich muss man das ein oder ande­re Prinzip im Kontext eines Lesers, der 40 Jahre spä­ter lebt, betrach­ten. 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.

4 Kommentare

  1. Was soll das jetzt aus­sa­gen HL1234? Ist dei­ne Kundenwebsite etwa auch ein Onlinemagazin, das vom Anzeigenverkauf ange­trie­ben wird?

  2. Diese Seite mal mit dem Pingdom-Tool getes­tet – echt stark:

    Load time 6.49 s
    Page size 3.0 MB
    Requests 77

    Performance tipps:
    Minimize request size
    Minimize redi­rec­ts
    Combine exter­nal JavaScript
    Connection error = 2

Schreibe einen Kommentar

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