एक नया Reverie: सॉफ्टवेयर से अभयारण्य तक

कुछ हमें परेशान कर रहा था।

Reverie में शानदार कैरेक्टर्स थे। सार्थक बातचीत। ऐसे फीचर्स जिन्हें उपयोगकर्ता वाकई पसंद करते थे। लेकिन हर बार जब हम इंटरफ़ेस को देखते थे, हमें दिखता था... सॉफ्टवेयर। बटन, कार्ड, लिस्ट, नेविगेशन बार। वो साफ-सुथरा, फंक्शनल डिज़ाइन जो आप किसी प्रोडक्टिविटी टूल या SaaS डैशबोर्ड से उम्मीद करते हैं।

Reverie को ऐसा नहीं होना चाहिए था।

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

तो हमने सब कुछ फिर से बनाया।

"काफी अच्छा" की समस्या

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

लेकिन "काफी अच्छा" "यादगार" का दुश्मन है।

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

हम चाहते थे कि यह परत गायब हो जाए।

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

क्या बदला

हर मुख्य पेज को एक सिद्धांत के आसपास फिर से डिज़ाइन किया गया: कैरेक्टर्स और कहानियाँ पहले, इंटरफ़ेस बाद में।

होम: संभावनाओं की गैलरी

पुराना होमपेज फंक्शनल था। फीचर्ड कैरेक्टर्स एक ग्रिड में। ब्राउज़ करने के लिए कैटेगरी। स्पष्ट कॉल टू एक्शन।

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

जिस पल आप Reverie खोलते हैं, आप एक वेबसाइट नहीं देख रहे। आप उन दुनियाओं को देख रहे हैं जो एक्सप्लोर होने का इंतज़ार कर रही हैं।

लॉगिन: जहाँ कैरेक्टर्स आपका स्वागत करते हैं

हमने सफेद बैकग्राउंड पर खाली फॉर्म फेंक दिया। अब, जब आप साइन इन करते हैं, कैरेक्टर्स खुद आपका स्वागत करते हैं।

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

मोबाइल पर, कैरेक्टर सेंटर्ड फॉर्म के पीछे एक सॉफ्ट बैकग्राउंड में फेड हो जाता है, अभी भी मौजूद है, अभी भी स्वागत करता है, लेकिन फोकस के लिए कभी प्रतिस्पर्धा नहीं करता।

यह एक छोटा स्पर्श है जो सब कुछ बदल देता है। लॉगिन करना अब किसी सर्विस के साथ ऑथेंटिकेट करने जैसा नहीं लगता। यह घर आने जैसा लगता है।

कैरेक्टर पेज: पोर्ट्रेट्स, प्रोफाइल्स नहीं

कैरेक्टर डिटेल पेज प्रोफाइल्स जैसे दिखते थे—जानकारी सेक्शंस में व्यवस्थित, स्टैट्स बॉक्सेस में, विवरण टेक्स्ट पैराग्राफ्स में।

अब ये इमर्सिव पोर्ट्रेट्स हैं। कैरेक्टर की इमेज या वीडियो पूरी स्क्रीन भरता है। डेस्कटॉप पर होवर करें और इमेज साफ हो जाती है, थोड़ी स्केल होती है जैसे कैरेक्टर आपसे मिलने के लिए आगे आ रहा हो। मोबाइल पर, इमेजेस डिफ़ॉल्ट रूप से क्रिस्प हैं—होवर की ज़रूरत नहीं।

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

आप किसी कैरेक्टर का डेटा नहीं देख रहे। आप उनसे मिल रहे हैं।

स्टोरी पेज: सिनेमैटिक कवर्स

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

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

नीचे के टैब्स बैकड्रॉप ब्लर और सूक्ष्म बॉर्डर्स के साथ रिफाइंड हैं, हीरो से कंटेंट तक का ट्रांज़िशन सीमलेस लगता है, अचानक नहीं।

डिस्कवरी फीड: एक क्यूरेटेड अनुभव

पुराना डैशबोर्ड एक लिस्ट थी जिसे आप स्क्रॉल करते थे। नया डिस्कवरी फीड एक क्यूरेटेड अनुभव है जिसे आप एक्सप्लोर करते हैं।

फीचर्ड स्टोरीज़ उसी सिनेमैटिक 21:9 रेशियो के साथ एक हॉरिज़ॉन्टल कैरोसेल में दिखाई देती हैं। होवर पर वीडियो प्ले होते हैं। क्विक एक्शंस—चैट जारी रखें, स्टोरी जारी रखें, कैरेक्टर बनाएं, स्टोरी लिखें—एक कॉम्पैक्ट पिल बार में बैठते हैं, हमेशा एक्सेसिबल लेकिन कभी डॉमिनेटिंग नहीं।

पूरा अनुभव खोज को प्रोत्साहित करता है, न कि सर्चिंग को, घूमने को प्रोत्साहित करता है, न कि शिकार को।

कैम्पेन पेज: इवेंट्स जो स्पेशल लगते हैं

कैम्पेन पेज अब इमर्सिव हीरो सेक्शंस के साथ खुलते हैं जो हर इवेंट को एक अवसर जैसा महसूस कराते हैं। काउंटडाउन टाइमर्स इनलाइन इंटीग्रेटेड हैं—अब कोई साइडबार विजेट्स विज़ुअल फ्लो को नहीं तोड़ते।

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

इसके पीछे का फिलॉसफी

हमने उन जगहों से प्रेरणा ली जो इमर्शन को समझती हैं:

स्ट्रीमिंग प्लेटफॉर्म्स जानते हैं कि कंटेंट को विज़ुअली बिकना चाहिए। आप डिस्क्रिप्शंस पढ़ने से पहले अपनी आँखों से ब्राउज़ करते हैं।

विज़ुअल नॉवेल्स समझते हैं कि कैरेक्टर्स को कॉन्टेक्स्ट चाहिए। उनके आसपास की दुनिया उतनी ही महत्वपूर्ण है जितनी वे खुद।

गेम लॉन्चर्स पहचानते हैं कि एक अनुभव में प्रवेश करना एक दहलीज़ पार करने जैसा महसूस होना चाहिए। इंटरफ़ेस कुछ भी शुरू होने से पहले मूड सेट करता है।

सिनेमा अंधेरा होता है ताकि स्क्रीन चमक सके। वातावरण अनुभव को बढ़ाता है।

हमने ये सबक हर जगह लागू किए। इमेजेस और वीडियो के लिए ज़्यादा विज़ुअल स्पेस। गहरे, ज़्यादा वायुमंडलीय बैकग्राउंड्स। ग्रेडिएंट ओवरले जो कंटेंट छिपाए बिना गहराई बनाते हैं। होवर इफेक्ट्स जो स्टैटिक इमेजेस को जीवित महसूस कराते हैं। टाइपोग्राफी जो प्रतिस्पर्धा के बजाय बढ़ाती है।

हमने क्या रखा

रीडिज़ाइन का मतलब शुरू से शुरू करना नहीं है। कुछ चीज़ें पूरी तरह से काम कर रही थीं:

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

वो डिटेल्स जो मायने रखती हैं

कुछ बदलाव जिन्हें आप शायद कॉन्शियसली नोटिस न करें, लेकिन महसूस करेंगे:

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

आपके लिए इसका क्या मतलब है

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

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

यह सिर्फ शुरुआत है

यह रीडिज़ाइन एक नई नींव स्थापित करता है। एक विज़ुअल लैंग्वेज जो कल्पना को पहले रखती है। एक इंटरफ़ेस फिलॉसफी जो इंफॉर्मेशन आर्किटेक्चर पर इमर्शन को प्राथमिकता देती है।

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

क्योंकि दिन के अंत में, आप Reverie पर किसी प्रोडक्ट का इस्तेमाल करने नहीं आते। आप बचने, जुड़ने, कल्पना करने, महसूस करने आते हैं।

इंटरफ़ेस को रास्ते से हटना चाहिए और उसे होने देना चाहिए।

नए Reverie को एक्सप्लोर करें। हम जानना चाहेंगे कि आप क्या सोचते हैं—अपने विचार हमारे Discord पर शेयर करें।