यूआई पैटर्न क्या है?

UI डिज़ाइन में एक नए पहलू पर एक नज़र

एक जैसा पर उससे अधिक

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

फिर भी UI डिज़ाइन करते समय सामान्य पैटर्न भी होते हैं। जिस डिवाइस पर आप यह लेख पढ़ रहे हैं, उस डिवाइस के कुछ ऐप्स पर एक नज़र डालने पर, कुछ चीज़ें अंततः दोहराई जाती हैं:

  • एक सहेजने, रद्द करने और/या कार्रवाई को हटाने के साथ मोडल दृश्य
  • टेक्स्ट वाले तत्वों के अनुभाग, उदाहरण के लिए प्रत्येक सूची आइटम के लिए स्वाइप-एक्शन वाली सूचियां

तो एक कदम आगे सोचते हुए, क्या ऐसे कोई संसाधन हैं जिन्हें आप स्वयं UI डिज़ाइन करते समय टैप कर सकते हैं? हो सकता है कि पैटर्न का एक संग्रह अन्य डिजाइनरों ने पहले ही पहचाना और औपचारिक रूप दिया हो? ठीक है, मैं यह सवाल नहीं पूछूंगा अगर मेरे पास पहले से जवाब नहीं होगा! अध्याय दो के लिए समय!

अध्याय दो (घोषित एक)

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

आइए कुछ उदाहरण देखें। निम्नलिखित प्रविष्टियाँ IBM की कार्बन डिज़ाइन साइट के साथ-साथ Google के सामग्री UI पैटर्न पृष्ठ से ली गई हैं। मुझे Microsoft के फ़्लुएंट डिज़ाइन के लिए कोई साइट नहीं मिली, लेकिन फिर भी परिशिष्ट में उनके प्रारंभ पृष्ठ को लिंक किया।

खोज

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

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

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

संवाद

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

खाली राज्य

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

अपने UI डिज़ाइन प्रक्रिया में खाली अवस्थाओं को बाद के विचार के रूप में न मानें। यदि सही ढंग से कार्यान्वित किया जाता है, तो वे उपयोगकर्ताओं को वर्कफ़्लो को सुचारू रूप से आगे बढ़ाने की अनुमति देते हैं। खाली स्थितियाँ जो पूरे वर्कफ़्लो को रोक देती हैं, वास्तव में ऐप क्रैश के अलावा सबसे खराब स्थिति है।

बस एक शुरुआत

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

सुझाव

संबंधित

परिशिष्ट

भाषाएँ