प्लांट शॉप ऐप डिज़ाइन: ईकॉमर्स होम स्क्रीन का रीडिज़ाइन
एक जूनियर प्लांट शॉप ऐप की होम स्क्रीन, जिसमें हेडर में चार आइकन, तीन ड्रॉपडाउन फ़िल्टर और हर फ़ोटो के नीचे सात चीज़ें हैं, और वही स्क्रीन सुधरी हुई। हर बदलाव आमने-सामने, हर एक की वजह, और मुफ़्त Figma फ़ाइल।
प्लांट शॉप में आसान हिस्सा पहले से हल है: प्रोडक्ट की फ़ोटो अच्छी आती हैं। नीचे के पहले ड्राफ़्ट में असली पौधे और असली फ़ोटो हैं, फिर उन्हें भीड़ भरे हेडर, तीन ड्रॉपडाउन फ़िल्टर, केयर टिप्स के लंबे ब्लॉक और हर कार्ड के नीचे सात चीज़ों के नीचे दबा दिया गया है। सुधार हर फ़ीचर रखता है और पौधों को जगह देता है।
पूरी स्क्रीन, पहले और बाद
जूनियर ड्राफ़्ट
सुधरा हुआ
बाईं ओर, एक भी पौधा पूरा दिखने से पहले खरीदार को हेडर, फ़िल्टर बार, सलाह के तीन वाक्य और प्रोडक्ट डिटेल का ढेर पढ़ना पड़ता है। दाईं ओर, तीन छोटे ब्लॉक के ठीक बाद पहले पौधे दिख जाते हैं, हर कार्ड एक पूरा पौधा है जिस पर कीमत है, और हरा रंग सिर्फ़ एक काम के लिए है: जिन चीज़ों को टैप किया जा सकता है।
सेल दोनों स्क्रीन पर बनी रहती है। Pilea $24.99 का है और $31.00 कटा हुआ है, और parlor palm $28.00 का है और $35.00 कटा हुआ है। दुकान, उसकी कीमतें और रिव्यू अभ्यास के लिए बनाए गए हैं; पौधे असली हैं।
| जूनियर ड्राफ़्ट | सुधरा हुआ | |
|---|---|---|
| लोगो के पास हेडर आइकन | 4 | 2 |
| फ़िल्टर | 3 ड्रॉपडाउन और एक सॉर्ट लिंक | 4 टैप करने वाले चिप्स |
| केयर टिप्स | 3 लंबे वाक्य | आइकन के साथ 3 छोटे तथ्य |
| हर कार्ड की फ़ोटो के नीचे चीज़ें | 7 | 2, और एक ऐड बटन |
| टैब | 5 | 4 |
| साइड मार्जिन | बाएँ 14 px, दाएँ 12 px | दोनों तरफ़ 20 px |
| टेक्स्ट साइज़ | 8 से 20 px | 11 से 20 pt |
सुधार 1: लोगो, सर्च और कार्ट, बस इतना
पहले
बाद में
एक मेन्यू, लोगो और तीन छोटे आइकन, बनाम वही लोगो और दो बड़े गोल बटन।
ड्राफ़्ट के हेडर में एक मेन्यू, लोगो, सर्च, एक हार्ट और एक कार्ट है। हार्ट विशलिस्ट है, और सुधरी स्क्रीन विशलिस्ट को एक टैब, Saved, देती है, इसलिए हार्ट को अब हेडर में रहने की ज़रूरत नहीं। कार्ट अपनी जगह पर रहता है क्योंकि स्टोर में खरीदार सबसे ऊपर यही कंट्रोल ढूँढता है, और उसका बैज बताता है कि उसमें कितनी चीज़ें हैं।
बचे हुए आइकन बड़े हैं: चार छोटे आइकन की जगह दो 44 px के बटन। फ़ोन एक हाथ में पकड़ा जाता है, और बड़ा टारगेट दबाना आसान होता है। लोगो दोनों स्क्रीन पर वही वर्डमार्क है, और यही मुद्दा है: हेडर चीज़ें हटाकर सुधारा गया, ब्रांड को नया रूप देकर नहीं।
बैज लाल से ब्रांड के हरे रंग में बदल गया। लाल बिंदु कहता है कि कुछ गड़बड़ है या जल्दी है। आइटम की गिनती इनमें से कुछ नहीं है।
सुधार 2: दिखने वाले फ़िल्टर, ड्रॉपडाउन नहीं
पहले
बाद में
Category, Price और Size बंद ड्रॉपडाउन के रूप में और एक Sort लिंक, बनाम Indoor, Outdoor, Succulents और Pet friendly चिप्स के रूप में, जिनमें Indoor चुना हुआ है।
ड्रॉपडाउन अपने विकल्प छिपाता है। इसे इस्तेमाल करने के लिए खरीदार उसे टैप करता है, सूची पढ़ता है, चुनता है, और सूची फिर बंद हो जाती है। तीन ड्रॉपडाउन यानी स्क्रीन पर किसी पौधे के बदलने से पहले ऐसे तीन चक्कर। ये यह भी बताते हैं कि किस तरह का फ़िल्टर मौजूद है, यह नहीं कि उसमें क्या है।
चिप्स विकल्पों को खुले में दिखाते हैं। Indoor, outdoor, succulents और pet friendly वही सवाल हैं जो पौधा खरीदने वाले के मन में सच में होते हैं, इसलिए एक टैप एक का जवाब दे देता है, और हरे रंग का चुना हुआ चिप मौजूदा स्थिति दिखाता है। चारों चिप्स 350 px की पंक्ति में 6 px बचाकर समा जाते हैं, इसलिए कोई कटता नहीं और स्क्रोल की ज़रूरत नहीं पड़ती।
सुधार 3: ऐसा कार्ड जो पूरा पौधा हो
पहले
बाद में
एक फ़ोटो, एक बैज, एक हार्ट, दो नाम, एक कीमत, सितारे, रिव्यू गिनती और पूरी चौड़ाई का बटन, बनाम एक फ़ोटो, एक छोटा नाम, एक कीमत और एक गोल बटन।
ड्राफ़्ट का कार्ड फ़ोटो के नीचे सात चीज़ें जमा देता है: पौधे का लैटिन नाम, आम नाम, कीमत, पुरानी कीमत, सितारे, रिव्यू की गिनती और पूरी चौड़ाई का Add to Cart बटन। फ़ोटो पर खुद एक डिस्काउंट बैज और एक हार्ट बैठे हैं। यह सब स्क्रीन की आधी चौड़ाई वाले कार्ड में है।
सुधार में दो पंक्तियाँ और एक बटन रहते हैं। नाम छोटा है ("Pilea", "Calathea") और कीमत उसके नीचे है, सेल होने पर पुरानी कीमत कटी हुई। चौड़े Add to Cart बार की जगह गोल प्लस बटन आता है, क्योंकि प्रोडक्ट कार्ड पर प्लस ऐसा पैटर्न है जिसे खरीदार पहले से जानते हैं।
फ़ोटो भी बदलीं। ड्राफ़्ट के क्रॉप पौधों को काट देते हैं और गमले एक सीध में नहीं हैं। सुधार हर फ़ोटो को ऐसे क्रॉप करता है कि पूरा पौधा फ़्रेम की ऊँचाई का लगभग 70% भरे, बीच में, और हर गमला एक ही रेखा पर। तब कार्डों की पंक्ति एक पंक्ति की तरह पढ़ी जाती है, चार अलग तस्वीरों की तरह नहीं।
सुधार 4: केयर टिप्स तीन तथ्यों में
पहले
बाद में
हरे बॉक्स में सलाह के तीन वाक्य, बनाम तीन आइकन जिनमें एक लेबल और एक-एक शब्द है।
ड्राफ़्ट सही बातें कहता है, लेकिन खरीदार को उन्हें ढूँढने के लिए तीन वाक्य पढ़ने पड़ते हैं। तीन तथ्य हैं पानी, रोशनी और पौधा पालतू जानवरों के लिए सुरक्षित है या नहीं, और हर एक को एक शब्द में कहा जा सकता है: साप्ताहिक, अप्रत्यक्ष, सुरक्षित।
सुधार हर तथ्य को एक आइकन, एक छोटा लेबल और वह शब्द बोल्ड में देता है। पूरा कार्ड एक नज़र में पढ़ा जाता है। "क्या इसे अपनी बिल्ली के पास रख सकता हूँ?" ढूँढने वाला खरीदार बिना पढ़े "Pets: Safe" पा लेता है।
छोटे सुधार
- पाँच नहीं, चार टैब। Home, Shop, Saved और Profile। Wishlist, Saved बन गया, और कार्ट टैब बार से हेडर में चला गया।
- एक मार्जिन। ड्राफ़्ट में बाएँ 14 px और दाएँ 12 px था। सुधार दोनों तरफ़ 20 px और ब्लॉकों के बीच 12 से 14 px रखता है।
- फ़ोटो पर कोई बैज नहीं। लाल -20% और नीले NEW बैज और हर फ़ोटो पर हार्ट हटा दिए गए। सेल अब भी दिखती है, क्योंकि कटी हुई कीमत बनी रहती है।
- एक एक्सेंट रंग। ड्राफ़्ट के हरे के साथ लाल और नीले बैज जुड़ गए थे। सुधार टैप होने वाली हर चीज़ के लिए एक ब्रांड हरा, #1F7A4D, इस्तेमाल करता है।
- असली टाइप स्केल। टेक्स्ट 8 से 20 px से बदलकर iOS के 11 से 20 pt साइज़ पर आ गया।
- छोटा सेक्शन शीर्षक। "Popular Plants" बना "Popular", क्योंकि स्क्रीन पहले से ही पौधों के बारे में है।
अपने शॉप ऐप का ऑडिट करें
| सवाल | क्यों मायने रखता है |
|---|---|
| क्या हेडर को लोगो, सर्च और कार्ट तक घटाया जा सकता है? | हर अतिरिक्त आइकन उस आइकन से होड़ करता है जिसे लोग इस्तेमाल करते हैं |
| क्या कोई ड्रॉपडाउन चिप्स बन सकता है? | दिखते विकल्पों के लिए अतिरिक्त टैप नहीं चाहिए |
| क्या हर प्रोडक्ट कार्ड एक कीमत और एक एक्शन दिखाता है? | सात डिटेल कार्ड को फ़ॉर्म बना देती हैं |
| क्या फ़ोटो पूरा प्रोडक्ट एक ही स्केल पर दिखाती हैं? | कटे हुए क्रॉप ग्रिड को असमान बना देते हैं |
| क्या सलाह का कोई पैराग्राफ़ तीन छोटे तथ्य बन सकता है? | खरीदार स्कैन करते हैं, पढ़ते नहीं |
Figma फ़ाइल पाएँ
मुफ़्त फ़ाइल में दोनों स्क्रीन कॉम्पोनेंट के रूप में हैं, हर सुधार पहले और बाद की जोड़ी के रूप में, कलर वेरिएबल और iOS टेक्स्ट स्टाइल।
मुफ़्त Figma फ़ाइल
प्लांट शॉप होम स्क्रीन, पहले और बाद
दोनों स्क्रीन और हर सुधरा हिस्सा Figma कॉम्पोनेंट के रूप में। मुफ़्त, सिर्फ़ देखने के लिए, इसे अपने ड्राफ़्ट में डुप्लिकेट करें।
FAQ
ईकॉमर्स ऐप की होम स्क्रीन को सबसे पहले क्या दिखाना चाहिए?
लोगो, सर्च और कार्ट वाला छोटा हेडर, फिर चिप्स के रूप में फ़िल्टर और पहले प्रोडक्ट। जो कुछ प्रोडक्ट नहीं है, जैसे टिप्स या बैनर, उसे छोटा रखें।
शॉप ऐप पर फ़िल्टर ड्रॉपडाउन होने चाहिए या चिप्स?
जिन कुछ फ़िल्टरों का लोग सबसे ज़्यादा इस्तेमाल करते हैं, उनके लिए चिप्स। चिप्स बिना टैप के विकल्प दिखाते हैं, और चुना हुआ चिप मौजूदा स्थिति दिखाता है। कीमत और साइज़ जैसी लंबी सूचियों के लिए ड्रॉपडाउन या फ़िल्टर शीट रखें।
शॉपिंग ऐप के प्रोडक्ट कार्ड पर क्या दिखना चाहिए?
पूरे प्रोडक्ट की फ़ोटो, एक नाम, एक कीमत और एक ऐड बटन। रेटिंग और लंबा नाम जैसी डिटेल प्रोडक्ट पेज पर रह सकती हैं।
ऐप में केयर निर्देश कैसे दिखाएँ?
आइकन के साथ कुछ छोटे तथ्यों के रूप में, हर एक एक शब्द का, जैसे Water: Weekly। लंबे वाक्य एक टैप गहरे रह सकते हैं।
शॉपिंग ऐप में कितने टैब होने चाहिए?
चार या पाँच। दोहराव को उन जगहों में मिला दें जहाँ लोग पहले से देखते हैं, जैसे हेडर में कार्ट और Saved टैब में विशलिस्ट।
स्रोत
- दोनों स्क्रीन हमारी अपनी हैं, Figma में डिज़ाइन और नापी गई। दुकान, उसकी कीमतें और रिव्यू बनाए गए हैं; पौधों के नाम असली हैं।
- फ़ोटो Pexels से, Kulbir, Gül Işık और Kaboompics द्वारा।
- Apple Human Interface Guidelines: Typography, सुधरी स्क्रीन में इस्तेमाल हुए iOS टेक्स्ट साइज़ के लिए।
- पहली बार 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
