हेल्थकेयर ऐप डिज़ाइन: डॉक्टर अपॉइंटमेंट होम स्क्रीन, पहले और बाद
एक डॉक्टर अपॉइंटमेंट ऐप जो डिस्काउंट बैनर से खुलता है, और वही स्क्रीन जिसे ठीक किया गया ताकि अगला अपॉइंटमेंट सबसे पहले दिखे। हर बदलाव आमने-सामने, हर बदलाव की वजह, और मुफ़्त Figma फ़ाइल।
लोग हेल्थ ऐप किसी और वजह से नहीं, सबसे ज़्यादा अपने अगले अपॉइंटमेंट के लिए खोलते हैं। नीचे का पहला ड्राफ़्ट इसके बजाय डिस्काउंट बैनर से खुलता है, और अपॉइंटमेंट नीचे के पास एक पतली पट्टी में पड़ा रहता है। फ़िक्स अपॉइंटमेंट को सबसे ऊपर रखता है और वह सब हटा देता है जो उससे होड़ कर रहा था।
हर फ़ीचर बचा रहता है। आप अब भी सर्च कर सकते हैं, स्पेशलिटी देख सकते हैं, डॉक्टर बुक कर सकते हैं और क्लिनिक को मैसेज कर सकते हैं।
पूरी स्क्रीन, पहले और बाद
जूनियर ड्राफ़्ट
ठीक किया हुआ
बाईं ओर सबसे पहली बड़ी चीज़ एक ऑफ़र है: डॉक्टर की फ़ोटो, एक बटन और एक लिंक वाला टील बैनर। जिस चीज़ के लिए व्यक्ति आया था, यानी मंगलवार को Dr. Sarah Lee के साथ उसका अपॉइंटमेंट, वह स्क्रीन का सबसे छोटा ब्लॉक है और दो अन्य सेक्शन के नीचे बैठा है।
दाईं ओर वही अपॉइंटमेंट सबसे बड़ा ब्लॉक है, जिसमें डॉक्टर, तारीख, समय और वीडियो कॉल शुरू करने का बटन है। ऑफ़र होम स्क्रीन से गायब है, क्योंकि पहली विज़िट की छूट उनके लिए है जिन्होंने अभी बुक नहीं किया, और इस व्यक्ति ने कर लिया है।
| जूनियर ड्राफ़्ट | ठीक किया हुआ | |
|---|---|---|
| स्क्रीन का पहला ब्लॉक | डिस्काउंट बैनर, 149 px ऊँचा | अगला अपॉइंटमेंट, 174 px ऊँचा |
| साइड मार्जिन | बाएँ 14, दाएँ 12 | हर पंक्ति पर 20 |
| टेक्स्ट साइज़ | 8 से 18 px | 11 से 28 pt, iOS टाइप रैंप |
| कैटेगरी के रंग | 8 | 1, ब्रांड टील |
| डॉक्टर कार्ड पर आइटम | 9 | 3 पंक्तियाँ और एक शेवरॉन |
| हेडर आइकन | 3 | 1, साथ में एक अवतार |
| टैब | 5 | 4 |
फ़िक्स 1: अगला अपॉइंटमेंट सबसे पहले रखें
पहले
बाद
"Book your first appointment now!" जिसमें पहली वीडियो कंसल्टेशन पर 20% छूट, एक Book Now बटन, एक Learn More लिंक और कैरोसेल डॉट हैं, बनाम Dr. Sarah Lee, कार्डियोलॉजिस्ट वाला Next appointment कार्ड, एक वीडियो कॉल बटन, और एक पंक्ति में तारीख व समय।
होम स्क्रीन को किसी भी और बात से पहले "मुझे आगे क्या करना है?" का जवाब देना चाहिए। लौटकर आए मरीज़ के लिए वह अपॉइंटमेंट है: कौन, कब और कैसे जुड़ना है। ड्राफ़्ट में वह जवाब सबसे नीचे है, "Details" लिंक वाली छोटे टेक्स्ट की एक लाइन में।
फ़िक्स अपॉइंटमेंट को हीरो बना देता है। डॉक्टर का चेहरा और नाम बताते हैं कि यह कौन है, तारीख और समय एक पंक्ति में हैं, और वीडियो आइकन जुड़ने के लिए बस एक टैप है। बैनर को हटाना पड़ता है, बटन वाला कार्ड इस्तेमाल होता है।
तारीख भी छोटी और पढ़ने में आसान हो गई। "Tue, Oct 28, 2026 • 10:30 AM - 11:00 AM" बन गया "Tue, 28 Oct" और "10:30 AM", क्योंकि साल पर कोई शक नहीं है और आने का फ़ैसला करने के लिए अंत का समय शायद ही कभी चाहिए।
दोबारा इस्तेमाल का नियम: होम स्क्रीन का ऊपरी हिस्सा उस चीज़ का है जिसके लिए लोग लौटते हैं, उसका नहीं जो आप बेचना चाहते हैं।
फ़िक्स 2: चार स्पेशलिटी, एक रंग
पहले
बाद
आठ रंगों में आठ गोल आइकन, Cardiology, Dentist, Eye Care, Pulmonology, Neurology, Orthopedic, Pediatrics और More, बनाम टील आइकन वाली चार सफ़ेद टाइल: Cardio, Dental, Eyes और More।
आठ आइकन पर आठ रंग आँख को रुकने की आठ जगहें देते हैं और किसी पर भी रुकने की कोई वजह नहीं। रंग एक संकेत है, और यहाँ वह कुछ नहीं कहता: लाल दिल बैंगनी आँख से ज़्यादा अर्जेंट नहीं है।
फ़िक्स एक ही रंग रखता है, ब्रांड टील, ताकि रंग का फिर से कोई मतलब बने। लेबल छोटे हैं ("Cardio", "Dental", "Eyes") ताकि हर एक पढ़ने लायक साइज़ पर एक लाइन में आ जाए। और सिर्फ़ चार दिखाए गए हैं, एक "More" टाइल के साथ, क्योंकि जिसे कोई दुर्लभ स्पेशलिटी चाहिए वह सर्च इस्तेमाल करेगा, जो ठीक ऊपर है।
फ़िक्स 3: डॉक्टर कार्ड जो एक पंक्ति हो
पहले
बाद
एक कार्ड जिसमें फ़ोटो, नाम, "Cardiologist | City Heart Clinic", पाँच सितारे, 4.8 (120 reviews), "Fee: $50", एक Available today पिल, एक Book Now बटन और एक दिल है, अगला कार्ड कटा हुआ, बनाम दो पंक्तियाँ जिनमें छोटी फ़ोटो, नाम, "Cardiologist · 1.2 km" और 4.9 (212) की रेटिंग है।
ड्राफ़्ट वाले कार्ड में जानकारी के नौ टुकड़े और दो एक्शन हैं। हर एक अकेले में ठीक है। साथ मिलकर वे कार्ड को ऐसा फ़ॉर्म बना देते हैं जिसे पाठक को लाइन दर लाइन स्कैन करना पड़ता है, और हर कार्ड पर Book Now बटन ब्राउज़िंग स्क्रीन को बिक्री का बाज़ार बना देता है।
फ़िक्स तीन लाइनें रखता है: नाम, फिर स्पेशलिटी और दूरी, जो तय करती है कि आप सच में जा सकते हैं या नहीं, फिर रिव्यू संख्या के साथ एक रेटिंग। फ़ीस, उपलब्धता और बुकिंग बटन डॉक्टर के अपने पेज पर चले जाते हैं, जहाँ उन्हें समझाने की जगह है। शेवरॉन कहता है "खोलने के लिए टैप करें"।
पंक्तियाँ भी ऊर्ध्वाधर हैं, बगल में सरकने वाला कैरोसेल नहीं। किनारे पर कटा कार्ड इशारा करता है कि और भी है, पर सूची में कोई दो डॉक्टरों की एक नज़र में तुलना कर सकता है, जो असली काम है।
फ़िक्स 4: हेडर में एक आइकन
पहले
बाद
"Hello, Leo!" और "How are you feeling today?" के साथ सर्च, बेल और चैट आइकन, बनाम हरे रंग का इनिशियल अवतार, "Good morning, Leo Martins" और लाल बिंदु वाली एक बेल।
ड्राफ़्ट के हेडर में तीन आइकन हैं, और उनमें से दो दोहराव हैं। हेडर की बेल और Notifications टैब एक ही जगह खोलते हैं, और चैट आइकन और Chat टैब भी। जब दो दरवाज़े एक ही कमरे में जाते हैं, तो लोग सोचते हैं कि असली कौन सा है।
सर्च आइकन सर्च फ़ील्ड की जगह खड़ा है। फ़िक्स फ़ील्ड को ही दिखाता है, अपॉइंटमेंट के ठीक नीचे एक पंक्ति में, ताकि कुछ खोलना न पड़े। बेल रहती है क्योंकि रिमाइंडर या क्लिनिक का संदेश ही वह एक चीज़ है जो लाल बिंदु के लायक है।
छोटे फ़िक्स
- पाँच नहीं, चार टैब। Notifications टैब बार से हट गया क्योंकि बेल पहले से वह काम करती है। "Chat" बन गया "Messages", वह शब्द जो ज़्यादातर इनबॉक्स के दूसरी तरफ़ होता है।
- इनिशियल वाला अवतार। LM वाला ठोस टील सर्कल बताता है कि यह किसका अकाउंट है, वैसे ही जैसे हर दूसरा ऐप बताता है।
- एक मार्जिन। ड्राफ़्ट बाएँ 14 और दाएँ 12 इस्तेमाल करता है। फ़िक्स हर पंक्ति के दोनों तरफ़ 20 इस्तेमाल करता है, और गैप 8, 12, 14 और 20 के हैं।
- सादा अभिवादन। "Hello, Leo! How are you feeling today?" ने ऐसा सवाल पूछा जिसका जवाब स्क्रीन दे नहीं सकती थी। "Good morning, Leo Martins" नहीं पूछता।
- ऑफ़र कैरोसेल नहीं। बैनर में तीन डॉट थे और बटन के बगल में दूसरा लिंक। फ़िक्स इस स्क्रीन से ऑफ़र हटा देता है और हीरो में एक साफ़ एक्शन छोड़ता है।
अपने हेल्थ ऐप का ऑडिट करें
| सवाल | यह क्यों मायने रखता है |
|---|---|
| क्या अगला अपॉइंटमेंट स्क्रीन की पहली चीज़ है? | लोग इसी वजह से लौटते हैं |
| क्या कोई एक टैप में वीडियो कॉल से जुड़ सकता है? | विज़िट ही प्रोडक्ट है |
| क्या हर रंग का कोई मतलब है? | आठ रंगों का कोई मतलब नहीं होता |
| क्या डॉक्टर की पंक्ति बताती है कि कौन, क्या, कितनी दूर और कितना अच्छा? | लोग इसी तरह चुनते हैं |
| क्या कोई हेडर आइकन किसी टैब को दोहराता है? | दोहराए गए दरवाज़े भरोसा घटाते हैं |
| क्या ऑफ़र सिर्फ़ उन्हें दिखता है जिन्होंने बुक नहीं किया? | लौटे मरीज़ को पहली विज़िट की छूट नहीं चाहिए |
Figma फ़ाइल पाएँ
मुफ़्त फ़ाइल में दोनों स्क्रीन हैं, हर ठीक किया हुआ हिस्सा पहले और बाद के कंपोनेंट के रूप में, UI कलर वेरिएबल, iOS टेक्स्ट स्टाइल और फ़ोटो क्रेडिट वाला एक read-me।
मुफ़्त Figma फ़ाइल
डॉक्टर अपॉइंटमेंट होम स्क्रीन, पहले और बाद
दोनों स्क्रीन और हर ठीक किया हुआ हिस्सा Figma कंपोनेंट के रूप में। मुफ़्त, सिर्फ़ देखने के लिए, अपने ड्राफ़्ट में डुप्लिकेट करें।
FAQ
डॉक्टर अपॉइंटमेंट ऐप की होम स्क्रीन पर सबसे पहले क्या दिखना चाहिए?
अगला अपॉइंटमेंट, डॉक्टर, तारीख, समय और वीडियो कॉल से जुड़ने के तरीके के साथ। सर्च और स्पेशलिटी उसके बाद आती हैं।
हेल्थ ऐप को होम स्क्रीन पर कितनी स्पेशलिटी दिखानी चाहिए?
लगभग चार, साथ में एक More टाइल। जो लोग कुछ दुर्लभ ढूँढ रहे हैं वे सर्च इस्तेमाल करते हैं, इसलिए आठ या ज़्यादा रंगीन आइकन की लंबी ग्रिड सिर्फ़ शोर बढ़ाती है।
हेल्थकेयर ऐप में डॉक्टर कार्ड पर क्या दिखना चाहिए?
नाम, स्पेशलिटी, डॉक्टर कितनी दूर है और रिव्यू संख्या के साथ एक रेटिंग। फ़ीस, उपलब्धता और बुकिंग बटन डॉक्टर के पेज पर होने चाहिए।
क्या हेल्थ ऐप को होम स्क्रीन पर प्रमोशनल बैनर इस्तेमाल करना चाहिए?
आगामी अपॉइंटमेंट के ऊपर नहीं। पहली विज़िट का ऑफ़र उनके लिए ठीक है जिन्होंने अभी बुक नहीं किया, और लौटे मरीज़ किसी और काम से आए थे।
हेल्थकेयर ऐप को कितने टैब चाहिए?
चार काफ़ी हैं: Home, Appointments, Messages और Profile। Notifications हेडर में बिंदु वाली बेल के रूप में रह सकते हैं।
स्रोत
- दोनों स्क्रीन हमारी अपनी हैं, Figma में डिज़ाइन और नापी गई।
- फ़ोटो Unsplash से, Jonathan Borba, Bruno Rodrigues और vaibhav vivian की, Unsplash License के तहत।
- पहली बार App Brainy पर कैरोसेल के रूप में प्रकाशित।
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
