व्यू ट्रांज़िशन की मदद से, नेविगेशन को आसान बनाना

Yuriko Hirota
Yuriko Hirota
Saurabh Rajpal
Saurabh Rajpal

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

हालांकि, स्टेटस ट्रांज़िशन को चालू करना वाकई मुश्किल था, क्योंकि इसमें डेवलपर को दो अलग-अलग एलिमेंट की स्थितियों को मैनेज करना पड़ता था. यहां तक कि सिंपल क्रॉस-फ़ेड जैसी कुछ चीज़ों में एक ही समय में दोनों स्थितियां मौजूद होती हैं. इससे इस्तेमाल करने में आने वाली चुनौतियां सामने आती हैं, जैसे कि आउटगोइंग एलिमेंट पर ज़्यादा इंटरैक्शन को हैंडल करना. सहायक डिवाइसों का इस्तेमाल करने वाले लोगों के लिए, एक ऐसा समय होता है जिसमें पहले और बाद की स्थिति, दोनों एक ही समय पर डीओएम में होती हैं. इसके अलावा, चीज़ें ट्री में इस तरह इधर-उधर घूम सकती हैं कि देखने में ठीक लगता है, लेकिन इसकी वजह से पढ़ने की स्थिति और फ़ोकस गायब हो सकता है.

Chrome 111 में लॉन्च किए गए View ट्रांज़िशन एपीआई की मदद से, पेजों के बीच आसानी से और आसानी से ट्रांज़िशन किया जा सकता है. इसकी मदद से, अलग-अलग स्थितियों के बीच ओवरलैप किए बिना, डीओएम में बदलाव किया जा सकता है. साथ ही, स्नैपशॉट किए गए व्यू का इस्तेमाल करके, स्थितियों के बीच ट्रांज़िशन ऐनिमेशन बनाया जा सकता है.

आपको लग सकता है कि इसे लागू करना कितना आसान है? वहां किस तरह के इस्तेमाल के उदाहरण उपलब्ध हैं? दूसरे डेवलपर व्यू ट्रांज़िशन का इस्तेमाल कैसे कर रहे हैं?

इस लेख में चार अलग-अलग वेबसाइटों पर व्यू ट्रांज़िशन को लागू करने के बारे में जानकारी दी गई है: RedBus (यात्रा), CyberAgent (समाचार/ब्लॉग पब्लिशर), Nykaa (ई-कॉमर्स), और PolicyBazaar (बीमा) और व्यू ट्रांज़िशन एपीआई का इस्तेमाल करने से उनकी वेबसाइटों को अलग-अलग तरीकों से कैसे फ़ायदा हुआ.

redBus

RedBus, MakeMyTrip ग्रुप का हिस्सा है. यह बस बुकिंग और टिकट बेचने वाली एक वेबसाइट है. इसका मुख्यालय भारत के बेंगलुरु में है. यह दुनिया भर के अलग-अलग इलाकों में मौजूद है. यह उन शुरुआती वेबसाइटों में से एक थी जिन्होंने व्यू ट्रांज़िशन एपीआई का इस्तेमाल करके, अनुभव को लागू किया था.

Redbas ने व्यू में ट्रांज़िशन क्यों लागू किया है?

RedBus की टीम को ऐप्लिकेशन जैसा वेब अनुभव देने में दृढ़ विश्वास है, जो उनके मूल ऐप्लिकेशन से ज़्यादा से ज़्यादा मिलते-जुलते हैं. इतना ही नहीं, उन्होंने पिछले कुछ सालों में कई कस्टमाइज़ किए गए समाधान लागू किए थे. उदाहरण के लिए, उन्होंने व्यू ट्रांज़िशन एपीआई के बनने से पहले ही, पेज ट्रांज़िशन के लिए, पसंद के मुताबिक JavaScript और सीएसएस पर आधारित ऐनिमेशन रोल आउट किए. हालांकि, इसका मतलब यह हुआ कि उन्हें नेटवर्क और डिवाइस के निचले सेगमेंट में परफ़ॉर्मेंस मैनेजमेंट पर काम करना पड़ता था. इसकी वजह से, ज़रूरत के हिसाब से लोड होने की रणनीति से, कभी-कभी अलग-अलग तरह का अनुभव मिलता था.

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

लागू करने की तकनीकी जानकारी

RedBus, रिऐक्ट और EJS को अपने फ़्रंटएंड टेक्नोलॉजी स्टैक के तौर पर इस्तेमाल करता है. इसमें अलग-अलग प्रोसेस के लिए, एसपीए और एमपीए का कॉम्बिनेशन होता है. नीचे दिया गया कोड का हिस्सा दिखाता है कि व्यू ट्रांज़िशन का इस्तेमाल कैसे किया जाता है:

/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
  if(document.startViewTransition) {
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.push(url) : (window.location.href = url);
    })
  } else {
    reactHistory ? reactHistory.push(url) : (window.location.href = url);
  }
};

/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
  if(document.startViewTransition) {
    document.documentElement.classList.add('back-transition');
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.goBack() : history.back();
    })
    viewTransition.finished.finally(() => {
      document.documentElement.classList.remove('back-transition');
    })
  } else {
    reactHistory ? reactHistory.goBack() : history.back();
  }
};

नीचे दिए गए सीएसएस में slide-to-right, slide-to-left, slide-from-right, और slide-from-left सीएसएस ऐनिमेशन के मुख्य-फ़्रेम हैं.

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

कारोबार पर असर

RedBus ने अपनी साइट पर आईएनपी को बेहतर बनाने के साथ-साथ व्यू ट्रांज़िशन का इस्तेमाल करना शुरू किया. इससे 7% ज़्यादा बिक्री हुई. RedBus के सीनियर इंजीनियरिंग मैनेजर अमित कुमार ने कहा कि व्यू ट्रांज़िशन उन लोगों के लिए वाकई शानदार हैं जो असल में बेहतर उपयोगकर्ता अनुभव चाहते हैं और कम रखरखाव की इच्छा रखते हैं.

हमने अलग-अलग तरह के उपयोगकर्ताओं से जुड़े सुझाव, राय या शिकायत वाले सेशन किए. इनमें अलग-अलग तरह के लोगों से मिली अहम जानकारी शामिल की गई. लोगों की ज़रूरतों (बस और रेल) और उनकी ज़रूरतों के बारे में हमारी विशेषज्ञता और अनुभव की वजह से, हमें भरोसा है कि यह सुविधा शुरुआत से ही काफ़ी बेहतर साबित होगी. ऐसा करने के लिए, A/B टेस्टिंग की ज़रूरत नहीं होगी. व्यू ट्रांज़िशन की मदद से, ऐप्लिकेशन और वेब के बीच के फ़र्क़ को आसान बनाया जा सकता है.

अनूप मेनन, सीटीओ RedBus

CyberAgent

CyberAgent जापान की एक आईटी कंपनी है. यह ब्लॉग और समाचार पब्लिशिंग के साथ-साथ कई ऑनलाइन सेवाएं देती है.

CyberAgent ने व्यू ट्रांज़िशन को क्यों लागू किया?

CyberAgent ने पहले उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, सीएसएस ऐनिमेशन का इस्तेमाल करने या ऐनिमेशन वाले ट्रांज़िशन लागू करने के फ़्रेमवर्क का इस्तेमाल करने के बारे में सोचा था. हालांकि, वे डीओएम को रेंडर करने और कोड के रखरखाव में खराब परफ़ॉर्मेंस को लेकर चिंतित थे. जब Chrome ने View ट्रांज़िशन एपीआई के साथ काम करने की सुविधा जोड़ी, तब कंपनी इस सुविधा का इस्तेमाल करके, पेज ट्रांज़िशन के लिए ऐसी दिलचस्पियों का इस्तेमाल कर पाई जो इन चुनौतियों से निपट गई.

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

उन्होंने अलग-अलग डिवाइस पर अलग-अलग ऐनिमेशन अनुभव डिज़ाइन करने के लिए, मीडिया क्वेरी का भी इस्तेमाल किया. मोबाइल पेजों के लिए उनमें एलिमेंट ट्रांज़िशन शामिल थे, लेकिन इस इफ़ेक्ट में डेस्कटॉप के लिए बहुत ज़्यादा हलचल थी.

@media screen and (min-width: 769px) {
  .main-visual {
    view-transition-name: none !important;
  }
}

लागू करने की तकनीकी जानकारी

CyberAgent अपना एसपीए बनाने के लिए Next.js का इस्तेमाल करता है. नीचे दिए गए उदाहरण से पता चलता है कि वे व्यू ट्रांज़िशन एपीआई का इस्तेमाल कैसे करते हैं.

export const usePageTransition = () => {
  const router = useRouter();
  const defferedRef = useRef<Deferred | null>(null);

  useEffect(() => {
    const handleRouteChangeComplete = () => {
      defferedRef.current?.resolve();
    };

    const handleRouteChangeStart = (url: string) => {
      if (!("startViewTransition" in document)) return;
      if (router.asPath === url) return;

      const deffered = new Deferred();
      defferedRef.current = deffered;
      (document as Document).startViewTransition(async () => {
        await deffered.promise;
      });
    };

    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeComplete);

    return () => {
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeComplete);
    };
  }, [router.asPath]);
};

कुछ और सैंपल Next.js कोड देखें.

प्रीरेंडरिंग टेक्नोलॉजी की मदद से, MPA के लिए ट्रांज़िशन देखें

CyberAgent ने हमारे नए एक से ज़्यादा पेज ऐप्लिकेशन के लिए व्यू ट्रांज़िशन एपीआई (MPA) (फ़िलहाल, फ़्लैग chrome://flags/#view-transition-on-navigation के तहत) को Ameba News नाम की एक सेवा पर आज़माया. यह एक न्यूज़ पोर्टल साइट है.

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

दूसरा विकल्प, खबरों को हाइलाइट करने वाले पेज के बीच में होता है, जहां कॉन्टेंट का एक हिस्सा दिखाया जाता है. इसके बाद, जब कोई व्यक्ति ज़्यादा जानकारी देखें पर क्लिक करता है, तो उस लेख का बाकी हिस्सा धुंधला दिखता है.

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

लोगों ने यह काम इस तरह किया: उन्होंने पेज के अलग-अलग हिस्सों के लिए एक अलग view-transition-name असाइन किया. उदाहरण के लिए, उन्होंने एक view-transition-name को लेख के सबसे ऊपर वाले हिस्से के लिए और दूसरा नीचे वाले हिस्से के लिए असाइन किया. साथ ही, पेज के ऊपरी हिस्से में कोई ऐनिमेशन नहीं जोड़ा.

::view-transition-old(root) {
  animation:
    var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
  }

::view-transition-new(root) {
  animation:
    var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}

इस डायग्राम में दिखाया गया है कि पेज के सबसे ऊपर वाले हिस्से का ऐनिमेशन कैसे नहीं दिखता है.

व्यू ट्रांज़िशन एपीआई का इस्तेमाल करने के लिए CyberAgent, एक और दिलचस्प बात है. यह है कि उन्होंने ज़्यादा जानकारी वाले पेज पर, प्रीरेंडरिंग के नियमों को आसानी से लागू करने के लिए, Quicklink का इस्तेमाल किया. उसका सैंपल कोड यहां दिया गया है:

import { prerender } from ‘https://.../quicklink.mjs’;

window.addEventListener('load', () => {
  const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
  if (!match) return;
    const [_, dirname, entryId] = match;
    prerender(`/${dirname}/${entryId}/`);
  });

क्विकलिंक लागू करने के बारे में ज़्यादा जानकारी पाने के लिए, यह लेख पढ़ें.

टेस्टिमोनियल

CyberAgent में Ameba सेवा की टेक लीड, कज़ुनारी हरा ने कहा कि व्यू ट्रांज़िशन का कारोबार पर दो वजहों से काफ़ी असर पड़ सकता है.

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

ट्रांज़िशन देखें, मेरे पसंदीदा एपीआई में से एक है. स्टैंडर्ड ब्राउज़र सुविधा के तौर पर ऐनिमेशन जोड़ने की सुविधा से, लाइब्रेरी में अन्य सुविधाओं के मुकाबले व्यू ट्रांज़िशन को आसानी से लागू और बनाए रखना आसान हो जाता है. हम अपने ब्रैंड की जानकारी देने के लिए, और सेवाओं के लिए व्यू ट्रांज़िशन लागू करना चाहते हैं.

काज़ुनारी हारा, अमीबा के सीटीओ

न्याका

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

Nykaa ने व्यू ट्रांज़िशन को क्यों लागू किया?

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

लागू करने की तकनीकी जानकारी

न्याका ने अपना एसपीए बनाने के लिए प्रतिक्रिया और इमोशन का इस्तेमाल किया. प्रतिक्रिया के साथ ट्रांज़िशन देखने की सुविधा का इस्तेमाल करने के तरीके के बारे में ज़्यादा सैंपल कोड, यहां देखा जा सकता है.

if (document.startViewTransition) {
      document.startViewTransition(() => {
        history.push(productUrl);
      });
    } else {
      history.push(productUrl);
   }

const fadeIn = keyframes`
  from { opacity: 0; }
`;

const fadeOut = keyframes`
  to { opacity: 0; }
`;

const slideFromRight = keyframes`
  from { transform: translateX(300px); }
`;

const slideToLeft = keyframes`
  to { transform: translateX(-300px); }
`;

const slideToRight = keyframes`
  to { transform: translateX(300px); }
`;

const slideFromLeft = keyframes`
  from { transform: translateX(-300px); }
`

साइड ड्रॉर ऐनिमेशन के लिए सीएसएस:

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}

::view-transition-new(root) {
  animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}

.back-transition {
  display: inherit;
}

.back-transition::view-transition-old(root) {
  animation-name: fade-out, ${slideToRight};
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, ${slideFromLeft};
}

टेस्टिमोनियल

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

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

हम आने वाली सभी सुविधाओं में, व्यू ट्रांज़िशन को लागू करने का वादा करते हैं. हमने कुछ मामलों की पहचान कर ली है और हमारी टीम उन पर काम कर रही है.

कृष्णा आर वी, डिज़ाइन डिपार्टमेंट के वीपी

PolicyBazaar

PolicyBazaar का मुख्यालय गुरुग्राम में है. यह भारत की सबसे बड़ी इंश्योरेंस एग्रीगेटर और मल्टीनैशनल फ़ाइनेंशियल टेक्नोलॉजी कंपनी है.

PolicyBazaar ने व्यू ट्रांज़िशन को क्यों लागू किया?

नीति बाज़ार को ध्यान में रखकर काम करने वाली कंपनी होने के नाते, PolicyBazaar की टीम का मकसद हमेशा यह रहा है कि उपयोगकर्ताओं को उनकी अहम गतिविधियों के दौरान, उन्हें बेहतरीन अनुभव दिया जा सके. व्यू ट्रांज़िशन एपीआई के लॉन्च होने से पहले ही, JavaScript और सीएसएस का इस्तेमाल करके कस्टम ट्रांज़िशन लागू करना आम बात थी. इसकी वजह यह थी कि इन ट्रांज़िशन ने उपयोगकर्ता अनुभव को बेहतर बनाया, नेविगेशन का फ़्लो बेहतर बनाया, और अपनी वेबसाइटों की विज़ुअल अपील को बेहतर बनाया.

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

PolicyBazaar ने कोटेशन से पहले के अपने सफ़र में, अलग-अलग एलिमेंट के लिए व्यू ट्रांज़िशन का इस्तेमाल किया. ऐसा इसलिए किया गया, ताकि संभावित खरीदारों को बीमा पॉलिसी खरीदने के लिए ज़रूरी जानकारी देने में मदद मिले.

लागू करने की तकनीकी जानकारी

वे अपने ज़्यादातर कोडबेस में, एंगुलर और रीऐक्ट के साथ हाइब्रिड फ़्रेमवर्क का इस्तेमाल करते हैं. यहां एंगुलर में लिखे गए और अमान सोनी (PolicyBazaar के लीड फ़्रंटएंड डेवलपर) कोड से लिया गया वीटी का हिस्सा दिया गया है:

toggleWidgetAnimation() {
    let doc:any = document;

    if (!doc.startViewTransition) {
      this.toggleWidget();
      return;
    }

    doc.startViewTransition(() => this.toggleWidget());
  }

  toggleWidget() {
    let badgeEle = document.querySelector('.animate_init_state_one');
    let textEle = document.querySelector('.animate_init_state_two');

    badgeEle.classList.toggle('hide');
    textEle.classList.toggle('hide');
  }

टेस्टिमोनियल

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

PB के लिए, वेब अनुभव को बेहतर बनाना बेहद अहम लक्ष्य है. साथ ही, बेहतरीन अनुभव के साथ इस लक्ष्य को हासिल करने में, VT अहम टूल साबित हुआ है. हमारे डेवलपर समुदाय और उपयोगकर्ता आधार, दोनों के बीच यह सुविधा बड़े पैमाने पर अपील करती है. इससे हमारी टीम में उत्साह की भावना बढ़ी है. हमें उम्मीद है कि अलग-अलग तरह के पीओडी के साथ इसे इंटिग्रेट करने की प्रोसेस का बेहतर असर पड़ेगा. इसलिए, हमें उम्मीद है कि बेहतर काम करने के साथ-साथ उपयोगकर्ताओं के अनुभव पर भी काफ़ी सकारात्मक असर पड़ेगा.

सौरभ तिवारी (सीटीओ, PolicyBazaar)

अगले चरण

क्या आपको व्यू में बदलाव करने की सुविधा आज़माने में दिलचस्पी है? यहां कुछ संसाधन दिए गए हैं, जिनका इस्तेमाल करके आप ज़्यादा जानकारी पा सकते हैं: