Übergänge bieten den Nutzern zahlreiche Vorteile, zum Beispiel, sie im Kontext zu halten und die Wahrnehmung von Latenz zu verringern. Entwickler möchten nahtlose Übergänge zwischen Seiten schaffen, um die Nutzerinteraktionen mit ihrer Website zu steigern.
Allerdings war es sehr schwierig, Statusübergänge umzusetzen, da die Entwickler die Status von zwei verschiedenen Elementen verwalten mussten. Sogar eine einfache Überblendung bedeutet, dass beide Zustände gleichzeitig vorhanden sind. Das birgt Herausforderungen bei der Nutzerfreundlichkeit, z. B. die Bewältigung zusätzlicher Interaktionen beim ausgehenden Element. Für Nutzer von Hilfsgeräten gibt es einen Zeitraum, in dem der Vorher- und Nachher-Zustand gleichzeitig im DOM enthalten ist. Außerdem können sich Dinge im Baum auf eine visuell schöne Weise bewegen, aber leicht dazu führen, dass die Leseposition und der Fokus verloren gehen.
Mit der in Chrome 111 eingeführten View Transitions API lassen sich reibungslose und einfache Übergänge zwischen Seiten erstellen. Damit können Sie Ihre DOM-Änderung ohne Überschneidung zwischen den Status vornehmen und mithilfe von Snapshot-Ansichten zwischen den Status eine Übergangsanimation erstellen.
Sie fragen sich vielleicht, wie einfach die Implementierung ist. Welche Art von Anwendungsfällen gibt es? Wie nutzen andere Entwickler die Umstellung von Ansichten?
In diesem Artikel erfahren Sie mehr über die Implementierung von Aufrufübergängen auf vier verschiedenen Websites: RedBus (Reisen), CyberAgent (Nachrichten-/Blog-Publisher), Nykaa (E-Commerce) und PolicyBazaar (Versicherung) und wie ihre Websites von der View Transitions API profitieren.
redBus
redBus ist Teil der MakeMyTrip-Gruppe und ist eine Website für Busbuchungen und -tickets mit Hauptsitz in Bangalore, Indien. Das Unternehmen ist in verschiedenen Regionen weltweit vertreten. Es war eine der ersten Websites, auf der eine Erfahrung mit der View Transitions API implementiert wurde.
Warum hat Redbus eine Umstellung auf Aufrufe vorgenommen?
Das Team von redBus ist von der Entwicklung einer einheitlichen, App-ähnlichen Weberfahrung überzeugt, die den systemeigenen Apps so genau wie möglich entspricht. Im Laufe der Jahre wurden sogar mehrere maßgeschneiderte Lösungen implementiert. So wurden beispielsweise benutzerdefinierte JavaScript- und CSS-basierte Animationen für die Seitenübergänge eingeführt, noch bevor die View Transitions API entwickelt wurde. Das bedeutete jedoch, dass sie sich mit Leistungsmanagement in niedrigeren Netzwerk- und Gerätesegmenten zu befassen mussten, was gelegentlich zu unterschiedlichen Erfahrungen mit einer Strategie für adaptives Laden führte.
redBus verwendete Aufrufübergänge für mehrere User Journeys. Zum Beispiel im Selbsthilfebereich der mobilen App, in der Webseiten auf benutzerdefinierten Chrome-Tabs geöffnet wurden, und im Buchungstrichter für Bustickets, wo Nutzer von der Seite mit der Inventarliste zur Zahlungsseite wechseln. Im letzteren Fall wurde die Navigation von Seiten zur Seite durch Aufrufübergänge vereinfacht, was zu einer Steigerung der Conversion-Rate führte. Das Ergebnis war eine bessere Nutzererfahrung und eine bessere Wahrnehmung der Leistung, während aufwendige Vorgänge wie das Abrufen des aktuellen verfügbaren Inventars durchgeführt wurden.
Technische Details zur Implementierung
redBus nutzt React und EJS als Front-End-Tech-Stack mit einer Kombination aus SPAs und MPAs für verschiedene Journeys. Der folgende Codeauszug zeigt, wie Ansichtsübergänge verwendet werden:
/* 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();
}
};
Im folgenden CSS-Code sind slide-to-right
, slide-to-left
, slide-from-right
und slide-from-left
CSS-Animations-Keyframes.
::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;
}
Auswirkungen auf das Geschäft
redBus entschied sich für die Einführung von Wechsel zu Aufrufen und die INP-Verbesserungen auf der gesamten Website, was zu 7% mehr Umsatz führte. Amit Kumar, Senior Engineering Manager bei redBus, sagt, dass sich Ansichten-Übergänge für diejenigen eignen, die sich wirklich eine bessere Nutzererfahrung und weniger Wartungsaufwand wünschen.
Wir haben umfassende Nutzerfeedback-Sitzungen durchgeführt, bei denen wertvolle Erkenntnisse von einer vielfältigen Nutzergruppe berücksichtigt wurden. Aufgrund unserer umfassenden Kenntnisse über unsere Nutzer (Bus und Bahn) und ihre Anforderungen sowie unser Fachwissen sind wir zu der Überzeugung gekommen, dass diese Funktion von Anfang an einen erheblichen Mehrwert bietet, ohne dass A/B-Tests erforderlich sind. Durch die nahtlose Navigation lassen sich App- und Web-Übergänge zwischen Ansichten verschieben.
Anoop Menon, CTO redBus
CyberAgent
CyberAgent ist ein in Japan ansässiges IT-Unternehmen, das viele Online-Dienste anbietet, darunter Blogs und Nachrichtenverlage.
Warum hat CyberAgent eine Umstellung auf Aufrufe implementiert?
CyberAgent hatte bereits in Betracht gezogen, CSS-Animationen zu verwenden oder ein Framework zu verwenden, um animierte Übergänge zu implementieren, um die Nutzererfahrung zu verbessern. Das Unternehmen befürchtete jedoch die schlechte Leistung beim Rendern von DOM und Codeverwaltbarkeit. Als Chrome die Unterstützung für die View Transits API hinzufügte, freute sich das Unternehmen, damit ansprechende Seitenübergänge zu erstellen, mit denen diese Herausforderungen gemeistert werden konnten.
CyberAgent hat Aufrufübergänge zwischen der Blogliste und der Blogseite implementiert. Hier sehen Sie, wie der Elementübergang zum Hero-Image hinzugefügt wurde. Sie können ihre Website besuchen und sie noch heute live erleben.
Außerdem wurden mithilfe von Medienabfragen verschiedene Animationserlebnisse für verschiedene Geräte entworfen. Bei mobilen Seiten wurden Elementübergänge verwendet, aber dieser Effekt hatte auf Desktop-Computern zu viel Bewegung.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Technische Details zur Implementierung
CyberAgent verwendet Next.js, um seine SPA zu erstellen. Das folgende Codebeispiel zeigt, wie die View Transition API verwendet wird.
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]);
};
Sehen Sie sich weitere Next.js-Beispielcode an.
Übergänge für MPA mit Pre-Rendering-Technologie ansehen
CyberAgent hat außerdem unsere neue View Transitions API for Multiple Page Apps (MPA) (derzeit unter der Kennzeichnung chrome://flags/#view-transition-on-navigation
) bei einem Dienst namens Ameba News getestet, einer Nachrichtenportal-Website.
Übergänge bei Aufrufen wurden an zwei Stellen verwendet: Zum einen werden die Kategorien der Nachrichten geändert, wie im folgenden Video gezeigt.
Die zweite befindet sich zwischen der Nachrichten-Highlight-Seite, auf der ein Auszug des Inhalts angezeigt wird, und wenn der Nutzer auf Weitere Details ansehen klickt, wird der Rest des Artikels eingeblendet.
Interessant ist, dass nur dem Teil eine Animation hinzugefügt wurde, der sich nach dem Klicken auf die Schaltfläche ändert. Durch diese kleine Optimierung des Animationsdesigns wirkt die MPA-Seite aus der Sicht der Nutzer eher wie eine SPA, wobei nur der neue Inhalt animiert wird in:
Und so ging es: Sie haben den verschiedenen Teilen der Seite ein anderes view-transition-name
zugewiesen. Beispielsweise wurde dem oberen Teil des Artikels eine view-transition-name
und eine weitere für den unteren Teil des Artikels zugewiesen. Dem oberen Teil wurde keine Animation hinzugefügt.
::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;
}
![Ein Diagramm, das zeigt, dass der obere Teil der Seite nicht animiert ist, während der untere Teil übergeht.](https://developer.chrome.com/static/blog/view-transitions-case-studies/image/a-diagram-showing-the-to-792fc15b5baa3.png?authuser=4&hl=de)
Interessant ist auch, dass CyberAgent die View Transits API über Quicklink verwendet, um Pre-Rendering-Regeln auf der Detailseite einfach zu implementieren. Hier ist der Beispielcode:
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}/`);
});
Weitere Informationen zur Quicklink-Implementierung finden Sie in diesem Artikel.
Referenz
Kazunari Hara, Tech Lead des Ameba-Dienstes bei CyberAgent, sagte, dass die Umstellung der Ansichten aus zwei Gründen erhebliche Auswirkungen auf das Unternehmen haben könnte.
Erstens führen sie Nutzende auf die Seite. Mit Übergängen vom Typ „Ansicht“ können Nutzer visuell auf die wichtigste Botschaft fokussieren und die Webseite optimal nutzen. Außerdem heben sie die Marke durch Animationen hervor und betonen sie. CyberAgent hat ein spezielles Animationsdesign, um seine Marke zu präsentieren. Mithilfe von Ansichten können sie dieses Branding implementieren, ohne dass zusätzliche Kosten für die Verwaltung externer Bibliotheken anfallen.
„Übergänge ansehen“ ist eine meiner Lieblings-APIs. Die Möglichkeit, Animationen als Standard-Browserfunktion hinzuzufügen, erleichtert die Implementierung und Verwaltung von Übergängen von Ansichten im Vergleich zu anderen, von Bibliotheken abhängigen Lösungen. Wir freuen uns darauf, Ansichten auf weitere Dienste umzustellen, um unsere Marke zu präsentieren.
Kazunari Hara, CTO von Ameba
Nykaa
Nykaa ist Indiens größte E-Commerce-Plattform für Mode und Schönheit. Ziel ist es, die Nutzererfahrung im mobilen Web so weit wie möglich an der nativen App anzupassen. Beim Implementieren von Übergangsanimationen hatten sie Schwierigkeiten beim Schreiben von komplexem benutzerdefiniertem JavaScript. Dies hat sich auch geringfügig auf die Leistung der Website ausgewirkt.
Warum hat Nykaa Aufrufübergänge implementiert?
Mit den neuen Aufrufübergängen erkannte Nykaas Team eine Chance, dass diese Übergänge nativ verfügbar waren, sodass die UX der Seitenübergänge erheblich verbessert werden konnte, ohne dass die Leistung beeinträchtigt wird. Nykaa nutzt häufig Übergänge zwischen Ansichten, um von der Produktdetailseite zur Seite mit den Produkteinträgen zu wechseln.
Technische Details zur Implementierung
Nykaa nutzte React und Emotion für die Erstellung einer SPA. Weiteren Beispielcode für die Verwendung von „Übergänge ansehen“ mit React finden Sie hier.
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 für die Animation in der Seitenleiste:
::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};
}
Referenz
Sunit Jindal, Head of Apps bei Nykaa, sagte, dass der größte Vorteil des Aufrufübergangs die „Wahrnehmung der Geschwindigkeit“ war. Nykaa verwendete Schimmereffekte, um zu warten, bis die Inhalte aus dem Back-End geladen wurden. Dabei stellte sich jedoch heraus, dass die Nutzer nicht wissen, wie lange sie auf das Laden der Inhalte warten müssen. Bei Betrachtungsübergängen gab der Übergang selbst den Nutzenden das Gefühl, dass etwas passiert, was das Warten weniger mühsam machte.
Nykaa war von der verbesserten UX ihrer Webseite mit Aufrufübergängen begeistert und ist bereit, diese auch auf weiteren Seiten zu implementieren. Das sagt die VP of Design:
Wir setzen uns mit Bedacht dafür ein, bei allen zukünftigen Funktionen Übergänge bei Ansichten zu implementieren, wenn dies sinnvoll ist. Einige Bereiche wurden bereits identifiziert und das Team investiert aktiv in diese.
Krishna R V, VP Design
PolicyBazaar
PolicyBazaar mit Hauptsitz in Gurgaon ist Indiens größter Versicherungsdienstleister und multinationales Finanztechnologieunternehmen.
Warum hat PolicyBazaar eine Umstellung auf Aufrufe implementiert?
Als ein auf das Web ausgerichtetes Unternehmen hat das PolicyBazaar-Team schon immer versucht, die bestmögliche Nutzererfahrung in allen kritischen User Journeys zu bieten. Bereits vor der Einführung der View Transitions API war es gängige Praxis, benutzerdefinierte Übergänge mithilfe von JavaScript und CSS zu implementieren, da diese die Nutzererfahrung verbesserten, einen nahtlosen Navigationsfluss schufen und das visuelle Erscheinungsbild der Websites insgesamt verbesserten.
Diese benutzerdefinierten Implementierungen verursachten jedoch gelegentlich leistungsbasierte Verzögerungen, komplizierte Codewartung und eine suboptimale Kompatibilität mit den verwendeten Frameworks. Die View Transitions API konnte die meisten dieser Herausforderungen bewältigen, indem sie eine nutzerfreundliche Oberfläche mit nativ verfügbaren Leistungsvorteilen bereitstellte.
PolicyBazaar nutzte die Übergänge zwischen verschiedenen Elementen in seinem Kaufprozess, um vor dem Angebot des Angebots die für den Abschluss von Versicherungspolicen erforderlichen Details anzugeben.
Technische Details zur Implementierung
Das Unternehmen verwendet einen Hybrid-Framework-Ansatz, bei dem Angular und React den Großteil der Codebasis dominieren. Hier ist der VT-Auszug aus dem Code, der in Angular geschrieben und von Aman Soni (Lead Frontend Developer von PolicyBazaar) geteilt wurde:
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');
}
Referenz
Rishabh Mehrotra, Head of Design (Life BU), sagte, dass Übergänge beim Betrachten der Website durch die Verbesserung von Nutzerfreundlichkeit, Interaktion und Gesamtzufriedenheit eine wichtige Rolle gespielt haben. Sie ermöglichte eine reibungslose Navigation, geführte Interaktionen, reduzierte kognitive Belastung, eine moderne Ästhetik und vieles mehr.
Die Optimierung des Weberlebnisses ist für PB eines der wichtigsten Ziele. VT hat sich als entscheidendes Instrument erwiesen, um dies mit bemerkenswerter nahtloser Umsetzung zu erreichen. Die große Begeisterung für unsere Entwickler-Community und unsere Nutzer hat unser Team begeistert. Wenn wir die Integration über verschiedene PODs in Betracht ziehen, gehen wir von weitreichenden positiven Auswirkungen auf die Zufriedenheit und die operative Exzellenz aus.
Saurabh Tiwari (CTO, PolicyBazaar)
Nächste Schritte
Möchten Sie die Umstellung von Ansichten ausprobieren? Hier sind einige Ressourcen, die Sie nutzen können, um mehr zu erfahren: