Umstellungen bieten Nutzern zahlreiche Vorteile. Unter anderem bleibt sie im Kontext und reduziert die Wahrnehmung von Latenz. Entwickler wünschen sich nahtlose Übergänge zwischen Seiten, die zur Steigerung der Nutzerinteraktionen mit ihrer Website beitragen.
Die Aktivierung von Bundesstaatenwechsel war jedoch wirklich schwierig, da Entwickler dazu die Zustände zweier verschiedener Elemente verwalten mussten. Auch bei einer einfachen Überblendung sind beide Zustände gleichzeitig vorhanden. Das bringt Usability-Herausforderungen mit sich, beispielsweise den Umgang mit zusätzlichen Interaktionen bezüglich des ausgehenden Elements. Für Nutzer von Hilfsgeräten gibt es einen Zeitraum, in dem sich der Vorher- und Nachher-Status gleichzeitig im DOM befinden. Außerdem können sich Dinge im Baum so bewegen, dass sie visuell gut sind, aber leicht dazu führen, dass Leseposition und -fokus verloren gehen.
Die in Chrome 111 eingeführte View Transitions API ermöglicht reibungslose und einfache Übergänge zwischen Seiten. Damit können Sie Ihr DOM ohne Überschneidung der Status ändern und mithilfe von Snapshot-Ansichten einen Übergang zwischen den Status erzeugen.
Sie fragen sich vielleicht, wie einfach die Implementierung ist. Welche Arten von Anwendungsfällen gibt es? Wie verwenden andere Entwickler die Umstellung von Ansichten?
In diesem Artikel wird die Implementierung von Ansichtsumstellungen auf vier verschiedenen Websites erläutert: RedBus (Reisen), CyberAgent (Nachrichten-/Blog-Publisher), Nykaa (E-Commerce) und PolicyBazaar (Versicherungen). Außerdem wird beschrieben, wie ihre Websites von der View Transitions API auf unterschiedliche Weise profitieren.
redBus
redBus, Teil der MakeMyTrip-Gruppe, ist eine Website für Busbuchungen und -tickets mit Hauptsitz in Bangalore, Indien, und ist in verschiedenen Regionen weltweit präsent. Es war eine der ersten Websites, für die eine View Transitions API implementiert wurde.
Warum hat Redbus Ansichtsübergänge implementiert?
Das Team von redBus ist davon überzeugt, dass es eine einheitliche, appähnliche Weberfahrung bietet, die den systemeigenen Apps möglichst nahe kommt. Tatsächlich hatte das Unternehmen im Laufe der Jahre mehrere maßgeschneiderte Lösungen implementiert. Zum Beispiel wurden benutzerdefinierte JavaScript- und CSS-basierte Animationen für die Seitenübergänge eingeführt, noch bevor die View Transitions API entwickelt wurde. Das bedeutete aber, dass das Unternehmen sich mit der Leistungsverwaltung in kleineren Segmenten von Netzwerken und Geräten auseinandersetzen musste, was gelegentlich zu unterschiedlichen Erfahrungen bei der Strategie Adaptives Laden führte.
redBus nutzte Ansichtsübergänge bei mehreren User Journeys. Zum Beispiel im Selbsthilfebereich in der mobilen App, in der Webseiten in benutzerdefinierten Chrome-Tabs geöffnet wurden, und im Buchungstrichter für Bustickets, wo Nutzer von der Seite mit dem Inventareintrag zur Zahlungsseite gelangen. Im letzteren Fall sorgten die Aufrufübergänge für eine reibungslosere Navigation von Seite zu Seite und führten zu einer Steigerung der Conversion-Rate. Dies war das Ergebnis einer besseren Nutzererfahrung und einer besseren wahrgenommenen Leistung, während die aufwendigen Vorgänge – z. B. das Abrufen des neuesten verfügbaren Inventars – ausgeführt wurden.
Technische Details der Implementierung
redBus nutzt React und EJS als Front-End-Technology Stack mit einer Kombination aus SPAs und MPAs für verschiedene Prozesse. 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 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 Umstellung der Aufrufe und verbesserte INP auf der gesamten Website, was zu 7% mehr Umsatz führte. Amit Kumar, Senior Engineering Manager bei redBus, ist überzeugt: Nutzer, die sich eine bessere Nutzerfreundlichkeit wünschen und einen geringeren Wartungsaufwand wünschen, sind von einem Wechsel der Ansichten wirklich begeistert.
Wir haben umfassende Feedback-Sitzungen mit wertvollen Erkenntnissen von einer heterogenen Gruppe von Nutzern durchgeführt. Aufgrund unseres tiefgreifenden Verständnisses unserer Nutzer (Bus und Bahn) und ihrer Anforderungen in Kombination mit unserem Fachwissen sind wir zu der Annahme, dass diese Funktion von Anfang an einen bedeutenden Mehrwert bieten wird, ohne dass A/B-Tests erforderlich sind. Ansichtsübergänge sind ein Schritt, um die Lücke zwischen App und Web zu schließen und für eine reibungslose Navigation zu sorgen.
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 View-Übergänge implementiert?
CyberAgent hatte in der Vergangenheit überlegt, CSS-Animationen oder ein Framework zur Implementierung animierter Übergänge zu verwenden, um die User Experience zu verbessern. Das Unternehmen war jedoch mit der schlechten Leistung beim Rendern von DOM und der Verwaltbarkeit von Code besorgt. Als die View Transits API in Chrome unterstützt wurde, freuten sie sich darauf, damit ansprechende Seitenübergänge zu schaffen, mit denen diese Herausforderungen gelöst werden konnten.
CyberAgent hat View-Übergänge zwischen der Blog-Liste und der Blog-Seite implementiert. Hier sehen Sie, wie der Elementübergang zum Hero-Image hinzugefügt wurde. Besuchen Sie ihre Website und erleben Sie sie noch heute live.
Außerdem wurden Medienabfragen verwendet, um verschiedene Animationserlebnisse für verschiedene Geräte zu entwerfen. Bei mobilen Seiten wurden Elementübergänge eingefügt, aber dieser Effekt hatte zu viel Bewegung für Desktop-Computer.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Technische Details der Implementierung
CyberAgent nutzt Next.js, um eine 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]);
};
Übergänge für MPA mit Pre-Rendering-Technologie ansehen
CyberAgent hat auch unsere neue View Transitions API for Multiple Page Apps (MPA) (aktuell unter der Markierung chrome://flags/#view-transition-on-navigation) für den Dienst Ameba News getestet, ein Nachrichtenportal.
Die Darstellungsübergänge wurden an zwei Stellen verwendet: beim Ändern der Kategorien von Nachrichten, wie im folgenden Video gezeigt.
Die zweite befindet sich zwischen der Seite mit den Top-News, auf der ein Auszug des Inhalts angezeigt wird. Wenn der Nutzer auf Weitere Details anzeigen klickt, wird der Rest des Artikels eingeblendet.
Interessant ist, dass die Animation nur dem Teil hinzugefügt wurde, der sich nach dem Klicken auf die Schaltfläche ändert. Durch diese kleine Optimierung des Animationsdesigns wirkt die MPA-Seite aus Nutzersicht eher wie eine SPA, wobei nur der neue Inhalt animiert wird:
Dazu wurde den verschiedenen Teilen der Seite ein anderes view-transition-name zugewiesen. Beispielsweise hat sie dem oberen Teil des Artikels ein view-transition-name und dem unteren Teil eine weitere zugewiesen. Im oberen Bereich 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 weiterer interessanter Aspekt bei der Verwendung der View Transits API von CyberAgent ist die Verwendung von Quicklink zur einfachen Implementierung von Pre-Rendering-Regeln auf der Detailseite. Hier ist ihr 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 Implementierung von Quicklinks finden Sie in diesem Artikel.
Referenz
Kazunari Hara, Tech Lead des Ameba-Dienstes bei CyberAgent, sagte, dass die Änderung der Aufrufansicht aus zwei Gründen erhebliche Auswirkungen auf das Geschäft haben könnte.
Erstens leiten sie Nutzende auf die Seite. Mit Ansichtsübergängen können Sie die Nutzenden visuell auf die wichtigste Botschaft fokussieren und sie dabei unterstützen, die Webseite optimal zu nutzen. Außerdem wird die Marke durch Animationen verbessert und betont. CyberAgent nutzt ein spezielles Animationsdesign, um die Marke zu kommunizieren. Durch die Umstellung der Aufrufe kann das Unternehmen diese markenspezifischen Inhalte implementieren, ohne dass zusätzliche Kosten für die Verwaltung externer Bibliotheken entstehen.
View Transitions ist eine meiner Lieblings-APIs. Die Möglichkeit, Animationen als Standard-Browserfunktion hinzuzufügen, vereinfacht die Implementierung und Pflege von Ansichtsübergängen im Vergleich zu anderen, bibliotheksabhängigen Lösungen. Wir freuen uns darauf, Aufrufe für weitere Dienste zu ändern, 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. Das mobile Web soll so nah wie möglich an die native App angepasst werden. Zuvor versuchte das Unternehmen, Übergangsanimationen zu implementieren. Allerdings hatte das Unternehmen Schwierigkeiten, komplexes benutzerdefiniertes JavaScript zu schreiben. Dies wirkte sich auch geringfügig auf die Leistung der Website aus.
Warum hat Nykaa View-Übergänge implementiert?
Mit der Einführung von Aufrufübergängen erkannte das Team von Nykaa die Chance, dass diese Übergänge nativ verfügbar sind und die UX von Seitenübergängen ohne Leistungskosten erheblich verbessert werden konnte. Nykaa verwendet häufig Ansichtsübergänge für den Übergang von der Produktdetailseite zur Seite mit Produkteinträgen.
Technische Details der Implementierung
Nykaa nutzte React und Emotion, um eine SPA aufzubauen. Weiteren Beispielcode zur Verwendung von „View Transitions“ 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 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, der Head of Apps bei Nykaa, sagte, dass der größte Vorteil des Wechsels der Ansicht in der Wahrnehmung der Geschwindigkeit sei. Nykaa nutzte Schimmereffekte, um zu warten, bis die Inhalte aus dem Back-End geladen wurden. Dabei stellte sie jedoch fest, dass die Anzeige des Schimmereffekts den Nutzern nicht sagte, wie lange sie auf das Laden des Inhalts warten mussten. Bei den View-Übergängen boten den Nutzern das Gefühl, dass „etwas passieren wird“, was das Warten weniger mühsam machte.
Nykaa freute sich sehr über die neu verbesserte UX ihrer Webseite mit Ansichtsübergängen und ist bereit, Ansichtsübergänge auch auf weiteren Seiten zu implementieren. Der VP of Design hat Folgendes gesagt:
Wir haben uns sanft dazu verpflichtet, bei allen neuen Funktionen, wo dies sinnvoll ist, Ansichtsübergänge zu implementieren. Einige Bereiche wurden bereits identifiziert und das Team investiert aktiv in diese Bereiche.
Krishna R V, VP of Design
PolicyBazaar
PolicyBazaar mit Hauptsitz in Gurgaon ist Indiens größter Versicherungsdienstleister und multinationale Finanztechnologie-Anbieter.
Warum wurden die Ansichten von PolicyBazaar umgestellt?
Das PolicyBazaar-Team ist ein Web-First-Unternehmen, das schon immer das Ziel hat, bei kritischen Kaufprozessen die bestmögliche Nutzererfahrung zu bieten. Bereits vor der Einführung der View Transitions API wurden benutzerdefinierte Übergänge mithilfe von JavaScript und CSS häufig implementiert, da sie die Nutzererfahrung verbesserten, für einen nahtlosen Navigationsfluss sorgten und das visuelle Gesamtbild der Websites verbesserten.
Diese benutzerdefinierten Implementierungen waren jedoch mit gelegentlichen leistungsabhängigen Verzögerungen, einer komplexen Codeverwaltung und einer suboptimalen Kompatibilität mit den verwendeten Frameworks verbunden. Die View Transitions API half ihnen, die meisten dieser Herausforderungen zu bewältigen, da sie eine nutzerfreundliche Oberfläche mit nativ verfügbaren Leistungsvorteilen bereitstellte.
PolicyBazaar verwendete während des Bezahlvorgangs vor dem Angebot Übergangsübergänge zwischen verschiedenen Elementen, um potenziellen Käufern die Möglichkeit zu bieten, die für den Abschluss von Versicherungspolicen erforderlichen Details anzugeben.
Technische Details der Implementierung
Sie verwenden einen hybriden Framework-Ansatz, wobei Angular und React den Großteil der Codebasis dominieren. Hier ist der VT-Auszug aus ihrem Code, der in Angular geschrieben und von Aman Soni (Lead Frontend Developer bei 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 View-Übergänge eine wichtige Rolle bei der Verbesserung der Website-Erfahrung für Nutzer spielten, da sie die Nutzerfreundlichkeit, die Interaktion und die allgemeine Zufriedenheit verbesserten. Sie sorgte für eine reibungslose Navigation, geführte Interaktionen, eine geringere kognitive Belastung, eine moderne Ästhetik und vieles mehr.
Das wichtigste Ziel für PB ist es, das Weberlebnis zu verbessern. VT hat sich als entscheidendes Instrument erwiesen, um dies mit erstaunlicher nahtloser Verbindung zu erreichen. Die große Beliebtheit sowohl bei unserer Entwickler-Community als auch bei unseren Nutzern hat unser Team mit einem Gefühl der Begeisterung angefacht. Wir gehen davon aus, dass die Integration in die verschiedenen PODs weitreichende positive Auswirkungen auf die Zufriedenheit und die operative Exzellenz hat.
Saurabh Tiwari (CTO, PolicyBazaar)
Nächste Schritte
Möchten Sie Ansichtsübergänge ausprobieren? Im Folgenden finden Sie einige Ressourcen, nach denen Sie nachhaken können, um mehr zu erfahren: