ड्रैग-एंड-ड्रॉप के साथ इंटरफ़ेस: उपयोगकर्ता को भ्रमित करने के लिए कैसे नहीं?

मुझे यकीन है कि सभी को ड्रैग-एंड-ड्रॉप इंटरफेस के साथ काम करना था, और कई को उन लोगों के साथ सॉफ्टवेयर विकसित करना था। ज्यादातर मामलों में, लक्ष्य वस्तु पर एक ड्रैग करने योग्य वस्तु की एक बूंद के तथ्य को इस तथ्य पर स्थापित किया जाता है कि माउस कर्सर के निर्देशांक ने माउसअप, ड्रैगटॉप और अन्य जैसे इवेंट हैंडलिंग में लक्ष्य ऑब्जेक्ट के बाउंडिंग बॉक्स को मारा।

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




तदनुसार, इसे इस तरह से संसाधित करने का निर्णय लिया गया:

• यदि लक्ष्य वस्तु के साथ एक माउस संपर्क है, तो उस पर ड्रॉप सख्ती से होगा
• यदि नहीं, तो लक्ष्य वस्तु के बाउंडिंग बॉक्स के साथ ड्रैग करने योग्य ऑब्जेक्ट के बाउंडिंग बॉक्स पर ध्यान दें
  
  • यदि केवल एक ड्रैग करने योग्य वस्तु के साथ संपर्क है - सब कुछ स्पष्ट है, तो उस पर ड्रॉप करें
  • लेकिन दो या अधिक के साथ संपर्क एक अस्पष्ट स्थिति है, जहां ड्रॉप करना अस्पष्ट है

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

बैकलाइट।

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

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

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

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

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