Haben UI/UX Designer Einfluss auf die Performance einer Website?

Designer sind genauso für Ladezeiten zuständig, wie Programmierer auch

Der Prozess, eine Website auf Performance zu optimieren, fängt schon bei den Gedanken zum gestalterischen Raster der Seite an. Egal ob man mit Wireframes ein erstes Konzept aufzieht oder direkt ein Layout gestaltet. Die Entscheidung, welche Funktionen eine Seite haben muss, beginnt schon sehr früh. Eine enge Zusammenarbeit mit dem Entwickler ist deshalb enorm wichtig. Je früher man die Planung zusammen an einem Tisch diskutiert, desto besser wird das Ergebnis und desto eher kann man ein Performance-Budget einhalten.

Genau deshalb, sollte sich ein Designer nicht nur mit dem Aufhübschen der Seite beschäftigen. Seine Gedanken gehören genauso in Richtung Entwicklung des Programmierers. Man darf sich nicht nur auf sein Bereich fokussieren, es ist auch enorm wichtig, den Prozess danach zu verstehen (Warum ich als Designer auch Programmieren gelernt habe). Deshalb kann man als Designer nicht einfach unüberlegt alles in ein Layout reinpacken. Egal wie angesagt und trendy es gerade ist.

Wir sind genauso für Ladezeiten zuständig, wie der Programmierer auch. Deshalb müssen wir bestimmte Funktionen hinterfragen und uns immer wieder die Ziele des Projekts vor Augen halten.

Es gibt verschiedene Punkte, die du während deines Gestaltungsprozesses auf jeden Fall im Hinterkopf behalten solltest.

Für wen gestalte ich die Website eigentlich?

Für den Kunden oder für sein Unternehmen? Das ist nicht wirklich die Zielgruppe. Du gestaltest für die Kunden deines Kunden. Und genau über die musst du auch bestens informiert sein. Egal welche persönlichen Empfindungen der Kunde gegenüber deinem Layout hat. Seine Vorlieben sind nicht auch gleich die optimalen Lösungen um seine Probleme zu lösen. Du bist der Experte und deine Entscheidungen basieren auf Erfahrungen. Stelle ihm seine Ziele vor Augen und begründe, warum du einen bestimmten Button dort platziert hast. Nicht für ihn, sondern für diejenigen, die sein Produkt kaufen. Jedes Element im Layout muss auch seinen Grund haben und Lösungen liefern, die nicht nur gut aussehen, sondern auch messbar sind. Ich kann es nicht oft genug sagen, aber das Layout muss für die Zielgruppe optimiert werden! Alles andere führt nicht zum gewünschten Ziel.

Welcher Aufbau ist der richtige für eine Zielgruppe?

Wie aufwendig muss eine Seite sein? Wie tief gehen die Strukturen?

Hast du erstmal eine Zielgruppe vor Augen, weißt du auch, welche Funktionen auf der Seite Sinn machen und welche nicht. Muss es wirklich viel Schnick Schnack sein oder reicht auch ein einfacher Aufbau? Als Designer sind wir nicht verpflichtet, jedem Trend nachzugehen. Ein Parallax-Effekt sieht vielleicht gut aus, aber bringt es die Zielgruppe dazu, ein Produkt zu kaufen? Oder ist es einfach nur eine zusätzliche Funktion, die die Ladezeit der Seite verlängert? Was ist in erster Linie wirklich für die Seite notwendig?

Ladezeiten reduzieren

Lieber hübsch oder schnell? Wie effektiv muss eine Seite sein?

Das Design hat einen großen Einfluss darauf, wie schnell Informationen dargestellt werden können und wie angenehm der Betrachter sie empfindet. Viele Besucher schließen das Fenster ganz einfach wieder, wenn sich nicht innerhalb von drei Sekunden etwas tut.

Auch hier ist die Zielgruppe entscheidend. Gestaltest du eine Seite für die breite Masse in einer Region mit langsamer Bandbreite oder für ein Publikum in der Stadt mit Highspeed-Internetverbindung? Du solltest schon früh genug mit dem Entwickler über ein Performance-Budget reden. Das hilft, unnötige Funktionen einzugrenzen und ein Ziel vor Augen zu haben.

Der gestalterische Ansatz muss keinem etwas beweisen. Er muss die Zielgruppe ansprechen!

Eine Seite sollte fokussiert, einfach zu bedienen und schnell erreichbar sein

Das Projekt ist nicht dazu da, dir oder dem Kunden deine Design-Skills vorzuführen. Der Kunde weiß, was du kannst, deswegen hat er dich angefragt. Das Layout muss auf die Zielgruppe zugeschnitten sein und da reicht oft auch eine einfachere Lösung.

Ein passender Artikel dazu: Wie wichtig ist der eigene Style bei einem Web-Designer?

Welche Module und Elemente müssen also wirklich rein? Ist dieses Icon notwendig oder kann es auch Text sein? Was bringt eine Slideshow an dieser Stelle? Sieht sie nur cool aus oder hat sie auch einen Sinn? Wäre es nicht besser, den Inhalt eines animierten Overlays einfach auf einer separaten Seite darzustellen oder muss es einen zusätzlichen Programmiercode für ein Popup geben? Kommt dieses noch an anderer Stelle vor?

Animationen gehen auf Kosten von Performance!

Weiche Übergänge, ein Hochsliden hier, ein Aufpoppen dort. Alles zusammen fühlt sich vielleicht bei einem Prototypen und Klickdummy gut an. Aber wenn Animationen nicht gut umgesetzt werden, schaden sie der Website eher, als das sie ihr ein gutes Gefühl geben.

Ich habe mir schon so viele neue Webseiten angeschaut, die für ihre schicken Animationen ausgezeichnet wurden. Das funktioniert vielleicht gut auf einem Notebook, aber auf einem zwei Jahre alten Tablet kommen die Animationen einfach nur schlecht rüber. Wenn dies der Fall ist, regt sich der Benutzer nicht über sein Ausgabegegerät auf, sondern über die Seite, die in seinen Augen schlecht gemacht ist. Und das ist der Eindruck, der bestehen bleibt.

Sich Animationen auszudenken ist cool, wenn es die Performance erlaubt!

Nicht zu viele unterschiedliche Fonts verwenden

Wie viele unterschiedliche Schriftschnitte sind wirklich notwendig? Müssen es 10 verschiedene Typen sein, oder reicht es auch, einfach eine Arial für den Fließtext zu verwenden? Diese ist nämlich schon auf 98% aller Computer der Welt vorinstalliert und muss nicht extra vom Server geladen werden.

Wenn du nicht gerade eine Typografie Website erstellen musst, kann man sich als Richtwert an ein bis zwei Schriftfamilien mit jeweils zwei Schrifttypen orientieren. Standardschriften wie Arial oder Helvetica sind oft eine gute Alternative, wenn man keine externen Fonts einbinden möchte.

Es hilft auch, einfach mal Google Fonts zu öffnen und eine Schriftfamilie auszuwählen. Google sagt dir schon im voraus, wie schnell oder langsam die verwendete Schriftart vermutlich lädt.

Je mehr Schrifttypen du verwendest, desto länger braucht eine Seite um sie anzuzeigen. Entscheide also schon zu Beginn des Designprozesses, wie unterschiedlich ein Text wirklich angezeigt werden muss.

Ein aufwendiges Design führt zu größeren Stylesheets und noch mehr Programmiercode

Ist das Design und der Aufbau einfach gehalten, braucht man auch nicht so viele Wörter, um das Layout in Programmcode umzuwandeln. Je mehr Befehle benutzt werden um eine Seite zu programmieren, desto mehr Quellcode wird geladen und das beeinflusst wiederum die Ladezeiten.

JavaScript kommt heutzutage bei fast jeder neuen Website zum Einsatz. Damit werden Funktionen programmiert, die eine Seite interaktiv machen. Oft wird aber leider zu viel davon eingesetzt, was sich auch schlecht auf die Performance auswirkt.

Flat vs. Skeuomorphismus

Der Wechsel zu einem flachen und eher einfachem Design war nicht nur Diskussionsstoff für viele Designer, er war performancetechnisch eigentlich gar nicht so schlecht. Viele Seiten werden heute reduzierter gestaltet, was auch hilft, den Fokus auf das Wesentliche zu lenken.

Du solltest dich fragen: Wie real muss ein Element aussehen? Brauche ich zwingend Schatten oder Farbverläufe? Je schlichter die Elemente auf einer Website sind, desto weniger Code muss geladen werden.

Bilder richtig exportieren

Mich kraust es, wenn ich sehe, wie viele Seiten sich keine Gedanken darüber machen, ob eingebundene Bilder zu groß sind und wie man diese sinnvoller einbinden kann. Nicht jeder hat auf seinem Smartphone eine endlose Flatrate mit schneller Internetverbindung. Zudem ist die Anzahl der Bilder meist der Hauptfaktor für lange Ladezeiten.

Jeder Webdesigner hat das richtige Werkzeug zur Verfügung, um die Kilobit-Anzahl von Bildern zu reduzieren. Ich verwende dazu Sketch oder Photoshop.

Wieviel Komprimierung an deinem Bild noch möglich ist, kannst du aber auch mit einem Online Compressor testen: www.compressor.io oder www.tinypng.com.

Wir gestalten für unterschiedliche Displaygrößen

Das Layout muss nicht nur auf einem Bildschirm gut aussehen. Wir gestalten für die verschiedensten Displaygrößen die auch noch unterschiedlich bedient werden. Ein Layout zu starten, ohne über Responsive Design nachzudenken, ist heutzutage nicht mehr möglich. Das Layout muss auch auf andere Größen adaptiert werden. Das zeigt dir und der Entwicklung schon im Voraus, welche Elemente womöglich auf Mobilgeräten einfach keinen Sinn machen und deshalb auch nicht geladen werden müssen. Eine Design-Entscheidung hat auch hier Einfluss darauf, wie gut die Performance beim Publikum ankommt.

Design und Entwicklung arbeiten eng zusammen

Eine Übersicht aller Elemente, Module und Inhalte hilft der Entwicklung, schnell einen Überblick zu bekommen. Es zeigt, wie viel wirklich programmiert werden muss und was womöglich mehr Einfluss auf die Performance hat und was weniger. Das ist aber nicht nur für die Umsetzung gut. Auch du kannst dadurch erkennen, ob dein Layout insgesamt harmoniert. Zu viele unterschiedliche Design-Elemente sind nicht gut, aber leicht zu übersehen!

Ab und zu müssen auch Kompromisse eingegangen werden. Möchte man eine Funktion unbedingt drin haben, muss man vielleicht an anderer Stelle etwas wegnehmen.

Designer müssen den Entwicklern vorarbeiten

Die Punkte hier sollen im Grunde genommen keine Richtlinien sein, die du bei jedem Layout verwenden solltest. Sie helfen dir aber, deinen Horizont zu erweitern und über deinen eigenen Arbeitsbereich hinauszudenken. Jeder Punkt ist unabhängig vom anderen zu sehen. Untersuche erst deine Zielgruppe und entscheide dann, wie aufwendig deine Seite wirklich sein muss. So lange du Entscheidungen logisch begründen kannst, wird dir auch der Kunde weiterhin fleißig zunicken und nicht traurig sein, wenn es diesmal keine Slideshow gibt.