Geçişlerin kullanıcılar için sayısız avantajı vardır. Bunlar, kullanıcıları bağlam içinde tutmaya ve gecikme algısını azaltmaya yardımcı olmaktır. Geliştiriciler, sayfalar arasında sorunsuz geçişler oluşturarak kullanıcıların siteleriyle olan etkileşiminin artırılmasına yardımcı olmak isterler.
Ancak geliştiricilerin iki farklı öğenin durumunu yönetmesi gerektiğinden durum geçişlerini etkinleştirmek gerçekten zordu. Basit bir çapraz geçiş bile söz konusu olduğunda her iki durumun da aynı anda bulunması gerekir. Bu durum, kullanılabilirlikle ilgili zorluklar (ör. giden öğede ek etkileşimlerin ele alınması) anlamına gelir. Yardımcı cihazların kullanıcıları için hem önce hem sonra durumu durumunun DOM'de aynı anda bulunduğu bir dönem vardır. Buna ek olarak, öğeler ağaçta görsel açıdan iyi bir şekilde hareket edebilir, ancak okuma konumunun ve odağın kolayca kaybolmasına neden olabilir.
Chrome 111'de kullanıma sunulan View Transitions API, sayfalar arasında sorunsuz ve basit geçişler oluşturulmasını sağlar. Durumlar arasında herhangi bir çakışma olmadan DOM değişikliğinizi yapmanıza ve anlık görüntü alınan görünümleri kullanarak durumlar arasında geçiş animasyonu oluşturmanıza olanak tanır.
Uygulamanın ne kadar kolay olduğunu merak ediyor olabilirsiniz. Ne tür kullanım alanları var? Diğer geliştiriciler görüntüleme geçişlerini nasıl kullanıyor?
Bu makalede, RedBus (seyahat), CyberAgent (haber/blog yayıncısı), Nykaa (e-ticaret) ve PolicyBazaar (sigorta) olmak üzere 4 farklı web sitesinde görüntüleme geçişlerinin uygulanması ve View Transitions API kullanılarak web sitelerinin nasıl farklı şekillerde yararlandığı açıklanmaktadır.
redBus
MakeMyTrip grubunun bir parçası olan redBus, merkezi Bangalore, Hindistan'da bulunan ve dünyanın farklı coğrafyalarında faaliyet gösteren bir otobüs rezervasyonu ve bilet satışı web sitesidir. View Transitions API'yi kullanarak bir deneyimi uygulamaya koyan ilk web sitelerinden biriydi.
Redbus neden görüntüleme geçişleri uyguladı?
redBus ekibi, yerel uygulamalarına olabildiğince yakın olan, uygulama benzeri birleşik bir web deneyimi sunmaya inanıyor. Hatta yıllar boyunca özelleştirilmiş birden çok çözüm uygulamışlardı. Örneğin, View Transitions API'si geliştirilmeden önce bile sayfa geçişleri için özelleştirilmiş JavaScript ve CSS tabanlı animasyonlar kullanıma sundular. Ancak bu durum, daha düşük ağ ve cihaz segmentlerinde performans yönetimiyle uğraşmaları ve zaman zaman uyarlanabilir yükleme stratejisi ile farklı bir deneyim ortaya çıkarmaları gerektiği anlamına geliyordu.
redBus, birden fazla kullanıcı yolculuğu için görünüm geçişleri kullandı. Örneğin, mobil uygulamalarındaki özel Chrome sekmelerinde web sayfaları açan kendi kendine yardım bölümünde ve kullanıcıların envanter listeleme sayfasından ödemeler sayfasına gittiği otobüs bileti rezervasyon dönüşüm hunisinde bunu görebilirler. İkinci örnek örnekte, görüntüleme geçişleri sayfadan sayfaya gezinmenin daha kolay olmasını sağladı ve dönüşüm oranlarında artış sağladı. Bu, daha iyi bir kullanıcı deneyimi ve daha iyi algılanan performans sonucunda, mevcut en güncel envanteri getirmek gibi ağır işlemler yürütülüyordu.
Uygulamayla ilgili teknik ayrıntılar
redBus, ön uç teknoloji yığını olarak React ve EJS'yi, farklı yolculuklarda SPA ve MPA'ların bir kombinasyonunu kullanıyor. Aşağıdaki kod alıntısı, görüntüleme geçişlerinin nasıl kullanıldığını gösterir:
/* 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();
}
};
Aşağıdaki CSS'de slide-to-right, slide-to-left, slide-from-right ve slide-from-left CSS animasyon animasyon kareleridir.
::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;
}
İşletme etkisi
redBus, sitesi genelinde INP iyileştirme çalışmalarıyla birlikte görünüm geçişlerini uygulamayı tercih etti. Bu da % 7 daha fazla satış sağladı. redBus'ın Kıdemli Mühendislik Yöneticisi Amit Kumar, görünüm geçişlerinin gerçekten daha iyi kullanıcı deneyimi isteyen ve daha az bakım yükü isteyenler için gerçekten harika olduğunu söyledi.
Çeşitli kullanıcı gruplarından değerli bulguları dahil ederek kapsamlı kullanıcı geri bildirim oturumları düzenledik. Kullanıcı tabanımızı (otobüs ve tren) ve bunların ihtiyaçlarını konusundaki derin anlayışımız, uzmanlığımızla birlikte bu özelliğin A/B testine gerek olmadan, ilk günden itibaren önemli bir değer sağlayacağına inanmamızı sağladı. Görüntüleme geçişleri, sorunsuz bir gezinme deneyimiyle uygulama ile web arasındaki boşluğu kapatmaya yönelik atılmış bir adımdır.
Anoop Menon, Baş Teknoloji Sorumlusu redBus
CyberAgent
CyberAgent, blog ve haber yayıncılığı dahil olmak üzere birçok online hizmet sunan Japonya merkezli bir BT şirketidir.
CyberAgent neden görüntüleme geçişleri uyguladı?
CyberAgent, eskiden kullanıcı deneyimini iyileştirmek için CSS animasyonları kullanmayı veya animasyonlu geçişler uygulamak üzere bir çerçeve kullanmayı düşünmüştü. Ancak DOM ve kod sürdürülebilirliği konusundaki kötü performans konusunda endişeleri vardı. Chrome, View tracking API'sini desteklediğinde Chrome, bu zorlukların üstesinden gelen ilgi çekici sayfa geçişleri oluşturmak için bu API'yi kullanmaktan heyecan duydu.
CyberAgent, blog listesi ile blog sayfası arasında görüntüleme geçişlerini uyguladı. Burada, öğe geçişini hero resme nasıl eklediklerine bakın. Sitelerini ziyaret edebilir ve siteyi hemen canlı olarak deneyebilirsiniz.
Ayrıca, farklı cihazlar için farklı animasyon deneyimleri tasarlamak amacıyla medya sorgularını kullandılar. Bu değişiklikler mobil sayfalarda öğe geçişleri içermesine rağmen masaüstünde çok fazla harekete neden oluyordu.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Uygulamayla ilgili teknik ayrıntılar
CyberAgent, SPA'sını oluşturmak için Next.js'yi kullanır. Aşağıdaki kod örneğinde, bunların View Transition API'yi nasıl kullandığı gösterilmektedir.
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]);
};
Birkaç örnek Next.js kodu daha görüntüleyin.
Önceden işleme teknolojisine sahip MPA geçişlerini görüntüleme
CyberAgent ayrıca bir haber portalı sitesi olan Ameba News adlı bir hizmette yeni View Transitions API for Multiple Page Apps (MPA) (Şu anda chrome://flags/#view-transition-on-navigation bayrağı altında) özelliğini denedi.
Görüntüleme geçişleri iki yerde kullanıldı: İlki, aşağıdaki videoda gösterilen haber kategorilerinin değiştirilmesi.
İkincisi, içerikten bir alıntının gösterildiği Haberler'deki öne çıkanlar sayfası ile kullanıcı Daha fazla ayrıntı göster'i tıkladığında, makalenin geri kalanı yavaşça görünür.
İşin ilginç tarafı, yalnızca düğme tıklandıktan sonra değişecek olan bölüme animasyon eklemeleridir. Animasyon tasarımındaki bu küçük düzenleme, MPA sayfasının kullanıcı açısından bir SPA gibi görünmesini sağlar ve sadece yeni içerik animasyonla gösterilir:
Bunu şu şekilde yaptılar: Sayfanın farklı bölümlerine farklı bir view-transition-name atadılar. Örneğin, makalenin üst kısmına bir view-transition-name, alt kısmı için başka bir bölüm atamış ve üst kısma animasyon eklememiştir.
::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'ın görüntüleme geçişleri API'sini kullanmasıyla ilgili bir diğer ilginç nokta da, ayrıntılar sayfasında önceden oluşturma kurallarını kolayca uygulamak için hızlı bağlantıyı kullanmasıdır. Aşağıda bunların örnek kodu verilmiştir:
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}/`);
});
Hızlı bağlantı uygulamaları hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.
Referans
CyberAgent'ta Ameba hizmetinin Teknoloji Yöneticisi Kazunari Hara, görüntüleme geçişlerinin işletme üzerinde iki nedenden dolayı önemli bir etki yaratabileceğini belirtiyor.
İlk olarak, kullanıcılara sayfada yol gösterirler. Görüntüleme geçişleri, kullanıcıların görsel olarak en önemli iletiye odaklanmasını sağlar ve web sayfasından en iyi şekilde yararlanmalarına yardımcı olur. Ayrıca, animasyonla markayı geliştirir ve vurgular. CyberAgent, markasını ifade etmek için özel bir animasyon tasarımına sahiptir. Görüntüleme geçişleriyle, bu markalı deneyimi harici kitaplıkları yönetme maliyetine katlanmadan uygulayabilirler.
View Transitions, en sevdiğim API'lerden biridir. Animasyonları standart bir tarayıcı özelliği olarak ekleyebilme olanağı, kitaplıklara bağlı diğer çözümlere kıyasla görüntüleme geçişlerinin uygulanmasını ve korunmasını daha kolay hale getirir. Markamızı tanıtmak için daha fazla hizmette görüntüleme geçişlerini uygulamayı sabırsızlıkla bekliyoruz.
Kazunari Hara, Ameba CTO'su
Nykaa
Nykaa, Hindistan'ın en büyük moda ve güzellik e-ticaret platformudur. Firma, mobil web deneyimini yerel uygulama deneyimine olabildiğince yakın hale getirmeyi hedefliyor. Ekip, daha önce geçiş animasyonlarını uygulamaya çalışırken karmaşık özel JavaScript'ler yazmakta zorlanıyordu. Bu durum, web sitesinin performansını da marjinal şekilde etkiledi.
Nykaa neden görüntüleme geçişleri uyguladı?
Görüntüleme geçişlerinin kullanıma sunulmasıyla, Nykaa'nın ekibi, bu geçişlerin yerel olarak kullanıma sunulmasıyla, hiçbir performans maliyeti olmadan sayfa geçişlerinde sunulan kullanıcı deneyiminin önemli ölçüde iyileştirilebileceği bir fırsat gördü. Nykaa, ürün ayrıntıları sayfasından ürün listeleme sayfasına geçiş için görüntüleme geçişlerini yoğun bir şekilde kullanıyor.
Uygulamayla ilgili teknik ayrıntılar
Nykaa, SPA'sını oluşturmak için React ve Emotion'u kullandı. View Transitions'ı React ile kullanma hakkında daha fazla örnek koda buradan ulaşabilirsiniz.
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); }
`
Kenar çekmecesi animasyonu için 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};
}
Referans
Nykaa Uygulama Başkanı Sunit Jindal, görüntüleme geçişinin en büyük avantajının "Hız algısı" olduğunu söyledi. Nykaa, içeriklerin arka uçtan yüklenmesini beklemek için parıltı efektlerini kullandı. Ancak parıltı efektini göstermek, kullanıcılara içeriğin yüklenmesi için ne kadar beklemeleri gerektiğini gösteren bir fikir vermedi. Görüntüleme geçişlerinde, geçişin kendisi kullanıcılara "bir şeyler gerçekleşmek üzere" hissi verdi ve bu da beklemeyi daha az yordu.
Nykaa, web sayfalarında görüntüleme geçişleri olan yeni geliştirilmiş kullanıcı deneyiminden çok heyecan duydu ve görüntüleme geçişlerini başka sayfalarda da uygulamaya hazır. Tasarımdan sorumlu başkan yardımcısı şöyle diyor:
Yeni kullanıma sunulacak tüm özelliklerde uygun durumlarda görüntüleme geçişleri uygulamayı taahhüt ediyoruz. Bazı alanlar daha önce belirlendi ve ekip bu alanlara aktif olarak yatırım yapıyor.
Krishna R V, Tasarımdan Sorumlu Başkan Yardımcısı
PolicyBazaar
Genel merkezi Gurgaon'da bulunan PolicyBazaar, Hindistan'ın en büyük sigorta toplayıcısı ve çok uluslu finans teknolojisi şirketidir.
PolicyBazaar neden görüntüleme geçişleri uyguladı?
Web'e öncelik veren bir şirket olan PolicyBazaar ekibi, kritik kullanıcı yolculuklarında her zaman mümkün olan en iyi kullanıcı deneyimini sağlamayı hedefledi. View Transitions API kullanıma sunulmadan önce de JavaScript ve CSS kullanarak özel geçişler uygulamak yaygın bir uygulamaydı. Bunun nedeni, bu API'lerin kullanıcı deneyimini iyileştirmesi, sorunsuz bir gezinme akışı oluşturması ve web sitelerinin genel olarak görsel açıdan çekiciliğini iyileştirmesiydi.
Ancak bu özel uygulamalar zaman zaman performansa dayalı gecikmeler, kod bakımı karmaşıklıkları ve kullanılan çerçevelerle yetersiz düzeyde uyumluluk gerektirebilir. View Transitions API, performans avantajlarının yerel olarak sunulduğu, kullanımı kolay bir arayüz sunarak bu zorlukların çoğunun üstesinden gelmelerine yardımcı oldu.
PolicyBazaar, potansiyel alıcıların sigorta poliçesi satın alırken gerekli bilgilerini sağlamasını heyecan verici hale getirmek için fiyat teklifi öncesi yolculuklarında farklı unsurlarda görüntüleme geçişleri kullandı.
Uygulamayla ilgili teknik ayrıntılar
Kod tabanının büyük kısmına Angular ve React ile karma bir çerçeve yaklaşımı getiriyor. Angular dilinde yazılmış ve Aman Soni (PolicyBazaar'ın Baş Ön Uç Geliştiricisi) tarafından paylaşılan koddan bir VT alıntısını burada görebilirsiniz:
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');
}
Referans
Şirketin Tasarım (Life BU) müdürü Rishabh Mehrotra, görüntüleme geçişlerinin kullanılabilirlik, etkileşim ve genel memnuniyeti iyileştirerek kullanıcıları için web sitesi deneyimini geliştirmede önemli bir rol oynadığını söylüyor. Sorunsuz gezinme, rehberli etkileşim, daha az bilişsel yük, modern estetik ve çok daha fazlasının sağlanmasına yardımcı oldu.
Web deneyimini geliştirmek PB için en önemli hedeftir. VT'nin de kayda değer bir sorunsuzlıkla bunu başarmada önemli bir araç olduğu kanıtlanmıştır. Hem geliştirici topluluğumuz hem de kullanıcı tabanımız arasında geniş bir kitleye hitap etmesi, ekibimizi heyecanla beklemeye başladı. Bu aracın farklı kapsüllerle entegrasyonunu tasarlarken, memnuniyet seviyeleri ve operasyonel mükemmellik üzerinde geniş kapsamlı olumlu bir etki yaratacağını tahmin ediyoruz.
Saurabh Tiwari (Baş Teknoloji Sorumlusu, PolicyBazaar)
Sonraki adımlar
Görünüm geçişlerini denemek ister misiniz? Daha fazla bilgi edinmek için başvurabileceğiniz bazı kaynaklar şunlardır: