स्क्रीन पर गति: कम ही बेहतर है

यह लेख 6 नवंबर 2026 को लिखा गया था।

AI टूल्स तेज़ी से बदलते हैं। लेकिन एक पेज पर झेले जाने वाली हलचल (motion) की सीमा नहीं बदलती। होवर (hover), एक छोटा ट्रांज़िशन (transition), और टैप पर हल्की सी प्रतिक्रिया — पास होने के लिए इतना ही काफ़ी है। ग्लासमॉर्फ़िज़्म (glassmorphism), पैरेलेक्स (parallax), स्टैगर्ड एंट्रेंस (staggered entrances), कैरोसेल (carousels), और स्क्रॉल स्नैप (scroll snap) — इन सबको पहचानना और मना करना सीखना चाहिए। इसे एनिमेशन गाइड नहीं, बल्कि एक सीमा तय करने वाले नियम की तरह पढ़ें।

AI मॉडल पेज में एनिमेशन इसलिए जोड़ते हैं क्योंकि हलचल दिखने में मेहनत जैसी लगती है। एक शांत और स्थिर पेज डेमो (demo) में भले अधूरा दिखे, लेकिन वेटिंग रूम में बैठे व्यक्ति के लिए वही पूरा होता है। यह शृंखला जिन लोगों के लिए लिखी गई है, वे उस वेटिंग रूम के ज़्यादा करीब हैं: हाथ में फोन, तेज़ धूप वाली सड़क, ऐसी भाषा जो शायद AI मॉडल की पहली भाषा न हो, और कीमत पढ़ते समय हिलती स्क्रीन को झेलने का बिल्कुल समय नहीं। हलचल तभी जायज़ है जब वह किसी बदलाव को समझाती हो; सिर्फ़ यह दिखाने के लिए कि कोई एनिमेशन का नाम जानता है, हलचल जोड़ना बिल्कुल ग़लत है।

तीन प्रभाव जो अपनी जगह बनाते हैं

होवर (hover) तब होने वाला बदलाव है जब माउस का पॉइंटर किसी बटन या लिंक पर ठहरता है: जैसे रंग का हल्का सा बदलना या नीचे लाइन आना। यह माउस इस्तेमाल करने वाले को बताता है कि इस चीज़ को दबाया जा सकता है। लेकिन उँगली से छूने वाले फोन पर होवर जैसी कोई चीज़ नहीं होती। जो कुछ सिर्फ़ होवर पर दिखाई देता है, वह फोन पर गायब हो जाता है। AI से कहें कि वही संकेत कीबोर्ड इस्तेमाल करने वाले के लिए फोकस (focus) पर भी दिखे, या फिर बिल्कुल न दिखे।

ट्रांज़िशन (transition) वह छोटा सा समय है जो किसी बदलाव में लगता है — आमतौर पर एक सेकंड का पाँचवाँ हिस्सा। एक ही झटके में अचानक दिखने वाला ड्रॉअर (drawer) टूटा हुआ लगता है, जबकि एक सेकंड लेने वाला ड्रॉअर धीमा लगता है। खोलने और बंद होने पर एक छोटे ट्रांज़िशन की माँग करें। वाक्य के हर अक्षर पर ट्रांज़िशन न माँगें; पढ़ना कोई इवेंट नहीं है।

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

वे नाम जिन्हें सिर्फ़ पहचानना ज़रूरी है

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

• Glassmorphism (ग्लासमॉर्फ़िज़्म) — धुंधला काँच जैसा पैनल। यह ऊपर लिखे शब्दों के कंट्रास्ट (contrast) को कम कर देता है। अगर शब्द पढ़ने में मुश्किल हों, तो काँच हटा दें।
• Parallax (पैरेलेक्स) — बैकग्राउंड का टेक्स्ट की तुलना में अलग रफ़्तार से चलना। यह कुछ लोगों को चक्कर या मिचली जैसा महसूस कराता है, और कम हलचल (less motion) चाहने वाली सिस्टम सेटिंग का विरोध करता है।
• Bento (बेंटो) — अलग-अलग साइज़ के बक्सों का ग्रिड। डैशबोर्ड के लिए तो यह ठीक है, लेकिन पहली स्क्रीन पर यह छुपा देता है कि कौन सी बात सचमुच अहम है, क्योंकि बक्सों का साइज़ खुद बहस कर रहा होता है।
• Stagger (स्टैगर) — चीज़ों का एक के बाद एक देरी से प्रकट होना। व्यक्ति उस सूची का इंतज़ार करता रहता है जिसे वह तुरंत पढ़ सकता था।
• Carousel (कैरोसेल) — बग़ल में खिसकने वाली तस्वीरों या कार्डों की लाइन। ज़्यादातर लोग पहली स्लाइड के आगे कभी नहीं जाते। बात को छिपाने के बजाय सीधे पेज पर लिखें।
• Scroll snap (स्क्रॉल स्नैप) — स्क्रॉल करते ही पेज का अगली पूरी स्क्रीन पर लॉक हो जाना। फोन पर यह लोगों को उन हिस्सों के बीच फँसा देता है जिन्हें वे सिर्फ़ सरसरी तौर पर देखना चाहते थे।

इन पर पैराग्राफ़ भर अभ्यास करने की ज़रूरत नहीं है। जब ये बिना बुलाए आएँ, तो इन्हें साफ़ मना करें: No glass, no parallax, no carousel, no scroll snap. Short transitions only. यह एक वाक्य अपने आप में पूरा ब्रीफ़ है।

धूप में दुकान के बाहर कीमत देखना

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

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

इसे रोकने वाला ब्रीफ़ छोटा होता है, और वह असली नामों का इस्तेमाल करता है ताकि मॉडल “इसे शांत बनाओ” का मतलब कोई नई सजावट न निकाल ले:

No carousel for the price. No glass behind the number. No parallax. No stagger on the list of classes. A short transition when a drawer opens, and no transition at all if the person has asked the phone for reduced motion. Dark text on a flat light surface. The price is the first fact in the section, not the second slide.

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

सिस्टम की वह सेटिंग जो एनिमेशन से ऊपर है

ऑपरेटिंग सिस्टम उपयोगकर्ता को कम हलचल (reduced motion) का विकल्प चुनने देते हैं। जो पेज इस सेटिंग को नज़रअंदाज़ करता है, वह जीवंत नहीं बल्कि उपयोगकर्ता की बताई गई ज़रूरत का अनादर कर रहा होता है। ब्रीफ़ में साफ़ कहें: अगर उपयोगकर्ता ने reduced motion चुना है, तो अंतिम स्थिति तुरंत दिखाएँ — बिना किसी स्लाइड या स्टैगर के। जानकारी बनी रहती है, फ़ालतू एनिमेशन रद्द हो जाता है।

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

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