Healthcare-App-Design: Ein Startbildschirm für Arzttermine, vorher und nachher

Menschen öffnen eine Gesundheits-App aus einem Grund häufiger als aus jedem anderen: wegen ihres nächsten Termins. Der erste Entwurf unten startet stattdessen mit einem Rabattbanner, und der Termin steckt in einem schmalen Streifen weit unten. Die Korrektur stellt den Termin an die erste Stelle und streicht alles, was mit ihm konkurriert hat.

Jede Funktion bleibt erhalten. Man kann weiterhin suchen, Fachgebiete durchstöbern, einen Arzt buchen und der Praxis schreiben.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links ist das Erste, was ins Auge fällt, ein Angebot: ein türkises Banner mit Arztfoto, einem Button und einem Link. Das, wofür die Person gekommen ist, ihr Termin bei Dr. Sarah Lee am Dienstag, ist der kleinste Block auf dem Screen und steht unter zwei anderen Bereichen.

Rechts ist derselbe Termin der größte Block, mit Arzt, Datum, Uhrzeit und einem Button, um den Videoanruf zu starten. Das Angebot ist vom Startscreen verschwunden, denn ein Rabatt für den ersten Besuch ist für Leute, die noch nicht gebucht haben, und diese Person hat gebucht.

Fix 1: den nächsten Termin an die erste Stelle setzen

Vorher

Nachher

„Book your first appointment now!“ mit 20 % Rabatt auf die erste Videosprechstunde, einem Book-Now-Button, einem Learn-More-Link und Karussell-Punkten, gegenüber einer Karte „Next appointment“ mit Dr. Sarah Lee, Kardiologin, einem Videoanruf-Button und Datum und Uhrzeit in einer Zeile.

Ein Startscreen sollte „Was muss ich als Nächstes tun?“ beantworten, bevor er irgendetwas anderes beantwortet. Für einen wiederkehrenden Patienten ist das der Termin: wer, wann und wie man teilnimmt. Im Entwurf steht diese Antwort ganz unten, in einer Zeile kleinen Texts mit einem „Details“-Link.

Die Korrektur macht den Termin zum Hero. Gesicht und Name des Arztes sagen, um wen es geht, Datum und Uhrzeit stehen in einer Zeile, und das Video-Icon ist ein einziger Tap zum Beitreten. Ein Banner müsste weggewischt werden, eine Karte mit Button wird benutzt.

Auch das Datum wurde kürzer und leichter lesbar. „Tue, Oct 28, 2026 • 10:30 AM - 11:00 AM“ wurde zu „Tue, 28 Oct“ und „10:30 AM“, denn am Jahr gibt es keinen Zweifel, und die Endzeit braucht man selten, um zu entscheiden, ob man erscheint.

Regel zum Wiederverwenden: Das obere Ende eines Startscreens gehört dem, wofür die Leute zurückkommen, nicht dem, was du verkaufen willst.

Fix 2: vier Fachgebiete, eine Farbe

Vorher

Nachher

Acht runde Icons in acht Farben, Cardiology, Dentist, Eye Care, Pulmonology, Neurology, Orthopedic, Pediatrics und More, gegenüber vier weißen Kacheln mit türkisen Icons: Cardio, Dental, Eyes und More.

Acht Farben auf acht Icons geben dem Auge acht Haltepunkte und keinen Grund, an einem davon zu halten. Farbe ist ein Signal, und hier sagt sie nichts: Das rote Herz ist nicht dringender als das lila Auge.

Die Korrektur behält eine Farbe, das Marken-Türkis, damit Farbe wieder etwas bedeutet. Die Labels sind kürzer („Cardio“, „Dental“, „Eyes“), sodass jedes in einer Zeile in lesbarer Größe passt. Und es werden nur vier gezeigt, mit einer „More“-Kachel, denn wer ein selteneres Fachgebiet braucht, nutzt die Suche, die direkt darüber sitzt.

Fix 3: eine Arztkarte, die eine Zeile ist

Vorher

Nachher

Eine Karte mit Foto, Name, „Cardiologist | City Heart Clinic“, fünf Sternen, 4.8 (120 reviews), „Fee: $50“, einer Pille „Available today“, einem Book-Now-Button und einem Herz, mit der nächsten angeschnittenen Karte, gegenüber zwei Zeilen mit kleinem Foto, Name, „Cardiologist · 1.2 km“ und einer Bewertung von 4.9 (212).

Die Karte im Entwurf trägt neun Informationen und zwei Aktionen. Jede ist für sich vernünftig. Zusammen machen sie die Karte zu einem Formular, das der Leser Zeile für Zeile abscannen muss, und der Book-Now-Button auf jeder Karte macht aus einem Stöber-Screen einen Verkaufsraum.

Die Korrektur behält drei Zeilen: den Namen, dann Fachgebiet und Entfernung, die entscheidet, ob man tatsächlich hingehen kann, dann eine Bewertung mit Anzahl der Rezensionen. Honorar, Verfügbarkeit und Buchungsbutton wandern auf die eigene Seite des Arztes, wo Platz ist, sie zu erklären. Ein Chevron sagt „zum Öffnen tippen“.

Die Zeilen sind außerdem vertikal, kein seitliches Karussell. Eine am Rand angeschnittene Karte ist ein ordentlicher Hinweis, dass es mehr gibt, aber eine Liste lässt jemanden zwei Ärzte auf einen Blick vergleichen, und das ist die eigentliche Aufgabe.

Fix 4: ein Icon im Header

Vorher

Nachher

„Hello, Leo!“ mit „How are you feeling today?“ und Icons für Suche, Glocke und Chat, gegenüber einem grünen Initialen-Avatar, „Good morning, Leo Martins“ und einer Glocke mit rotem Punkt.

Der Header im Entwurf hat drei Icons, und zwei davon sind Wiederholungen. Die Glocke im Header und der Tab „Notifications“ öffnen denselben Ort, ebenso das Chat-Icon und der Tab „Chat“. Wenn zwei Türen in denselben Raum führen, fragen sich die Leute, welche die echte ist.

Das Such-Icon ersetzt ein Suchfeld. Die Korrektur zeigt das Feld selbst, eine Zeile unter dem Termin, sodass nichts zu öffnen ist. Die Glocke bleibt, denn eine Erinnerung oder eine Nachricht der Praxis ist das Einzige, was einen roten Punkt verdient.

Die kleineren Korrekturen

• Vier Tabs, nicht fünf. „Notifications“ ist aus der Tab-Leiste verschwunden, weil die Glocke das schon abdeckt. Aus „Chat“ wurde „Messages“, das Wort auf der anderen Seite der meisten Posteingänge.
• Ein Avatar mit Initialen. Ein einfarbiger türkiser Kreis mit LM sagt, wessen Konto das ist, genau wie in jeder anderen App.
• Ein Rand. Der Entwurf nutzt 14 links und 12 rechts. Die Korrektur nutzt 20 auf beiden Seiten jeder Zeile, mit Abständen von 8, 12, 14 und 20.
• Schlichte Begrüßung. „Hello, Leo! How are you feeling today?“ stellte eine Frage, die der Screen nicht beantworten konnte. „Good morning, Leo Martins“ tut das nicht.
• Kein Angebots-Karussell. Das Banner hatte drei Punkte und einen zweiten Link neben dem Button. Die Korrektur streicht das Angebot von diesem Screen und lässt eine klare Aktion im Hero.

Prüfe deine eigene Gesundheits-App

Hol dir die Figma-Datei

Die kostenlose Datei enthält beide Screens, jeden reparierten Teil als Vorher-nachher-Komponente, die UI-Farbvariablen, die iOS-Textstile und eine Read-me mit den Fotonachweisen.

Kostenlose Figma-Datei

Startscreen für Arzttermine, vorher und nachher

Beide Screens und jeder reparierte Teil als Figma-Komponenten. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Was sollte der Startscreen einer Arzttermin-App zuerst zeigen?

Den nächsten Termin, mit Arzt, Datum, Uhrzeit und einer Möglichkeit, einem Videoanruf beizutreten. Suche und Fachgebiete kommen danach.

Wie viele Fachgebiete sollte eine Gesundheits-App auf dem Startscreen zeigen?

Ungefähr vier, plus eine More-Kachel. Wer etwas Selteneres sucht, nutzt die Suche, deshalb sorgt ein langes Raster aus acht oder mehr bunten Icons nur für Rauschen.

Was sollte eine Arztkarte in einer Healthcare-App zeigen?

Den Namen, das Fachgebiet, wie weit der Arzt entfernt ist und eine Bewertung mit der Anzahl der Rezensionen. Honorare, Verfügbarkeit und der Buchungsbutton gehören auf die Seite des Arztes.

Sollte eine Gesundheits-App ein Werbebanner auf dem Startscreen nutzen?

Nicht über einem anstehenden Termin. Ein Angebot für den ersten Besuch passt zu Leuten, die noch nicht gebucht haben, und wiederkehrende Patienten sind wegen etwas anderem gekommen.

Wie viele Tabs braucht eine Healthcare-App?

Vier genügen: Home, Appointments, Messages und Profile. Benachrichtigungen können im Header als Glocke mit Punkt leben.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen.
• Fotos über Unsplash von Jonathan Borba, Bruno Rodrigues und vaibhav vivian, unter der Unsplash License.
• Zuerst als Karussell auf App Brainy veröffentlicht.