Sağlık Uygulaması Tasarımı: Doktor Randevusu Ana Ekranı, Öncesi ve Sonrası

İnsanlar bir sağlık uygulamasını her şeyden çok tek bir nedenle açar: sıradaki randevuları. Aşağıdaki ilk taslak bunun yerine bir indirim banner'ıyla açılıyor ve randevu, alt tarafa yakın ince bir şeritte duruyor. Düzeltme ise randevuyu öne alıyor ve onunla yarışan her şeyi kırpıyor.

Her özellik yerinde duruyor. Hâlâ arama yapabilir, uzmanlıklara göz atabilir, doktor ayırtabilir ve kliniğe mesaj atabilirsiniz.

Tüm ekran, öncesi ve sonrası

Junior taslağı

Düzeltilmiş

Soldaki ekranda gözünüze çarpan ilk büyük şey bir kampanya: bir doktor fotoğrafı, bir düğme ve bir bağlantı içeren turkuaz banner. Kişinin gelme sebebi olan şey, yani Salı günü Dr. Sarah Lee ile randevusu, ekrandaki en küçük blok ve iki başka bölümün altında duruyor.

Sağdaki ekranda aynı randevu en büyük blok: doktor, tarih, saat ve görüntülü görüşmeyi başlatan bir düğmeyle. Kampanya ana ekrandan çıktı, çünkü ilk ziyaret indirimi henüz randevu almamış insanlar içindir ve bu kişi zaten aldı.

Düzeltme 1: sıradaki randevuyu öne al

Önce

Sonra

"İlk randevunuzu hemen alın!" yazısı, ilk görüntülü muayenede %20 indirim, bir Hemen Ayırt düğmesi, bir Daha Fazla bağlantısı ve carousel noktaları; karşısında Dr. Sarah Lee, Kardiyolog, bir görüntülü arama düğmesi ve tek satırda tarih ile saat içeren bir Sıradaki randevu kartı.

Bir ana ekran, başka her şeyden önce "Sırada ne yapmam gerekiyor?" sorusunu yanıtlamalı. Geri dönen bir hasta için bu randevudur: kim, ne zaman ve nasıl katılınır. Taslakta bu cevap en altta, küçük yazılı bir satırda ve bir "Ayrıntılar" bağlantısının arkasında.

Düzeltme randevuyu kahramana çeviriyor. Doktorun yüzü ve adı kim olduğunu söylüyor, tarih ve saat tek satırda duruyor ve video ikonu katılmak için tek dokunuş. Bir banner kapatılmak zorunda kalır, düğmeli bir kart ise kullanılır.

Tarih de kısaldı ve okunması kolaylaştı. "Tue, Oct 28, 2026 • 10:30 AM - 11:00 AM" ifadesi "Tue, 28 Oct" ve "10:30 AM" oldu, çünkü yıl tartışma konusu değil ve bitiş saati, gidip gitmemeye karar vermek için nadiren gerekir.

Yeniden kullanılacak kural: ana ekranın üstü, insanların geri döndüğü şeye aittir, sizin satmak istediğiniz şeye değil.

Düzeltme 2: dört uzmanlık, tek renk

Önce

Sonra

Sekiz renkte sekiz yuvarlak ikon: Kardiyoloji, Diş Hekimi, Göz Sağlığı, Göğüs Hastalıkları, Nöroloji, Ortopedi, Pediatri ve Daha Fazla; karşısında turkuaz ikonlu dört beyaz kutu: Kardiyo, Diş, Göz ve Daha Fazla.

Sekiz ikonda sekiz renk, göze durması için sekiz yer verir ama hiçbirinde durması için bir neden vermez. Renk bir sinyaldir ve burada hiçbir şey söylemiyor: kırmızı kalp, mor gözden daha acil değil.

Düzeltme tek bir rengi, marka turkuazını tutuyor, böylece renk yeniden bir anlam taşıyor. Etiketler kısaldı ("Kardiyo", "Diş", "Göz"), böylece her biri okunabilir boyutta tek satıra sığıyor. Ve yalnızca dört tane gösteriliyor, bir de "Daha Fazla" kutusu var, çünkü daha nadir bir uzmanlık arayan kişi hemen üstteki aramayı kullanacaktır.

Düzeltme 3: satır olan bir doktor kartı

Önce

Sonra

Bir fotoğraf, bir ad, "Kardiyolog | City Heart Clinic", beş yıldız, 4,8 (120 yorum), "Ücret: $50", Bugün müsait etiketi, Hemen Ayırt düğmesi ve bir kalp içeren, yanındaki kartı kesik görünen tek kart; karşısında küçük fotoğraf, ad, "Kardiyolog · 1,2 km" ve 4,9 (212) puanı olan iki satır.

Taslak kart dokuz bilgi ve iki eylem taşıyor. Her biri tek başına makul. Birlikte ise kartı okuyucunun satır satır taraması gereken bir forma çeviriyor ve her kartta duran Hemen Ayırt düğmesi, göz atma ekranını bir satış reyonuna dönüştürüyor.

Düzeltme üç satır tutuyor: ad, ardından uzmanlık ve mesafe (gerçekten gidebilip gidemeyeceğinizi belirleyen şey), ardından yorum sayısıyla birlikte tek bir puan. Ücret, müsaitlik ve ayırtma düğmesi, açıklamaya yer olan doktorun kendi sayfasına taşındı. Bir ok "açmak için dokun" diyor.

Satırlar ayrıca yatay bir carousel değil, dikey. Kenarda kesilen kart, daha fazlası olduğuna dair fena olmayan bir ipucudur, ama liste iki doktoru bir bakışta karşılaştırmanıza izin verir ve asıl iş de bu.

Düzeltme 4: üst çubukta tek ikon

Önce

Sonra

"Merhaba Leo!" ve "Bugün nasıl hissediyorsun?" yazısı ile arama, zil ve sohbet ikonları; karşısında yeşil baş harfli bir avatar, "Günaydın, Leo Martins" ve kırmızı noktalı tek bir zil.

Taslağın üst çubuğunda üç ikon var ve ikisi tekrar. Üst çubuktaki zil ile Bildirimler sekmesi aynı yeri açıyor, sohbet ikonu ile Sohbet sekmesi de öyle. İki kapı aynı odaya çıktığında insanlar hangisinin gerçek olduğunu merak eder.

Arama ikonu bir arama alanının yerini tutuyor. Düzeltme alanın kendisini, randevunun bir satır altında gösteriyor, böylece açılacak bir şey kalmıyor. Zil kalıyor, çünkü klinikten gelen bir hatırlatma ya da mesaj, kırmızı noktayı hak eden tek şey.

Daha küçük düzeltmeler

• Beş değil, dört sekme. Bildirimler sekme çubuğundan çıktı çünkü zil zaten bunu kapsıyor. "Chat", çoğu gelen kutusunun öbür tarafındaki kelime olan "Mesajlar" oldu.
• Baş harfli bir avatar. LM yazan düz turkuaz bir daire, tıpkı diğer tüm uygulamalar gibi bunun kimin hesabı olduğunu söylüyor.
• Tek kenar boşluğu. Taslak solda 14, sağda 12 kullanıyor. Düzeltme her satırın iki yanında 20 kullanıyor, aralar ise 8, 12, 14 ve 20.
• Sade karşılama. "Merhaba Leo! Bugün nasıl hissediyorsun?" ekranın yanıtlayamayacağı bir soru sordu. "Günaydın, Leo Martins" sormuyor.
• Kampanya carousel'i yok. Banner'da üç nokta ve düğmesinin yanında ikinci bir bağlantı vardı. Düzeltme kampanyayı bu ekrandan çıkarıyor ve kahramanda tek net eylem bırakıyor.

Kendi sağlık uygulamanı denetle

Figma dosyasını al

Ücretsiz dosyada iki ekran, öncesi ve sonrası bileşeni olarak her düzeltilmiş parça, UI renk değişkenleri, iOS yazı stilleri ve fotoğraf künyelerini içeren bir read-me var.

Ücretsiz Figma dosyası

Doktor randevusu ana ekranı, öncesi ve sonrası

İki ekran ve her düzeltilmiş parça Figma bileşeni olarak. Ücretsiz, yalnızca görüntüleme, taslaklarına çoğalt.

Figma'da aç

SSS

Bir doktor randevu uygulamasının ana ekranı önce ne göstermeli?

Sıradaki randevuyu: doktor, tarih, saat ve görüntülü görüşmeye katılma yolu ile. Arama ve uzmanlıklar bunun ardından gelir.

Bir sağlık uygulaması ana ekranda kaç uzmanlık göstermeli?

Yaklaşık dört, artı bir Daha Fazla kutusu. Daha nadir bir şey arayanlar aramayı kullanır, bu yüzden sekiz ya da daha fazla renkli ikondan oluşan uzun bir ızgara sadece gürültü ekler.

Bir sağlık uygulamasında doktor kartı ne göstermeli?

Ad, uzmanlık, doktorun ne kadar uzakta olduğu ve yorum sayısıyla birlikte tek bir puan. Ücretler, müsaitlik ve ayırtma düğmesi doktorun sayfasına aittir.

Bir sağlık uygulaması ana ekranda tanıtım banner'ı kullanmalı mı?

Yaklaşan bir randevunun üstünde hayır. İlk ziyaret kampanyası henüz randevu almamış insanlara uyar, geri dönen hastalar başka bir şey için geldi.

Bir sağlık uygulamasının kaç sekmeye ihtiyacı var?

Dört yeterli: Ana Sayfa, Randevular, Mesajlar ve Profil. Bildirimler üst çubukta noktalı bir zil olarak yaşayabilir.

Kaynaklar

• İki ekran da bize ait, Figma'da tasarlandı ve ölçüldü.
• Fotoğraflar Unsplash üzerinden Jonathan Borba, Bruno Rodrigues ve vaibhav vivian'dan, Unsplash Lisansı kapsamında.
• İlk olarak App Brainy üzerinde bir carousel olarak yayımlandı.