यूआई/यूएक्स डिज़ाइन

UX तय करता है कि कोई उत्पाद कैसे काम करेगा; यूआई तय करता है कि वह निर्णय कैसा दिखेगा। इनमें से कोई भी अपने आप में पर्याप्त नहीं है - एक में स्पष्टता है, दूसरे में भरोसा है।

केस स्टडी

एक ही स्क्रीन पर 13 डोमेन ले जाना

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

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

01

दो अलग-अलग अनुशासन, एक अनुभव।

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

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

02

संरचना पहले, स्क्रीन बाद में।

यूएक्स प्रक्रिया एक स्क्रीन से शुरू नहीं होती है - यह सवालों से शुरू होती है: उपयोगकर्ता यहां क्या करने की कोशिश कर रहा है, उन्हें पहले किस जानकारी की आवश्यकता है, कौन सा कदम अनावश्यक घर्षण पैदा करता है? इन सवालों के जवाब सूचना वास्तुकला का निर्माण करते हैं - वह ढांचा जो यह निर्धारित करता है कि कौन सी सामग्री कहाँ और किस पदानुक्रम में बैठती है।

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

03

संगति एक सिस्टम से आती है, व्यक्तिगत स्क्रीन से नहीं।

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

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

04

अभिगम्यता बाद में जोड़ी गई कोई परत नहीं है।

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

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

05

प्रक्रिया प्रमाण है, दावा नहीं.

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

मोबाइल ऐप डेवलपमेंट: कस्टम मोबाइल ऐप जो आपके मॉड्यूल की संख्या के अनुरूप होते हैं