मोबाइल एप्लिकेशन के यूएक्स डिजाइन के विकास के लिए अनिवार्य चेकलिस्ट

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



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

स्किलबॉक्स अनुशंसा करता है: यूएक्स एनालिटिक्स ऑनलाइन पाठ्यक्रम
हम आपको याद दिलाते हैं: हैबर के सभी पाठकों के लिए - जब हेरा प्रचारक कोड के अनुसार किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

एप्लिकेशन आइकन

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

आइकन को सरल बनाया जाना चाहिए, लेकिन एक ही समय में ध्यान आकर्षित करना चाहिए। विभिन्न वॉलपेपर पर इसकी दृश्यता का परीक्षण करना न भूलें। यह पृष्ठभूमि छवि की परवाह किए बिना शांत दिखना चाहिए।

स्पलैश स्क्रीन

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

उपयोगकर्ता के अनुकूल इंटरफेस

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

सामग्री महत्वपूर्ण है

पाठ उपयोगकर्ता के लिए सुलभ होना चाहिए ताकि वह आवर्धन के बिना पढ़ सके। अनुशंसित फ़ॉन्ट आकार Apple और Google दोनों की सिफारिशों में निर्धारित है।

आकार

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

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

छवि

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

खाली जगह के बारे में मत भूलना

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

चूक

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

रंग विपरीत

यह मुख्य फ़ॉन्ट और पृष्ठभूमि के बीच विपरीत पर विचार करने के लायक है। यह उपयोगकर्ताओं द्वारा बेहतर माना जाता है। W3C निम्नलिखित पाठ और छवि विपरीत अनुपात की सिफारिश करता है:

• एक छोटे पाठ का कंट्रास्ट अनुपात पृष्ठभूमि के संबंध में कम से कम 4.5: 1 होना चाहिए;
• बड़े पाठ के लिए एक ही संकेतक - 3: 1 से।

नेविगेशन

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

पोर्ट्रेट / लैंडस्केप लेआउट

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

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

हटाए जाने की पुष्टि

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

रेटिंग के लिए भीख न माँगें

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

स्किलबॉक्स अनुशंसा करता है:

• प्रैक्टिकल कोर्स मोबाइल ऐप डिज़ाइन (करतब। Redmadrobot!)।
• वार्षिक ऑनलाइन पाठ्यक्रम "प्रोफेशन वेब डेवलपर" ।
• व्यावहारिक दो महीने का कोर्स यूएक्स डिजाइन ।