ניווט חלק מתאפשר הודות למעברי תצוגה

Yuriko Hirota

Saurabh Rajpal

למעברים יש יתרונות רבים למשתמשים, כולל עזרה בשמירה על ההקשר שלהם והפחתת התפיסה של זמן האחזור. מפתחים רוצים ליצור מעברים חלקים בין דפים, כדי לעזור להגביר את המעורבות של המשתמשים באתר שלהם.

עם זאת, הפעלת מעברי מצב הייתה קשה מאוד כי המפתחים נדרשו לנהל מצבים של שני רכיבים שונים. גם פעולה פשוטה כמו מעבר הדרגתי (cross-fade) מחייבת את נוכחות שני המצבים בו-זמנית. הדבר יוצר אתגרים בנוחות השימוש, כמו טיפול באינטראקציה נוספת ברכיב היוצא. למשתמשים במכשירי עזר, יש תקופה שבה המצב הקודם והמצב הבא נמצאים ב-DOM בו-זמנית. בנוסף, ייתכן שדברים ינועו סביב העץ באופן שתקין מבחינה חזותית, אבל יכול לגרום בקלות לאובדן המיקום והמיקוד בקריאה.

View Transitions API, שהושקה ב-Chrome 111, מאפשרת ליצור מעברים חלקים ופשוטים בין דפים. היא מאפשרת לשנות את ה-DOM בלי חפיפה בין המצבים, ולהציג אנימציית מעבר בין המצבים באמצעות תצוגות של קובצי snapshot.

אולי אתם תוהים כמה קל להטמיע את התכונה הזו. אילו תרחישים לדוגמה יש? איך מפתחים אחרים משתמשים במעברי תצוגה?

במאמר הזה נסביר איך הטמענו את View Transitions API ב-4 אתרים שונים: RedBus (נסיעות), CyberAgent (אתר חדשות/בלוג), Nykaa (מסחר אלקטרוני) ו-PolicyBazaar (ביטוח), ונראה איך האתרים שלהם נהנו בדרכים שונות מהשימוש ב-View Transitions API.

redBus

redBus הוא אתר להזמנת כרטיסים לאוטובוסים, שנמצא בבעלות קבוצת MakeMyTrip. המטה שלו נמצא בבנגלור שבהודו, והוא פעיל במיקומים גיאוגרפיים שונים ברחבי העולם. זה היה אחד מהאתרים הראשונים שהטמיעו חוויה באמצעות View Transitions API.

למה Redbus הטמיעה מעברים בין תצוגות?

הצוות של redBus מאמין מאוד ביצירת חוויית שימוש מאוחדת באינטרנט שדומה לאפליקציה, וחוויה שקרובה ככל האפשר לאפליקציות המקוריות שלהם. למעשה, הם הטמיעו כמה פתרונות בהתאמה אישית לאורך השנים. לדוגמה, הם השיקו אנימציות בהתאמה אישית שמבוססות על JavaScript ו-CSS למעברים בין דפים, עוד לפני ש-View Transitions API פותח. עם זאת, המשמעות הייתה שהם נאלצו להתמודד עם ניהול הביצועים בפלחים נמוכים יותר של הרשת והמכשירים, מה שהוביל לפעמים לחוויה שונה כשהשתמשו באסטרטגיית טעינה דינמית.

ב-redBus השתמשו במעברי תצוגה במספר תהליכים שעוברים המשתמשים. לדוגמה, בקטע העזרה העצמית באפליקציה לנייד, שבו דפי אינטרנט נפתחו בכרטיסיות בהתאמה אישית של Chrome, ובמשפך ההזמנות של כרטיסי האוטובוס, שבו המשתמשים עוברים מדף המלאי לדף התשלומים. במקרה השני, מעברים בין תצוגות הובילו לניווט חלק יותר בין דפים, וכתוצאה מכך לשיעור המרה גבוה יותר. הסיבה לכך היא חוויית משתמש טובה יותר וביצועים מורגשים טובים יותר בזמן ביצוע הפעולות הכבדות – כמו אחזור המלאי הזמין העדכני ביותר.

פרטים טכניים של ההטמעה

ב-redBus משתמשים ב-React וב-EJS כסטאק הטכנולוגי של הקצה הקדמי, עם שילוב של SPA ו-MPA בתהליכים שונים. קטע הקוד הבא מראה איך משתמשים במעברי תצוגה:

/* 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();
  }
};

בקוד ה-CSS הבא, slide-to-right,‏ slide-to-left,‏ slide-from-right ו-slide-from-left הם פריימים מרכזיים של אנימציית CSS.

::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 בחרו להטמיע מעברים בין תצוגות יחד עם מאמצי שיפור של INP באתר, והדבר הוביל לעלייה של 7% במכירות. Amit Kumar, מנהל תוכנית ניהול בכירה ב-redBus, אמר שתנועות מעבר בין תצוגות הן פתרון מצוין למי שרוצה לשפר את חוויית המשתמש ולצמצם את העלויות הנלוות לתחזוקה.

ערכנו סשנים מקיפים של משוב ממשתמשים, שכללו תובנות חשובות מקבוצה מגוונת של משתמשים. ההבנה העמוקה שלנו לגבי בסיס המשתמשים שלנו (אוטובוסים ורכבות) והצרכים שלהם, בשילוב עם המומחיות שלנו, הובילו אותנו להאמין שהתכונה הזו תספק ערך משמעותי כבר מההתחלה, ללא צורך בבדיקת A/B. מעברים בין תצוגות הם צעד נוסף למלא את הפער בין האפליקציה לאינטרנט, עם חוויית ניווט חלקה.

Anoop Menon, מנהל טכנולוגיות ראשי (CTO) ב-redBus

CyberAgent

CyberAgent היא חברת IT שממוקמת ביפן ומספקת שירותים רבים באינטרנט, כולל פרסום בלוגים וחדשות.

למה CyberAgent הטמיעה מעברים בין תצוגות?

בעבר, ב-CyberAgent שקלו להשתמש באנימציות CSS או להשתמש ב-framework כדי להטמיע מעברים מונפשים לשיפור חוויית המשתמש, אבל הם חששו מהביצועים הנמוכים של עיבוד DOM ומהתחזוקה של הקוד. כשנוספה ל-Chrome תמיכה ב-View transitions API, הם התלהבו מהאפשרות להשתמש בו כדי ליצור מעברים מעניינים בין דפים שיעזרו להם להתגבר על האתגרים האלה.

CyberAgent הטמיעה מעברים בין תצוגות של רשימת הבלוגים לבין דף הבלוג. כאן אפשר לראות איך הוסיפו את המעבר בין הרכיבים לתמונה הראשית. אתם יכולים להיכנס לאתר שלהם ולנסות את התכונה הזו כבר היום.

הם השתמשו גם בשאילתות מדיה כדי לתכנן חוויות אנימציה שונות למכשירים שונים. בדפים לנייד הם כללו מעברים בין רכיבים, אבל האפקט הזה כלל תנועה רבה מדי למחשב.

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

פרטים טכניים של ההטמעה

ב-CyberAgent משתמשים ב-Next.js כדי ליצור את ה-SPA שלהם. בדוגמת הקוד הבאה אפשר לראות איך משתמשים ב-View Transition API.

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 ניסו גם את View Transitions API החדש שלנו לאפליקציות עם כמה דפים (MPA) (כרגע תחת הדגל chrome://flags/#view-transition-on-navigation) בשירות שנקרא Ameba News, שהוא אתר פורטל חדשות.

השתמשנו במעברי תצוגה בשני מקומות: הראשון הוא כשמשנים את הקטגוריות של החדשות, כפי שמוצג בסרטון הבא.

השני הוא בין דף החדשות הנבחרות, שבו מוצג קטע מהתוכן, לבין הזמן שבו המשתמש לוחץ על פרטים נוספים, והשאר של המאמר מופיע בהדרגה.

העניין המעניין הוא שהם הוסיפו אנימציה רק לחלק שישתנה אחרי הלחיצה על הלחצן. השינוי הקטן הזה בעיצוב האנימציה גורם לדף MPA להיראות יותר כמו SPA מנקודת המבט של המשתמש, כאשר רק התוכן החדש מופיע באנימציה:

כך הם עשו זאת: הם הקצתה ערך view-transition-name שונה לחלקים השונים של הדף. לדוגמה, הם הקצתה 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 ב-API של מעברים בין תצוגות הוא שהם השתמשו בקישור מהיר כדי להטמיע בקלות כללים לעיבוד מראש בדף הפרטים. הנה הקוד לדוגמה שלהם:

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}/`);
  });

במאמר הזה אפשר לקרוא מידע נוסף על הטמעת קישורי ה-Quicklink.

עדות

Kazunari Hara, מנהל הטכנולוגיה של שירות Ameba ב-CyberAgent, אמר שהמעבר בין התצוגות עשוי להשפיע באופן משמעותי על העסק, משתי סיבות.

ראשית, הם מנחים את המשתמשים בדף. מעברים בין תצוגות מאפשרים למשתמשים להתמקד באופן חזותי במסר החשוב ביותר, ומסייעים להם להפיק את המקסימום מדף האינטרנט. בנוסף, הן משדרגות את המותג ומדגישות אותו באמצעות אנימציה. ל-CyberAgent יש עיצוב אנימציה ייעודי שמשמש לצורך תקשורת של המותג. בעזרת מעברים בין תצוגות, הם יכולים להטמיע את חוויית המותג הזו בלי להוסיף את העלות של תחזוקת ספריות חיצוניות.

View Transitions הוא אחד מממשקי ה-API האהובים עלי. היכולת להוסיף אנימציות כתכונה רגילה בדפדפן מאפשרת להטמיע את מעברי התצוגה ולתחזק אותם בקלות רבה יותר בהשוואה לפתרונות אחרים שמסתמכים על ספריות. אנחנו מתכננים להטמיע את מעברי התצוגה בעוד שירותים כדי להציג את המותג שלנו.

Kazunari Hara, מנהל טכנולוגיות ראשי (CTO) ב-Ameba

Nykaa

Nykaa היא פלטפורמת המסחר האלקטרוני הגדולה ביותר בתחום האופנה והיופי בהודו. המטרה שלהם היא ליצור חוויית שימוש באתר לנייד שדומה ככל האפשר לחוויית השימוש באפליקציה המקורית. בעבר, כשהם ניסו להטמיע אנימציות של מעברים, הם נתקלו בקשיים בכתיבת קוד JavaScript מורכב בהתאמה אישית. הדבר השפיע גם על ביצועי האתר שלהם באופן שולי.

למה Nykaa הטמיעה מעברים בין תצוגות?

כשהשקנו את מעברי התצוגה, הצוות של Nykaa זיהה הזדמנות: מאחר שהמעברים האלה זמינים באופן מקורי, אפשר לשפר באופן משמעותי את חוויית המשתמש של מעברי הדפים בלי להשפיע על הביצועים. ב-Nykaa משתמשים הרבה במעברי תצוגה כדי לעבור מדף פרטי המוצר לדף כרטיס המוצר.

פרטים טכניים של ההטמעה

ב-Nykaa השתמשו ב-React וב-Emotion כדי ליצור את ה-SPA שלהם. כאן אפשר למצוא דוגמאות נוספות לקוד לשימוש ב-View Transitions עם React.

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); }
`

CSS לאנימציה של התפריט הצדדי:

::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};
}

עדות

Sunit Jindal, מנהל האפליקציות ב-Nykaa, אמר שהיתרון הגדול ביותר של המעבר בין התצוגות הוא 'התחושה של מהירות'. ב-Nykaa השתמשו באפקטים של שימרון כדי להמתין לטעינה של התוכן מהקצה העורפי, אבל גילו שהצגת אפקט השימרון לא סיפקה למשתמשים מידע על משך ההמתנה לטעינה של התוכן. כשהשתמשנו במעברי תצוגה, המעבר עצמו נתן למשתמשים תחושה ש "משהו עומד לקרות", וכך הפחית את מידת הסבל שלהם במהלך ההמתנה.

ב-Nykaa התלהבו מאוד מחוויית המשתמש המשופרת החדשה של דף האינטרנט שלהם עם מעברים בין תצוגות, והם מוכנים להטמיע מעברים בין תצוגות גם בדפים נוספים. זה מה שאמר סגן נשיא החברה לענייני עיצוב:

אנחנו מחויבים באופן לא רשמי להטמיע מעברים בין תצוגות בכל התכונות העתידיות שבהן זה הגיוני. כבר זיהינו כמה תחומים והצוות משקיע בהם באופן פעיל.

Krishna R V, סגן נשיא לעיצוב

PolicyBazaar

PolicyBazaar היא חברת טכנולוגיה פיננסית רב-לאומית ו-aggregator הביטוח הגדול ביותר בהודו. המטה שלה נמצא בגורג'און.

למה ב-PolicyBazaar החליטו להטמיע מעברים בין תצוגות?

PolicyBazaar היא חברה שמתמקדת באינטרנט, ולכן הצוות שלה תמיד שם דגש על מתן חוויית המשתמש הטובה ביותר בכל שלבי המסלול של המשתמשים. עוד לפני ההשקה של View Transitions API, היה מקובל להטמיע מעברים מותאמים אישית באמצעות JavaScript ו-CSS, כי הם שיפרו את חוויית המשתמש, יצרו תהליך ניווט חלק ושיפרו את המראה החזותי הכולל של האתרים.

עם זאת, ההטמעות בהתאמה אישית האלה הגיעו עם עלות של עיכובים מדי פעם על סמך ביצועים, מורכבות של תחזוקת קוד ותאימות לא אופטימלית למסגרות שבהן נעשה שימוש. ה-View Transitions API עזר להם להתגבר על רוב האתגרים האלה על ידי מתן ממשק קל לשימוש עם יתרונות ביצועים שזמינים באופן מקורי.

ב-PolicyBazaar השתמשו במעברי תצוגה בין רכיבים שונים בתהליך שלפני הצעת המחיר, כדי לעודד את הקונים הפוטנציאליים לספק את הפרטים הנדרשים לרכישת פוליסות ביטוח.

פרטים טכניים של ההטמעה

הם משתמשים בגישה היברידית של מסגרת, שבה Angular ו-React שולטים ברוב קוד הבסיס שלהם. לפניכם קטע מקוד ה-VT שנכתב ב-Angular ושותף על ידי Aman Soni (המפתח הראשי של חזית האתר ב-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');
  }

עדות

רישאב מהרוטרה (Rishabh Mehrotra), מנהל העיצוב (Life BU), אמר שהמעבר בין תצוגות שיחק תפקיד משמעותי בשיפור חוויית השימוש באתר למשתמשים, על ידי שיפור נוחות השימוש, המעורבות והשביעות הרצון הכוללת. הוא עזר לנו לספק ניווט חלק, אינטראקציה מודרכת, הפחתת העומס הקוגניטיבי, עיצוב מודרני ועוד הרבה יותר.

שיפור חוויית השימוש באינטרנט הוא אחד היעדים החשובים ביותר של PB, ו-VT הוכיח עצמו ככלי יעיל להשגת המטרה הזו בצורה חלקה להפליא. הפופולריות הרחבה של ה-API בקרב קהילת המפתחים ובסיס המשתמשים שלנו עוררה בצוות שלנו תחושה של התלהבות. אנחנו מתכננים לשלב את הכלי הזה ב-PODs שונים, ומצפים להשפעה חיובית רחבה על רמות שביעות הרצון ועל מצוינות תפעולית.

Saurabh Tiwari (מנהל טכנולוגיות ראשי, PolicyBazaar)

השלבים הבאים

רוצה לנסות מעברים בין תצוגות? ריכזנו כאן כמה מקורות מידע שאפשר להיעזר בהם כדי לקבל מידע נוסף:

• מסמכי התיעוד ב-developer.chrome.com בנושא מעברים בין תצוגות
• הצגת מעברים בסרטון ההסבר על MPA
• הצעות לפעולה הדדית כדי לאפשר מעבר בין תצוגות בדפדפנים שונים