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

Yuriko Hirota

Saurabh Rajpal

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

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

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

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

במאמר הזה נסביר איך ליישם מעבר בין צפיות ב-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 הטמיעה מעברים בין תצוגות?

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

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

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

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

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

סוכן סייבר משתמש ב-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.

עדות

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

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

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

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

Nykaa

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

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

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

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

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

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

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

PolicyBazaar

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

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

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

עם זאת, ההטמעות בהתאמה אישית האלה הגיעו עם עלות של עיכובים מדי פעם על סמך ביצועים, מורכבות של תחזוקת קוד ותאימות לא אופטימלית למסגרות שבהן נעשה שימוש. ה-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)
• הצעות לצפייה הדדית שמאפשרת מעבר בין תצוגות מפורטות בדפדפנים שונים