वेबसाइट डिजाइन क्या है अपनी वेबसाइट को डिजाइन कैसे करें

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

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

वेबसाइट डिजाइन क्या है अपनी वेबसाइट को डिजाइन कैसे करें

वेबसाइट डिजाइन क्या है अपनी वेबसाइट को डिजाइन कैसे करें

उपयोगकर्ता प्रवाह को डिजाइन करना

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

आप यह भी पढ़ें: Web Development क्या है वेब विकास के लिए पूर्ण गाइड

सूचना आर्किटेक्चर

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

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

IA का उपयोग साइट के नेविगेशन और मेनू को परिभाषित करने के लिए भी किया जाता है। जब UX प्रैक्टिशनर एक मेनू पर काम करना समाप्त कर लेते हैं, तो वे यह साबित करने के लिए “ट्री टेस्टिंग” नामक एक अन्य तकनीक का उपयोग करते हैं कि यह काम करेगा। वास्तविक इंटरफ़ेस को डिज़ाइन करने से पहले वृक्ष परीक्षण होता है।

वेबसाइट डिजाइन क्या है अपनी वेबसाइट को डिजाइन कैसे करें 2

वैश्विक नेविगेशन

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

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

नेविगेशन डिज़ाइन करते समय कुछ बातों पर विचार करें:

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

एक ब्राउज़र में “बैक” बटन

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

ब्रेडक्रम्ब्स

ब्रेडक्रंब प्रासंगिक लिंक का एक सेट है जो वेबसाइटों पर नेविगेशन सहायता के रूप में कार्य करता है। यह एक द्वितीयक नेविगेशन योजना है जो आमतौर पर किसी वेबसाइट पर उपयोगकर्ता का स्थान दिखाती है।

हालांकि इस तत्व को बहुत अधिक स्पष्टीकरण की आवश्यकता नहीं है, कुछ बातें ध्यान देने योग्य हैं:

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

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

खोज

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

खोज बॉक्स डिज़ाइन करते समय इन कुछ बुनियादी नियमों को ध्यान में रखें:

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

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

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

हर पेज पर सर्च बॉक्स लगाएं: प्रत्येक पृष्ठ पर खोज बॉक्स दिखाएं ताकि उपयोगकर्ता इस पर ध्यान दिए बिना कि वे वेबसाइट पर कहीं भी हों, उस तक पहुंच सकें।

यह भी पढ़ें: Search Engine Optimization क्या है और कैसे करें?

अलग-अलग पेज डिजाइन करना

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

सामग्री रणनीति

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

जब आप अपनी सामग्री रणनीति पर विचार करते हैं तो यहां कुछ व्यावहारिक सुझाव दिए गए हैं:

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

वेबसाइट डिजाइन क्या है अपनी वेबसाइट को डिजाइन कैसे करें 3

शब्दजाल और उद्योग-विशिष्ट शब्दों से बचें: पृष्ठ पर दिखाई देने वाला प्रत्येक अज्ञात शब्द या वाक्यांश आगंतुकों के लिए जानकारी को समझना बहुत कठिन बना देगा। पढ़ने के सभी स्तरों के लिए लिखना और हर किसी के लिए स्पष्ट और आसानी से समझ में आने वाले शब्दों को चुनना एक सुरक्षित शर्त है।

लंबे वाक्यों को छोटा करें: छोटे, स्कैन करने योग्य खंडों में लिखें। रॉबर्ट गनिंग की पुस्तक “हाउ टू टेक द फॉग आउट ऑफ बिजनेस राइटिंग” के अनुसार , वाक्य 20 शब्द या उससे कम होने चाहिए।

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

पृष्ठ संरचना

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

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

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

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

दृश्य पदानुक्रम

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

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

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

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

स्क्रॉलिंग व्यवहार

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

यह जानकर, आप इन युक्तियों से उपयोगकर्ता के अनुभव को बेहतर बना सकते हैं:

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

  • एक अच्छा परिचय: एक उत्कृष्ट परिचय सामग्री के संदर्भ को निर्धारित करता है और आगंतुक के प्रश्न का उत्तर देता है, “यह पृष्ठ किस बारे में है?”
  • आकर्षक इमेजरी: अच्छी इमेजरी टेक्स्ट के साथ हो सकती है और आगंतुकों को विचार या विषय को बेहतर ढंग से समझने में मदद कर सकती है।
  • अपने उपयोगकर्ताओं को ओरिएंट करें: जब आप लंबे पृष्ठ बनाते हैं, तो ध्यान रखें कि आगंतुकों को अभी भी अभिविन्यास की भावना (उनके वर्तमान स्थान की) और नेविगेशन की भावना (अन्य संभावित पथ) की आवश्यकता होती है। लंबे पृष्ठ उपयोगकर्ताओं के लिए नेविगेशन को समस्याग्रस्त बना सकते हैं; यदि उपयोगकर्ता द्वारा नीचे स्क्रॉल करने पर शीर्ष नेविगेशन बार दृश्यता खो देता है, तो जब वे पृष्ठ के भीतर गहरे होंगे तो उन्हें वापस ऊपर तक स्क्रॉल करना होगा। इसका स्पष्ट समाधान एक चिपचिपा मेनू है जो वर्तमान स्थान दिखाता है और जो हर समय एक संगत क्षेत्र में स्क्रीन पर रहता है।
  • नई सामग्री लोड करते समय विज़ुअल प्रतिक्रिया प्रदान करें: यह उन वेब पेजों के लिए विशेष रूप से महत्वपूर्ण है जहां सामग्री गतिशील रूप से लोड होती है, जैसे समाचार फ़ीड। क्योंकि स्क्रॉलिंग के दौरान सामग्री-लोडिंग तेज़ होनी चाहिए (दो से 10 सेकंड से अधिक नहीं), आप यह इंगित करने के लिए लूप्ड एनीमेशन का उपयोग कर सकते हैं कि सिस्टम काम कर रहा है।
  • स्क्रॉलिंग को हाइजैक न करें: उपयोगकर्ता नियंत्रण और स्वतंत्रता, जैकब नीलसन द्वारा गढ़े गए UI डिज़ाइन के लिए प्रमुख अनुमानों में से हैं। अपहृत स्क्रॉलिंग अधिकांश उपयोगकर्ताओं के लिए कष्टप्रद है क्योंकि यह नियंत्रण को हटा देता है और स्क्रॉलिंग व्यवहार को पूरी तरह से अप्रत्याशित बना देता है। जब आप कोई वेबसाइट डिज़ाइन करते हैं, तो उपयोगकर्ता को अपने ब्राउज़िंग अनुभव को नियंत्रित करने दें।

सामग्री लोड

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

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

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

बटन

बटन इंटरएक्टिव यूआई तत्व हैं जो संवादी प्रवाह में महत्वपूर्ण भूमिका निभाते हैं। बटनों के लिए इन बुनियादी सर्वोत्तम प्रथाओं पर ध्यान देना उचित है:

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

Imagery

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

निम्नलिखित सिद्धांत आपको अपने वेब पेज डिजाइन में इमेजरी को एकीकृत करने में मदद करेंगे:

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

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

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

वीडियो

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

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

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

प्रचार वीडियो को यथासंभव छोटा रखें: डी-मैक प्रोडक्शंस के शोध के अनुसार , अधिकांश उपयोगकर्ताओं के लिए लघु वीडियो अधिक आकर्षक होते हैं। व्यावसायिक वीडियो को दो से तीन मिनट की सीमा में रखें।

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

कॉल-टू-एक्शन बटन (CTA)

कॉल-टू-एक्शन (CTA) बटन हैं जो उपयोगकर्ताओं को आपके रूपांतरण लक्ष्य की ओर ले जाते हैं। CTA डिज़ाइन का पूरा बिंदु आगंतुकों को एक विशिष्ट कार्रवाई के लिए निर्देशित करना है। सीटीए के कुछ सामान्य उदाहरण हैं:

  • एक परीक्षण शुरू करें
  • पुस्तक डाउनलोड करें
  • अपडेट के लिए साइन अप करें”
  • “एक परामर्श प्राप्त करें

CTA बटन डिज़ाइन करते समय कुछ बातों का ध्यान रखें:

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

वेब फॉर्म

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

यहां कुछ डिज़ाइन अनुशंसाएं दी गई हैं जो आपके प्रपत्र डिज़ाइन को बेहतर बनाने में आपकी सहायता करेंगी:

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

एनीमेशन

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

यहां कुछ मामले दिए गए हैं जिनमें एनिमेशन उपयोगकर्ता के अनुभव को बढ़ा सकता है:

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

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

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

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

ब्रांडिंग: अच्छी तरह से तैयार किया गया एनीमेशन आगंतुकों के साथ एक भावनात्मक संबंध स्थापित करता है। यह एक उत्पाद की ताकत को उजागर कर सकता है और उपयोगकर्ता के अनुभव को वास्तव में सुखद और यादगार बना सकता है।

मोबाइल विचार

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

उत्तरदायी आकार

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

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

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

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

क्लिक करने योग्य से टैप करने योग्य

मोबाइल वेब पर, फिंगर टैप (माउस क्लिक नहीं) इंटरेक्शन बनाते हैं। इसका मतलब यह है कि जब आप टच टारगेट और इंटरैक्शन डिज़ाइन कर रहे होते हैं तो अलग-अलग नियम लागू होते हैं।

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

सरल उपयोग

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

खराब दृष्टि वाले उपयोगकर्ता

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

  • छोटे टेक्स्ट का कंट्रास्ट अनुपात कम से कम 4.5:1 होना चाहिए। 7:1 का अनुपात बेहतर है।
  • बड़े टेक्स्ट (14-पॉइंट बोल्ड और 18-पॉइंट रेगुलर और ऊपर) की पृष्ठभूमि में कम से कम 3:1 का कंट्रास्ट अनुपात होना चाहिए।
  • आप वेबएआईएम के रंग कंट्रास्ट चेकर का उपयोग यह पता लगाने के लिए कर सकते हैं कि आप इष्टतम सीमा के भीतर हैं या नहीं।

कम कंट्रास्ट टेक्स्ट को डेस्कटॉप पर पढ़ना मुश्किल है, लेकिन मोबाइल पर यह और भी मुश्किल हो जाता है। तेज धूप में चलते समय किसी मोबाइल डिवाइस पर कम-कंट्रास्ट टेक्स्ट पढ़ने की कोशिश करने की कल्पना करें।

कलर ब्लाइंड और कम दृष्टि वाले उपयोगकर्ता

यह अनुमान लगाया गया है कि वैश्विक आबादी का 4.5% रंग अंधापन का अनुभव करता है (जो कि 12 पुरुषों में 1 और 200 महिलाओं में 1 है), 4% कम दृष्टि (30 लोगों में 1) से पीड़ित हैं, और 0.6% अंधे हैं (188 लोगों में 1)।

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

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

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

उपरोक्त प्रपत्र में, डिज़ाइनर को अधिक विशिष्ट निर्देश देने चाहिए, जैसे: “आपके द्वारा दर्ज किया गया ईमेल पता मान्य नहीं है,” या कम से कम उस क्षेत्र के पास एक आइकन प्रदर्शित करें जिस पर ध्यान देने की आवश्यकता है।

नेत्रहीन उपयोगकर्ता

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

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

दूसरा उदाहरण ASOS का है। समान शर्ट बेचने वाला यह पृष्ठ आइटम के लिए सटीक वैकल्पिक टेक्स्ट प्रदान करता है। इससे स्क्रीन रीडर वाले लोगों को यह जानने में मदद मिलती है कि आइटम कैसा दिखता है।

छवियों के लिए टेक्स्ट विकल्प बनाते समय, इन दिशानिर्देशों का पालन करें:

  • सभी “सार्थक” छवियों को वर्णनात्मक वैकल्पिक पाठ की आवश्यकता होती है। (एक “सार्थक” फोटो पृष्ठ पर जानकारी के संदर्भ में जोड़ता है।)
  • यदि छवि पूरी तरह से सजावटी है और उपयोगकर्ता को कोई उपयोगी जानकारी प्रदान नहीं करती है तो टेक्स्ट विकल्प की आवश्यकता नहीं है।

कीबोर्ड के अनुकूल अनुभव

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

यहां कीबोर्ड नेविगेशन के लिए सबसे बुनियादी नियम दिए गए हैं:

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

आप W3C के “WAI-ARIA संलेखन अभ्यास” दस्तावेज़ के “डिज़ाइन पैटर्न और विजेट” खंड में कीबोर्ड इंटरैक्शन के लिए विस्तृत आवश्यकताएं पा सकते हैं ।

परिक्षण

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

पुनरावृत्त परीक्षण

डिज़ाइन चक्र के किसी अन्य भाग की तरह, परीक्षण एक पुनरावृत्त प्रक्रिया है। डिज़ाइन प्रक्रिया के आरंभ में फ़ीडबैक प्राप्त करें और पूरे समय पुनरावृति करें।

परीक्षण पृष्ठ लोड होने का समय

उपयोगकर्ता धीमी गति से लोड होने वाले वेब पेजों से नफरत करते हैं। इसलिए आधुनिक वेबसाइटों के लिए प्रतिक्रिया समय एक महत्वपूर्ण कारक है। नीलसन नॉर्मन ग्रुप के अनुसार, तीन प्रतिक्रिया-समय सीमाएँ हैं:

  • 0.1 सेकंड: यह उपयोगकर्ताओं के लिए तुरंत महसूस होता है।
  • 1 सेकंड: उपयोगकर्ता को थोड़ी देरी का एहसास होगा।
  • दस पल: उपयोगकर्ता तुरंत वेबसाइट छोड़ सकते हैं।

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

आमतौर पर धीमे लोडिंग समय का क्या कारण होता है?

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

PageSpeed ​​Insights जैसे टूल कारणों का पता लगाने में आपकी मदद करेंगे।

A/B Testing

जब आप किसी डिज़ाइन के दो संस्करणों के बीच चयन करने के लिए संघर्ष कर रहे हों तो A/B परीक्षण आदर्श होता है। इस परीक्षण पद्धति में उपयोगकर्ताओं की समान संख्या के लिए बेतरतीब ढंग से दो में से एक संस्करण दिखाना और फिर यह देखने के लिए विश्लेषण की समीक्षा करना शामिल है कि किस संस्करण ने आपके लक्ष्य को अधिक प्रभावी ढंग से पूरा किया।

डिजाइन हैंडऑफ़

UX डिजाइन प्रक्रिया के दो महत्वपूर्ण चरण हैं: डिजाइन का प्रोटोटाइप बनाना और एक कार्यशील समाधान विकसित करना। “हैंडऑफ़” वह चरण है जो दोनों को जोड़ता है। जैसे ही डिजाइन विकास के लिए तैयार होता है, डिजाइनर एक विनिर्देश तैयार करते हैं, जो एक दस्तावेज है जो वर्णन करता है कि डिजाइन को कैसे कोडित किया जाए। एक विनिर्देश यह सुनिश्चित करता है कि टीम मूल मंशा के अनुसार डिजाइन को लागू करती है।

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

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

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

निष्कर्ष

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

Share on:

Leave a Comment