Ladezeiten
Wie schnell lädt Eure Website von der Eingabe bis zum kompletten Anzeigen Eures Inhaltes? Das ist sehr entscheidend. Die meisten Nutzer verlassen eine Website direkt, wenn sie nicht innerhalb von 3 Sekunden geladen ist. Die Aufmerksamkeitsspannen der Menschen werden immer kürzer und Informationen müssen daher immer kompakter und schneller verfügbar sein. Umso wichtiger ist es, dass Eure Website schnell geladen wird. Es reicht auch dem Nutzer erstmal etwas anzuzeigen und den Rest dann im Hintergrund nachladen zu lassen. Aber je schneller der Nutzer etwas sieht, mit dem er arbeiten kann, umso größer ist die Chance, dass dieser auch auf der Website bleibt und sie nicht gleich wieder verlässt.
Auch für Google ist das nicht unerheblich. Google trackt wie lange der Nutzer auf eurer Seite bleiben. Je kürzer diese Zeit ist, desto schlechter kann das Ranking ausfallen. Also sorgt dafür, dass Eure Website schnell ist. Hier findet Ihr einige Punkte, auf welche man für eine optimierte Ladezeit achten sollte:
Einfache Optionen:
- Bilder komprimieren und die Datengröße verringern
- Schnelles Hosting durch gute Server und deren Konfigurationen
- Verbindungen zu extern vermeiden, um den kompletten Datenstream selbst in der Hand zu haben
- Seiten kurzhalten. Man sieht immer wieder Seiten, bei denen man unendlich weit scrollen kann. Habt Ihr nicht grade eine Plattform oder ein soziales Netzwerk ist das zu viel. Keep it simple.
Optionen für Entwickler:
- Zu viele Scripte und CSS-Dateien vermeiden. Lieber viel in eine Datei packen, um die Anzahl der Anfragen zu vermeiden, die man an den Server pro Datei schicken muss.
- Style für die erste Ansicht im <head> Bereich einfügen (Above the fold). Das was der Nutzer als erstes sieht, wenn er die Website betritt, sind beispielsweise Header, Banner und die Intro Texte (je nach Website). Die Styles davon sollte man in den Headbereich schreiben, damit dieser direkt beim Seitenaufruf geladen werden kann und das Rendering nicht blockiert wird oder springt. Das sorgt für schnellere Ladezeiten und ein besseres Ranking bei Google. Mehr Infos dazu in diesem Artikel: Above the Fold – Webseiten richtig aufbauen
- Pakete nur einbinden, wenn diese auch gebraucht werden.
- Nicht so wichtige Inhalte per JavaScript nachladen.
- Bei CMS Systemen die Anzahl der Plug-Ins kleinhalten (denn jedes Plug-In lädt seine eigenen CSS und Javascript Dateien.)
Findet der Websitebesucher, was er auf meiner Website sucht?
Jeder Nutzer besucht eine Website mit einer Intention. Sei es, um was zu kaufen, sich Informationen einzuholen oder um unterhalten zu werden. Daher ist es wichtig seine Nutzer und vor allem seine Zielgruppe zu kennen. Macht Euch Gedanken darüber was Nutzer erwarten, wenn sie Eure Website besuchen. Habt Ihr einen Shop, stellt den Usern auf der Startseite einige Highlight-Produkte oder eine Suchfunktion zur Verfügung. Seid Ihr noch nicht so bekannt am Markt und möchtet einige Kunden über die Website generieren, sorgt dafür, dass der Nutzer beim Betreten der Seite erfährt, wer Ihr seid und was Ihr macht. Gebt ihnen die Optionen sich mit einem Klick weitere Informationen einzuholen und schafft es, dass der erste Eindruck sehr eindrucksvoll und informativ ist.
Es ist sehr wichtig das Verhalten und die Erwartungshaltung eurer Nutzer zu kennen. Das kann man mit bestimmten Werkzeugen herausfinden, wie zum Beispiel:
- Nutzt Google Analytics um das Alter, Geschlecht und Verhalten Eurer Nutzer zu ermitteln und Eure Zielgruppe dadurch besser kennenzulernen
- Leute fragen, die Eure Website besucht haben
- Sich in den Nutzer hineinversetzen und sich Fragen was man als erstes auf der Website finden sollte / wollen würde
- Schaut Euch die Mitbewerber an und holt Euch Inspirationen. Doch Achtung: Kopieren sollte man sein lassen, denn Eure Websitebesucher waren mit hoher Wahrscheinlichkeit schon auf den Seiten Euer Mitbewerber und eine Kopie würde schnell auffallen.
Intuitive Nutzeroberfläche
Wie gut und intuitiv ist Eure Website nutzbar? Schließlich möchte man möglichst viele Gruppen damit erreichen und weder jung noch alt ausgrenzen. Sogar ein Kind sollte daher zwischen Euren Seiten navigieren können und verstehen was passiert, sobald man irgendwo draufklickt.
Es gibt viele Konventionen im Internet, die sich bei den meisten Nutzern bereits eingebrannt haben. Zum Beispiel die Menüführung. Meistens ist das Menü oben zu finden und ist der Bildschirm zu klein, verschwindet das Ganze in ein sogenanntes Burger Menü. Ihr kenn sicher alle diese 3 Streifen untereinander, die beim Klick das Menü öffnen. Das hat sich in die Köpfe der Internetznutzer eingebrannt und ist mittlerweile gängige Konvention. Das heißt nicht, dass man sich kreativ nicht mehr austoben darf. Es ist nur eine Art Guideline, die hilft Eure Nutzeroberfläche so intuitiv und vertraut wie möglich für den Anwender zu machen. Man kann natürlich immer wieder neue Ideen in sein Menü integrieren, wichtig dabei ist, dass der Nutzer versteht, wo dieses zu finden ist und wie er sich, ohne lange zu suchen durch die Seite navigieren kann. Solche Konventionen helfen dabei, da sie gängige Praxis sind. Sie sollen jedoch keine festgeschriebenen Regeln darstellen.
Fragen die sich zu stellen sind:
- Wissen alle relevanten Altersgruppen wie die Seite zu bedienen ist?
- Ist klar wo man hingelangt oder was passiert, wenn man auf eine Schaltfläche klickt?
- Braucht der Nutzer zu viele Klicks, um an sein Ziel zu gelangen?
- Sind meine Icons und Bilder aussagekräftig?
- Sind meine Informationen auf jedem Gerät gut zugänglich?
- Habe ich vielleicht zu viele Störer im Screen?
- Habe ich irreführende Texte oder Beschriftungen?
- Sind meine Informationen und Abschnitte vom Platz oder Kontrast eindeutig getrennt, um diese auseinander halten zu können?
Barrierefreiheit
Nicht nur im Alltag ist Barrierefreiheit ein Thema, sondern auch in der digitalen Welt. Es ist aus vielen Gründen wichtig oder ratsam seine Seite weitestgehend barrierefrei zu gestalten. Das hat den Vorteil, dass man natürlich alle Zielgruppen mit seiner Website anspricht und nicht nur die Gesunden oder die ohne Handicap. Außerdem wird man bei Google besser gefunden, weil Barrierefreiheit ein wichtiger Rankingfaktor ist. Regierungsseiten sind übrigens gesetzlich dazu verpflichtet barrierefrei zu sein, um keinen Bürger auszuschließen.
Das alles hört sich natürlich immer super an. Aber was trägt denn jetzt zur Barrierefreiheit Eurer Seite bei?
Lesbarkeit
Wie gut sind die Texte lesbar? Wir reden hier von Faktoren wie Schriftart, Farbe, Schriftgröße, Schriftschnitt usw. Serifenschriften lassen sich durch die kleinen „Verzierungen“ besser lesen. Kinderbücher haben daher öfter Serifenschriften, da individuelle Buchstaben besser erkannt werden können.
Auch die Schriftgröße sollte groß genug sein, um auch von älteren Leuten auf den Monitoren erkannt zu werden. Alternativ kann man eine Funktion auf seiner Website integrieren, die es dem Nutzer erlauben, die Schrittgröße manuell zu vergrößern.
Vermeidet für die Lesbarkeit gefärbte Texte. Am besten ist schwarzer Text auf weißem Hintergrund. Man muss sich aber nicht strikt daranhalten. Zu diesem Punkt kommen wir gleich noch einmal zurück.
Ist Euer Text zu dünn geschnitten trägt das ebenfalls zu einer schlechten Lesbarkeit bei. Also immer mindestens Regular nutzen.
Geschriebene Texte
Außerdem ist es für eine barrierefreie Seite wichtig, dass die Texte einfach geschrieben und leicht zu verstehen sind. Keine groß verschachtelten Sätze und nicht zu viele Fachwörter verwenden. Es ist zwar schön, wenn ihr so schreiben könnt, aber nicht jeder hat studiert und nicht jeder ist mit der deutschen Sprache aufgewachsen. Also um alles für jeden verständlich zu machen und um jeden zu erreichen, sollten die Texte möglichst einfach gehalten sein. Dies lässt sich natürlich nicht immer optimal umsetzen, gerade wenn die Seite sehr fachspezifisch ist.
Alt Texte und Titel hinterlegen
Alt Texte und Titel sind gerade für Menschen mit einem eingeschränkten Sehvermögen eine große Hilfe. Alt-Texte sind in erster Linie dazu da, zu beschreiben, was sich auf einem Bild befindet, sobald dieses nicht geladen werden kann. Aber auch Screen Reader beziehen diese Alt-Texte mit ein und lesen sie dem User vor. So kann der Konsument die Seite in noch größerem Umfang erleben. Bilder können schlecht vorgelesen werden, aber wenn ein entsprechender Alt-Text hinterlegt ist, liest der Screen Reader diesen vor und gibt dem User ein noch besseres Verständnis von Eurer Website.
Auch Titel Attribute in Links helfen bei der Orientierung von Usern mit Screen Readern. Diese geben genaueren Aufschluss darüber, wohin der entsprechende Link führt. Wie Ihr diesen gestaltet, bleibt ganz euch überlassen. Aber es sollte aussagekräftig genug sein, um den Nutzer bestmöglich zu informieren.
Kontraste
Wie bereits oben angesprochen kommen wir nochmal auf das Thema Kontraste zurück. So wurde erläutert, dass am besten lesbar Schwarz auf Weiß ist. Aber auch komplett invertiert kann einem User beim besseren Umgang mit der Website helfen, beispielsweise für Leute mit lichtempfindlichen Augen. Für die ist es anstrengender auf zu viel Weißfläche zu schauen und ein schwarzer Hintergrund mit weißer Schrift kann dem Entgegenwirken. Wie angesprochen gibt es nicht nur diese zwei Möglichkeiten. Man kann auch mit Farben spielen, gerade des Designs wegen. Man sollte nur nicht zu sehr abdriften und einschätzen, ob eine gute Kontrastierung vorhanden ist.
Als guter Kompromiss zwischen Design und Lesbarkeit könnte ein Button sein, mit dem der Nutzer in einen sogenannten „High Contrast Mode“ gehen kann. Hier werden Hintergrundbilder ausgeblendet, Farbflächen und Texte bekommen fest zugewiesene Werte und so kann der Betrachter selbst entscheiden, wie er die Website erleben möchte. Dieses Feature sorgt für einen Mehraufwand und sollte gerade bei der Erstellung der Website berücksichtigt werden. Die Menschen, die es benötigen werden euch sehr dankbar sein und als netten Nebeneffekt verbessert Ihr Euer Ranking bei Google.
Text-To-Read Funktionalität auf der Website
Nicht jeder weiß mit dem PC umzugehen und nicht jeder der eine Einschränkung hat, hat seinen PC so eingestellt, dass dieser ihn mit Screen Reader Funktionen unterstützt. Das könnt Ihr aber tun, indem Ihr auf Eurer Website eine eingebaute Text-To-Read Funktion einbaut. In dem der Nutzer die Geschwindigkeit mitbestimmen kann. Das kann zum Beispiel einfach durch ein Kopfhörer- oder Lautsprecher Symbol mit der Beschriftung „Text vorlesen lassen“ über der entsprechenden Textsektion geschehen. So bietet man dem User die Möglichkeit sich Text vorlesen zu lassen UND die Geschwindigkeit zu bestimmen.
Farbgebung
Menschen sehen ganz unterschiedlich. So sehen Frauen Farben anders als Männer. Und dann gibt es Menschen die Farben gar nicht sehen oder Schwierigkeit haben bestimmte Farben zu unterscheiden. Deshalb sollte man wichtige Funktionalität nicht auf Farben auslegen. Zum Beispiel die Anweisung „Klicken Sie dafür auf den roten Kreis“ kann von manchen Menschen nicht durchgeführt werden, weil sie diese Farbe eben nicht erkennen. Ein CI (Corporate Identity) ist für ein Unternehmen sehr wichtig und sollte auch nicht aufgrund von Barrierefreiheit in den Hintergrund gerückt werden, aber man kann seine Funktionen so bauen, dass die Farberkennung keine wesentliche Rollte bei der Bedienbarkeit spielt.
Design
Gerade in der heutigen Zeit spielt das Design Eurer Website eine bedeutende Rolle dabei, wie seriös Ihr als Unternehmen oder Person wahrgenommen werdet. Mal abgesehen von den ganzen technischen Eigenschaften, die eine Website ausmachen, ist das Design wohl das subjektivste. Generell gilt es erstmal eine funktionale, intuitive und gut verständliche Nutzeroberfläche zu erstellen und danach das ganze schön zu gestalten. Doch was ist im beim Design Eurer Website genau zu beachten?
Wiedererkennungswert
Jedes Unternehmen oder Business sollte ein CI (Corporate Identity) haben. Das sind festgelegte Regeln zum Erscheinungsbild. Eindeutige Farben, Schriftfamilien mit geregelten Schriftschnitten und ein Grading (Farbgebung / Bearbeitung eines Bildes) oder Bildsprache. Ein CI kann sehr umfangreich sein oder sich nur auf Farben und Schrift beziehen. Das hängt ganz von der Definition ab. Wichtig ist aber, dass sich im Rahmen der Websiteerstellung an eben diese Richtlinien gehalten wird, um ein einheitliches Erscheinungsbild und damit einen Wiedererkennungsfaktor zu erzeugen.
So können alleine schon die Schriftart und die Farbe dieses Gefühl hervorheben. Um zu sehen wie wichtig ein CI ist und was alleine schon Farben oder Schriften bewirken können, schaut doch gerne auf unserer Branding Seite vorbei und nehmt am Branding Quiz teil.
Wohlfühlfaktor
Ein schönes und ästhetisches Design gibt natürlich auch einen gewissen Wohlfühlfaktor und lässt den Besucher die Website sogar gerne bedienen. Natürlich stehen da im Vordergrund erstmal das Erscheinungsbild. Also die Farbwahl, Abstände zwischen Elementen etc. Aber auch die Haptik an sich kann ein wichtiger Punkt der Bedienung sein.
Auf dem Handy können Apps zum Beispiel Feedback in Form von einer leichten Vibration geben und so das Belohnungszentrum des Gehirns triggern. So kann man gewünschtes Verhalten mit eben diesem Feedback belohnen, indem auf eine Aktion eine Reaktion folgt. Das kann man natürlich auf seiner Website nicht so umsetzten, aber von dem Prinzip kann sich einiges abgeschaut werden. Eine kleine Animation des Buttons oder im Hintergrund kann den Nutzer ein Feedback geben – auf Aktion folgt Reaktion ist hier die Devise. So trainiert man den Nutzer, dass er auf Buttons klicken kann. Klickt man ins Leere, so erhält man auch kein Feedback.
Natürlich bezieht sich das nicht nur auf Buttonklicks, aber man kann mitberücksichtigen, dass solche haptischen Interaktionen zur Verfügung stehen und diese die Bedienung angenehmer machen. Man sollte jetzt nicht auf Teufel komm raus versuchen diese mit einzubinden, sondern überlegen, ob sie sinnvoll sind.
Fragen, die man sich stellen sollte
Zum Schluss gibt es noch einen kleinen Fragenkatalog. Die Antwort auf diese Fragen sollte man auf jeden Fall kennen, um eben das Fundament für eine gute Website aufbauen zu können. Die Planung ist das A und O und je mehr man im Vorhinein weiß, umso besser kann man konzipieren und sein Design, sowie den Content um diese Antworten herumbauen.
Wer sind meine Kunden?
Das wichtigste zuerst. Man sollte seine eigene Zielgruppe kennen und wissen, wie man diese am besten anspricht. Um diese Zielgruppe könnt Ihr dann den Aufbau und Inhalt der Website planen. Habt Ihr zum Beispiel ein älteres Klientel, dürfen die Schrift und die Kontraste etwas größer sein. Ist das Klientel sehr jung, sollte mehr mit Animationen, Grafiken und kurzen Texten gearbeitet werden. Wer jemanden ansprechen möchte, sollte vorher wissen wir der / diejenige tickt. Also werdet Euch darüber bewusst wen Ihr hauptsächlich ansprechen wollt. Man kann immer versuchen allgemein alle anzusprechen, aber umso schwammiger die Zielgruppe, desto ungenauer auch die Ansprache und der daraus resultierende Erfolg. Meistens sind Zielgruppen auch nicht unendlich weit gefächert, sondern beziehen sich auf bestimmte Charakteristiken.
Was wollen meine Kunden auf der Website?
Sobald Ihr wisst, wer Eure Kunden sein sollen, mach Euch Gedanken darüber, was Eure Kunden auf Eurer Website erwarten. Das kann man durch viele Methoden herausfinden. Das Beste ist immer bestimmte Personen, die eben in die Zielgruppe passen zu fragen. Dadurch bekommt man natürlich das beste Feedback von echten Personen.
Wer über ein gutes Empathie Vermögen verfügt, der kann sich auch einfach in die Zielgruppe reinversetzen und so den Gedankengang nachvollziehen, die der potenzielle Besucher beim Betreten der Website hat. Meistens reicht es auch sich einfach Gedanken darüber zu machen, was seine Kerngebiete sind und wie man diese Kompakt auf der Startseite darstellen kann.
Wenn man beispielsweise Waren verkauft, sollten diese auch vorgefiltert angezeigt werden und dem Kunden sollte eine Suchfunktion zur Verfügung stehen. Informiert man über gewisse Themen, so sollte man einige Teaser einbinden, die der Besucher schnell erfassen kann und bei gewecktem Interesse mittels eines Buttons direkt zum Artikel führt.
Was bietet die Website für einen Mehrwert?
Die Frage welcher Mehrwert sich durch die Website bietet ist gar nicht mal so weit hergeholt. Viele denken sich, dass man einfach eine Website braucht, um eine zu haben. Es gehört quasi zum guten Ton. Aber in vielen Fällen reicht es ja auch, einfach sein Logo und Kontaktdaten auf der Website zu haben. Influencer wickeln Ihr Geschäft hauptsächlich auf Social Media ab, da dort eine direkte Interaktion erfolgt und man direkt in den Apps Insights über Klicks, Likes, Kommentare, DMs etc. erhält. Als Website würde in dem Falle vielleicht schon eine kleine Bildergalerie mit Verlinkung zu den Social-Media-Kanälen, sowie Kontaktdaten oder ein Formular für Businessanfragen reichen. Das ist aber nicht pauschal so anzunehmen, sondern man sollte sich immer denken, welchen Mehrwert die Seite bietet und ob man auch immer eine umfangreiche Seite braucht. Bei einem Shop ist der Mehrwert ganz klar der Kauf von Produkten. Ein Blog sind lange informative oder unterhaltsame Beiträge. Eine Firmenwebsite sollte einen guten Eindruck vermitteln, erklären was man macht, warum gerade dieses Unternehmen als Partner gewählt werden sollte und die Möglichkeit der Kontaktaufnahme bieten.
Erkennt man, ob die Website zu meinem Unternehmen gehört
Dies ist natürlich ein Punkt, der mitten in der Planung und der Konzeption auftaucht, insbesondere wenn es ums Design geht. Es sollte klar erkennbar sein, dass diese Website eben auch zu dem Unternehmen gehört. Sie sollte jetzt nicht blau sein, wenn man mit dem Unternehmen eher die Farbe Rot verbindet oder eine Bankenwebsite sollte weniger verspielt und mehr Seriosität und Ernsthaftigkeit vermitteln. Es geht hier also nicht nur um Farben und Schriften, sondern um das gesamte Erscheinungsbild und den Aufbau.
powered by Borlabs Cookie