एक प्रगतिशील स्थान फ़िल्टर विकसित करें

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

एक सरल-दिखने वाला तत्व - यह अंततः उपयोगकर्ता इंटरफ़ेस को नुकसान पहुंचा सकता है। इसलिए, कभी-कभी पहिया को सुदृढ़ करने के लिए सबसे अच्छी परियोजनाओं की आवश्यकता होती है।

निम्नलिखित उदाहरण आपको यह समझने में मदद करेंगे कि क्या दांव पर है।
uberVU एक सामाजिक रूप से उन्मुख, मीडिया-विश्लेषणात्मक मंच है जो अपने उपयोगकर्ताओं के लिए बड़ी मात्रा में डेटा एकत्र करता है।



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



स्थान फ़िल्टर हमारे लिए एक उदाहरण के रूप में महान है। हमने क्रिश्चियन होल्स्ट के लेख " देश चयन मेनू को फिर से डिज़ाइन करना " पढ़ा , जिसमें इस तत्व के डिजाइन में सुधार के लिए उत्कृष्ट सुझाव हैं, लेकिन हमारी सभी समस्याओं को पूरी तरह से हल नहीं करता है।

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

मुझे आशा है कि विकास कार्य स्पष्ट हैं। अगला, हम उन्हें हल करने के लिए एक सुंदर तरीका दिखाते हैं।

कार्य 1: त्वरित विकल्प

क्या होगा यदि उपयोगकर्ता सटीक स्थान जानता है? आसानी से। यह ऑटो-प्रतिस्थापन के अतिरिक्त द्वारा हल किया जाता है। उपयोगकर्ता 3 वर्णों में प्रवेश करने के बाद, विकल्प दिखाई देते हैं।



यह मॉडल हमेशा ठीक काम करता है, सिवाय इसके कि जब क्वेरी कई समान परिणाम देता है। यदि ऐसा होता है, तो उपयोगकर्ता स्वयं वांछित विकल्प पर क्लिक करके इस अस्पष्टता को हल कर सकता है। इष्टतम समाधान नहीं। मान लें कि कोई उपयोगकर्ता लंदन, यूके को फ़िल्टर करना चाहता है। वह "लोंड" में प्रवेश करता है, और हमने सही अनुमान लगाया - लंदन ... लेकिन उपयोगकर्ता को किस तरह के लंदन की आवश्यकता है? जाहिर है, ब्रिटेन में लंदन हर किसी के लिए दिमाग में आता है जो कनाडा से नहीं है। आपको जानकर हैरानी होगी कि लंदन ओंटारियो, कनाडा में है। यही है, हमें कम से कम 2 विकल्प देने चाहिए:

1. लंदन, ब्रिटेन
2. लंदन, ओंटारियो, कनाडा।

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

उद्देश्य 2: अनुसंधान को बढ़ावा देना

हम अपने विकास को जटिल बनाते हैं। जबकि कुछ उपयोगकर्ता यह जानते हैं कि वे क्या चाहते हैं, अन्य लोग सोशल मीडिया के डेटा को जानने में सक्षम होना चाहते हैं। उदाहरण के लिए, एक व्यक्ति एक निश्चित उत्पाद के प्रक्षेपण की निगरानी करता है और वह जिज्ञासु होता है जहां लोग इस उत्पाद पर चर्चा करते हैं। क्या यह बहुत अच्छा होगा यदि वह अपने लिए शोध कर सके?



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



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

कार्य 3: महत्वपूर्ण डेटा हाइलाइट करें

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

कार्य 4: वापसी

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

हमारा समाधान मूल स्थान से शुरू होने वाली सूची के साथ सबसे महत्वपूर्ण स्थानों की सूची को बदलना है, जैसा कि वेबसाइट नेविगेशन में किया गया है। आप अपने कार्यों को सभी तरह से ट्रैक कर सकते हैं और प्रारंभिक स्थिति में लौट सकते हैं। नीचे स्क्रीनशॉट देखें:



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

निष्कर्ष में: सब कुछ एक साथ उपयोग करना

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

सबक सीखा

हम मानते हैं कि हमने जो फ़िल्टर बनाया है, वह कई वेब अनुप्रयोगों की समस्या का एक उत्कृष्ट समाधान है, जिन्हें स्थान के हिसाब से प्रगतिशील फ़िल्टरिंग की आवश्यकता है। इस मामले में, मानक टेम्पलेट केवल काम नहीं करेंगे। और हमारे उपयोगकर्ता समाधान से प्रसन्न हैं!

हमारे निर्णय से अधिक महत्वपूर्ण है, यह वह रास्ता है जिससे हम इसे बनाने के लिए गए थे। शायद आप भी यही कर रहे हैं:

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

इस प्रक्रिया ने हमारी आंखें खोल दी हैं कि कई डिजाइनर बस मानक टेम्पलेट्स को रीसायकल करने लगते हैं, जो एक उप-अपनाने का अनुभव होता है। मुझे पता है कि हमने भी यही किया। क्या आपके वेब एप्लिकेशन में ऐसे स्थान हैं जहां आप ऐसा कर सकते हैं?

एप्लिकेशन के प्रमुख इंटरैक्शन पर एक नज़र डालें, इसके सही लक्ष्यों को निर्धारित करें और ईमानदारी से मूल्यांकन करें कि क्या आपका मानक समाधान पूरी तरह से अपना काम करता है। यदि नहीं, तो काम करें। इसे देखें, एक और समस्या के रूप में नहीं जिसे हल करने की आवश्यकता है, लेकिन कुछ अद्भुत बनाने के अवसर के रूप में!

_{यह लेख यूक्रेनी अनुवाद में भी उपलब्ध है।}