Geçişlerin kullanıcılar için birçok avantajı vardır. Örneğin, kullanıcıların bağlamı kaybetmemesini sağlar ve gecikme algısını azaltı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 bir durumda 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ü 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üleme geçişlerini neden uyguladı?
redBus ekibi, yerel uygulamalarına mümkün olduğunca yakın, birleşik ve uygulama benzeri bir web deneyimi sunmaya kararlı. Hatta yıllar içinde birden fazla özel çö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üleme 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ında, görüntüleme geçişlerinin nasıl kullanıldığı gösterilmektedir:
/* 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, site genelinde INP iyileştirme çalışmalarıyla birlikte görüntüleme geçişlerini uygulamayı tercih etti ve bu da % 7 daha fazla satış elde etmesine yol açtı. redBus'ta Kıdemli Mühendislik Müdürü olan 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 gerçekten 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, uygulama ile web arasındaki boşluğu sorunsuz bir gezinme deneyimiyle doldurmaya yönelik bir adımdır.
Anoop Menon, CTO redBus
CyberAgent
CyberAgent, blog ve haber yayınlama da dahil olmak üzere birçok online hizmet sunan Japonya merkezli bir BT şirketidir.
CyberAgent neden görüntüleme geçişlerini 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ü geçişleri uyguladı. Burada, öğe geçişinin hero resme nasıl eklendiğini görebilirsiniz. Sitelerini ziyaret ederek bu özelliği hemen deneyebilirsiniz.
Ayrıca, farklı cihazlar için farklı animasyon deneyimleri tasarlamak amacıyla medya sorgularını kullandılar. Mobil sayfalara öğe geçişleri eklediler ancak bu efekt masaüstünde ç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'i kullanıyor. 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.
MPA için ön oluşturma teknolojisiyle geçişleri görüntüleme
CyberAgent, yeni Çok Sayfalı Uygulamalar (MPA) için Görüntü Geçişleri API'mizi (şu anda chrome://flags/#view-transition-on-navigation işareti altında) bir haber portalı sitesi olan Ameba News adlı hizmette de denemiştir.
Görünüm geçişleri iki yerde kullanıldı: İlki, haber kategorileri değiştirilirken (aşağıdaki videoda gösterilmiştir).
İ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. Örnek kodları aşağıda 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.
Öncelikle, kullanıcılara sayfa üzerinde yol gösterirler. Görüntü geçişleri, kullanıcıların görsel olarak en önemli mesaja 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 hizmete görüntü geçişleri 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. Daha önce geçiş animasyonları uygulamaya çalışırken karmaşık özel JavaScript yazma konusunda zorluk yaşıyorlardı. Bu durum, web sitelerinin 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ı. Görünüm geçişlerinin React ile 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 acı verici 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 belirlenmiş 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, görüntüleme geçişlerini neden 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 almak için gerekli ayrıntıları paylaşmasını heyecan verici hale getirmek amacıyla teklif öncesi yolculuklarında farklı öğeler arasında görüntü 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
Life BU'nun tasarım müdürü Rishabh Mehrotra, görüntüleme geçişlerinin kullanılabilirliği, etkileşimi ve genel memnuniyeti artırarak kullanıcılar için web sitesi deneyimini iyileştirmede önemli bir rol oynadığını söyledi. Bu sayede sorunsuz gezinme, rehberli etkileşim, azaltılmış bilişsel yük, modern estetik ve daha pek çok avantaj elde ettik.
Web deneyimini iyileştirmek PB için birincil bir hedeftir ve VT, bunu sorunsuz bir şekilde gerçekleştirmede ö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üntü geçişlerini denemek ister misiniz? Daha fazla bilgi edinmek için yararlanabileceğiniz bazı kaynakları aşağıda bulabilirsiniz: