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

Yuriko Hirota

Saurabh Rajpal

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

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

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

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

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

CyberAgent

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

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

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

סוכן הסייבר ניסה גם את View Transitions API לאפליקציות מרובות דפים (MPA) (נכון לעכשיו, מתחת לדגל 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 למעבר בין תצוגות: הוא השתמש בקישור מהיר כדי להטמיע בקלות כללים לעיבוד מראש בדף הפרטים. הנה הקוד לדוגמה:

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 ב-CyberAgent, אמרה שלמעברי הצפיות יכולה להיות השפעה משמעותית על העסק משתי סיבות.

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

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

קזונארי הארה, מנהל טכנולוגיות ראשי (CTO) של אמאבה

Nykaa

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

למה 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};
}

עדויות

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

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

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

Krishna R V, סמנכ"ל עיצוב

PolicyBazaar

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

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

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

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

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

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

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

עדויות

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

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

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

השלבים הבאים

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

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