Norra Health Versorgung, die sich wie Ruhe anfühlt

01 · Überblick

Versorgung, die sich wie Ruhe anfühlt

Die meisten Praxis-Websites sind nervös. Rote Warnbalken, Telefonnummern in drei Größen, ein Portal-Login, das aus einer Ecke schreit. Norras Versprechen ist das Gegenteil — vierzig Minuten Termin, bei jedem Besuch dieselbe Ärztin, ein Wartezimmer, das man kaum sieht — und eine Seite, die dieses Versprechen widerlegt, hebt es auf, bevor überhaupt jemand bucht.

Der ganze Build ist also eine Übung im Temperatursenken: Eukalyptus und Kiefer statt Medizinblau, zwanzig Pixel Radius auf allem, ein Schritt von achtzig Millisekunden zwischen Geschwistern, damit Inhalt ankommt statt einzuschnappen, und ein Boden unter jeder Dauer auf der Seite.

02 · Die Idee

Drei Schritte, keine Telefonmenüs

Das Unterscheidungsmerkmal der Praxis ist prozedural statt klinisch: Eine Buchung dauert drei Schritte, und man behält seine Ärztin. Die Seite musste das in einem Bildschirm lesbar machen — also musste die Struktur es tragen und nicht ein Absatz, der es behauptet.

• Wähle deinen Weg

  Allgemeinmedizin, Kinderheilkunde, Zahnmedizin, kardiologische Kontrollen, Impfungen, Telemedizin — sechs Leistungen, sechs schlichte Karten, kein Fachjargon.

• Lern deine Ärztin kennen

  Drei namentlich genannte Ärztinnen und Ärzte mit ihren Fachgebieten, damit das Versprechen der Kontinuität Gesichter bekommt.

• Geh mit einem Plan

  Die Terminanfrage steht als Letztes auf der Seite und stellt sieben Fragen statt zwanzig. Das Buchungsfeld im Hero stellt drei.

03 · Ziele

Was die Seite leisten musste

1. Auf einen Blick und in die Tiefe lesbar

   Sechs Abschnitte — Leistungen, Ablauf, Team, Geschichten, FAQ, Termin —, jeder für sich brauchbar, falls jemand nur diesen liest.

2. Die Fragen der Anmeldung beantworten

   Fünf Fragen in einem Akkordeon, benannt nach der Empfangskraft, die ich mir dabei vorgestellt habe, und es verhält sich wie ein Gespräch: immer nur eine Antwort offen.

3. Die Zahlen tragen, die das Konzept behauptet

   Die vorgestellte Praxis hat Zahlen hinter ihrem Versprechen — Patientinnen seit der Eröffnung, der Anteil, der sie weiterempfehlen würde, die durchschnittliche Wartezeit —, die beim Eintritt einmal hochzählen und nie in einer Schleife. Es sind die Zahlen des Konzepts und keine Messung von irgendetwas Realem.

4. Kontrast ohne Plugin bestehen

   Eine blasse Palette auf nahezu weißem Grund ist die Stelle, an der Barrierefreiheit still scheitert — also trägt jeder Grenzwert seinen gemessenen Kontrast im Kommentar daneben.

04 · Baureihenfolge

Wie es gebaut wurde

1. Die Palette, Kontrast zuerst

   Zweiundzwanzig Custom Properties. Eukalyptus für Flächen, Kiefer für alles, was gelesen werden muss, Sand für die ruhigen Blöcke — und ein eigenes Token für Feldränder, gegen die 3:1-Anforderung für Nicht-Text belegt.

2. Sechsundzwanzig Inline-SVGs

   Jedes Icon, die Wortmarke und die von Hand gezeichnete Kritzelei unter der Überschrift sind Markup. Kein Icon-Font, kein Sprite-Sheet, keine zusätzliche Anfrage.

3. Der Versatz

   Ein Schritt von achtzig Millisekunden zwischen Geschwistern, einmal als Inline-Transition-Delay an jedem Mitglied einer Staffelgruppe geschrieben und nach dem Eintritt wieder entfernt, damit spätere Hover-Übergänge sofort bleiben. Der Observer setzt nur eine Klasse; das Timing macht der Browser.

4. Das Akkordeon

   Die Höhe richtig animiert — auf die gemessene Höhe des Panels gesetzt, übergeblendet und bei transitionend wieder auf auto zurückgestellt, damit eine lange Antwort bei schmaler Breite nie abgeschnitten wird.

5. Formulare mit Stimme

   Validierung direkt im Formular, eine Statusregion für die Bestätigung und der Fokus darauf gesetzt — damit das Ergebnis angesagt und nicht nur angezeigt wird.

05 · Architektur

Drei Dateien

Drei Dateien, ausgeliefert wie geschrieben: 79,8 KB insgesamt, mit jeder Grafik, die die Praxis besitzt, im HTML statt daneben.

06 · Was sich gewehrt hat

Die Fragen, die gestellt werden

Dieser Abschnitt borgt sich die Struktur der Praxis. Die Probleme sind als Fragen und Antworten gesetzt, weil die Seite, aus der sie kommen, alles genau so beantwortet.

1. Problem

   Eine blasse Palette auf nahezu weißem Grund ist die Stelle, an der Barrierefreiheit still scheitert — und der Rand eines Formularfelds ist kein Text, weshalb man leicht vergisst, dass er als Bedienelementgrenze trotzdem 3:1 schuldet.

   Lösung

   Der Feldrand ist ein eigenes deckendes Token statt einer Tintenabstufung, die die weiße Füllung der Buchungskarte auswaschen könnte. Er misst 3,13:1 gegen die Feldfüllung auf jeder Fläche, auf der er landet, und die Begründung steht im Stylesheet über dem Wert.

2. Problem

   Eukalyptus ist die Markenfarbe, und sie ist nicht lesbar. Als Textfarbe fällt sie auf jeder Fläche dieser Seite durch AA.

   Lösung

   Sie bleibt dekorativ — nur Flächen, Tönungen und Linien. Kiefer trägt alles, was gelesen werden muss; eine hellere Eukalyptus-Tönung trägt Kleintext auf Kiefer bei 4,8:1; und das warme Weiß auf Kiefer liegt bei 4,9:1. Die Palette hat ihre Bandbreite behalten, ohne unlesbaren Text auszuliefern.

3. Problem

   Ein auf eine feste Höhe animiertes Akkordeon schneidet eine lange Antwort bei schmaler Breite ab. Auf auto animiert, animiert es überhaupt nicht.

   Lösung

   Die Höhe des Panels wird auf seine gemessene Höhe gesetzt, übergeblendet und bei transitionend wieder auf auto gestellt — wobei der Listener vor jedem neuen Durchlauf entfernt wird, damit ein Öffnen-dann-Schließen niemals bei einem geschlossenen Panel auf auto endet.

4. Problem

   Ein gestaffelter Eintritt ist in JavaScript leicht zu planen und teuer dort auszuführen: ein Timer pro Element, in Konkurrenz zum Scrollen.

   Lösung

   Der Achtzig-Millisekunden-Schritt wird einmal als Inline-Transition-Delay an jedem Geschwister einer Staffelgruppe geschrieben und nach dem Eintritt entfernt. Unter reduzierter Bewegung werden die Verzögerungen gelöscht und alles wird einfach gezeigt.

07 · Behaltenswert

Die Teile, die es wert sind zu bleiben

• Die von Hand gezeichnete Unterstreichung

  Eine Inline-SVG-Kritzelei unter den Worten „wie Ruhe“ — die eine unperfekte Linie auf einer sonst sehr aufgeräumten Seite, und der Grund, warum sie menschlich wirkt.

• Drei Schritte, keine Telefonmenüs

  Die Buchungserklärung als drei nummerierte Karten mit echtem Text, statt Icons mit Ein-Wort-Beschriftungen darunter.

• Freyas FAQ

  Fünf Fragen, benannt nach der Empfangskraft, die ich mir dabei vorgestellt habe — das ändert den Ton jeder Antwort darunter.

• Kontrastwerte im Quelltext

  Kontrastmessungen neben den Werten, die sie rechtfertigen. Die nächste Person, die diese Palette anfasst, erbt die Begründung und nicht nur den Hex-Wert.

08 · Live starten

Hier starten

Der echte Build, eingebettet und laufend. Er lädt auf Abruf, es wird also nichts aus der Praxis geholt, bevor du es verlangst.

norrahealth.com

Hier starten

Der echte Build, laufend in der Seite. Die Live-Vorschau ist eine eingebettete Seite. Drücke Escape, um sie zu verlassen.

Im Vollbild öffnen