मोबाइल उपकरणों के लिए डिज़ाइनिंग इंटरफेस: पोर्ट्रेट और लैंडस्केप ओरिएंटेशन

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

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

द्वितीयक स्क्रीन को सक्रिय करने के लिए अभिविन्यास डिवाइस का उपयोग करना

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

चित्र और परिदृश्य मोड में YouTube मोबाइल इंटरफ़ेस।

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

लिंक्डइन पर कार्डमंच में इसकी द्वितीयक स्क्रीन के बारे में दृश्य संकेतों का अभाव है।

ओरिएंटेशन डिज़ाइन मॉडल

UX पेशेवरों की मदद करने के लिए, मैंने अभिविन्यास के निर्माण के लिए चार बुनियादी मॉडल की पहचान की।

तरल पदार्थ

यह इंटरफ़ेस बस स्क्रीन के आकार के अनुसार है।

Skype मोबाइल इंटरफ़ेस में, पोर्ट्रेट से परिदृश्य पर स्विच करते समय आइकन स्थिति बदलते हैं।

पॉकेट का मोबाइल इंटरफ़ेस, एक ही लेआउट केवल अलग-अलग चौड़ाई।

विस्तारित

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

IPad के लिए IMDb।

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

अतिरिक्त

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

वित्त आवेदन की मुख्य और अतिरिक्त खिड़की का एक उदाहरण।

निरंतर

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

स्मार्ट रिमोट और प्रोग्राम गाइड।

डिफ़ॉल्ट अभिविन्यास

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

पोर्ट्रेट मोड में, कोई नियंत्रण नहीं हैं।

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

संदर्भ की समझ

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



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

IPad के लिए बेट्टी क्रोकर की रसोई की किताब एक सहज ज्ञान युक्त अंतरफलक का एक उदाहरण है।

ओरिएंटेशन टिप्स

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

शीर्षक बार

आवेदन की शुरुआत में शीर्षक का संकेत उपयोगकर्ता के लिए एक सूक्ष्म टिप है। अतिरिक्त स्क्रीन पर अभिविन्यास का उपयोग करते समय यह विधि विशेष रूप से महत्वपूर्ण है, और अतिरिक्त कार्यक्षमता के विश्वसनीय अनुस्मारक के रूप में कार्य करती है।



नोट: यह विधि उपयोगकर्ता द्वारा अभिविन्यास मोड कार्यात्मक को समझने में 100% दक्षता प्रदान नहीं करेगी; ग्राफिक पॉइंटर्स या कोच मार्क्स का उपयोग अधिक विश्वसनीय तरीका माना जा सकता है।

ओरिएंटेशन आइकन

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



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


विंडो शीर्षक में बटन टॉगल करें।

बशर्ते यह आइकन एक मानक बन जाए, यह अभिविन्यास के एक अच्छे संकेतक के रूप में काम कर सकता है।


स्क्रीन के कोने में ओरिएंटेशन स्विच।

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

पर्दा

काम के पर्दे का चित्रण।

विचार एक वापस लेने योग्य तत्व को दिखाने के लिए है जो पर्दे की तरह एक अतिरिक्त स्क्रीन को बंद या खोल देगा। जिसे यूजर्स खुलकर और क्लोज कर पाएंगे।

निष्कर्ष

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