मोबाइल इंटरफेस पर अनुसंधान

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

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



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

---

यह दस्तावेज़ सभी समान क्या है?

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


अंजीर। 1: मोबाइल संस्करण किसी भी साइट की सफलता का एक महत्वपूर्ण घटक बन गया है। स्मैशिंग पत्रिका का अपना मोबाइल संस्करण भी है।

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

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

---

अनुसंधान सिद्धांतों

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


अंजीर। 2: यह वही है जो हमारी शोध प्रक्रिया की तरह दिखती है।

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

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

---

अनुसंधान के लिए साइटों का चयन

विश्लेषण के लिए साइटों का एक समूह चुनना, ज़ाहिर है, प्रक्रिया का एक महत्वपूर्ण हिस्सा है। पूर्वाग्रह की संभावना को बाहर करने या किसी भी आला पर विचार करने के लिए, हमने Google AdPlanner सूची से पहले 100 साइटों का उपयोग करने का निर्णय लिया। हालाँकि सूची 1000 साइटों की थी, फिर भी हमने फैसला किया कि पहला सौ काफी है
एक अच्छा नमूना और काफी बहुमुखी परिणाम प्राप्त करने के लिए।


अंजीर। 3: Google AdPlanner सूची में सबसे लोकप्रिय साइटों में से 1000 - अध्ययन में प्रयुक्त एक उद्देश्य स्रोत।

---

मापदंडों

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


अंजीर। 4: आपको जानकारीपूर्ण और उपयोगी जानकारी प्रदान करने के लिए कई मापदंडों का मूल्यांकन किया गया है।

---

संभावित त्रुटियों के लिए सुधार

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


अंजीर। 5: अध्ययन में प्रयुक्त विभिन्न उपकरणों की संख्या बढ़ाने के लिए एमुलेटर का उपयोग किया गया था।

---

अच्छी तरह से और अंत में - परिणाम

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

पहुंच विधि

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


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


अंजीर। 7: डब्ल्यूडब्ल्यूडब्ल्यू उपडोमेन पर मोबाइल संस्करण की मेजबानी करने वाली साइटों की संख्या।


अंजीर। 8: मोबाइल साइटों की संख्या जो आपको नियमित डेस्कटॉप ब्राउज़र में खुद को खोलने की अनुमति देती है।


अंजीर। 9: यदि अमेज़ॅन साइट का .mobi संस्करण पीसी ब्राउज़र पर चलता है, तो m.amazon.com पीसी उपयोगकर्ताओं को मुख्य साइट पर पुनर्निर्देशित करता है।

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

---

प्रथम स्तर के मोबाइल डोमेन

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


चित्र 10: उनकी लोकप्रियता के साथ मोबाइल डोमेन का उपयोग।


अंजीर। 11: उन साइटों की संख्या, जिनके पास मोबाइल उपकरणों के लिए अनुकूलित साइट संस्करण नहीं है।


अंजीर। 12: प्रति साइट उप डोमेन की औसत संख्या।


अंजीर। 13: WAP और WML प्रोटोकॉल के लिए समर्थन।


अंजीर। 14: साइटों के प्रतिशत को उपयोगकर्ताओं को एक अलग प्रथम-स्तरीय मोबाइल डोमेन पर पुनर्निर्देशित करना।


अंजीर। 15: PayPal अपनी मोबाइल साइटों के लिए डोमेन m।, मोबाइल का उपयोग करता है । और .मोबी

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

---

मोबाइल ऐप

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


अंजीर। 16: मोबाइल डिवाइस (किसी भी प्लेटफ़ॉर्म पर) के लिए उन साइटों की संख्या।


अंजीर। 17: उन साइटों का प्रतिशत जिनके पास मोबाइल एप्लिकेशन है, लेकिन साइट का मोबाइल संस्करण नहीं है।


अंजीर। 18: इंटरनेट मूवी डेटाबेस साइट में साइट का एक मोबाइल संस्करण और एक iPhone ऐप है जो मोबाइल इंटरैक्शन को बढ़ाता है।

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

औसत लोड समय

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


अंजीर। 19: कैश के बिना कोल्ड बूट परिस्थितियों में उच्चतम, मध्यम और सबसे छोटी साइट लोड समय।


अंजीर। 20: उन साइटों का प्रतिशत जो वाई-फाई का उपयोग करते समय लोड होने में 10 सेकंड से अधिक समय लेते हैं।


अंजीर। 21: उन साइटों का प्रतिशत, जिन्हें वाई-फाई के माध्यम से डाउनलोड करने के लिए तीन सेकंड या उससे कम की आवश्यकता होती है।


अंजीर। 22: YouTube के मोबाइल संस्करण में सबसे कम डाउनलोड समय में से एक है।

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

---

होमपेज वजन

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


अंजीर। 23: एक कैश का उपयोग किए बिना किलोबाइट्स में मापा साइटों के बीच सबसे बड़ा, औसत और सबसे छोटा वजन।


अंजीर। 24: डाउनलोड किए गए गैर-कैश किए गए डेटा की कुल राशि के साथ साइटों का प्रतिशत 100 किलोबाइट से अधिक है।



अंजीर। 25: कुल डाउनलोड किए गए गैर-कैश्ड डेटा के 25 किलोबाइट से कम वाली साइटों का प्रतिशत।


अंजीर। 26 सॉफ्टनिक वेबसाइट ने होम पेज के सबसे बड़े वजन से अलग पहचान बनाई है ।

इस परीक्षण के परिणाम बहुत दिलचस्प हैं। जबकि बड़ी संख्या में साइटों (मुख्य रूप से WAP-उन्मुख) का वजन 25 किलोबाइट से कम होता है, जो स्वीकार्य लगता है, मोबाइल उपकरणों के लिए माना जाता साइटों की एक महत्वपूर्ण संख्या 100 किलोबाइट से अधिक होती है, और कभी-कभी एक होम पेज का वजन लगभग 0.5 एमबी तक पहुंच जाता है। ! और हम आश्चर्यचकित थे कि साइटों का प्रतिशत 25 Kb या उससे कम था जो 100 Kb या उससे अधिक वजन वाली साइटों के प्रतिशत से मेल खाते थे।

---

doctype

वेबसाइट बनाते समय, पहला प्रश्न यह है कि आपकी वेबसाइट की सामग्री को प्रदर्शित करने के लिए कौन सी भाषा या भाषा का कौन सा संस्करण सबसे अच्छा है। HTML और XHTML के बारे में धार्मिक युद्ध कम नहीं हुए हैं, और चूंकि मोबाइल उपकरणों (XHTML और WML मोबाइल प्रोफाइल) के लिए अनुकूलित कई किस्में हैं, हमने तय किया कि विभिन्न DTD के उपयोग के आँकड़े पाठकों के लिए बहुत उपयोगी होंगे। इसलिए, अध्ययन के इस भाग में, हमने देखा कि मोबाइल सेवाओं के मुख्य पृष्ठों पर Doctype का उपयोग क्या है।


अंजीर। 27: मोबाइल साइटों पर मार्कअप भाषाओं का वितरण, भाषा संस्करण और प्रोफाइल सहित।


अंजीर। 28: मोबाइल प्रोफाइल और नियमित प्रोफाइल का उपयोग करने वाली साइटें।


अंजीर। 29: WML और XHTML दोनों का समर्थन करने वाली साइटों का प्रतिशत।


अंजीर। 30: iPhone के लिए अनुकूलित Dailymotion का मोबाइल संस्करण , HTML5 का उपयोग करने वाली कुछ वेबसाइटों में से एक है।

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

---

कोड की जाँच

सिमेंटिक वेब और हमारे व्यवसाय में मानकों के पालन के महत्व को याद करते हुए, हमने जेफरी ज़ेल्डमैन के एक अध्ययन के उदाहरण के बाद, यह परीक्षण किया, जिसमें उन्होंने "पारित - विफल" के सिद्धांत पर एक साधारण सत्यापन परीक्षण के माध्यम से बड़ी संख्या में साइट का संचालन किया। Zeldman ने TOP-100 एलेक्सा से शोध के लिए साइटें लीं, हम Google AdPlanner सूची से हैं। हालाँकि वेबसाइट के विकास में मानकों का पालन अल्फा और ओमेगा नहीं है, लेकिन यह परीक्षण हमारे अध्ययन में शामिल था कि हम अर्थ वेब के कितने करीब हैं।


अंजीर। 31: मार्कअप वितरण के साथ मान्य साइटों की संख्या।


अंजीर। 32: उन साइटों का प्रतिशत जिनके होमपेज को निर्दिष्ट DTD द्वारा मान्य किया गया है।


अंजीर। 33: माइस्पेस सबसे अलग नहीं था और सत्यापन पारित नहीं किया था।

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

---

कोड जुदाई

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


अंजीर। 34: अलग-अलग फ़ाइलों के बजाय इनलाइन शैलियों का उपयोग करने वाली साइटों का प्रतिशत।


अंजीर। 35: बाहरी CSS 2.1 या CSS3 का उपयोग करने वाली साइटों का प्रतिशत।


अंजीर। 36: बाहरी JS या jQuery का उपयोग करने वाली साइटों का प्रतिशत।


अंजीर। 37: विकिपीडिया का मोबाइल संस्करण jQuery लाइब्रेरी का उपयोग करता है।

यद्यपि हम सभी ने यह मान लिया था कि मोबाइल पेजों की लोडिंग को गति देने के लिए, तत्वों की शैलियों और व्यवहार को उनसे हटा दिया जाएगा, छोटी संख्या में साइटों पर सभी कोड अभी भी पृष्ठों में एम्बेडेड थे। इसके अलावा, केवल कुछ ही साइटें jQuery फ्रेमवर्क का उपयोग करती हैं, और समान रूप से बहुत कम साइटें सामग्री को गतिशील रूप से पुन: व्यवस्थित करने के लिए CSS3 में मीडिया क्वेरी का उपयोग करती हैं। जैसा कि आप उम्मीद कर सकते हैं, HTML5 का उपयोग करने वाली साइटों की संख्या CSS3 का उपयोग करने वाली संख्या जितनी कम है।

---

फोंट

टाइपोग्राफी वेब का एक अभिन्न हिस्सा है और कैसे जानकारी की कल्पना की जाती है। , . , , , . , .


अंजीर। 38: , .


अंजीर। 39: , ( ).


अंजीर। 40: .


अंजीर। 41: m.naver.com , .

. , , ( , ). , (, - ). , , - .

---

, . , , , .


अंजीर। 42: , .


अंजीर। 43: , .


अंजीर। 44: , .


अंजीर। 45: 56.com .

, , , ( ). , . — .

---

. , . , — .


अंजीर। 46: , .


अंजीर। 47: , .


अंजीर। 48: eBay , , .

, , , , . , , , . , .

---

, . - ( ). , , , , , , , — , , ( ). , .


अंजीर। 49: , .


अंजीर। 50: साइट तक पहुँचने से पहले फेसबॉक्स को लॉगिन की आवश्यकता होती है।

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

---

साइट के पूर्ण संस्करण पर वापस स्विच करना

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


अंजीर। 51: साइट के मुख्य संस्करण में जाने के लिए लिंक का शीर्षक।


अंजीर। 52: उन साइटों का प्रतिशत, जिनके पास मुख्य संस्करण का लिंक नहीं है।


अंजीर। 53: Daum.net साइट पर , संक्रमण "पीसी संस्करण" लिंक पर क्लिक करके किया जाता है।

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

---

नेविगेशन

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


अंजीर। 54: पाठ लिंक, आइकन या लिंक छवियों के रूप में नेविगेशन साइटों का उपयोग।



अंजीर। 55: टेक्स्ट लिंक बनाम आइकनों और लिंक छवियों का उपयोग करके नेविगेशन के बीच संबंध।


अंजीर। 56: विशिष्ट मेनू (या गतिशील रूप से प्रदर्शित होने वाली सामग्री) वाली साइटों का प्रतिशत।


अंजीर। 57: एचपी मोबाइल साइट पर देश चयन मेनू।

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

---

मुख्य पृष्ठ पर लिंक की संख्या

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



अंजीर। 58: एक छोटे (1-25) साइट, मध्यम (26-50), और मुख्य पृष्ठ पर लिंक की एक बड़ी (51+) संख्या।


अंजीर। 59: मेनू के कारण बड़ी संख्या में लिंक वाली साइटों का प्रतिशत।


अंजीर। 60: साइट 2345.com में लिंक की एक पूरी गाड़ी शामिल है। क्या यह अच्छा है?

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

---

चित्रों की संख्या

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


अंजीर। 61: मुख्य पृष्ठों पर कुछ (1-5), मध्यम (6-10) या कई (11+) चित्रों वाली साइटें।


अंजीर। 62: ऐसी साइटें जो आइकन का उपयोग करके नेविगेशन के कारण बहुत अधिक छवियों की मेजबानी करती हैं।


अंजीर। 63: वे साइटें जो चित्रों पर निर्मित नेविगेशन के कारण बहुत सी तस्वीरों की मेजबानी करती हैं।



अंजीर। 64: रूसी साइट Mail.ru का मोबाइल संस्करण लिंक के लिए हाइलाइट तत्वों के रूप में छवियों का उपयोग करता है।

इस परीक्षण के परिणामों ने व्यापक धारणा की पुष्टि की कि साइटों के मोबाइल संस्करणों में कम चित्र हैं और इन चित्रों के आकार भी छोटे हैं (जिन्हें डिवाइस के छोटे स्क्रीन आकार द्वारा समझाया जा सकता है)। यह बदले में साइट के वजन को कम करने और इसकी गति को बढ़ाने में मदद करता है (जैसा कि पिछले परीक्षणों में परिलक्षित होता है)। दिलचस्प बात यह है कि यहां तक ​​कि पिक्चर साइट्स (जैसे फ्लिकर फोटो होस्टिंग) भी इस चलन का अनुसरण करती हैं।

---

लिंक रिस्पांस एरिया

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


अंजीर। 65: अन्य साइटों की तुलना में साइट का औसत प्रतिक्रिया क्षेत्र।




अंजीर। 66: कई लिंक और छवियों और एक बड़ी प्रतिक्रिया क्षेत्र के साथ साइटों का प्रतिशत।


अंजीर। 67: फ़्लिकर चित्रों में निर्मित लिंक का उपयोग अधिक दृश्य और आत्मविश्वास क्लिक के लिए करता है।

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

---

ब्लॉक में विभाजन

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


अंजीर। 68: विचाराधीन साइटों पर क्षैतिज ब्लॉक (कॉलम या टेबल सेल) की संख्या।


अंजीर। 69: ऊर्ध्वाधर ब्लॉकों की संख्या (हेडर या विभाजित सूचना खंड)।


अंजीर। 70: ब्लॉकों की सबसे बड़ी, मध्यम और सबसे छोटी संख्या (क्षैतिज / ऊर्ध्वाधर)।


अंजीर। 71: Zol वेबसाइट पर, शीर्षकों का उपयोग करके जानकारी को ब्लॉक में विभाजित किया गया है।

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

---

सामग्री स्क्रॉलिंग

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


अंजीर। 72: नियमित स्क्रॉलिंग के बजाय पैनल नेविगेशन का उपयोग करने वाली साइटों का प्रतिशत।


अंजीर। 73: फुल-पेज स्क्रॉलिंग के बजाय ओवर-फ्लो के साथ बिट-वार स्क्रॉलिंग का उपयोग करने वाली साइटों का प्रतिशत।


अंजीर। 74: याहू ने अपनी सामग्री को कई क्लिक-थ्रू पैनल में विभाजित किया है।

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

---

चल रहा है

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


अंजीर। 75: आप विभिन्न वेबसाइटों पर अलग-अलग रुझान पा सकते हैं, लेकिन फिर भी उन सभी में तुलनीय समानताएं हैं।

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

नोट: यह भी ध्यान दिया जाना चाहिए कि शीर्ष 100 में से कई साइटें सूची से अन्य साइटों के उप डोमेन या स्थानीयकरण थीं। लेकिन परिणाम विकृत करने के लिए ऐसी बहुत कम साइटें थीं।

---

सामान्य रुझान

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


अंजीर। 76: कुछ साइटों पर, मोबाइल संस्करण वास्तव में Mobify जैसे उपकरणों का उपयोग करके स्वचालित रूप से उत्पन्न होता है।

---

अन्य प्रकार की साइटों में मॉडल

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


अंजीर। 77: डिज़ाइनर साइमन कोलिसन ने अपनी वेबसाइट पर CSS3 मीडिया क्वेरीज़ का उपयोग अलग-अलग स्क्रीन साइज़ को फिट करने के लिए डिज़ाइन को दर्जी बनाने के लिए किया।

---

संभावित अध्ययन में सुधार

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


अंजीर। 78: विशिष्ट niches में साइटों पर अधिक शोध किया जा सकता है। उदाहरण के लिए, यह द गार्जियन जैसी समाचार साइटें हो सकती हैं।

---

मोबाइल डिजाइन का भविष्य

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

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

।
अनुवादकों से पुनश्च: मुझे आशा है कि आपको लेख अच्छा लगा होगा। हमें खुशी होगी यदि आप हमें अनुवाद में त्रुटियों का संकेत देते हैं, ताकि हम उन्हें जल्दी ठीक कर सकें। कृपया मुझे पीएम में लिखें :)