Beispiel: Zahnarztpraxis Carsten Lamster

Startseite einer zahnärztlichen Praxis, auf einem weißen Mac-Computer vor neutralem Hintergrund angezeigt
Abb. 1: Startseite Zahnarztpraxis Carsten Lamster

Die Website der Zahnarztpraxis Carsten Lamster – erstmals 20211 online gegangen – wurde von mir 2023 komplett überarbeitet. Ziel des Relaunchs war, die digitale Präsenz der Praxis zu modernisieren und die Zugänglichkeit zu verbessern. Zudem erfolgte die Implementierung eines Online-Terminbuchungsportals.

Barrierefreiheit im Fokus

Besonders wichtig war, die Praxis-Website barrierefrei zu gestalten. Beim Online-Auftritt kommt daher beispielsweise die Schriftart Atkinson Hyperlegible zu Einsatz, die für ihre hohe Lesbarkeit unter verschiedenen Sehbedingungen bekannt ist.

Designentscheidungen und Benutzererfahrung

Beim Design wurde eine klare Hierarchie geschaffen, um die Aufmerksamkeit zu steuern. Dazu gehört unter anderem die Strukturierung der Texte über Größe und Farbe der Schrift. Ebenso optimiert die Farbgestaltung der Call-to-Action-Buttons die Zugänglichkeit.

Umfassende Tests zur Zugänglichkeit

Auch bei extremer Vergrößerung bleibt Website gut navigierbar. Dies wurde über Simulationen verschiedener Sehbehinderungen sowie mithilfe von Bildschirmlupen getestet. Farbfehlsichtigkeitstests und der Einsatz von Zugänglichkeitswerkzeugen wie WAVE gewährleistetet, dass Zugänglichkeitsstandards von Beginn an eingehalten wurden.

Fazit

Durch die umfassende barrierefreie Neugestaltung der Website konnte die Praxis die Interaktion mit den Patienten und Patientinnen digital und persönlich stärken. Die sorgfältige Auswahl von Schriften und Farben sowie die umfangreichen Zugänglichkeitstests ergeben eine Umgebung, die allen Nutzern und Nutzerinnen gerecht wird und aktuellen Webstandards entspricht.

Überzeugen Sie sich von der gelungenen Umsetzung: Website der Zahnarztpraxis Carsten Lamster.

Bilder

Abb. 2: Startseite Zahnarztpraxis Carsten Lamster 2011
Abb. 13 Atkinson Hyperlegible (Quelle: Pimp my Type. pimpmytype.com/font/atkinson-hyperlegible. Zugegriffen: 08.11.2023)
Abb. 4: Atkinson Hyperlegible (Quelle: Pimp my Type. pimpmytype.com/font/atkinson-hyperlegible. Zugegriffen: 08.11.2023)
Abb. 5: Textwand ohne Struktur
Abb. 6: Hinzufügen von Weißraum zur Trennung der einzelnen Abschnitte
Abb. 7: Gestaltung einer klaren Hierarchie mit auffälliger Überschrift und farblich abgesetztem Call-to-Action-Button zur Nutzerführung
Abb. 8: Kontrast durch unterschiedliche Farbgebung unterschiedlicher Größe (Entwurf)
Abb. 9: Kontrast durch unterschiedliche Farbgebung unterschiedlicher Größe (finale Version)
Abb. 10: Simulation einer Bildschirmvergrößerung
Abb. 11: Simulation einer Bildschirmvergrößerung
Abb. 12: Simulation einer moderaten visuellen Unschärfe
Abb. 13: Simulation von Protanopie
Abb. 14: Auswertung der Website www.lamster.de (Quelle: WAVE. wave.webaim.org/report#/Lamster.de. Zugegriffen: 14.02.2024)
Abb. 15: Startseite Zahnarztpraxis Carsten Lamster