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

Yuriko Hirota

Saurabh Rajpal

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

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

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

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

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

redBus

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

למה Redbus הטמיעה מעברים של צפיות?

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

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

Anoop Menon, CTO RedBus

CyberAgent

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

למה סוכן הסייבר הטמיע מעברים של תצוגות?

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

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

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

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

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

סוכן הסייבר משתמש ב-Next.js כדי לבנות את ה-SPA שלו. דוגמת הקוד הבאה ממחישה איך הם משתמשים ב-View Migrate 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 עם טכנולוגיה לעיבוד מראש

סוכן הסייבר גם ניסה את ה-View Migrates API לאפליקציות מרובות דפים (שנמצא כרגע בדגל chrome://flags/#view-transition-on-navigation) בשירות שנקרא Ameba News, שהוא אתר של פורטל חדשות.

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

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

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

כך הם עשו זאת: הם הקצו 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 של מעבר בין תצוגות הוא שהוא השתמש ב-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}/`);
  });

מידע נוסף על הטמעת הקישורים המהירים זמין במאמר זה.

המלצה

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

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

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

קאזונארי הארה, סמנכ"ל טכנולוגיות של אמבבה

ניקאה

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

למה Nykaa הטמיעה מעברי צפיות?

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

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

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

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

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

קרישנה ר וי (Krishna R V), סמנכ"לית עיצוב

PolicyBazaar

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

למה PolicyBazaar הטמיעה מעברי צפיות?

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

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

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

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

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

המלצה

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

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

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

השלבים הבאים

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

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