Geçişlerin, kullanıcıların bağlamda kalmasına yardımcı olmak ve gecikme algısını azaltmak gibi birçok avantajı vardır. Geliştiriciler, sayfalar arasında sorunsuz geçişler oluşturarak kullanıcıların siteleriyle etkileşimini artırmayı ister.
Ancak geliştiricilerin iki farklı öğenin durumlarını yönetmesini gerektirdiği için durum geçişlerini etkinleştirmek gerçekten zordu. Basit bir geçiş gibi durumlarda bile her iki durum da aynı anda mevcuttur. Bu durum, giden öğe üzerinde ek etkileşimi işleme gibi kullanılabilirlik sorunları ortaya çıkarır. Yardımcı cihaz kullanıcıları için, DOM'da hem önceki hem de sonraki durumun aynı anda bulunduğu bir dönem vardır. Ayrıca, öğeler ağaç üzerinde görsel açıdan iyi görünecek şekilde hareket edebilir ancak okuma konumunun ve odağın kolayca kaybolmasına neden olabilir.
Chrome 111'de kullanıma sunulan Görüntü Geçişleri API'si, sayfalar arasında sorunsuz ve basit geçişler oluşturmayı sağlar. DOM'unuzu, durumlar arasında çakışma olmadan değiştirmenize ve anlık görüntülenmiş görünümleri kullanarak durumlar arasında geçiş animasyonu oluşturmanıza olanak tanır.
Bu özelliğin uygulanmasının ne kadar kolay olduğunu merak edebilirsiniz. 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ü geçişlerinin uygulanması ve bu web sitelerinin Görüntü Geçişleri API'sini kullanarak farklı şekillerde nasıl fayda sağladığı ele alınmaktadır.
redBus
MakeMyTrip grubunun bir parçası olan redBus, Hindistan'ın Bangalore kentinde merkezi bulunan ve dünya genelinde farklı coğrafi bölgelerde faaliyet gösteren bir otobüs rezervasyonu ve biletleme web sitesidir. View Transitions API'yi kullanan bir deneyimi uygulayan ilk web sitelerinden biriydi.
Redbus görüntü geçişlerini neden 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, Görüntüleme Geçişleri API'si geliştirilmeden önce bile sayfa geçişleri için özelleştirilmiş JavaScript ve CSS tabanlı animasyonlar kullanıma sundular. Ancak bu, ağ ve cihazların alt segmentlerinde performans yönetimiyle uğraşmaları gerektiği anlamına geliyordu. Bu da zaman zaman uyarlanabilir yükleme stratejisi uygulandığında farklı bir deneyime yol açıyordu.
redBus, birden fazla kullanıcı yolculuğu için görüntü geçişlerini kullandı. Örneğin, mobil uygulamalarındaki web sayfalarını Özel Chrome Sekmelerinde açan kendi kendine yardım bölümünde ve kullanıcıların envanter listeleme sayfasından ödeme sayfasına geçtiği otobüs bileti rezervasyon dönüşüm hunisinde. İkinci durumda, görüntü geçişleri sayfalar arasında gezinmeyi kolaylaştırdı ve dönüşüm oranında artış sağladı. Bu, en güncel mevcut envanteri getirme gibi ağır işlemler yürütülürken daha iyi bir kullanıcı deneyimi ve daha iyi algılanan performans elde edilmesinin bir sonucudur.
Uygulamayla ilgili teknik ayrıntılar
redBus, farklı yolculuklarda SPA'ların ve MPA'ların bir kombinasyonuyla birlikte React ve EJS'yi ön uç teknoloji grubu olarak kullanır. 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 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şleri uygulamayı tercih etti. Bu da % 7 daha fazla satış sağladı. redBus'un Kıdemli Mühendislik Müdürü Amit Kumar, görüntü geçişlerinin gerçekten daha iyi bir kullanıcı deneyimi isteyen ve daha az bakım maliyeti isteyen kullanıcılar için harika olduğunu söyledi.
Farklı bir kullanıcı grubundan değerli analizler içeren kapsamlı kullanıcı geri bildirimi oturumları gerçekleştirdik. Kullanıcı tabanımızı (otobüs ve tren) ve ihtiyaçlarını derinlemesine anlamamız, uzmanlığımızla birleştiğinde bu özelliğin A/B testi gerekmeden, baştan itibaren önemli bir değer sağlayacağına inanmamızı sağladı. Görünüm geçişleri, sorunsuz bir gezinme deneyimi sunarak uygulama ile web arasındaki boşluğu doldurmaya yönelik bir adımdır.
Anoop Menon, CTO 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, geçmişte kullanıcı deneyimini iyileştirmek için CSS animasyonları veya animasyonlu geçişler uygulamak üzere bir çerçeve kullanmayı düşünmüş ancak DOM oluşturmadaki düşük performans ve kod sürdürülebilirliği konusunda endişe duymuştu. Chrome, Görüntüleme geçişleri API'si için destek eklediğinde bu zorlukların üstesinden gelen ilgi çekici sayfa geçişleri oluşturmak için bu API'yi kullanmaktan heyecan duydular.
CyberAgent, blog listesi ile blog sayfası arasında görüntüleme geçişleri uyguladı. Burada, hero resme öğe geçişini nasıl eklediklerine dikkat edin. 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ü için çok fazla hareket içeriyordu.
@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, View Transition API'nin nasıl kullanıldığı 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]);
};
Daha fazla örnek Next.js kodu 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çeriğin bir alıntısının gösterildiği öne çıkan haberler sayfası ile kullanıcı Daha fazla ayrıntıyı göster'i tıkladığında makalenin geri kalanının yavaşça gösterilmesidir.
İlginç olan nokta, yalnızca düğme tıklandıktan sonra değişecek olan bölüme animasyon eklemeleridir. Animasyon tasarımında yapılan bu küçük ayar, yalnızca yeni içeriğin animasyonlu olarak gösterildiği MPA sayfasının kullanıcı açısından daha çok SPA gibi görünmesini sağlar:
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ına başka bir view-transition-name atadılar ve üst kısma animasyon eklemediler.
::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ü geçişleri API'sini kullanımıyla ilgili ilginç bir nokta da, ayrıntılar sayfasında ön oluşturma kurallarını kolayca uygulamak için hızlı bağlantı 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ı uygulama süreci hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.
Referans
CyberAgent'daki Ameba hizmetinin Teknik Lideri Kazunari Hara, görüntüleme geçişlerinin iki nedenden dolayı işletme üzerinde önemli bir etkisi olabileceğini söyledi.
İlk olarak, kullanıcılara sayfa üzerinde 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, animasyonlarla markayı güçlendirip vurgular. CyberAgent, markasını tanıtmak için belirli bir animasyon tasarımına sahiptir. Görüntü geçişleri sayesinde, harici kitaplıkları yönetme maliyetini eklemeden bu markalı deneyimi uygulayabilirler.
Geçişleri Görüntüle, en sevdiğim API'lerden biridir. Standart bir tarayıcı özelliği olarak animasyon ekleme özelliği, kitaplıklara bağlı diğer çözümlere kıyasla görünüm geçişlerinin uygulanmasını ve sürdürülmesini kolaylaştırır. 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. Mobil web deneyimini, yerel uygulama deneyimine olabildiğince yakın hale getirmeyi hedefliyorlar. 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 az miktarda etkiledi.
Nykaa görüntü geçişlerini neden uyguladı?
Görüntüleme geçişlerinin kullanıma sunulmasıyla birlikte Nykaa'nın ekibi, bu geçişlerin doğal olarak kullanılabilmesinin sayfa geçişlerinin kullanıcı deneyimini performansa maliyet yansıtmadan önemli ölçüde iyileştirebileceği bir fırsat gördü. Nykaa, ürün ayrıntıları sayfasından ürün listeleme sayfasına geçiş yapmak için görüntü geçişlerini yoğun şekilde kullanıyor.
Uygulamayla ilgili teknik ayrıntılar
Nykaa, SPA'sını oluşturmak için React ve Emotion'u kullandı. React ile görüntü geçişlerinin nasıl kullanılacağıyla ilgili daha fazla örnek kodu burada bulabilirsiniz.
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); }
`
Yan çekmece 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'nın uygulama yöneticisi 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östermenin, kullanıcılara içeriğin yüklenmesi için ne kadar beklemeleri gerektiğini göstermediğini fark etti. Görüntü geçişlerinde, geçişin kendisi kullanıcılara "bir şeyler olacak" hissi vererek beklemeyi daha az can sıkıcı hale getiriyordu.
Nykaa, görüntüleme geçişleri içeren web sayfasının yeni ve geliştirilmiş kullanıcı deneyiminden çok memnun kaldı ve görüntüleme geçişlerini diğer sayfalara da uygulamaya hazır. Şirketin tasarımdan sorumlu başkan yardımcısı şunu söylüyor:
Gelecekte kullanıma sunacağımız tüm özelliklerde, uygun olduğu durumlarda görüntü geçişlerini uygulamaya kararlıyız. Bazı alanlar zaten belirlendi ve ekip bu alanlara aktif olarak yatırım yapıyor.
Krishna R V, Tasarım Başkan Yardımcısı
PolicyBazaar
Merkezi Gurgaon'da bulunan PolicyBazaar, Hindistan'ın en büyük sigorta toplayıcısı ve çok uluslu bir finansal teknoloji ş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ı amaçlamıştır. Kullanıcı deneyimini iyileştirdiği, sorunsuz bir gezinme akışı oluşturduğu ve web sitelerinin genel görsel çekiciliğini artırdığı için View Transitions API'nin kullanıma sunulmasından önce bile JavaScript ve CSS kullanılarak özel geçişler uygulamak yaygın bir uygulamaydı.
Ancak bu özel uygulamalar, zaman zaman performansa dayalı gecikmeler, kod bakım karmaşıklıkları ve kullanılan çerçevelerle optimal olmayan uyumluluk gibi maliyetler getiriyordu. Görüntü Geçişleri API'si, performans avantajları sunan ve kullanımı kolay bir arayüz sağlayarak bu zorlukların çoğunu aşmalarına 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 tabanlarının büyük kısmında Angular ve React'in hakim olduğu karma bir çerçeve yaklaşımı kullanıyorlar. Angular'da yazılmış ve Aman Soni (PolicyBazaar'ın Baş Ön Uç Geliştiricisi) tarafından paylaşılan koddan alınan VT alıntısını aşağıda bulabilirsiniz:
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 iyileştirmek PB için birincil bir hedeftir ve VT, bunu sorunsuz bir şekilde başarmada önemli bir araç olduğunu kanıtlamıştır. Hem geliştirici topluluğumuzda hem de kullanıcı tabanımızda yaygın olarak kullanılması, ekibimize büyük bir heyecan verdi. Çeşitli POD'lara entegrasyonunu düşünürken memnuniyet düzeyleri ve operasyonel mükemmellik üzerinde geniş kapsamlı olumlu bir etki yaratmasını bekliyoruz.
Saurabh Tiwari (CTO, 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: