फ़ूड डिलीवरी ऐप डिज़ाइन: होम स्क्रीन रीडिज़ाइन, पहले और बाद में
एक जूनियर फ़ूड डिलीवरी होम स्क्रीन जिसका हर हिस्सा चिल्ला रहा है, और वही स्क्रीन सुधरी हुई। चार बड़े बदलाव, पाँच छोटे, हर एक के पीछे की वजह, और मुफ़्त Figma फ़ाइल।
फ़ूड डिलीवरी होम स्क्रीन का एक ही काम है: भूखे इंसान को कुछ ही सेकंड में किसी रेस्टोरेंट तक पहुँचाना। नीचे का पहला ड्राफ़्ट इसी काम में फ़ेल होता है, इसलिए नहीं कि कोई एक हिस्सा बदसूरत है, बल्कि इसलिए कि हर हिस्सा एक साथ ध्यान माँग रहा है। सुधार में न नए फ़ीचर थे, न नया स्टाइल। बस चीज़ें तब तक हटाई गईं जब तक हर हिस्सा सिर्फ़ एक बात न कहने लगा।
पूरी स्क्रीन, पहले और बाद में
जूनियर ड्राफ़्ट
सुधरी हुई
गिनिए कि पहले रेस्टोरेंट तक पहुँचने से पहले आँख को कितना कुछ प्रोसेस करना पड़ता है। बाईं ओर: पूरा गली का पता, हेडर में दो आइकन, दो और आइकन वाली सर्च बार, तीन पंक्तियों की कॉपी और बटन वाला ग्रेडिएंट बैनर, कैरोसेल के डॉट, पाँच रंगों में पाँच घेरे, आग के आइकन वाला सेक्शन टाइटल, और एक फ़ोटो पर तीन बैज। दाईं ओर: जगह का नाम, एक कार्ट, एक सर्च बार, पाँच टाइल, एक ऑफ़र और एक कार्ड।
दाईं ओर कोई ऐसा फ़ीचर गायब नहीं है जो बाईं ओर था। पता, सर्च, कैटेगरी, ऑफ़र और रेस्टोरेंट सब अब भी हैं। बस हर एक ने बाकियों से होड़ करना बंद कर दिया।
| जूनियर ड्राफ़्ट | सुधरी हुई | |
|---|---|---|
| साइड मार्जिन | बाएँ 12 px, दाएँ 16 px | दोनों ओर 20 px |
| टेक्स्ट साइज़ | 9 से 30 px, कोई सिस्टम नहीं | iOS टेक्स्ट स्टाइल, 11 से 22 pt |
| कैटेगरी घेरे के रंग | 5 | 1, सिर्फ़ चुनी हुई टाइल पर |
| पहले कार्ड पर बैज | 3 | 1 |
| रेस्टोरेंट के नाम के नीचे तथ्य | 6 | 2 |
| टैब | 5 | 4 |
सुधार 1: कहाँ, एक शब्द में बताएँ
पहले
बाद में
ड्राफ़्ट में पिन के पास छोटे अक्षरों में पूरा गली का पता, 221B Baker Street, दिखता है, जो बीच शब्द में कट जाता है। सुधार में उस पते को व्यक्ति ने जो नाम दिया था, "घर", बड़े अक्षरों में दिखता है, साथ में एक शेवरॉन जो बताता है कि इसे बदला जा सकता है।
कोई भी डिलीवरी ऐप अपना पता पढ़ने के लिए नहीं खोलता। उसे बस एक बात पक्की करनी होती है: क्या यह सही जगह जा रहा है? खुद चुना हुआ लेबल, घर, ऑफ़िस, मम्मी का, यह गली के नाम से तेज़ बताता है, और एक शब्द होने के कारण किसी भी लंबाई पर पढ़ने लायक रहता है। पूरा पता एक टैप दूर, उस स्क्रीन पर रहना चाहिए जहाँ आप उसे बदलते हैं।
सुधार में हेडर से प्रोफ़ाइल आइकन भी हटा दिया गया। ड्राफ़्ट में वह दो बार था, एक ऊपर और एक अकाउंट टैब के रूप में। एक ही कमरे के दो दरवाज़े लोगों को सोचने पर मजबूर करते हैं कि वे अलग कमरों में तो नहीं जाते।
सुधार 2: एक आकार, एक चुनी हुई स्थिति
पहले
बाद में
पहले, 5 कैटेगरी में से हर एक अपने रंगीन घेरे वाले गोले में है: पीला, हरा, नीला, गुलाबी, बैंगनी। बाद में, टाइलों का एक ही आकार और एक ही न्यूट्रल फ़्रेम है, और सिर्फ़ चुनी हुई, पिज़्ज़ा, के बॉर्डर और लेबल पर ब्रांड का लाल रंग है।
इंटरफ़ेस में रंग एक संकेत होता है, और पाँच रंग पाँच संकेत भेजते हैं। पंक्ति स्कैन करने वाले को पूछना पड़ता है कि हरे का मतलब क्या है और सुशी नीली क्यों है। जवाब है कुछ नहीं, और यही समस्या है: सजावट जो जानकारी जैसी दिखती है।
जब रंग सिर्फ़ एक चीज़ पर खर्च होता है, तो उसका मतलब बनता है। अकेली लाल टाइल बिना एक शब्द बोले कहती है "आप यहाँ हैं"। बाकी काम फ़ोटो कर देती हैं, क्योंकि खाने की फ़ोटो पहले से स्क्रीन की सबसे रंगीन चीज़ हैं और उन्हें मदद की ज़रूरत नहीं।
सुधार 3: एक ऑफ़र, एक संदेश
पहले
बाद में
ड्राफ़्ट का बैनर "MEGA SALE!", ऑफ़र, कोड, न्यूनतम ऑर्डर और छोटे अक्षरों में "T&C apply" एक के ऊपर एक रखता है, फिर एक बटन। सुधार 50% OFF रखता है और तीन बातें कहता है: कब (सिर्फ़ आज), किसके लिए ($20 से ऊपर आपका पहला ऑर्डर) और कोड, एक बटन के रूप में जिसे कॉपी किया जा सकता है।
ऑफ़र कभी समस्या था ही नहीं। 50% की छूट ऑर्डर करने की अच्छी वजह है, और सुधार उसे उसी आकार में रखता है।
बदला उसके आसपास का सब कुछ है। "MEGA SALE!" और "50% OFF" एक ही बात दो बार कह रहे थे। छोटे अक्षरों ने 9 px पर चार तथ्य एक पंक्ति में ठूँस दिए थे, बार से अलग किए हुए। "Order now" बटन के जाने की कोई जगह नहीं थी, क्योंकि अभी कोई एक रेस्टोरेंट है ही नहीं जहाँ से ऑर्डर किया जाए।
अब कोड ही क्रिया है। उसे टैप करने पर YUMMY50 कॉपी होता है, जो इस बैनर से चेकआउट तक ले जाने वाली अकेली चीज़ है। शर्तें भी चेकआउट पर चली गईं, जहाँ वे लागू होती हैं।
तस्वीर भी बदली। ड्राफ़्ट में बर्गर को काटकर नारंगी ग्रेडिएंट पर तैरते गोले में रखा गया है। सुधार में उसे ब्रांड के लाल पर फ़ोटोग्राफ़ किया गया है, ताकि खाना कार्ड पर ही बैठे, ऊपर चिपके स्टिकर में नहीं।
सुधार 4: एक बैज, दो तथ्य
पहले
बाद में
पहले, फ़ोटो पर तीन बैज हैं (Free delivery, 20% OFF, Promoted) और नीचे के टेक्स्ट में व्यंजन, डिलीवरी का समय, शुल्क, कीमत का स्तर, न्यूनतम ऑर्डर और खुलने का समय सब लिखा है। बाद में, एक बैज, नाम, रेटिंग और दो तथ्य: कितनी देर और कितना खर्च।
लिस्ट में रेस्टोरेंट कार्ड लगभग एक सेकंड में पढ़ा जाता है, और उस सेकंड में इंसान दो बातें तय करता है: क्या मुझे यह खाना चाहिए, और क्या यह इंतज़ार और शुल्क के लायक है। सुधरा कार्ड ठीक इन्हीं का जवाब देता है। फ़ोटो पहले का जवाब देती है। "25 से 35 मिनट, $2.99 डिलीवरी" दूसरे का।
पुराने कार्ड की बाकी सब चीज़ें असली जानकारी हैं, बस पहली नज़र की जानकारी नहीं। व्यंजनों की सूची फ़ोटो में पहले से दिख जाती है। $15 का न्यूनतम ऑर्डर और रात 11 बजे का बंद होने का समय तब मायने रखते हैं जब आप चुन चुके हों, इसलिए वे रेस्टोरेंट के अपने पेज पर होने चाहिए।
"Promoted" व्यवसाय के लिए है, ग्राहक के लिए नहीं, और अगल-बगल तीन बैज एक-दूसरे को काट देते हैं। प्राथमिकता से चुना गया एक बैज पढ़ा जाता है।
पाँच छोटे सुधार
ऊपर के चार हिस्से बड़े हैं। ये पाँच बदलाव भी उतने ही सोच-समझकर किए गए हैं:
- एक मार्जिन। ड्राफ़्ट में बाईं ओर 12 px और दाईं ओर 16 px था, इसलिए कुछ भी किसी से मेल नहीं खाता था। सुधार में दोनों ओर 20 px है, और स्क्रीन का हर किनारा उसी रेखा पर बैठता है।
- एक टाइप सिस्टम। ड्राफ़्ट में 9 से 30 px तक का टेक्स्ट था, बीच में कोई सीढ़ी नहीं। सुधार में iOS टेक्स्ट स्टाइल हैं, 11 से 22 pt, इसलिए हर साइज़ की एक भूमिका है और कुछ भी पढ़ने के लिए बहुत छोटा नहीं।
- शांत सर्च बार। ड्राफ़्ट की सर्च में माइक्रोफ़ोन और फ़िल्टर आइकन थे, और इतना लंबा प्लेसहोल्डर कि कट जाता था। सुधार एक आइकन और छोटा प्रॉम्प्ट रखता है: "व्यंजन, रेस्टोरेंट या क्यूज़ीन"।
- कैरोसेल डॉट नहीं। बैनर के नीचे के डॉट और बैनरों का वादा करते हैं। ज़्यादातर लोग उन्हें कभी स्वाइप नहीं करते, और डॉट देखने के लिए एक चीज़ और जोड़ देते हैं। एक ऑफ़र को डॉट की ज़रूरत नहीं।
- पाँच नहीं, चार टैब। Favorites टैब बार से चला गया। सेव करना अब भी हर कार्ड के दिल पर होता है, और चार टैब हर एक को ज़्यादा जगह और आसान टारगेट देते हैं।
अपनी होम स्क्रीन का ऑडिट करें
अपने ऐप की होम स्क्रीन को इस चेकलिस्ट के बगल में रखिए। हर "नहीं" एक ऐसा हिस्सा है जो चिल्ला रहा है।
| सवाल | यह क्यों मायने रखता है |
|---|---|
| क्या कोई एक नज़र में बता सकता है कि डिलीवरी कहाँ होगी? | वे हर बार इसे जाँचते हैं; इसे एक शब्द बनाएँ |
| क्या रंग हर उस जगह कुछ मतलब रखता है जहाँ वह इस्तेमाल हुआ है? | सजावटी रंग संकेत जैसा पढ़ा जाता है |
| क्या हर प्रोमो एक ऑफ़र एक ही बार कहता है? | दोहराए दावे और छोटे अक्षर छोड़ दिए जाते हैं |
| क्या कार्ड को एक सेकंड में परखा जा सकता है? | वे दो तथ्य चुनें जो ऑर्डर तय करते हैं |
| क्या सारे किनारे एक मार्जिन पर मिलते हैं? | बेमेल किनारे अधूरेपन जैसे लगते हैं |
| क्या हर टेक्स्ट साइज़ एक ही स्केल से है? | बेतरतीब साइज़ से हायरार्की असंभव हो जाती है |
Figma फ़ाइल पाएँ
मुफ़्त फ़ाइल में दोनों स्क्रीन कंपोनेंट के रूप में हैं, हर सुधार पहले और बाद की जोड़ी में, कलर वेरिएबल और iOS टेक्स्ट स्टाइल।
मुफ़्त Figma फ़ाइल
फ़ूड डिलीवरी होम स्क्रीन, पहले और बाद में
दोनों स्क्रीन और हर सुधरा हिस्सा Figma कंपोनेंट के रूप में। मुफ़्त, सिर्फ़ देखने के लिए, इसे अपने ड्राफ़्ट में डुप्लिकेट करें।
FAQ
फ़ूड डिलीवरी ऐप की होम स्क्रीन पर सबसे पहले क्या दिखना चाहिए?
ऑर्डर कहाँ जा रहा है, एक सर्च बार, कैटेगरी और एक ऑफ़र, फिर रेस्टोरेंट। हर रेस्टोरेंट कार्ड को एक फ़ोटो, नाम, रेटिंग, डिलीवरी का समय और डिलीवरी शुल्क चाहिए।
रेस्टोरेंट कार्ड पर कितने बैज होने चाहिए?
एक। अगल-बगल तीन बैज एक-दूसरे को काट देते हैं; वह चुनिए जो ग्राहक के लिए सबसे ज़रूरी हो, जैसे फ़्री डिलीवरी।
क्या फ़ूड ऐप को हर कैटेगरी के लिए अलग रंग इस्तेमाल करना चाहिए?
नहीं। हर कैटेगरी को एक ही आकार और न्यूट्रल फ़्रेम दें, और ब्रांड रंग सिर्फ़ चुनी हुई पर खर्च करें, ताकि रंग का मतलब हो "आप यहाँ हैं"।
कन्वर्ट करने वाला प्रोमो बैनर कैसे डिज़ाइन करें?
एक ऑफ़र एक बार कहें: छूट, किसके लिए है और कोड। कोड को ही क्रिया बनाएँ, कॉपी करने के लिए टैप करने योग्य, और शर्तें चेकआउट पर ले जाएँ।
फ़ूड डिलीवरी ऐप में कितने टैब होने चाहिए?
अधिकतम चार या पाँच। यहाँ चार (होम, सर्च, ऑर्डर, अकाउंट) ने हर टैब को ज़्यादा जगह दी, और सेव करना हर कार्ड के दिल से संभाला गया।
स्रोत
- दोनों स्क्रीन हमारी अपनी हैं, Figma में डिज़ाइन और नापी गई। तालिका के माप Figma फ़ाइलों से हैं।
- खाने की फ़ोटो Unsplash से Fernando Andrade, sina piryae, Mahmoud Fawzy, Anna Pelzer, Alana Harris, Thimotius Timmy और Poul Hoang की। प्रोमो बर्गर Pexels पर Elements Interactive का, जिसका स्टूडियो बैकग्राउंड बिना AI के, रंग से ब्रांड के लाल में बदला गया।
- iOS टेक्स्ट साइज़ Apple की Human Interface Guidelines, Typography से।
- पहली बार 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
