Glorreiche Sieben Tipps für eine gute Praxiswebseite

Einfach zu benutzen

Das wichtigste Merkmal einer guten Website ist eine hohe Benutzerfreundlichkeit – auch Usability genannt. Werden Nutzer in die Lage versetzt, ihr Ziel schnell, fehlerfrei und zufriedenstellend zu erreichen, ist das mehr wert als das coolste Design.

Responsive

Eine Webseite für alle Anzeigegeräte

Zahnarztempfehlungen von Freunden möchte man oft sofort überprüfen – zum Beispiel ganz bequem auf dem Smartphone, während man unterwegs ist oder gemütlich zusammensitzt. Um die Sprechzeiten für die Familie nachzuschauen, greift man lieber zum iPad im Wohnzimmer, statt extra den PC im Arbeitszimmer hochzufahren.

Damit eine Website auf jedem Endgerät eine gute Figur macht und intuitiv bedienbar bleibt, setzen wir auf ein responsives Webdesign. Das bedeutet: Die Darstellung passt sich flexibel an jede Bildschirmgröße an. Dabei reicht es längst nicht mehr aus, nur Text- und Bildgrößen zu skalieren. Auch das Layout und die Anordnung der Inhalte müssen sich dynamisch anpassen, damit Ihre Praxis-Website auf Smartphone, Tablet und Desktop gleichermaßen begeistert.

Hier sind Beispiele für die vielen Responsive-Anpassungen, die ich auf meinen Zahnarztwebseiten vornehme:

Anpassen von Bildkarusells bzw. Slideshows für das Smartphone

Titelbild bzw. Slider/Diaschau

Querformatige Titelbilder oder Bildkarussells sind auf Titelseiten von Webseiten sehr beliebt. Diese sehen im panoramaartigen Format auf dem Desktop toll aus. Auf dem Smartphone hingegen werden sie zu einem schmalen, schwer erkennbaren Bildstreifen.
Deshalb stelle ich auf dem Smartphone eine Alternative mit hochformatig beschnittenen Motiven bereit.

Desktop

Der Bildwandler des Desktopmonitors im Querformat wird durch einen schmaler beschnittenen Bildwandler auf dem Smartphone ausgetauscht.
Die darunter angefügten Text- und Bildspalten werden neu zusammengestellt.

Mobil

Inhalte ausblenden um Scrollwege auf dem Smartphone zu verkürzen

Die Leistungen der Praxis kompakt darstellen

Auf der Webseite halte ich mit Hilfe von Detailblöcken (mit einer Aufklapp-Funktion per Klick) die Informationen zu den Leistungen übersichtlich. Auf dem Smartphone wären die Scrollwege jedoch viel zu lang, wenn ich die exakte Umsetzung der Desktopansicht beibehalten würde.

Während ich für den Desktop die Leistungsübersicht in eigenständige Detailblöcke mit sichtbarer Überschrift und einem sichtbaren Introtext unterteile, integriere ich das Intro in der mobilen Ansicht direkt in den Inhalt der jeweiligen Detailblöcke.

Desktop

Mobil

Der aufgeklappte Detailblock auf Monitor und Smartphone:

Desktop

Mobil

Implantologie aufgeklappt auf dem Smartphone: Inhalte entsprechen der Desktopversion. Der Introtext ist aber erst jetzt zu sehen.

Sehgewohnheiten bei der Bild /Text Reihenfolge berücksichtigen

Reihenfolge von Inhalten auf dem Smartphone

In der zweispaltigen Seitenansicht wirkt der Text am Seitenanfang oft besser, wenn das Bild rechts positioniert ist. In der einspaltigen Smartphoneansicht rutscht das Bild hingegen nach hinten. Auf dem Smartphone sieht es allerdings besser aus, wenn mit einem „Titelbild” begonnen wird. Durch die passende Codierung (column-reverse) wird das Bild nach vorne geholt.

Desktop

Mobil

Ohne

Mit Codierung column-reverse

Mobil richtige Reihenfolge — Passendere Ansicht mit Bild vorne als Titelbild.

Reihenfolge von Inhalten bei wechselseitiger Bild und Textspalte

Um die Abwechslung von Bild und Text beizubehalten, muss die Reihenfolge der Spalten durch die passende Codierung „column-reverse” geändert werden.

Desktop

Mobil

Ohne

Mit Codierung column-reverse

Usability

Kontaktinfos optimieren

Die Basisinformationen wie Anschrift, Telefonnummer, E-Mail-Adresse, Sprechzeiten und Anfahrtsbeschreibung sollen zügig von überall auf der Seite einsehbar sein.

Hat der potenzielle Patient einen guten Eindruck von der Praxis gewonnen, möchte er einen Termin vereinbaren und wissen, wie er dorthin kommen und wo er parken kann oder wo die nächste Haltestelle liegt.

Screenshot der Smartphone-Anzeige des Sticky-Menüs mit den Buttons zu den Sprechzeiten, zur Lagekarte und zum Anrufen. — Screenshot der Smartphone-Ansicht des Sticky-Menüs mit den Buttons zu den Sprechzeiten, zur Lagekarte und zum Anrufen. Ein Sticky-Menü ist eine Navigationsleiste am oberen Rand einer Website, die „kleben bleibt“, wenn der Nutzer nach unten scrollt.

Terminbuchung zum Aufklappen im Kopf der Seite

Aufklappbarer Detailblock

Unmittelbar unter dem Header läßt sich ein Detailblock öffnen, der die Terminfunktionen aufruft.
Nach Klick auf den Pfeilbutton klappt eine Fläche mit Buttons auf. Über diese können Sie einen Termin per E-Mail, Telefon oder, wenn vorhanden, auch per Onlinefunktion vereinbaren. Direkt daneben finden Sie die Telefonzeiten.

Screenshot Praxis an der Elz - Termin Detail-Block geschlossen mit Pfeil Icon und Icons die Inhalt repräsentieren: Kalender, Telefon und Uhr

Screenshot Praxis an der Elz - Termin Detail-Block geöffnet - zeigt Termin Buttons und Telefonzeiten

Fest verankerte Menü-Buttons zu Anfahrtskarte, Sprechzeiten und zum Telefonieren

„Sticky Menue“

Ein beim Scrollen feststehendes Menü („Sticky“) erleichtert den schnellen Zugriff auf die wichtigsten Kontaktinformationen und -funktionen.

Lagekarte

Google Maps Karte einbinden?

Das direkte Einbinden von „Google Maps“ ist auf Webseiten weit verbreitet.
Ich ziehe jedoch eine selbst gezeichnete Detail- und Übersichtskarte zur schnellen Information vor. Wirklich relevante Details zum öffentlichen Nahverkehr, einprägsame Landmarken oder Gebäude und wichtige Parkmöglichkeiten lassen sich hier besser hervorheben. Außerdem ist das Einbinden inzwischen kostenpflichtig und man benötigt ein Plug-in, um Maps entsprechend der DSGVO einzurichten.

Google Maps Unternehmensprofil der Praxis

Zusätzlich biete ich einen Link per Button zur Google-Maps-Unternehmensprofil der Praxis an. Von dort aus lässt sich eine Route zur Praxis leicht planen. Der Button ist datenschutzrechtlich unbedenklich.