टच डिवाइस पर इशारों और UX

1) इशारे क्यों और कब वे उचित हैं

• अनुमानित (मंच की उम्मीदों के अनुरूप)।
• पता लगाने योग्य (उपयोगकर्ता अनुमान लगाता है कि इशारा उपलब्ध है)।
• प्रतिक्रिया द्वारा समर्थित (दृश्य/ऑडियो/स्पर्श)।
• गलत स्पर्श और विभिन्न डिवाइस कब्रों के साथ विश्वसनीय।

सिद्धांत: पहले स्पष्ट यूआई तत्व - फिर इशारों को संकेत दें - फिर उन्नत छिपे हुए इशारे। क्रिटिकल एक्शन - हमेशा स्पष्ट बटन के साथ डुप्लिकेट करें।

2) इशारा वर्गीकरण

टैप/डबल-टैप/लॉन्ग- प्रेस - चयन/जोड़ें। मेनू/उन्नत क्रियाएं।

स्वाइप (माउंटेन/वर्ट) - नेविगेशन, विलोपन/संग्रह, कार्यों का प्रकटीकरण।

ड्रैग-एंड-ड्रॉप - सॉर्टिंग, ट्रांसफर, पदानुक्रम परिवर्तन।

पिंच/स्प्रेड (जूम) - स्केल (दीर्घाओं, नक्शे, रेखांकन)।

घुमाएँ - दुर्लभ, संपादकों/दृश्यों में उपयुक्त।

पुल-टू-रिफ्रेश/रिलीज-टू-एक्शन - अद्यतन/द्वितीयक क्रिया।

एज-स्वाइप - सिस्टम नेविगेशन (बैक/मेनू), सावधानी से वेब पर।

बहु-स्पर्श - उन्नत परिदृश्यों के लिए 2-3 उंगली के इशारे।

सिस्टम इशारों - स्क्रीनशॉट, पीआईपी, सिस्टम "बैक" (एंड्रॉइड) - विरोधाभासों को ध्यान में रखें।

3) एर्गोनोमिक्स और अंगूठे क्षेत्र

अंगूठे-क्षेत्र: पहुंच क्षेत्र - स्क्रीन के निचले आधे हिस् कुंजी CTA, चिप फिल्टर और टैब सबसे नीचे हैं।

हिट-लक्ष्य: न्यूनतम 44 × 44 पीटी/48 × 48 डीपी। छोटी वस्तुओं के लिए एक हिट-स्लॉप जोड़ें।

एज इंडेंट्स: झूठे एज-स्वाइप को कम करें; महत्वपूर्ण बातचीत - किनारे के करीब नहीं।

अभिविन्यास: चित्र - डिफ़ॉल्ट; परिदृश्य - दो अंगूठे के लिए अनुकूलित करें (विशेष रूप से खेल/वीडियो में)।

4) पहचान और प्रशिक्षण

अफोर्डेंस: इशारे के संकेत (किनारे पर अर्ध-दृश्यमान कार्ड, शीट के लिए नीचे "कलम")।

माइक्रो-ऑनबोर्डिंग: एक-बंद सुराग ("स्वाइप टू डिलीट"), घुसपैठ नहीं, "गॉट इट" के साथ।

परीक्षण इशारा: पैटर्न की पहली उपस्थिति पर डेमो एनीमेशन।

दोहराव: इशारों को समान सामग्री के साथ सभी स्थानों पर एक ही तरह से काम करना चाहिए।

5) प्रतिक्रिया: दृश्य, स्पर्श, ऑडियो

दृश्य: छाया, लंबन, गाइड से चिपके रहना, पुल-टू-रिफ्रेश होने पर प्रगति संकेतक।

हैप्टिक्स: ड्रैग हथियाने पर हल्का आवेग, अधिक "भारी" - जब छोड़ ना/सफलता।

ऑडियो (मध्यम): खेल या मूर्त घटनाओं में लघु क्लिक/क्लिक (जीत/त्रुटि)।

रद्दीकरण में कहा गया है: विनाशकारी स्वाइप के साथ दृश्य "लाल क्षेत्र", हटाने से पहले कंपन संकेत।

6) इशारा संघर्ष और प्राथमिकताएं

मान्यता पदानुक्रम: आंतरिक स्क्रॉल> स्वाइप कार्ड> सिस्टम एज-बैक (वेब पर - इसके विपरीत)। इशारा-अखाड़ा/प्राथमिकताओं को कॉन्फ़िगर करें।

ऊर्ध्वाधर स्क्रॉल बनाम क्षैतिज स्वाइप: आंदोलन के 10-15 पीएक्स के बाद एक अक्ष को लॉक करें।

एज-स्वाइप बनाम खुद के इशारे: एक आंतरिक इंडेंट या "पेन" इशारा जोड़ें ताकि सिस्टम को बाधित न किया जा सके।

ग्लोबल बैक-जेस्चर (Android/iOS): अपेक्षित नेविगेशन को न तोड़ें - "बैक" बटन के साथ महत्वपूर्ण क्रियाओं की नकल करें।

7) स्क्रिप्टेड पैटर्न

7. 1 सूची और कार्ड

स्वाइप-एक्शन: शॉर्ट स्वाइप - क्रियाओं का संकेत (आइकन), लंबी - त्वरित क्रिया।

पूर्ववत प्रतिमान: विनाशकारी-इशारा शो स्नैकबार "रद्द" के बाद।

ड्रैग-रीऑर्डर: "हैंडल" पर खींचें; ऊर्ध्वाधर अक्ष को ठीक करें।

7. 2 नक्शे, दीर्घाएं, रेखांकन

स्केलिंग के लिए पिंच-जूम + डबल टैप।

जड़ ता और सीमा: लोचदार सीमाएँ, चिकनी जड़ ता।

ग्राफ पर बिंदु के "आवर्धक ग्लास "/विवरण के लिए टैप-होल्ड।

7. 3 नेविगेशन और ढाल

नीचे की चादर: हैंडल से इशारा खींचें, ढह गया/आंशिक/पूर्ण अवस्था; बंद करने के लिए स्वाइप-डाउन।

टैब/चिप्स: प्रगति संकेतक के साथ टैब के बीच क्षैतिज स्वाइप।

7. 4 खेल और तेज परिदृश्य

वन-हैंड प्ले: निचले किनारे पर बड़े सट्टेबाजी/एक्शन ज़ोन।

डबल इशारे: "रिपीट बेट" (पुष्टि हैप्टिक) के रूप में डबल टैप।

विनाशकारी पर दहलीज: 300 मीटर पर अपनी उंगली को "लॉक" करें या निष्पादित करने के लिए "रेड ज़ोन" के माध्यम से जाएं।

8) उपलब्धता (A11y)

सभी इशारों को बटन या मेनू आइटम के साथ डुप्लिकेट किया जाता है।

वॉयसओवर/टॉकबैक: सही विवरण और फोकस क्रम।

मोटर एक्सेसिबिलिटी: लॉन्ग-प्रेस (आइकन "⋮") के विकल्प, टच जोन में वृद्धि।

कंट्रास्ट और स्केल: इशारों को कार्रवाई करने का एकमात्र तरीका नहीं होना चाहिए।

9) प्रदर्शन और विश्वसनीयता

मुख्य इशारों के लिए INP (अगले पेंट के लिए बातचीत) ≤ 200 ms।

टच लेटेंसी: पहली प्रतिक्रिया से पहले लक्ष्य <50-100 एमएस (दृश्य कैप्चर/रोशनी)।

60 एफपीएस: ड्रैग/स्क्रॉल के लिए चिकनाई; हिलते समय भारी छाया और धुंधला बंद करें।

हिट-परीक्षण: ओवरलैप (z-index/overflow) से बचें - जाल "नरम" हैं।

पकड़ परीक्षण: दाएं हाथ/बाएं हाथ, अंगूठे/छोटी उंगली, खड़े/परिवहन में।

10) वेब बनाम मूल निवासी

वेब/पीडब्ल्यूए: निष्क्रिय श्रोताओं ('निष्क्रिय: सही') को स्क्रॉल करने के लिए, कुल्हाड़ियों को लॉक करने के लिए 'टच-एक्शन', अनावश्यक रूप से सिस्टम इशारों को इंटरसेप्ट करने से बचें।

iOS/Android मूल निवासी: सिस्टम पहचानने वाले (UIGestureActiver/Android GestureDetector), मानक हैप्टिक्स, भविष्यवाणी "बैक" (Android 14 +) का उपयोग करें।

वेबव्यू: पुल और सुरक्षित क्षेत्र, ढालों का पूर्वानुमानित बंद - वेब के अंदर, सिस्टम "बैक" को तोड़े बिना।

11) बहु-स्पर्श और उन्नत इशारे

दो उंगलियां: जूम बंद होने पर पैनिंग; कार्ड पर - add के लिए एक इशारा "दो उंगलियां नीचे"। परत।

तीन उंगलियां: केवल बिजली-उपयोगकर्ताओं के लिए; हमेशा एक विकल्प दें।

संयोजन: रेंज चयन/समूह आंदोलन के लिए लॉन्ग-प्रेस + खींचें।

12) सत्यापन, टेलीमेट्री, मैट्रिक्स

События: 'gesture _ start', 'gesture _ commit', 'gesture _ commit', 'latence _ ms', 'distence _ px', 'overscroll', 'miscroll' (ложный жест), 'undo _ used'।

केपीआई: सफलता दर, मिसफायर रेट, पूर्ववत दर, आईएनपी, टाइम-टू-एक्शन, इशारा संघर्ष के लिए ड्रॉप-ऑफ।

13) स्थानीयकरण और सांस्कृतिक अंतर

आरटीएल भाषाएँ: मिरर क्षैतिज इशारे और प्रतीक।

प्रतीकवाद: "स्वाइप लेफ्ट = हटाओ" सार्वभौमिक नहीं है - ऑनबोर्डिंग में पुष्टि करें।

टैक्टाइल पैटर्न: सिस्टम प्रोफाइल का उपयोग करें, वे पहले से ही उपयोगकर्ता से परिचित हैं

14) सुरक्षा और कीड़े

विनाशकारी इशारे - केवल पूर्ववत/पुष्टि के साथ।

एज स्वाइप को गलती से महत्वपूर्ण प्रक्रियाओं (भुगतान/सीसीएम) को बंद नहीं करना चाहिए।

शिवर सुरक्षा: इशारा शुरू करने से पहले गति सीमा (5-10 पीएक्स)।

अवरोधक राज्यों में इशारों को अक्षम करना (भुगतान लोडर, पुष्टि मोडल)।

15) टच टेबल/टैबलेट पैटर्न

दो-हाथ वाले परिदृश्य: नियंत्रण क्षेत्रों का पृथक्करण।

मल्टी-यूजर मोड: इशारे विरोध नहीं करते हैं, समय प्राथमिकता को छूते हैं।

बड़े हिट-लक्ष्य: 56-64 डीपी; ड्रैग ऑपरेशन के लिए दृश्य गाइड।

16) एंटीपैटर्न

केवल इशारा (कोई बटन नहीं) द्वारा छिपाया गया महत्वपूर्ण क्रिया।

इशारों जो सिस्टम के साथ संघर्ष करते हैं (एज-बैक, नोटिफिकेशन शेड)।

दृश्य "हाथापाई" और ध्वनि/वाइब के बिना लंबा प्रेस।

अक्षीय लॉक के बिना ऊर्ध्वाधर स्क्रॉलिंग के अंदर क्षैतिज स्वाइप।

"भारी" छाया/धुंधला जब खींचें → लैग और एफपीएस ड्रॉप।

आवेदन के विभिन्न भागों में असंगत इशारे।

17) कार्यान्वयन चेकलिस्ट (चरण दर चरण)

1. इशारा मानचित्र: कहाँ और क्या - के लिए विकल्प के साथ।

2. मान्यता प्राथमिकताएं: अक्षीय ताला, किनारे-सुरक्षित क्षेत्र, इशारा-अखाड़ा।

3. प्रतिक्रिया: दृश्य जाल, हैप्टिक्स प्रोफाइल, एनिमेशन ≤ 200 एमएस।

4. प्रदर्शन: FPS INP/60, ड्रैग/स्क्रॉल प्रोफाइलिंग।

5. ऑनबोर्डिंग: बंद करने की क्षमता के साथ संकेत और परीक्षण इशारे।

6. टेलीमेट्री: सफलता/मिसफायर/पूर्ववत, हीटमैप टच।

7. परीक्षण मैट्रिक्स: उपकरण, घनत्व, बाएं हाथ/दाएं हाथ, खराब नेटवर्क मामले।

8. प्रलेखन: डिजाइन प्रणाली में इशारा गाइड, उदाहरण और विरोधी मामले।

18) नीचे की रेखा

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