Benutzerfreundliche Websites

Was bedeutet benutzerfreundliche Websites?

Benutzerfreundliche Websites sind Websites, auf denen Besucher die gesuchte Information ohne langes Nachdenken und ohne Mühe finden, egal mit welchem Gerät sie kommen. Ein schönes Aussehen gehört dazu, reicht aber allein nicht. Auch die Logik des Menüs, die Lesbarkeit des Textes, die Ladezeit der Seite und ein leicht auszufüllendes Formular sind Teil derselben Erfahrung.

Auf dieser Seite konzentrieren wir uns auf Unternehmenswebsites, die Leistungen erklären, Vertrauen schaffen und Besucher dazu bringen, anzurufen, zu schreiben oder ein Angebot anzufragen. Verkaufsabläufe wie Warenkorb, Zahlung und Produktkatalog erfordern eine eigene Fachkenntnis; dieses Thema behandeln wir gesondert auf unserer Seite zur Onlineshop-Entwicklung.

Gemeinsame Merkmale benutzerfreundlicher Websites

Um zu erkennen, ob sich eine Website angenehm nutzen lässt, muss man keine Expertin und kein Experte sein. Wenn die meisten der folgenden Punkte auf Ihre Website zutreffen, sind Sie auf dem richtigen Weg:

• Besucher verstehen im ersten Bildschirmbereich der Startseite, was Sie tun.
• Menüpunkte sind nicht in Ihren internen Begriffen formuliert, sondern in den Wörtern, die Ihre Kunden verwenden.
• Telefonnummer, Adresse und Angebotsformular sind von jeder Seite aus leicht zu finden.
• Die Seite öffnet sich auch bei mobiler Verbindung ohne Wartezeit, und Inhalte springen beim Laden nicht umher.
• Der Text lässt sich auf dem Smartphone lesen, ohne hineinzuzoomen.
• Auch wer mit der Tastatur oder einem Screenreader navigiert, kann die Website nutzen.

Für wen hat das Vorrang?

Für jedes Unternehmen, dessen Kunden sich vor der Entscheidung die Website ansehen, ist Benutzerfreundlichkeit wichtig, doch in manchen Branchen zeigt sich der Effekt schneller. Kliniken und Studios, die mit Terminen arbeiten, Hersteller und Dienstleister, die Angebote einholen, sowie Restaurants und Hotels, die Reservierungen annehmen, stehen an der Spitze dieser Gruppe. Auch Unternehmen, deren Website vor Jahren für den Desktop gebaut wurde und auf dem Smartphone Probleme macht, profitieren von der Arbeit an benutzerfreundlichen Websites am meisten.

Dass Besucher finden, was sie suchen: Inhalt und Menüaufbau

Wenn wir benutzerfreundliche Websites gestalten, beginnen wir nicht bei den Farben, sondern bei der Frage, warum Besucher auf die Website kommen. Wer auf die Website einer Klinik kommt, sucht Untersuchungsbedingungen, die Adresse oder den Weg zum Termin. Wer auf die Website eines Herstellers kommt, möchte als Einkäufer das Produktsortiment, die Produktionskapazität und die Katalogdatei sehen. Allein diese Fragen aufzulisten, ergibt einen großen Teil der Seitenstruktur von selbst.

Bei den Aufgaben der Besucher beginnen

Im ersten Gespräch schreiben wir gemeinsam auf, welche Fragen Ihre Kunden Ihnen am häufigsten stellen und was sie auf der Website tun sollen. Aufgaben wie „Servicegebiet erfahren“, „Referenzarbeiten ansehen“ und „Angebot anfragen“ werden nach Wichtigkeit geordnet. Für jede Aufgabe zählen wir, in wie vielen Schritten Besucher zum Ergebnis kommen, und streichen unnötige Schritte, bevor wir zum visuellen Design übergehen. Benutzerfreundliche Websites werden rund um diese Aufgabenliste aufgebaut.

Menü und Seitenhierarchie

Wenige und klare Menüpunkte verringern die Entscheidungslast der Besucher. Statt vager Titel wie „Unsere Lösungen“ oder „Was wir machen“ verwenden wir Wörter, die die Leistung selbst beschreiben. Auf benutzerfreundlichen Websites sehen Besucher jederzeit, auf welcher Seite sie sich befinden und wie sie zur übergeordneten Ebene zurückkehren.

Lesbarer Text und Seitenlayout

Am Bildschirm wird Text eher überflogen als von vorn bis hinten gelesen. Kurze Absätze, aussagekräftige Zwischenüberschriften, Aufzählungen und ausreichender Zeilenabstand helfen Besuchern, den gesuchten Satz zu finden. Bei benutzerfreundlichen Websites sehen wir den Text nicht als etwas, das nachträglich in das Design eingefüllt wird, sondern als Hauptmaterial, das das Seitenlayout bestimmt.

Deshalb bitten wir möglichst früh um einen Textentwurf. Eine Seite, die mit echten Überschriften und echten Absätzen gezeichnet wird, führt zu deutlich besseren Entscheidungen als ein Entwurf, auf dem „hier kommt Text“ steht.

Formulare und Kontaktwege

Auf einer Unternehmenswebsite geschieht der Großteil der Conversions über ein Formular, einen Anruf oder eine Nachricht. Es erleichtert das Ausfüllen, nur wirklich nötige Felder abzufragen, über jedem Feld eine sichtbare Beschriftung zu verwenden und in der Fehlermeldung klar zu schreiben, was fehlt. Auch eine kurze Bestätigung, die der Person, die das Formular abschickt, sagt, was als Nächstes passiert, schafft Vertrauen.

Beim mobiloptimierten Webdesign erleichtern auch Abkürzungen wie ein Anruf, der beim Antippen der Telefonnummer startet, oder eine Karten-App, die sich beim Antippen der Adresse öffnet, den Besuchern die Arbeit. Manchmal möchten Besucher lieber sofort anrufen, statt ein Formular auszufüllen; beide Wege sollten offen sein.

Details, die Vertrauen schaffen

Auf einer Unternehmenswebsite möchten Besucher Sie kennenlernen, bevor sie sich entscheiden. Echte Fotos von Team und Räumlichkeiten, eine offen genannte Adresse und Öffnungszeiten, Beispiele für abgeschlossene Arbeiten und Antworten auf häufige Fragen schaffen dieses Vertrauen. Auf benutzerfreundlichen Websites sind diese Angaben nicht tief in einer Unterseite vergraben, sondern stehen direkt neben der jeweiligen Leistung.

Worauf wir beim mobiloptimierten Webdesign achten

In vielen Branchen kommt ein bedeutender Teil der Besuche über das Smartphone; den Anteil auf Ihrer eigenen Website sehen Sie in Ihren Analysetools. Deshalb ist mobiloptimiertes Webdesign für uns nicht die nachträglich verkleinerte Fassung einer Desktop-Seite. Wir bauen die Seiten zuerst auf dem Smartphone-Bildschirm auf und erweitern sie dann zu größeren Bildschirmen. So haben wir von Anfang an entschieden, was auf der engsten Fläche wirklich wichtig ist.

Bedienung mit dem Daumen und Tippflächen

Auf dem Smartphone wird eine Website meist einhändig mit dem Daumen bedient. Schaltflächen und Links, die groß genug zum bequemen Antippen sind und nicht zu dicht beieinanderstehen, verringern Fehlklicks. WCAG 2.2 verlangt für Tippziele auf Konformitätsstufe AA grundsätzlich eine Fläche von mindestens 24×24 CSS-Pixeln oder einen gleichwertigen Abstand zwischen den Zielen. Im Prozess des mobiloptimierten Webdesigns streben wir an, diese Grenze deutlich zu übertreffen.

Mobiles Menü und feste Kontaktschaltflächen

Auf dem Smartphone ist das Menü die empfindlichste Stelle. Ein Link „Kontakt“, der in einem eingeklappten Menü verschwindet, erschwert es Besuchern, Sie zu erreichen. Deshalb halten wir die eigentliche Aktion wie Anruf, Nachricht oder Reservierung lieber an einer gut erreichbaren Stelle des Bildschirms fest.

Für ein neu eröffnetes Restaurant in Kiew haben wir bei der Website einen schlichten Aufbau aus den Bereichen Reservierung, Galerie, Speisekarte und Kontakt umgesetzt. Besucher gelangen mit wenigen Berührungen zur Speisekarte und zur Reservierung und können dem Restaurant über eine feste Kontaktschaltfläche leicht schreiben. Details finden Sie auf der Seite zum Projekt Celebrity Kiev.

Bilder, Tabellen und lange Inhalte

Ein breites Foto, das am Desktop beeindruckt, kann auf dem Smartphone zu einem sinnlosen Streifen werden. Beim mobiloptimierten Webdesign planen wir die Bilder für jeden Bildschirm mit eigenen Ausschnitten und wandeln Tabellen in ein auf dem Smartphone lesbares Layout um. Auf langen Leistungsseiten verhindern aufklappbare Abschnitte und Links innerhalb der Seite, dass Besucher beim Scrollen die Orientierung verlieren.

Mobiloptimiertes Webdesign auf echten Geräten testen

Ein verkleinertes Browserfenster am Computer ersetzt kein Smartphone. Auf echten Geräten liefern Display-Aussparungen, die ein- und ausfahrende Adressleiste, langsame Verbindungen und die Lesbarkeit in der Sonne unterschiedliche Ergebnisse. Deshalb führen wir die Tests für mobiloptimiertes Webdesign auf Smartphones unterschiedlicher Größe und unterschiedlichen Alters durch; eine Seite, die auf einem älteren Gerät flüssig läuft, läuft auf einem neueren in der Regel ebenfalls einwandfrei.

Tablet und große Bildschirme

Mobile First zu arbeiten bedeutet nicht, große Bildschirme zu vernachlässigen. Beim Tablet werden Quer- und Hochformat, auf großen Monitoren die übermäßig langen Zeilen jeweils gesondert geprüft. Die Textspalte in einer lesbaren Breite zu halten, sorgt auch auf großen Bildschirmen für angenehmes Lesen. Eine Seite, die im Besprechungsraum auf einem großen Bildschirm präsentiert wird, und dieselbe Seite, die im Bus auf dem Smartphone geöffnet wird, sind zwei verschiedene Nutzungsmomente.

Geschwindigkeit: die unsichtbare Seite benutzerfreundlicher Websites

Besucher nehmen die Geschwindigkeit einer Website nicht als Merkmal wahr, Langsamkeit bemerken sie aber sofort. web.dev, Googles Ressource für Webentwickler, definiert drei grundlegende Messgrößen für Laden, Reaktion auf Interaktionen und visuelle Stabilität und nennt sie Core Web Vitals. Für benutzerfreundliche Websites berücksichtigen wir diese Messgrößen von Beginn des Designs an.

• Largest Contentful Paint (LCP): Misst, wann der Hauptinhalt der Seite erscheint; für eine gute Erfahrung werden 2,5 Sekunden oder weniger empfohlen.
• Interaction to Next Paint (INP): Misst, wie schnell die Seite auf eine Berührung oder einen Klick reagiert; der empfohlene Wert liegt bei 200 Millisekunden oder weniger.
• Cumulative Layout Shift (CLS): Misst, wie stark Inhalte beim Laden verrutschen; der empfohlene Wert liegt bei 0,1 oder weniger.

Um zu sehen, dass diese Schwellenwerte bei der Mehrheit der Besucher erreicht werden, wird empfohlen, das 75. Perzentil der Seitenaufrufe getrennt für Mobilgeräte und Desktop zu beobachten. Die Einzelheiten der Messgrößen finden Sie im Web-Vitals-Leitfaden von web.dev.

Designentscheidungen, die die Geschwindigkeit bestimmen

Geschwindigkeit ist nicht nur eine Frage von Server oder Code; auch Designentscheidungen wirken sich direkt aus. Im Prozess des mobiloptimierten Webdesigns bewerten wir die folgenden Elemente zu Projektbeginn gemeinsam mit Ihnen:

• Große, automatisch abspielende Videos und Slider mit vielen Folien oben auf der Startseite
• Viele verschiedene Schriftarten und Schriftschnitte
• Fotos, die in deutlich größerer Auflösung geladen werden, als sie angezeigt werden
• Externe Erweiterungen wie Chat-, Karten- und Social-Media-Tools, die auf jeder Seite eingebunden werden
• Bilder und Hinweisleisten, die den Text nach unten schieben, weil beim Laden kein Platz für sie reserviert wurde

Keines dieser Elemente ist für sich verboten; wichtig ist, bewusst zu wählen, was jedes davon der Seite bringt und was es kostet. Die Karte nur auf der Kontaktseite zu zeigen oder das Video erst zu laden, wenn der Besucher klickt, sind einfache Entscheidungen, die Geschwindigkeit bringen, ohne auf Optik zu verzichten.

Geschwindigkeit messen und überwachen

Während der Entwicklung messen wir mit Testwerkzeugen, das eigentliche Bild zeigt sich aber nach der Veröffentlichung, wenn echte Besucherdaten eintreffen. Der Core-Web-Vitals-Bericht in der Search Console zeigt, welche Seitengruppe langsamer geworden ist. Wer die Geschwindigkeit erneut prüft, wenn eine neue Erweiterung oder ein großes Bild hinzukommt, verhindert, dass benutzerfreundliche Websites mit der Zeit schwerfällig werden.

Barrierefreiheit: eine Website, die alle nutzen können

Barrierefreiheit bedeutet, dass auch Menschen mit Seh-, Hör-, Bewegungs- oder Wahrnehmungsunterschieden Ihre Website nutzen können. Wer im Nahverkehr ein Video ohne Ton ansieht, den Bildschirm in der Sonne kaum erkennt oder eine Tasche in der Hand trägt, profitiert ebenfalls von denselben Entscheidungen. Deshalb behandeln wir Barrierefreiheit bei benutzerfreundlichen Websites nicht als Funktion, die nachträglich ergänzt wird, sondern als grundlegende Eigenschaft.

Internationale Referenz sind die Web Content Accessibility Guidelines (WCAG) des W3C. In WCAG 2.2, das das W3C im Oktober 2023 veröffentlicht hat, sind die Richtlinien unter vier Prinzipien zusammengefasst: wahrnehmbar, bedienbar, verständlich und robust; die Erfolgskriterien sind in drei Stufen definiert: A, AA und AAA. Einzelheiten finden Sie auf der Einführungsseite zu WCAG 2 des W3C.

Worauf wir bei Design und Code achten

• Menü, Schaltflächen und Formulare sind auch allein mit der Tastatur bedienbar
• Ein deutlicher Fokusrahmen zeigt bei der Tastaturnavigation, auf welchem Element man sich befindet
• Sinnvolle Alternativtexte für Bilder, die Informationen tragen
• Bei Formularfeldern dauerhafte Beschriftungen statt Platzhaltertext, der beim Tippen verschwindet
• Informationen nicht allein über Farbe vermitteln; fehlerhafte Felder auch mit Symbol und Text kennzeichnen
• Die Seite bleibt bei vergrößertem Text intakt, und Überschriften werden in der richtigen Reihenfolge verwendet

Auch der Farbkontrast gehört zu dieser Liste. Wir prüfen in der Designphase, bei welchen Kombinationen Ihrer Unternehmensfarben als Text- und Hintergrundfarbe die Lesbarkeit erhalten bleibt, und schlagen bei Bedarf für den Bildschirm angepasste Töne der Palette vor.

Barrierefreiheit testen

Automatische Prüfwerkzeuge erkennen einen Teil der Probleme wie fehlende Alternativtexte oder zu geringen Kontrast, aber nicht alle. Deshalb gehen wir benutzerfreundliche Websites vor der Veröffentlichung auch allein mit der Tastatur und mit dem Screenreader des Smartphones durch. Ein Menü, das per Tastatur nicht erreichbar ist, oder ein Link, den der Screenreader nur als „Schaltfläche“ vorliest, fällt bei diesen Tests schnell auf.

Unser Arbeitsablauf für benutzerfreundliche Websites

Auch wenn jedes Projekt nach seinem eigenen Bedarf entsteht, ist die Reihenfolge der Schritte ähnlich. Den allgemeinen Rahmen unserer Leistung im Webdesign für Unternehmen sehen Sie auf unserer Leistungsseite; im Folgenden beschreiben wir die Schritte mit Fokus auf Benutzerfreundlichkeit.

1. Prüfung der bestehenden Website

Wenn Sie bereits eine Website haben, nutzen wir sie zuerst wie ein gewöhnlicher Besucher auf Smartphone, Tablet und Desktop. Liegen Analysedaten vor, sehen wir uns die am häufigsten besuchten und am schnellsten verlassenen Seiten an. Zu sehen, was funktioniert, bestimmt, was beim Relaunch erhalten bleiben muss. Auch die Bereiche, die Ihr Team auf der Website am häufigsten aktualisiert, erfahren wir in dieser Phase, denn ein Aufbau, der sich schwer aktualisieren lässt, wird mit der Zeit zu einer veralteten Website.

2. Sitemap und Wireframe

Nach den Aufgaben der Besucher erstellen wir die Seitenliste und das Menü. Danach zeigen wir mit farblosen, schlichten Skizzen, welche Information jede Seite in welcher Reihenfolge liefert. Eine Korrektur in dieser Phase erfordert deutlich weniger Aufwand als eine Korrektur nach Abschluss des visuellen Designs.

3. Visuelles Design

Die freigegebene Struktur wird mit den Farben, Schriften und der Bildsprache Ihres Corporate Designs in visuelles Design übersetzt. Nach dem Grundsatz des mobiloptimierten Webdesigns präsentieren wir jede Seite zuerst auf dem Smartphone-Bildschirm, danach auf größeren Bildschirmen.

4. Entwicklung und Test

Nachdem das Design in Code umgesetzt ist, testen wir auf verschiedenen Smartphones, in verschiedenen Browsern und Bildschirmgrößen. Wir prüfen vor der Veröffentlichung, ob Formulare an der richtigen Adresse ankommen, ob die Tastaturnavigation funktioniert und ob die Seiten die Geschwindigkeitsmesswerte erreichen.

5. Beobachtung nach der Veröffentlichung

Sobald echte Besucher die Website nutzen, zeigen die Daten, wo sie hängen bleiben. Ein abgebrochenes Formular oder eine Schaltfläche, die nie angeklickt wird, lassen sich mit kleinen Korrekturen verbessern. Wir legen die Ziele von Anfang an gemeinsam fest und berichten regelmäßig über die Ergebnisse.

Was den Leistungsumfang bestimmt

Für benutzerfreundliche Websites Zeit und Budget zu nennen, ohne Ihren Bedarf anzuhören, wäre nicht richtig. Bei der Angebotserstellung klären wir mit Ihnen diese Punkte einzeln:

• Anzahl der Seiten und Vielfalt der Inhaltstypen
• Ob Texte, Fotos und Videos bereits vorliegen
• Bedarf an einer mehrsprachigen Struktur
• Anbindungen wie Terminsystem, Angebotsformular oder CRM-Software
• Umzug der bestehenden Website und Weiterleitung alter Adressen

Häufige Fehler bei der Benutzerfreundlichkeit

• Die Website nur auf dem großen Bildschirm zu prüfen und freizugeben
• Die Startseite zu einem langen Schaufenster zu machen, in dem sich jeder Bereich selbst vorstellt
• Die Kontaktdaten nur ganz unten auf der Seite zu platzieren
• Besuchern mit Pop-ups den Blick auf den Inhalt zu versperren
• Geschwindigkeit und Barrierefreiheit auf die Zeit nach der Veröffentlichung zu verschieben

Was Sie vor dem Start vorbereiten sollten

• Die Fragen, die Ihre Kunden Ihnen am häufigsten stellen
• Die drei wichtigsten Aktionen, die Besucher auf der Website ausführen sollen
• Ihr Logo, Ihre Unternehmensfarben und, falls vorhanden, Ihre Markenrichtlinien
• Beispielwebsites, die Sie gern nutzen oder bei denen Sie Schwierigkeiten haben
• Falls vorhanden, Zugang zu den Analysedaten Ihrer bestehenden Website

Häufig gestellte Fragen (FAQ)

Was ist der Unterschied zwischen benutzerfreundlichen Websites und modern aussehenden Websites?

Ein modernes Aussehen beeinflusst den ersten Eindruck. Benutzerfreundliche Websites sorgen dagegen dafür, dass Besucher die gesuchte Information und den Kontaktweg mühelos erreichen; eine gute Website bietet beides zusammen.

Braucht man für mobiloptimiertes Webdesign eine eigene mobile Website?

Nein. Beim mobiloptimierten Webdesign mit responsivem Ansatz ändert dieselbe Website ihr Layout je nach Bildschirmgröße. Inhalt und Adresse bleiben einheitlich, und Aktualisierungen erfolgen an einer einzigen Stelle.

Kann ich die Nutzererfahrung verbessern, ohne meine Website neu zu erstellen?

Ist die Grundlage solide, meist ja. Das Menü zu vereinfachen, Formulare zu kürzen, Bilder zu verkleinern und Kontaktschaltflächen sichtbar zu machen, kann einen Unterschied bringen, ohne dass ein Relaunch nötig ist.

Beeinflusst die Website-Geschwindigkeit das Google-Ranking?

Google gibt an, dass die Core-Web-Vitals-Messgrößen in seinen Ranking-Systemen verwendet werden; ein guter Wert allein ist jedoch keine Garantie für einen Platz weit oben. Geschwindigkeit ist vor allem wichtig, damit Besucher die Website nutzen können, ohne sie zu verlassen.

Ist Barrierefreiheit auch für kleine Unternehmen notwendig?

Eine barrierefreie Website bedeutet, dass mehr Menschen Kontakt zu Ihnen aufnehmen können. Grundlegende Schritte wie Tastaturnavigation, Alternativtexte und lesbarer Kontrast sind deutlich einfacher, wenn sie zu Beginn des Designs eingeplant werden, als wenn man sie nachträglich korrigiert.

Woran erkennt man, ob eine Website benutzerfreundlich ist?

Die Abschlussquote von Formularen, das Verhalten der Besucher vom Smartphone und die Geschwindigkeitsmesswerte sind gute Indikatoren. Auch einige Ihrer Kunden zu bitten, beim Nutzen der Website laut zu sagen, was sie denken, ist ein schneller und aufschlussreicher Test.

Gehen wir Ihre Website gemeinsam durch

Teilen Sie uns Ihre bestehende Website oder Ihre Erwartungen an die neue mit; gemeinsam bewerten wir, wo Ihre Besucher Schwierigkeiten haben und mit welchen Schritten sich eine angenehmere Erfahrung aufbauen lässt. Für Ihre Gesprächsanfrage schreiben Sie uns über unsere Kontaktseite.