संपत्ति खोज इंटरफ़ेस

मुझे लगता है कि आप में से कई, प्रिय आदतन, कम से कम एक बार घर किराए पर लेने या खरीदने के मुद्दे को तय करना था। फिर, शायद, आप Google पर गए, "एक अपार्टमेंट किराए पर लेना <शहर>", जैसे कुछ टाइप किया, जिसके बाद ये "अद्भुत" इंटरफेस कई टैब में लोड होने लगे:


मैं इन इंटरफेस की समस्याओं के बारे में बात नहीं करूंगा। किसी भी मामले में, मेरा मानना ​​है कि लाखों लोग जो हर दिन रहने के लिए जगह ढूंढने की कोशिश करते हैं, वे निश्चित रूप से सर्वश्रेष्ठ के लायक हैं।

इस लेख में मैं आपको बताऊंगा कि कैसे जल्दी और सस्ते में अचल संपत्ति खोजने के लिए एक पूरी तरह से सभ्य साइट का एक प्रोटोटाइप बनाएं। मैं प्रेमियों को बिल्ली के नीचे प्रयोज्य के बारे में पढ़ने के लिए कहता हूं।

समस्या का बयान

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

एक पेंसिल लेने से पहले

इंटरफ़ेस का उपयोग कंप्यूटर साक्षरता के विभिन्न स्तरों और विभिन्न आदतों वाले लोगों द्वारा किया जाएगा। लेकिन, जब हम एक पेंसिल उठाते हैं, तो उसके बारे में जानना अपने आप में बेकार हो जाएगा, क्योंकि हमारे सिर में हमारे लक्षित उपयोगकर्ता के चित्र नहीं होंगे।

इस समस्या को हल करने के लिए, इन सभी लोगों और उनके उपयोग के अनुभवों की एक सामूहिक छवि बनाना आवश्यक है। ऐसा करने के लिए, आपको थोड़ी कल्पना दिखाने की आवश्यकता है। मैं भाग्यशाली था, एक तरह के व्यक्ति ने मुझे अच्छी ट्रैफिक वाली ऐसी साइट के यैंडेक्स.मेट्रिक तक पहुंच दी, इसलिए कल्पना के अलावा मेरे पास कुछ आंकड़े भी थे।

हम मानसिक मानचित्र बनाने के लिए एक उपकरण लेते हैं और अपने चरित्र के साथ आते हैं। कुछ तथ्य पूरी तरह से काल्पनिक हो सकते हैं, लेकिन साथ ही उन्हें संभवतः, सबसे अधिक संभावना होना चाहिए:


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


मुझे कहना होगा, मैं उपयोगकर्ताओं के लंबे और विस्तृत चित्रों का समर्थक नहीं हूं, सिवाय इसके कि यह किसी भी उच्च स्तरीय ऑटोमेशन प्रणाली का सवाल नहीं है। अभ्यास से पता चला है कि चित्र को जितना सरल और छोटा किया जाता है, उतनी बार डिजाइनर प्रोटोटाइप के निर्माण के दौरान इसका उपयोग करेगा, और आखिरकार, इसके लिए एक चित्र बनाया जाता है।

अब एक पेंसिल लेने का समय है

एक पेंसिल ग्राहक के साथ वैचारिक मुद्दों को समन्वित करने के लिए पर्याप्त स्तर पर एक घंटे में एक इंटरफ़ेस प्रोटोटाइप प्राप्त करने का सबसे सुरक्षित तरीका है, इसलिए मुझे वास्तव में एक पेंसिल पसंद है। वह मानव-दिन और तंत्रिकाओं का एक गुच्छा भी बचाता है, और मॉनिटर से थकी हुई आंखों को विचलित करने का एक उत्कृष्ट बहाना भी है। एक पेपर प्रोटोटाइप के निर्माण के दौरान मुख्य बात यह नहीं है कि इसे विस्तार से बताएं: प्रत्येक ऐसे प्रोटोटाइप में एक निश्चित सीमा बिंदु होता है, जिससे शुरू होने वाले सभी पेपर में कंप्यूटर की तुलना में एक इंटरैक्टिव एनालॉग में तेज होते हैं।

आइए अपने इंटरफेस पर वापस जाएं। पहले आपको पृष्ठ पर मुख्य ब्लॉकों और उनके स्थान पर निर्णय लेने की आवश्यकता है। हमारे माशा में काम का एक छोटा सा एचडी मॉनिटर है, जो घर पर एक आईपैड है। दोनों स्क्रीन आयताकार हैं। वह किसी प्रकार की नेटबुक भी रख सकती थी, जो आयताकार भी होती है, लेकिन एक छोटे संकल्प के साथ। वास्तव में, हम एक आयत बनाते हैं:


चूंकि माशा अचल संपत्ति की तलाश करना चाहता है, उसे कम से कम इन वस्तुओं की सूची की आवश्यकता होगी। बेशक, उनमें से 10 नहीं हैं, और आपको इस सूची से फ़िल्टर के साथ एक ब्लॉक भी जोड़ना चाहिए। माशा के मॉनिटर पर, क्षैतिज क्षेत्र विशेष रूप से आयत के स्थान का उपयोग करने के मामले में मूल्यवान हैं, इसलिए चलो ऊर्ध्वाधर पट्टी को फ़िल्टर करते हैं। वस्तुओं की सूची की एक लंबी स्क्रॉल के बाद फ़िल्टर को वापस करने के साथ समस्याओं का तुरंत हल किया जाता है: फ़िल्टर बस हमेशा उसी तरफ, एक ही स्थान पर होगा।

माशा Vkontakte से बाहर क्रॉल नहीं करता है, इसलिए वह बाईं ओर कुछ चुनने और दाईं ओर सामग्री को अवशोषित करने से अधिक परिचित है। वैसे भी, ऊर्ध्वाधर नेविगेशन के लिए पारंपरिक क्षेत्र बाएं पृष्ठ बार है। इसलिए, हम शुरुआत के लिए अपने फ़िल्टर बाईं ओर रखेंगे, और यदि हम समझते हैं कि यह दाईं ओर बेहतर है, तो हम इसे दाईं ओर रखेंगे (आखिरकार, यह एक पेपर प्रोटोटाइप है, बस इतना ही):


माशा के लिए, मेट्रो, पार्क और प्रमुख सड़कों से दूरी महत्वपूर्ण है। यह सब दिखाने का सबसे तेज़ तरीका नक्शे पर एक डॉट के साथ ऑब्जेक्ट के पते को इंगित करके है। हमारे मुद्दे में कई ऑब्जेक्ट होंगे, इसलिए हम इन वस्तुओं के लिए एक सामान्य नक्शा बनाएंगे:


ऐसा लगता है कि जब माशा सब कुछ से खुश है, तो चलिए विवरणों पर चलते हैं। जैसा कि मैंने कहा, उनके साथ नहीं जाना महत्वपूर्ण है, लेकिन कुछ प्रमुख तत्व अभी भी दिखाने लायक हैं।

फिल्टर से शुरू करते हैं। सामान्य तौर पर, अचल संपत्ति की वस्तुओं में बहुत सारे पैरामीटर होते हैं, लेकिन उन्हें सशर्त रूप से दो समूहों में विभाजित किया जा सकता है: आवश्यक और अधिकांश द्वारा आवश्यक नहीं। दूसरे समूह के पैरामीटर हमेशा किसी तरह के पुल-आउट या ड्रॉप-डाउन तत्व में छिपे हो सकते हैं, इसलिए हमने उनके बारे में अभी तक नहीं सोचा है। पहले समूह से, हमारे पास अभी भी घोषणा का प्रकार (किराया, बिक्री, आदि), संपत्ति का प्रकार, मेट्रो से दूरी और कीमत है।

फ़िल्टर ब्लॉक में केवल प्रासंगिक इंटरफ़ेस तत्व होने चाहिए। उदाहरण के लिए, यदि ऑब्जेक्ट "रूम" का प्रकार चुना गया है, तो अपार्टमेंट में कमरों की संख्या का विकल्प छिपा होना चाहिए। हमारा माशा धीरे-धीरे प्रिंट करता है (किंवदंती के अनुसार, लंबे नाखूनों के कारण) और केवल एक माउस का उपयोग करना पसंद करता है। इसलिए, माशा कीबोर्ड का उपयोग किए बिना सभी खोज मापदंडों को सेट करने में सक्षम होना चाहिए। हमें फ़िल्टर के साथ ऐसा ब्लॉक मिलता है (मैं प्रोटोटाइप के बाकी हिस्सों को धुंधला कर देता हूं ताकि इससे विचलित न हो):


आइए वस्तुओं की सूची पर चलते हैं। आइए सोचते हैं, माशा लगभग एक ही पैरामीटर की दो वस्तुओं में से दो का चयन क्यों कर सकते हैं? जाहिरा तौर पर, क्योंकि इस चयनित वस्तु की तस्वीर आदर्श अपार्टमेंट की छवि के करीब है, जो माशा के सिर में है। चूंकि पैरामीटर आमतौर पर ऑब्जेक्ट से ऑब्जेक्ट में ज्यादा नहीं बदलते हैं, पहली जगह में उसकी आँखों को एक तस्वीर (बेशक, सबसे अच्छा एक) फिसलने की आवश्यकता होती है, और उसके बाद ही कीमत और बाकी सब कुछ। यह संभव है कि बाकी सब कुछ यथासंभव व्यवस्थित और मामले में प्रस्तुत किया जाए, ताकि प्रत्येक विज्ञापन के मापदंडों को पहचानने पर मूल्यवान मानव-सेकंड खर्च न करें। मैंने टैग के रूप में मानक ऑब्जेक्ट पैरामीटर का एक सेट बनाने का फैसला किया।

सूची के ऊपर, पाए गए विज्ञापनों की संख्या और सॉर्टिंग का प्रकार रखें। स्क्रॉल करते समय बैचों में सर्वर से विज्ञापन लोड किए जाएंगे। जब आप किसी विज्ञापन पर होवर करते हैं, तो पसंदीदा में जोड़ने के लिए बटन और मानचित्र पर किसी ऑब्जेक्ट को हाइलाइट करने के लिए बटन दिखाई देंगे। यहाँ क्या हुआ:


यह कार्ड को स्वयं जोड़ना है और मुख्य इंटरफ़ेस तैयार है:


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

इंटरएक्टिव प्रोटोटाइप

एक इंटरैक्टिव प्रोटोटाइप बनाने के लिए, आप एक नोटबुक खोल सकते हैं और एक टन HTML कोड लिख सकते हैं। हालांकि, मैं अधिक दिलचस्प कक्षाओं पर समय बिताना पसंद करता हूं, इसलिए मैं गतिशील प्रोटोटाइप के लिए विशेष सॉफ्टवेयर का उपयोग करता हूं, अर्थात्, अच्छा पुराना एक्सुर।

शुरू करने के लिए, हम इंटरएक्टिव प्रोटोटाइप में स्थानांतरित करेंगे जो पहले से ही कागज पर तैयार है। यहां सब कुछ सरल है, समझाने के लिए कुछ खास नहीं है, यह तकनीक का मामला है:


हमारे पास केवल दो इंटरफेस की कमी है: मेट्रो स्टेशनों की पसंद और विज्ञापन का पेज। शुरुआत करते हैं सबवे से।

हमारा माशा रिंग लाइन के बाहर नीली शाखा के पूर्व में एक अपार्टमेंट की तलाश में है। वह कंपनी में विज्ञापन भी देखती है क्योंकि उसका पति वहाँ काम करता है। उसे दो क्लिक में यह सब चुनने दें:


मेट्रो स्टेशन चुने गए। यह केवल एक घोषणा पृष्ठ के साथ आता है। वास्तव में, किराए पर लेना, और इससे भी अधिक एक घर खरीदना, माशा के जीवन में एक महत्वपूर्ण मील का पत्थर है, इसलिए वह बहुत सारी बारीकियों की परवाह करती है: क्या उसकी पसंदीदा कोठरी में परिवहन के लिए एक मालवाहक लिफ्ट है, वह उस बालवाड़ी से कितनी दूर है जहां वह बच्चे को ले जाएगी, चाहे घर में निवासियों के लिए एक विशेष पार्किंग है, क्योंकि माशा अनायास पार्क करना पसंद नहीं करती है। हम ऑब्जेक्ट के बारे में जानकारी के इस सभी अराजकता को तीन भागों में विभाजित करेंगे: अपार्टमेंट के बारे में, घर के बारे में और क्षेत्र के बारे में जानकारी। आइए इन सभी को क्रमिक रूप से एक पृष्ठ पर रखें ताकि वर्गों के बीच जल्दी से जा सकें। ऐसा करने के लिए, हम शीर्ष पर नेविगेशन बार को ठीक करते हैं ताकि वह स्क्रॉल क्षेत्र में न आए:


वह सब है। आप यहां लाइव प्रोटोटाइप पर क्लिक कर सकते हैं ।

निष्कर्ष

एक पेंसिल और एक माउस के साथ सरल जोड़तोड़ के माध्यम से, हमें एक प्रोटोटाइप इंटरफ़ेस मिला जिसमें हमारा माशा (और इसलिए लक्षित दर्शकों का बहुमत) आसानी से और आराम से उपयुक्त आवास की तलाश में अपने जीवन के सर्वश्रेष्ठ दिनों को बैठ सकता है। इस तरह के एक इंटरफ़ेस की शुरूआत से परिणाम केवल सकारात्मक हो सकता है: वफादार ग्राहक, एक अचल संपत्ति एजेंसी के लिए रूपांतरण और यातायात में वृद्धि; आराम और समय इंटरफेस को समझने की कोशिश करने के लिए बचाया - ग्राहकों के लिए।

अंत में, मैं अपने आप को थोड़ा पीआर की अनुमति देता हूं।
सूचना प्रणाली आपके व्यवसाय का अंतिम स्थान नहीं है, और आप पहले से ही महसूस करते थे कि भयंकर प्रतिस्पर्धा की स्थिति में प्रयोज्यता "होना चाहिए" है? फिर हमारे प्रयोज्य ब्यूरो की साइट पर आपका स्वागत है। हम मदद करेंगे यदि विलेख से नहीं, तो अच्छी सलाह से - निश्चित रूप से।

इस लेख में अपने लिए कुछ नया नहीं मिला? क्या आप वाकई बेहतर कर सकते हैं? फिर हम hr@uxman.ru पर आपके उत्कृष्ट प्रोटोटाइप पोर्टफोलियो की प्रतीक्षा कर रहे हैं। शायद आपके लिए कुछ दिलचस्प पहेलियाँ हैं।

आपका ध्यान के लिए धन्यवाद और आपकी टिप्पणियों का इंतजार रहेगा!