टैचेव इंटरफेस की डिज़ाइन सुविधाएँ

यह स्पर्श लेख के लिए मूल डिजाइनिंग का अनुवाद है।



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

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

अंगूठे का नियम

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

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

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



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

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

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



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

मुझे रोबोट

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



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

Android उपकरणों पर, नेविगेशन और नियंत्रणों को सबसे ऊपर रखा जाना चाहिए। यह iPhone उपकरणों पर उपयोग किए जाने वाले सिद्धांत के विपरीत है, जहां होम बटन अनुप्रयोगों के साथ काम करने में हस्तक्षेप नहीं करता है, जैसा कि एंड्रॉइड बटन के साथ होता है। एंड्रॉइड (बाएं) और iPhone (दाएं) के लिए फोरस्क्वेयर एप्लिकेशन की तुलना करें।

इंटरनेट: आवेदन के अंदर आवेदन

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

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

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

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



ल्यूक व्रॉब्ल्वस्की इस दृष्टिकोण के निम्नलिखित फायदों पर जोर देते हैं:

"यहां हम नेविगेशन तत्वों का एक न्यूनतम सेट (शीर्ष पर एकमात्र लिंक) का उपयोग करते हैं, जबकि उपयोगकर्ता पहले आसानी से सामग्री से परिचित हो सकते हैं, और उसके बाद ही नेविगेशन से निपट सकते हैं। यह मेनू किसी अन्य मेनू की नकल नहीं करता है, और इसके संचालन (सबसे सुखद भाग) के लिए केवल एक सरल लिंक-लिंक की आवश्यकता होती है। हां, हां, कोई फैंसी जावास्क्रिप्ट, ओवरले या अलग नेविगेशन पृष्ठ नहीं है - केवल पृष्ठ के निचले भाग में बाध्यकारी। यह कभी आसान नहीं है - यह HTML 0. जैसा है। ”

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

• iPhone अनुप्रयोग नियंत्रण स्क्रीन के नीचे रखा जाना चाहिए;
• एंड्रॉइड एप्लिकेशन नियंत्रण को स्क्रीन के शीर्ष पर रखा जाना चाहिए;
• वेब एप्लिकेशन नेविगेशन तत्वों को पृष्ठ के नीचे रखा जाना चाहिए (और स्क्रीन के नीचे नहीं)।

लेकिन ये सिफारिशें मुख्य रूप से फोन के बारे में हैं। बड़े स्पर्श उपकरणों के बारे में क्या? जब यह iPad जैसे उपकरणों की बात आती है, तो डिजाइन नियम फिर से बदलते हैं।

गोलियाँ - कोनों में

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

इन सभी पदों में, उपयोगकर्ता की उंगलियां डिवाइस स्क्रीन के विभिन्न हिस्सों में होती हैं। इसके अलावा, प्रत्येक स्थिति में, उपयोगकर्ता डिवाइस को एक निश्चित दूरी पर रखता है। सभी के सबसे करीब, वह iPad को एक स्थायी स्थिति में और दूर स्थित झूठ बोलने की स्थिति में रखेगा।

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

आईपैड टैबलेट के लिए अनुप्रयोगों में, फोन के विपरीत, मुख्य नियंत्रण और बटन को ऊपरी कोनों में रखा जाना चाहिए , क्योंकि यह वह जगह है जहां iPad को चुनने वाले उपयोगकर्ता के अंगूठे स्थित हैं। एक अच्छे उदाहरण के रूप में, यहाँ iPad के लिए Instapaper और Twitter ऐप्स हैं।





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

संक्षेप में देना

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



तो क्या चुनना है - ऊपर या नीचे? चलिए इसका पता लगाते हैं।

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

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

अकेला नहीं छूटेगा

उपयोगकर्ताओं द्वारा डिवाइस को नियंत्रित करने के तरीके के समान, नियंत्रण के स्थान को निर्धारित करता है, उपयोगकर्ताओं की उंगलियों का आकार, बदले में, इन तत्वों के आकार को निर्धारित करता है। स्पर्श इंटरफेस के तत्व पर्याप्त बड़े होने चाहिए ताकि उपयोगकर्ता को याद न हो और स्क्रीन पर कड़ी मेहनत के बिना उन्हें प्राप्त कर सके।

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

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

आदर्श रूप से, स्पर्श इंटरफ़ेस के सभी तत्वों का आकार कम से कम 44 x 44 होना चाहिए। लेकिन यहाँ, कहीं और के रूप में, किसी को अक्सर समझौता समाधान के लिए देखना पड़ता है। यहां तक ​​कि मानक iPhone का आकार कभी-कभी घोषित 44 पिक्सेल से विचलित हो जाता है। उदाहरण के लिए, कीबोर्ड बटन का आकार 44 डॉट ऊंचा है और केवल 30 डॉट्स चौड़ा है। लैंडस्केप ओरिएंटेशन में, बटन की चौड़ाई क्रमशः 44 अंक है, और ऊंचाई क्रमशः 38 अंक है।यहां, Apple डेवलपर्स के पास पैंतरेबाज़ी के लिए बहुत जगह नहीं है: यह अत्यंत महत्वपूर्ण है कि संपूर्ण QWERTY कीबोर्ड दृष्टि में है, और यदि आप सभी कुंजियों का आकार 44 x 44 पर सेट करते हैं, तो आप उन्हें एक स्क्रीन पर फिट नहीं कर सकते। कुछ त्याग करना पड़ता है।

यहां एक अच्छा नियम है जो तंग स्थानों में टचस्क्रीन इंटरफ़ेस तत्वों को विकसित करने में मदद करता है। यदि, उदाहरण के लिए, एक इंटरफ़ेस तत्व की चौड़ाई कम से कम 44 अंक है, तो आवश्यक होने पर ऊंचाई 30 अंक तक कम की जा सकती है और इसके विपरीत। इसलिए, टच इंटरफ़ेस के किसी भी तत्व का वास्तविक न्यूनतम आकार 44 x 30 होना चाहिए।

मुझे धक्का मत दो

इस लेख के लेखक ने अपने बर्बाद हुए युवाओं के कई वर्षों को एक सुरुचिपूर्ण कैसियो कैलकुलेटर कलाई घड़ी की कंपनी में बिताया, जिसे उन्होंने अंततः केवल 1985 में भाग लिया। बटन वे केवल छोटे थे, इसके अलावा, उन्होंने लेखक को स्नातक पार्टी का राजा बनने से रोका ... लेकिन यहां तक ​​कि इसे उनका मुख्य दोष नहीं कहा जा सकता है। तथ्य यह है कि उपरोक्त बटन बहुत करीब से स्थित थे। आप "5" दबाने की कोशिश करते हैं, लेकिन अंत में आप "2" या "8" दबाते हैं - परिणाम की भविष्यवाणी करना असंभव है, शुद्ध लॉटरी, कैलकुलेटर नहीं। दूसरे शब्दों में, बटन का आकार केवल निर्धारण कारक नहीं है: आपको बटन के बीच की दूरी के बारे में सोचने की जरूरत है।


जॉन रॉवलिनसन द्वारा फोटो

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

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



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

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

द्वारा पोस्ट किया गया: जोश क्लार्क