रियल एस्टेट ऐप डिज़ाइन: होम स्क्रीन का रीडिज़ाइन, पहले और बाद में

रियल एस्टेट होम स्क्रीन का एक ही काम है: इंसान को "मैं ढूंढ रहा हूँ" से उस लिस्टिंग तक पहुँचाना जिसे वह खोलना चाहे। नीचे का पहला ड्राफ़्ट कुछ भी नहीं तोड़ता। हर फ़ीचर काम करता है। बस वह पाठक से सब कुछ एक साथ समझने को कहता है: एक सर्च फ़ील्ड, पाँच गोल कैटेगरी, चार अलग-अलग बटन, एक बैनर और नौ छोटी जानकारियों वाला एक कार्ड।

सुधार हर फ़ीचर रखता है और क्रम, आकार और स्टाइल की संख्या बदल देता है।

पूरी स्क्रीन, पहले और बाद में

जूनियर ड्राफ़्ट

सुधरा हुआ

बाईं ओर आँख को मिलता है एक सर्च फ़ील्ड, पाँच कैटेगरी सर्कल, तीन अलग स्टाइल के चार कंट्रोल, पूरी चौड़ाई का नीला बैनर, एक स्टार, एक तीर, हर फोटो पर दो बटन और लिस्टिंग के विवरण के ऊपर तैरता Map बटन। अकेले में कुछ भी गलत नहीं है। साथ में पढ़ने की कोई पहली चीज़ ही नहीं है।

दाईं ओर स्क्रीन ऊपर से नीचे पढ़ी जाती है: आप कौन हैं, क्या खोजना है, किराया या खरीद, किस तरह का घर, फिर एक बड़ी लिस्टिंग। बैनर अब भी है, पर नीचे इंतज़ार करता है, छोटा, जहाँ वह सर्च से होड़ नहीं कर सकता।

सुधार 1: एक सर्च रो, एक Rent या Buy कंट्रोल

पहले

बाद में

माइक्रोफ़ोन के साथ आउटलाइन सर्च फ़ील्ड, पाँच गोल कैटेगरी आइकन, फिर भरा हुआ Rent बटन, सादा Buy शब्द, आउटलाइन Sort बटन और एक Filter लिंक। इसके मुकाबले एक नीले फ़िल्टर बटन वाला धूसर सर्च फ़ील्ड, और Rent व Buy एक सेगमेंटेड कंट्रोल के दो हिस्सों के रूप में।

ड्राफ़्ट एक रो में चार कंट्रोल रखता है और हर एक को अलग रूप देता है: Rent भरा हुआ बटन है, Buy खाली टेक्स्ट, Sort आउटलाइन और Filter आइकन वाला सादा लिंक। पाठक को इस्तेमाल से पहले समझना पड़ता है कि कौन बटन है, कौन टैब और कौन टॉगल।

सुधार हर काम को एक आकार देता है। सर्च और फ़िल्टर एक ही रो में हैं, क्योंकि फ़िल्टर करना खोजने का हिस्सा है। Rent या Buy ठीक दो चीज़ों के बीच चुनाव है, और सेगमेंटेड कंट्रोल इसी के लिए बना है: दोनों विकल्प दिखते रहते हैं और चुना हुआ साफ़ चमकता है। Sort रास्ते से हट जाता है, क्योंकि वह तभी मायने रखता है जब नतीजे हों।

दोबारा इस्तेमाल का नियम: अगर दो कंट्रोल एक जैसा काम करते हैं तो वे एक जैसे दिखें। अगर अलग काम करते हैं तो अलग दिखें।

सुधार 2: कैटेगरी जो दिखाएँ कि क्या चुना है

पहले

बाद में

पाँच पतले आउटलाइन सर्कल, हर एक के नीचे छोटा लेबल, जहाँ सिर्फ़ नीला लेबल बताता है कि Apartment चुना है। इसके मुकाबले भरे हुए चिप्स जिनमें एक ही लाइन में आइकन और शब्द है, जहाँ Apartments ठोस नीला है और अगले चिप्स किनारे से बाहर जाते रहते हैं।

ड्राफ़्ट में चुने हुए का एकमात्र संकेत सर्कल के नीचे छोटे टेक्स्ट का नीला लेबल है। सर्कल खुद एक जैसे दिखते हैं, इसलिए सक्रिय वाला खोजने के लिए आँख को लेबल एक-एक करके पढ़ने पड़ते हैं।

ठोस भराव वाला चिप सवाल पूछे जाने से पहले ही जवाब दे देता है। चुना हुआ स्टेट अलग रंग और वज़न का है, टेक्स्ट में छोटा सा फ़र्क नहीं। चिप ऊँचाई से चौड़े भी हैं, इसलिए आइकन और शब्द एक लाइन में बैठते हैं और पूरी रो कम ऊँचाई लेती है। दाएँ किनारे पर कटा हुआ चिप दिखाता है कि रो स्क्रोल होती है, तीरों की ज़रूरत नहीं।

सुधार 3: ऐसा लिस्टिंग कार्ड जो क्रम से पढ़ा जाए

पहले

बाद में

स्टार और तीर के साथ Featured Listings, "1 Year Old" बैज और प्लस व दिल बटन वाली फोटो, नीले रंग में $2,400 per month, Sale और Rent पिल्स, एक पता, और तैरते Map बटन से कटे बेडरूम व बाथ विवरण। इसके मुकाबले एक दिल वाली बड़ी गोल कोनों की फोटो, फिर $2,400 per month, 2-bed apartment, Alfama, Lisbon और 2 bd, 2 ba, 980 sq ft।

घर देखने वाला इंसान चार सवाल एक ही क्रम में पूछता है: कितना, क्या है, कहाँ है और कितना बड़ा। सुधार कार्ड को इसी क्रम में रखता है, हर लाइन में एक जवाब। कीमत सबसे बड़ा टेक्स्ट है, फिर घर का प्रकार, फिर जगह और विवरण के लिए हल्की लाइनें।

ड्राफ़्ट जवाबों को गड्डमड्ड कर देता है। कीमत उसी लाइन में दो पिल्स के साथ है जिन पर Sale और Rent लिखा है, जबकि घर सिर्फ़ किराये का है। पता विवरण के ऊपर पर कीमत के नीचे, अलग रंग में है। विवरण छोटे 9 पॉइंट टेक्स्ट में हैं और आख़िरी Map बटन के नीचे छिप जाता है, इसलिए पाठक क्षेत्रफल खो देता है, वह संख्या जिसकी ज़्यादातर लोग तुलना करते हैं।

फोटो से यह भी हटा: "1 Year Old" बैज और प्लस बटन। हर इमेज पर दो तैरते बटन ऐसे फ़ैसले माँगते हैं जो पाठक ने अभी लिए ही नहीं। एक दिल काफ़ी है, और फोटो बड़ी है क्योंकि घर फोटो से बिकता है।

दोबारा इस्तेमाल का नियम: कार्ड एक वाक्य है। उसका शब्द-क्रम तय करें, फिर हर शब्द को एक स्टाइल दें।

सुधार 4: एक आइकन स्टाइल में चार टैब

पहले

बाद में

Home, My Properties, Messages, Favorites और More, भरे और आउटलाइन आइकन मिले हुए। इसके मुकाबले Home, Saved, Messages और Profile, सब आउटलाइन आइकन, सिर्फ़ Home नीले में।

ड्राफ़्ट में पाँच टैब हैं, और उनमें से तीन करीब-करीब एक जैसे हैं: My Properties, Favorites और More, सब ऐसी जगहें लगती हैं जहाँ सेव किया या अपना घर मिल सकता है। इसके आइकन भी भरे आकार (घर, मैसेज) और आउटलाइन (इमारत, दिल) मिलाते हैं, इसलिए सक्रिय टैब को उस टैब से अलग पहचानना मुश्किल है जो बस भारी बना है।

सुधार चार टैब और एक आइकन स्टाइल इस्तेमाल करता है, ताकि टैबों के बीच एकमात्र फ़र्क यह हो कि कौन सा सक्रिय है। "Favorites" बनता है "Saved", एक छोटा शब्द जो कार्ड के दिल से मेल खाता है। "More" बनता है "Profile", एक नाम जो बताता है कि पीछे क्या है। Apple के दिशानिर्देश टैब बार को शीर्ष-स्तर के सेक्शनों के बीच नेविगेशन बताते हैं, इसलिए बचे-खुचे का मेन्यू बनी कोई मंज़िल उसमें नहीं होनी चाहिए।

छोटे सुधार

• एक हेडर जिसमें इंसान हो। सुधार में ग्रीटिंग, ठोस नीले सर्कल में इनिशियल्स वाला अवतार और लाल बिंदु वाली घंटी जुड़ती है। ड्राफ़्ट में हेडर नहीं है, इसलिए कुछ नहीं बताता कि यह ऐप किसका है।
• एक मार्जिन। ड्राफ़्ट बाईं ओर 12 और दाईं ओर 16 इस्तेमाल करता है, इसलिए कुछ भी स्क्रीन के किनारे से मेल नहीं खाता। सुधार हर रो के दोनों ओर 20 इस्तेमाल करता है।
• एक स्पेसिंग स्केल। गैप 4, 8, 12 या 16 हैं। जब हर गैप एक ही छोटी सूची से आता है, रोज़ बिना डिवाइडर के भी आपस में जुड़ी दिखती हैं।
• प्लेटफ़ॉर्म से टेक्स्ट रैंप। ड्राफ़्ट का टेक्स्ट 9 से 15 px तक बिना किसी पैटर्न के चलता है। सुधार 11 से 22 pt के iOS साइज़ इस्तेमाल करता है, जो पढ़े जा सकने वाले साइज़ हैं।
• शांत बैनर। "List your home for Free" से इटैलिक एक्सेंट शब्द, घर का आउटलाइन और अंदर का दूसरा बटन हट गया। अब वह एक तीर वाली एक ही रो है।

अपने रियल एस्टेट ऐप का ऑडिट करें

Figma फ़ाइल पाएँ

मुफ़्त फ़ाइल में दोनों स्क्रीन, सुधरी स्क्रीन का हर हिस्सा कॉम्पोनेंट के रूप में, कलर वेरिएबल, iOS टेक्स्ट स्टाइल और फोटो क्रेडिट वाला एक read-me है।

मुफ़्त Figma फ़ाइल

रियल एस्टेट होम स्क्रीन, पहले और बाद में

दोनों स्क्रीन और हर सुधरा हिस्सा Figma कॉम्पोनेंट के रूप में। मुफ़्त, सिर्फ़ देखने के लिए, अपने ड्राफ़्ट में डुप्लिकेट करें।

Figma में खोलें

FAQ

रियल एस्टेट ऐप की होम स्क्रीन को सबसे पहले क्या दिखाना चाहिए?

एक फ़िल्टर बटन वाला सर्च फ़ील्ड, फिर Rent या Buy और प्रॉपर्टी का प्रकार। लिस्टिंग ठीक उसके नीचे रखें, और बैनर व दूसरे ऑफ़र उनके बाद।

प्रॉपर्टी ऐप में Rent और Buy कैसे दिखाने चाहिए?

दो हिस्सों वाले सेगमेंटेड कंट्रोल के रूप में, ताकि दोनों विकल्प हमेशा दिखें और चुना हुआ साफ़ हाइलाइट हो। एक रो में चार अलग बटन स्टाइल लोगों से अंदाज़ा लगवाते हैं।

प्रॉपर्टी लिस्टिंग कार्ड में क्या होना चाहिए?

पहले कीमत, फिर घर का प्रकार, जगह और मुख्य विवरण जैसे बेडरूम, बाथरूम और क्षेत्रफल। फोटो पर एक फ़ेवरेट बटन काफ़ी है।

रियल एस्टेट ऐप में कितने टैब होने चाहिए?

चार अच्छी संख्या है: Home, Saved, Messages और Profile। ऐसे दो टैब से बचें जो एक ही जगह जैसे सुनाई दें, जैसे Favorites और My Properties।

कैसे दिखाएँ कि कौन सी कैटेगरी चुनी गई है?

चुने हुए चिप को ब्रांड रंग से भरें और बाकी को न्यूट्रल रखें। सर्कल के नीचे टेक्स्ट रंग का छोटा सा बदलाव आसानी से छूट जाता है।

स्रोत

• दोनों स्क्रीन हमारी अपनी हैं, Figma में डिज़ाइन और मापी गईं।
• फोटो Unsplash से, Luke van Zyl, A. L. Brown और Annie Spratt की, Unsplash License के तहत।
• Apple Human Interface Guidelines: Tab bars।
• Apple Human Interface Guidelines: Typography, iOS टेक्स्ट साइज़।
• पहली बार App Brainy पर कैरोसेल के रूप में प्रकाशित।