एक अधिक शांत Reverie का डिज़ाइन: चैट से पूरे प्रोडक्ट तक

यदि आपने पिछले कुछ दिनों में कोई बातचीत खोली है, तो शायद आपको लगा होगा कि कुछ अलग है।

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

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

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

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

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

हमने Reverie की पहचान घटाने के लिए नहीं, बल्कि उसे अनुभव से उभरने देने के लिए रीडिज़ाइन किया है।

हल्का, लेकिन ठंडा नहीं

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

नया सिस्टम शांत है, फिर भी गर्म है। तेज सफेद रंग की जगह हल्के रंग वाले न्यूट्रल सरफेस हैं। लंबे पढ़ने वाले टेक्स्ट अधिक गहरे और मजबूत हैं। बॉर्डर संयमित, छायाएँ हल्की और रंग अधिक उद्देश्यपूर्ण हैं। इससे दृश्य भार घटता है, पर Reverie अब भी कहानियों और रिश्तों की जगह लगता है।

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

लंबे पढ़ने के लिए टाइपोग्राफी

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

सिद्धांत सरल हैं:

लंबा टेक्स्ट शांत और ठोस लगे।
हर लेबल पढ़ने से पहले एक्शन पहचाना जा सके।
सहायक जानकारी पीछे जाए, गायब न हो।
अलग स्क्रीन, थीम और रोशनी में पेज पढ़ने योग्य रहे।

अच्छी टाइपोग्राफी ध्यान नहीं मांगती; उसे बनाए रखना आसान करती है।

पूरे प्रोडक्ट में एक कंपोनेंट भाषा

यह हर पेज पर नई त्वचा लगाने का काम नहीं था। हमने साझा कंपोनेंट भाषा को फिर से बनाया।

बटन, कार्ड, डायलॉग, मेनू, टैब, फॉर्म, टेबल, टूलटिप, टोस्ट, ड्रॉअर, पॉपओवर और नेविगेशन अब इन बातों के लिए एक ही नियम अपनाते हैं:

कोनों की गोलाई और बॉर्डर कंट्रास्ट
सरफेस रंग, ऊँचाई और छाया
फोकस, होवर और दबाए गए स्टेट
टेक्स्ट वज़न और स्पेसिंग
अर्थ बताने वाले रंग

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

हमने हाइलाइट और सफलता के लिए स्पष्ट साझा वैरिएंट भी जोड़े, ताकि हर फीचर अपना अलग ग्रेडिएंट न बनाए।

कठिन हिस्सा: अपवाद ढूँढना

बटन कंपोनेंट बदलने से हर बटन अपने आप नहीं बदलता।

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

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

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

कम सजावट, स्पष्ट इंटरैक्शन

हमने वे प्रभाव हटाए जो इंटरैक्टिव दिखते थे पर उपयोगी जानकारी नहीं देते थे।

हर कार्ड पर भारी छाया नहीं है, होवर की गति संयमित है, ग्रेडिएंट केवल जोर देने वाले क्षणों में हैं और बॉर्डर हर चीज़ को नए बॉक्स में बंद किए बिना संरचना दिखाते हैं।

साथ ही असली इंटरैक्शन स्टेट स्पष्ट हुए:

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

सजावट घटने पर प्रतिक्रिया बेहतर करने की जगह मिली। इंटरफ़ेस कम चलता है, पर अधिक बताता है।

एक्सेसिबिलिटी दृश्य सिस्टम का हिस्सा है

सिर्फ माउस से दिखने वाला रूप बताने वाला डिज़ाइन सिस्टम अधूरा है।

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

ये बदलाव जानबूझकर सूक्ष्म हैं। एक्सेसिबिलिटी कोई अलग मोड नहीं, डिफ़ॉल्ट व्यवहार होना चाहिए।

आगे के लिए बेहतर आधार

सबसे मूल्यवान परिणाम कोई खास रंग, गोलाई या छाया नहीं है। अब एक ही डिज़ाइन सवाल के कम विरोधी जवाब हैं।

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

एकरूपता का अर्थ हर स्क्रीन को समान बनाना नहीं है। इसका अर्थ स्थिर अपेक्षाएँ देना है, ताकि सामग्री बदले पर इंटरफ़ेस परिचित रहे।

हम चाहते हैं कि आप क्या महसूस करें

आदर्श रूप से शुरुआत में बहुत कुछ नहीं।

Reverie बस पढ़ने में आसान, चलाने में शांत और खोज से बातचीत, निर्माण तथा अकाउंट टूल तक अधिक सुसंगत लगे। महत्वपूर्ण एक्शन जल्दी दिखें, सहायक कंट्रोल ध्यान न खींचें और लंबे सत्र आँखों को कम थकाएँ।

किरदार अब भी अभिव्यक्तिपूर्ण हैं, कहानियों में अब भी वातावरण है और उत्सव के क्षण अब भी जीवंत हो सकते हैं।

इंटरफ़ेस बस बेहतर जानता है कि कब बोलना है—और कब इतना शांत होना है कि बाकी सब मायने रख सके।

नया डिज़ाइन सिस्टम अब पूरे Reverie में है। यदि कुछ खास तौर पर बेहतर लगा हो—या अब भी असंगत लगे—तो Discord समुदाय में हमें बताएँ।