मुख्य आशयावर जा
Change page

Web3 इंटरफेस डिझाइनसाठी 7 मार्गदर्शक तत्त्वे

पृष्ठ संपादित करा (opens in a new tab)

उपयोगिता ह्युरिस्टिक्स (मार्गदर्शक तत्त्वे) हे व्यापक “ठोकताळे” आहेत ज्यांचा वापर तुम्ही तुमच्या साइटची उपयोगिता मोजण्यासाठी करू शकता. येथील 7 मार्गदर्शक तत्त्वे विशेषतः Web3 साठी तयार केली आहेत आणि ती जेकब निल्सनच्या संवाद डिझाइनसाठी 10 सामान्य तत्त्वे (opens in a new tab) सोबत वापरली जावीत.

Web3 साठी सात उपयोगिता मार्गदर्शक तत्त्वे

  1. कृतीनंतर फीडबॅक मिळतो
  2. सुरक्षा आणि विश्वास
  3. सर्वात महत्त्वाची माहिती स्पष्ट असते
  4. समजण्यायोग्य परिभाषिक शब्द
  5. कृती शक्य तितक्या लहान असतात
  6. नेटवर्क कनेक्शन्स दृश्यमान आणि लवचिक असतात
  7. वॉलेटमधून नाही, तर ॲपमधून नियंत्रण

व्याख्या आणि उदाहरणे

1. कृतीनंतर फीडबॅक मिळतो

जेव्हा काहीतरी घडले असेल किंवा घडत असेल, तेव्हा ते स्पष्ट असले पाहिजे.

वापरकर्ते त्यांच्या मागील चरणांच्या परिणामावर आधारित त्यांचे पुढील टप्पे ठरवतात. त्यामुळे त्यांना सिस्टीमच्या स्थितीबद्दल माहिती असणे आवश्यक आहे. Web3 मध्ये हे विशेषतः महत्त्वाचे आहे कारण ब्लॉकचेनवर व्यवहार पूर्ण होण्यासाठी कधीकधी थोडा वेळ लागू शकतो. जर त्यांना प्रतीक्षा करण्याची माहिती देणारा कोणताही फीडबॅक नसेल, तर वापरकर्त्यांना काही घडले आहे की नाही याची खात्री नसते.

टिपा:

  • मेसेजिंग, नोटिफिकेशन्स आणि इतर अलर्ट्सद्वारे वापरकर्त्याला माहिती द्या.
  • प्रतीक्षा वेळ स्पष्टपणे सांगा.
  • जर एखाद्या कृतीला काही सेकंदांपेक्षा जास्त वेळ लागणार असेल, तर वापरकर्त्याला काहीतरी घडत आहे असे वाटावे यासाठी टायमर किंवा ॲनिमेशनसह आश्वस्त करा.
  • जर प्रक्रियेत अनेक टप्पे असतील, तर प्रत्येक टप्पा दाखवा.

उदाहरण: व्यवहारात समाविष्ट असलेला प्रत्येक टप्पा दाखवल्याने वापरकर्त्यांना ते प्रक्रियेत कुठे आहेत हे जाणून घेण्यास मदत होते. योग्य आयकॉन्स वापरकर्त्याला त्यांच्या कृतींची स्थिती कळवतात.

Informing the user about each step when swapping tokens

2. सुरक्षा आणि विश्वास अंतर्भूत आहेत

सुरक्षेला प्राधान्य दिले पाहिजे आणि वापरकर्त्यासाठी यावर भर दिला पाहिजे. लोकांना त्यांच्या डेटाची खूप काळजी असते. सुरक्षितता ही अनेकदा वापरकर्त्यांसाठी प्राथमिक चिंता असते, त्यामुळे डिझाइनच्या सर्व स्तरांवर त्याचा विचार केला पाहिजे. तुम्ही नेहमी तुमच्या वापरकर्त्यांचा विश्वास संपादन करण्याचा प्रयत्न केला पाहिजे, परंतु तुम्ही हे ज्या प्रकारे करता त्याचा अर्थ वेगवेगळ्या ॲप्सवर वेगळा असू शकतो. हा नंतर सुचलेला विचार नसावा, तर संपूर्ण प्रक्रियेत जाणीवपूर्वक डिझाइन केलेला असावा. सोशल चॅनेल्स आणि दस्तऐवजीकरण, तसेच अंतिम UI यासह संपूर्ण वापरकर्ता अनुभवामध्ये विश्वास निर्माण करा. विकेंद्रीकरण पातळी, कोषागार मल्टी-सिग स्थिती आणि टीमची ओळख उघड (doxxed) आहे की नाही यासारख्या गोष्टी वापरकर्त्यांच्या विश्वासावर परिणाम करतात.

टिपा:

  • तुमच्या ऑडिट्सची अभिमानाने यादी करा
  • एकाधिक ऑडिट्स मिळवा
  • तुम्ही डिझाइन केलेल्या कोणत्याही सुरक्षा वैशिष्ट्यांची जाहिरात करा
  • अंतर्निहित इंटिग्रेशन्ससह संभाव्य धोके हायलाइट करा
  • धोरणांची गुंतागुंत सांगा
  • तुमच्या वापरकर्त्यांच्या सुरक्षिततेच्या दृष्टिकोनावर परिणाम करू शकणाऱ्या गैर-UI समस्यांचा विचार करा

उदाहरण: तुमचे ऑडिट्स फुटरमध्ये, ठळक आकारात समाविष्ट करा.

Audits referenced in the website footer

3. सर्वात महत्त्वाची माहिती स्पष्ट असते

गुंतागुंतीच्या सिस्टीमसाठी, फक्त सर्वात संबंधित डेटा दाखवा. सर्वात महत्त्वाचे काय आहे ते ठरवा आणि त्याच्या प्रदर्शनाला प्राधान्य द्या. खूप जास्त माहिती गोंधळात टाकणारी असते आणि निर्णय घेताना वापरकर्ते सहसा एका माहितीवर अवलंबून असतात. विकेंद्रित वित्त (DeFi) मध्ये, हे बहुधा यील्ड ॲप्सवर APR आणि कर्ज देणे ॲप्सवर LTV असेल.

टिपा:

  • वापरकर्ता संशोधन सर्वात महत्त्वाचे मेट्रिक उघड करेल
  • मुख्य माहिती मोठी करा आणि इतर तपशील लहान आणि लक्ष विचलित न करणारे ठेवा
  • लोक वाचत नाहीत, ते स्कॅन करतात; तुमचे डिझाइन स्कॅन करण्यायोग्य असल्याची खात्री करा

उदाहरण: स्कॅन करताना पूर्ण रंगातील मोठे टोकन शोधणे सोपे असते. APR मोठा आहे आणि ॲक्सेंट रंगात हायलाइट केलेला आहे.

The token and APR are easy to find

4. स्पष्ट परिभाषिक शब्द

परिभाषिक शब्द समजण्यायोग्य आणि योग्य असले पाहिजेत. तांत्रिक शब्दजाल एक मोठा अडथळा असू शकतो, कारण त्यासाठी पूर्णपणे नवीन मानसिक मॉडेल तयार करणे आवश्यक असते. वापरकर्ते डिझाइनला त्यांना आधीच माहित असलेल्या शब्दांशी, वाक्यांशांशी आणि संकल्पनांशी जोडू शकत नाहीत. सर्वकाही गोंधळात टाकणारे आणि अपरिचित वाटते, आणि ते वापरण्याचा प्रयत्न करण्यापूर्वीच शिकण्याची प्रक्रिया खूप कठीण असते. एखादा वापरकर्ता काही पैसे वाचवण्याच्या इच्छेने विकेंद्रित वित्त (DeFi) कडे वळू शकतो, आणि त्यांना काय आढळते: खनन, फार्मिंग, स्टेकिंग, एमिशन्स, ब्राइब्स, व्हॉल्ट्स, लॉकर्स, veTokens, वेस्टिंग, इपॉक्स, विकेंद्रित अल्गोरिदम्स, प्रोटोकॉल-मालकीची तरलता… शक्य तितक्या जास्त लोकांना समजतील असे सोपे शब्द वापरण्याचा प्रयत्न करा. फक्त तुमच्या प्रोजेक्टसाठी नवीन शब्द शोधू नका.

टिपा:

  • सोपे आणि सुसंगत परिभाषिक शब्द वापरा
  • शक्य तितकी विद्यमान भाषा वापरा
  • तुमचे स्वतःचे शब्द तयार करू नका
  • जसे संकेत दिसतील तसे त्यांचे पालन करा
  • वापरकर्त्यांना शक्य तितके शिक्षित करा

उदाहरण: “तुमचे रिवॉर्ड्स” हा एक व्यापकपणे समजला जाणारा, तटस्थ शब्द आहे; या प्रोजेक्टसाठी तयार केलेला नवीन शब्द नाही. वास्तविक जगाच्या मानसिक मॉडेल्सशी जुळण्यासाठी रिवॉर्ड्स USD मध्ये दर्शविले जातात, जरी रिवॉर्ड्स स्वतः दुसऱ्या टोकन मध्ये असले तरीही.

Token rewards, displayed in U.S. dollars

5. कृती शक्य तितक्या लहान असतात

उप-कृतींचे गट करून वापरकर्त्याचे संवाद जलद करा. हे स्मार्ट कॉन्ट्रॅक्ट स्तरावर, तसेच UI वर केले जाऊ शकते. एखादी सामान्य कृती पूर्ण करण्यासाठी वापरकर्त्याला सिस्टीमच्या एका भागातून दुसऱ्या भागात जावे लागू नये – किंवा सिस्टीम पूर्णपणे सोडावी लागू नये.

टिपा:

  • शक्य असेल तिथे इतर कृतींसोबत "मंजूर करा" एकत्र करा
  • स्वाक्षरी करणे चे टप्पे शक्य तितके एकत्र बंडल करा

उदाहरण: “तरलता जोडा” आणि “स्टेक” एकत्र करणे हे ॲक्सिलरेटरचे एक साधे उदाहरण आहे जे वापरकर्त्याचा वेळ आणि गॅस दोन्ही वाचवते.

Modal showing a switch to combine the deposit and stake actions

6. नेटवर्क कनेक्शन्स दृश्यमान आणि लवचिक असतात

वापरकर्त्याला ते कोणत्या नेटवर्क शी कनेक्ट केलेले आहेत याबद्दल माहिती द्या आणि नेटवर्क बदलण्यासाठी स्पष्ट शॉर्टकट प्रदान करा. मल्टीचेन ॲप्सवर हे विशेषतः महत्त्वाचे आहे. डिस्कनेक्ट केलेले असताना किंवा समर्थित नसलेल्या नेटवर्क शी कनेक्ट केलेले असतानाही ॲपची मुख्य कार्ये दृश्यमान असली पाहिजेत.

टिपा:

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

उदाहरण: वापरकर्त्याला ते कोणत्या नेटवर्क शी कनेक्ट केलेले आहेत ते दाखवा आणि त्यांना ॲपबारमध्ये ते बदलण्याची अनुमती द्या.

Dropdown button showing the connected network

7. वॉलेटमधून नाही, तर ॲपमधून नियंत्रण

UI ने वापरकर्त्याला त्यांना माहित असणे आवश्यक असलेली प्रत्येक गोष्ट सांगितली पाहिजे आणि त्यांना जे काही करायचे आहे त्यावर नियंत्रण दिले पाहिजे. Web3 मध्ये, काही कृती तुम्ही UI मध्ये करता आणि काही कृती तुम्ही वॉलेट मध्ये करता. साधारणपणे, तुम्ही UI मध्ये एखादी कृती सुरू करता आणि नंतर वॉलेट मध्ये तिची पुष्टी करता. जर हे दोन भाग काळजीपूर्वक एकत्रित केले नसतील तर वापरकर्त्यांना अस्वस्थ वाटू शकते.

टिपा:

  • UI मधील फीडबॅकद्वारे सिस्टीमची स्थिती सांगा
  • त्यांच्या इतिहासाची नोंद ठेवा
  • जुन्या व्यवहारांसाठी ब्लॉक एक्सप्लोरर्सच्या लिंक्स प्रदान करा
  • नेटवर्क्स बदलण्यासाठी शॉर्टकट्स प्रदान करा.

उदाहरण: एक सूक्ष्म कंटेनर वापरकर्त्याला त्यांच्या वॉलेट मध्ये कोणते संबंधित टोकन आहेत ते दाखवतो आणि मुख्य CTA नेटवर्क बदलण्यासाठी शॉर्टकट प्रदान करतो.

Main CTA is prompting the user to switch network

पृष्ठ शेवटचे अपडेट: 25 डिसेंबर, 2024