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

अनुवादक से । स्मार्टफोन और टैबलेट की बिक्री हर दिन बढ़ रही है, और यह पहले से ही मोबाइल उपकरणों के लिए इंटरफेस पर ध्यान देने की आवश्यकता को इंगित करता है। मोबाइल उपकरणों के लिए अनुप्रयोगों और साइटों का डिज़ाइन किन सिद्धांतों पर आधारित होना चाहिए? सभी उपयोगकर्ता अनुरोधों को कैसे संतुष्ट करें जो अधिक से अधिक मांग बन रहे हैं?
उपलब्ध पूर्वानुमान के अनुसार, 2011 के दौरान टैबलेट की बिक्री में काफी वृद्धि होगी, और स्मार्टफोन की बिक्री पारंपरिक फोन की बिक्री से काफी अधिक हो जाएगी। जैसा कि अभ्यास से पता चलता है, उपयोगकर्ता फ़ोन पर पहले से इंस्टॉल किए गए वेब नेविगेशन अनुप्रयोगों को पसंद करते हैं, जिन्हें विशेष रूप से खरीदने या डाउनलोड करने की आवश्यकता होती है। इसका क्या मतलब है? सबसे पहले, यह तथ्य कि वेब डेवलपर और डिज़ाइनर वर्तमान में मोबाइल उपकरणों की विशेषताओं को ध्यान में रखते हुए कार्य करते हैं। कार्य, यह ध्यान दिया जाना चाहिए, यह सबसे आसान नहीं है (प्रसिद्ध वेब डिज़ाइन विशेषज्ञ जैकब नीलसन द्वारा लेख देखें "मोबाइल सामग्री: दो बार जितना मुश्किल" - www.useit.com/alertbox/mobile-content-comprehension.html , रूसी अनुवाद- itopti। livejournal.com/2578.html , साथ ही www.mobileawesomeness.com पर कई डिजाइन उदाहरण)।
प्रयोज्य विशेषज्ञ पैट्रिक कॉक्स ने 10 सिद्धांत तैयार किए, जिन पर मोबाइल एप्लिकेशन और साइटों का विकास आधारित होना चाहिए ( www.ergonomie-interface.com/mobile-tactile-nomade/conception-site-web-mobile )। हम पाठकों को चर्चा के लिए आमंत्रित करते हैं; हमें खुशी होगी अगर कोई मोबाइल एप्लिकेशन के लिए इंटरफेस बनाने में अपना अनुभव साझा कर सके।


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

व्यावहारिक सिफारिशें:

1. छवियां समझ में सुधार करती हैं, लेकिन किसी भी चीज़ को निरूपित करने के लिए आत्मनिर्भर नहीं हैं। सीएसएस पृष्ठभूमि गुणों या अन्य तरीकों का उपयोग करके छवियों का प्रतिनिधित्व करते हैं।
सामग्री के प्रकार को इंगित करने के लिए टैग का उपयोग करें: उदाहरण के लिए, संक्षिप्त नाम को इंगित करने के लिए उन्हें रेखांकित या संक्षिप्त करें। टैग की एक विस्तृत सूची यहां पाई जा सकती है: www.webdesignfromscratch.com/html-css/list-of-html-tags-with-semantic-usage
2. एक दूसरे से जुड़ी सामग्री के बड़े ब्लॉक को उजागर करने के लिए केवल div टैग का उपयोग करें। अलग-अलग अनुच्छेदों को उजागर करने के लिए, विशेष टैग का उपयोग करें: बुलेटेड सूची बनाने के लिए उल, सामग्री के छोटे ब्लॉकों को उजागर करने के लिए।
3. याद रखें कि सिमेंटिक वेब सामग्री को व्यवस्थित करने का एक तरीका है जिसका स्टाइल से कोई लेना-देना नहीं है।

2. स्पष्ट रूप से कार्य बताएं

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


उदाहरण: एक साइट पर जानकारी का संक्षिप्त और स्पष्ट प्रस्तुतीकरण
( bluemountain.ca पोर्टल का मोबाइल संस्करण)।

व्यावहारिक सिफारिशें:

1. साइट के मोबाइल संस्करण के डिजाइन पर काम करते समय, पृष्ठों की श्रेणियों में नहीं, बल्कि स्क्रीन की श्रेणियों में सोचें। प्रत्येक स्क्रीन में तीन से अधिक फ़ंक्शन या तत्व शामिल नहीं होने चाहिए।
2. स्क्रीन को सरल बनाने के लिए अभिविन्यास न केवल सुविधा देता है, बल्कि आपको साइट के मोबाइल संस्करण को सौंपे गए लक्ष्यों, कार्यों, कार्यों को स्पष्ट करने में भी मदद करता है।

3. ओवरफिलिंग से बचें!

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


उदाहरण: सरलीकृत और सुव्यवस्थित क्षैतिज नेविगेशन (http://m.journeys.com/)।

व्यावहारिक सिफारिशें:

1. सबसे आवश्यक न्यूनतम करने के लिए साइट के मोबाइल संस्करण में छवियों की संख्या कम करें।
2. साइट के मोबाइल संस्करण में उच्च मात्रा ग्रंथों को शामिल न करें।
3. "लाइट" सिमेंटिक मार्कअप का उपयोग करके कोड के साथ-साथ सीएसएस शैलियों और फ़ाइल अटैचमेंट की संख्या को कम करता है।

4. हाइलाइटेड स्टेट का उपयोग न करें!

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

व्यावहारिक सिफारिशें:

1. लिंक को इंगित करने के लिए पाठ को रेखांकित करने के बजाय बटन का उपयोग करें।
2. तीरों का उपयोग करके अधिक विस्तृत सामग्री तक पहुंच निर्दिष्ट करें।
3. बटन के डिजाइन में, छायांकन और उभरा रेखाओं का उपयोग करें।
4. परिचित और स्पष्ट आइकन का उपयोग करें। प्रकार की क्रियाओं को जोड़ने के लिए असामान्य-दिखने वाले आइकन से बचें (जोड़ें, परिवर्तन, पीछे, आगे, आदि)


उदाहरण: नेविगेशन बटन का सफल डिज़ाइन।

5. बड़े प्रिंट में लिखें, सरल और स्पष्ट

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

व्यावहारिक सिफारिशें:

1. साइट के मोबाइल संस्करण में कोई भी अनावश्यक जानकारी शामिल नहीं होनी चाहिए।
2. सरल और समझ में आने वाली भाषा में लिखी गई छोटी मात्रा के ग्रंथों का चयन करें।
3. विशेष आवश्यकता के बिना स्क्रॉल फ़ंक्शन का उपयोग न करें।
4. साइट डिजाइन में "अगला" बटन शामिल करें जिस पर क्लिक करके उपयोगकर्ता पाठ के अधिक विस्तृत संस्करण के साथ स्क्रीन पर जा सकता है।


उदाहरण: संक्षिप्त और संक्षिप्त पाठ ब्लॉक के रूप में जानकारी की आपूर्ति

6. नेविगेशन में साइट सामग्री तत्वों का उपयोग करें

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

व्यावहारिक सिफारिशें:

1. सबमेनू या अन्य स्क्रीन पर जाने के लिए मेनू सूचियों का उपयोग करें।
2. साइट को स्क्रीन की गैलरी के रूप में डिज़ाइन करें; इस आभासी गैलरी के माध्यम से आगंतुकों के चलने के आयोजन के लिए एक रचनात्मक दृष्टिकोण अपनाएं।

उदाहरण: वर्चुअल गैलरी (अमेरिकन रॉक बैंड नियोन ट्रीस की साइट) के रूप में एक साइट के एक मोबाइल संस्करण का आयोजन।

7. रंग योजना पर ध्यान दें।

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


उदाहरण: न्यूनतम रंग और कंट्रास्ट - एक सफल डिजाइन की कुंजी (http://world.g-shock.com/)।

व्यावहारिक सिफारिशें:

1. साइट के डिजाइन में अनावश्यक रूप से उज्ज्वल रंगों का उपयोग न करें।
2. साइट बहुत "मोटली" नहीं होनी चाहिए।
3. उस रंग योजना का उपयोग करें जो आंख को सबसे अधिक भाती है।
4. विरोधाभासों के बारे में मत भूलना। मोबाइल फोन की स्क्रीन पर, विषम रंग बहुत प्रभावशाली लगते हैं।

8. साइट की मुख्य शैली सादगी है

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


उदाहरण: साइट का मोबाइल संस्करण दर्ज करने के लिए एक फ़ॉर्म (बीयर प्रेमियों के लिए सोशल नेटवर्क अनकैप्ड- untappd.com/?mobile=true )

9. प्रतिक्रिया दें

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

व्यावहारिक सिफारिशें:

1. जब आप स्क्रीन के एक विशिष्ट क्षेत्र पर क्लिक करते हैं, तो साइट का रूप बदलना चाहिए (यह पुष्टि करता है कि वास्तव में क्लिक हुआ था)।
2. उपयोगकर्ता के साथ पूर्ण संवाद करने के लिए जावास्क्रिप्ट का उपयोग करें (उदाहरण के लिए, JQuery या Scriptaculous)।
3. एनीमेशन का उपयोग करके पृष्ठ को लोड करने की प्रगति दिखाएं।

10. खाली जगहों को बचाएं

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


एक उदाहरण एक मेनू है जो टच-स्क्रीन डिवाइस (पोर्टल www.charlesluck.com का मोबाइल संस्करण) का उपयोग करके नेविगेशन के लिए सुविधाजनक है।

व्यावहारिक सिफारिशें:

1. लिंक को नामित करने के लिए, टेक्स्ट को रेखांकित नहीं करना चाहिए, लेकिन बटन, ऑब्जेक्ट, आइकन।
2. पर्याप्त आकार के आंतरिक क्षेत्र बनाएं ताकि उपयोगकर्ता तत्वों के बीच स्पष्ट रूप से अंतर कर सके।
3. लाइनों की ऊंचाई बढ़ाना पाठ को मोबाइल डिवाइस की स्क्रीन पर अधिक पठनीय बनाता है।