परिचित चीजों का डिज़ाइन: YouTube के उदाहरण पर इंटरफ़ेस को कैसे सुधारें

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

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

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

मुख पृष्ठ

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

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

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

खिलाड़ी

मैंने पैनल को बदलने का फैसला किया ताकि यह नए इंटरफ़ेस के अनुरूप हो। वास्तव में, सब कुछ उसके लिए कैद है।

लाइक और नापसंद बटन

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



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

दाहिना स्तंभ

सही कॉलम वर्तमान वीडियो से संबंधित वीडियो दिखाता है। किसी भी मामले में, इसका मतलब है। ऑफ़र तीन श्रेणियों में विभाजित हैं:

मेरी प्लेलिस्ट
सक्रिय प्लेलिस्ट में वीडियो यहां प्रदर्शित किए गए हैं। यह एक वेटिंग लाइन की तरह है जो Spotify या Apple Music जैसे म्यूजिक ऐप में मिल सकता है।

आप नीचे दी गई श्रेणियों से वीडियो को My Playlist में आसानी से फिर से खींच सकते हैं या खींच सकते हैं या बस उपयुक्त बटन पर क्लिक करके ऑटो प्ले को सक्षम कर सकते हैं। आप तीन सफेद डॉट्स की मदद से सूची को बिना किसी समस्या के संपादित कर सकते हैं।

जब किसी प्लेलिस्ट का नाम होता है, तो "माई प्लेलिस्ट" को बदल दिया जाता है।

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

जब उपयोगकर्ता इसे क्लिक करता है, तो अनुशंसित वीडियो My Playlist में मिलता है। "मेरी अनुशंसाएं" संपादित नहीं की गई हैं, क्योंकि यह एल्गोरिदम का परिणाम है, लेकिन वीडियो को खींचा जा सकता है और यदि वांछित हो तो "मेरी प्लेलिस्ट" में गिरा दिया जा सकता है।

इस वीडियो के समान
श्रेणी में, वीडियो दिखाए जाते हैं, जो विषय के अनुसार, वर्तमान में देखे जा रहे वीडियो के अनुरूप हैं।

यदि आप YouTube पर एक समान अनुभाग देखते हैं, तो आप समझेंगे कि वीडियो यहाँ कैसे प्राप्त होते हैं, इसका कोई स्पष्ट वर्गीकरण या स्पष्टीकरण नहीं है।



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

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

श्रेणियों का स्पष्ट विवरण देकर, हम उपयोगकर्ता को यह समझने में मदद करते हैं कि उसे रुचि रखने वाले वीडियो की तलाश कहाँ करनी है।

डिजिटल कल्याण और जिम्मेदारी

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

यूआई / यूएक्स डिजाइनर ऐसे सिस्टम बनाने के लिए जिम्मेदार हैं जो शब्द के ट्रुस्ट अर्थ में नशे की लत हैं। यह उपयोगकर्ताओं की भावनाओं में हेरफेर करना संभव बनाता है।

प्रस्तावित डिज़ाइन YouTube उपयोगकर्ताओं के लिए ज़िम्मेदारी का हिस्सा है। और मैं इसे कुछ उदाहरणों के साथ दिखाऊंगा।

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

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



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

चित्र में चित्र

अंत में, पिक्चर-इन-पिक्चर डेस्कटॉप पर आती है। और यह बहुत अच्छा लग रहा है।



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

तुरंत प्लेलिस्ट

यहां, पहेली के सभी तत्व अभिसरण होते हैं।

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



जब कोई उपयोगकर्ता स्क्रीन के नीचे एक वीडियो कैप्चर करता है, तो वह इंस्टेंट प्लेलिस्ट में सेव हो जाता है और पिक्चर-इन-पिक्चर मोड में सबसे ऊपर होता है। जब तक उपयोगकर्ता ऐसा करने का फैसला नहीं करता तब तक प्लेबैक शुरू नहीं होता है।



जब कोई वीडियो कैप्चर किया जाता है, तो वह सूची से गायब हो जाता है; इसके बजाय, अगला वीडियो पहले आता है। उपयोगकर्ता इस प्रकार की सूची में उतने ही वीडियो जोड़ सकता है जितना वह फिट देखता है, बस उन्हें स्क्रीन को "कम" करके।

जैसा कि ऊपर बताया गया है, इंस्टेंट प्ले लिस्ट एक अस्थायी सूची है। जैसे ही उपयोगकर्ता YouTube बंद करता है, ऐसी सूचियाँ हटा दी जाती हैं। यदि वांछित है, तो उन्हें संपादन मेनू खोलकर बचाया जा सकता है। उपयोगकर्ता अपनी सूचियों को नाम दे सकता है, उनसे वीडियो हटा सकता है, वीडियो पुनर्व्यवस्थित कर सकता है।



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

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

निष्कर्ष के रूप में

बेशक, यह सब ऊपर कहा गया है, एक हठधर्मिता नहीं है, लेकिन बस कुछ समस्याओं को हल करने का प्रयास है जो मुझे मंच के साथ काम करते समय सामना करना पड़ा। कृपया मुझे टिप्पणियों में बताएं कि आप क्या सोचते हैं। सुधार के किसी भी सुझाव का स्वागत है। :)

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

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