Geçişlerin kullanıcılar için birçok avantajı vardır. Örneğin, kullanıcıların bağlamda kalmasına yardımcı olur 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ırmak istiyor.
Ancak geliştiricilerin iki farklı öğenin durumlarını yönetmesi gerektiğinden durum geçişlerini etkinleştirmek gerçekten zordu. Basit bir geçiş efekti bile iki durumun aynı anda mevcut olmasını gerektirir. Bu durum, giden öğede ek etkileşimleri işleme gibi kullanılabilirlik sorunlarına yol açar. Yardımcı cihaz kullanıcıları için, hem önceki hem de sonraki durumun aynı anda DOM'da bulunduğu bir dönem vardır. Ayrıca, öğeler ağaçta görsel olarak sorunsuz 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. Bu API, DOM'unuzda durumlar arasında çakışma olmadan değişiklik yapmanıza 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ği uygulamanın ne kadar kolay olduğunu merak ediyor olabilirsiniz. Ne tür kullanım alanları vardır? Diğer geliştiriciler, görünüm 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ünüm geçişlerinin nasıl uygulandığı ve bu web sitelerinin View Transitions API'yi kullanarak farklı şekillerde nasıl fayda sağladığı açıklanmaktadır.
redBus
MakeMyTrip grubunun bir parçası olan redBus, Hindistan'ın Bangalore şehrinde genel merkezi bulunan ve dünya genelinde farklı coğrafyalarda faaliyet gösteren bir otobüs rezervasyonu ve biletleme web sitesidir. View Transitions API'yi kullanarak deneyim sunan ilk web sitelerinden biriydi.
Redbus neden görünüm geçişlerini uyguladı?
redBus ekibi, yerel uygulamalarına mümkün olduğunca yakın, uygulama benzeri bir web deneyimi sunmaya inanıyor. Hatta yıllar içinde birden fazla özelleştirilmiş çözüm uygulamışlardı. Örneğin, View Transitions API geliştirilmeden önce bile sayfa geçişleri için özelleştirilmiş JavaScript ve CSS tabanlı animasyonlar kullanıma sunmuşlardı. Ancak bu, ağın ve cihazların daha düşük segmentlerinde performans yönetimiyle uğraşmaları gerektiği anlamına geliyordu. Bu durum, zaman zaman uyarlanabilir yükleme stratejisinin kullanıldığı farklı bir deneyime yol açıyordu.
redBus, birden fazla kullanıcı yolculuğu için görünüm geçişlerini kullandı. Örneğin, mobil uygulamalarındaki kendi kendine yardım bölümünde (web sayfaları Özel Chrome Sekmeleri'nde açılıyordu) ve otobüs bileti rezervasyonu dönüşüm hunisinde (kullanıcılar envanter listeleme sayfasından ödeme sayfasına gidiyordu). İkinci durumda, görüntüleme geçişleri sayfalar arası gezinmeyi daha sorunsuz hale getirdi ve dönüşüm oranında artış sağladı. Bu, ağır işlemler (ör. en güncel kullanılabilir envanterin getirilmesi) yürütülürken daha iyi bir kullanıcı deneyimi ve daha iyi algılanan performanstan kaynaklanıyordu.
Uygulamanın teknik ayrıntıları
redBus, ön uç teknoloji yığını olarak React ve EJS'yi kullanıyor. Ayrıca, farklı yolculuklarda SPA'lar ve MPA'lar kombinasyonundan yararlanıyor. Aşağıdaki kod alıntısında, görünüm 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 animasyonunun anahtar 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, sitesinde INP'yi iyileştirme çalışmalarının yanı sıra görünüm geçişlerini de uygulamayı tercih etti. Bu sayede % 7 daha fazla satış elde etti. redBus'ta Kıdemli Mühendislik Yöneticisi Amit Kumar, görünüm geçişlerinin gerçekten daha iyi bir kullanıcı deneyimi isteyen ve daha az bakım yükü isteyenler için harika olduğunu söyledi.
Çeşitli kullanıcı gruplarından değerli bilgiler alarak kapsamlı kullanıcı geri bildirimi oturumları düzenledik. Kullanıcı tabanımız (otobüs ve tren) ve ihtiyaçları hakkındaki derin bilgimiz, uzmanlığımızla birleştiğinde bu özelliğin A/B testi yapmaya gerek kalmadan en başından itibaren önemli bir değer sağlayacağına inanmamıza neden oldu. Görünüm geçişleri, sorunsuz bir gezinme deneyimiyle uygulama ve web arasındaki boşluğu kapatmaya yönelik bir adımdır.
Anoop Menon, CTO redBus
CyberAgent
CyberAgent, Japonya merkezli bir BT şirketidir ve blog ile haber yayınlama gibi birçok online hizmet sunar.
CyberAgent neden görünüm 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üştü ancak DOM oluşturma ve kodun sürdürülebilirliği konusunda performansın düşük olacağından endişeleniyordu. Chrome, View Transitions API desteği eklediğinde 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ünüm geçişleri uyguladı. Burada, öğe geçişinin ana resme nasıl eklendiğine dikkat edin. Siteyi ziyaret ederek bu deneyimi bugün yaşayabilirsiniz.
Ayrıca, farklı cihazlar için farklı animasyon deneyimleri tasarlamak üzere medya sorgularını kullandılar. Mobil sayfalar için öğ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;
}
}
Uygulamanın 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]);
};
Diğer örnek Next.js kodlarını inceleyin.
Önceden oluşturma teknolojisiyle MPA için geçişleri görüntüleme
CyberAgent ayrıca Ameba News adlı haber portalı sitesinde yeni Çok Sayfalı Uygulamalar (MPA) için Görünüm Geçişleri API'mizi (şu anda chrome://flags/#view-transition-on-navigation işareti altında) denedi.
Görünüm geçişleri iki yerde kullanıldı: Birincisi, aşağıdaki videoda gösterildiği gibi haber kategorileri değiştirilirken.
İkincisi ise içeriğin bir alıntısının gösterildiği haber öne çıkanlar sayfası ile kullanıcı Daha fazla ayrıntı göster'i tıkladığında makalenin geri kalanının görünür hale gelmesi arasındadır.
İlginç olan nokta, yalnızca düğme tıklandıktan sonra değişecek kısma animasyon eklemeleri. Animasyon tasarımında yapılan bu küçük değişiklik, MPA sayfasının kullanıcı açısından daha çok SPA gibi görünmesini sağlar. Bu durumda yalnızca yeni içerik animasyonla gösterilir:
Bunu yapmak için 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 ise başka bir view-transition-name atamışlar ve üst kısma animasyon eklememişler.
::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ünüm geçişleri API'sini kullanmasıyla ilgili bir diğer ilginç nokta, ayrıntılar sayfasında önceden oluşturma kurallarını kolayca uygulamak için quicklink'i kullanmış olmaları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ı uygulamaları hakkında daha fazla bilgiyi bu makalede bulabilirsiniz.
Referans
CyberAgent'taki Ameba hizmetinin Teknik Yöneticisi Kazunari Hara, görünüm geçişlerinin iki nedenden dolayı işletme üzerinde önemli bir etkisi olabileceğini söyledi.
İlk olarak, kullanıcılara sayfada rehberlik ederler. Görünüm 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, animasyonla markayı geliştirip vurgular. CyberAgent, markasını tanıtmak için özel bir animasyon tasarımına sahip. Görünüm geçişleri sayesinde, harici kitaplıkları koruma maliyetini eklemeden bu markalı deneyimi uygulayabilirler.
View Transitions, en sevdiğim API'lerden biridir. Animasyonları standart bir tarayıcı özelliği olarak ekleme olanağı, görüntüleme geçişlerinin kitaplıklara bağlı diğer çözümlere kıyasla daha kolay uygulanmasını ve sürdürülmesini sağlar. Markamızı tanıtmak için görünüm geçişlerini daha fazla hizmette kullanmayı dört gözle bekliyoruz.
Kazunari Hara, Ameba CTO'su
Nykaa
Nykaa, Hindistan'ın en büyük moda ve güzellik e-ticaret platformudur. Mobil web deneyimlerini, yerel uygulama deneyimlerine mümkün olduğunca yakın hale getirmeyi amaçlıyorlar. Daha önce geçiş animasyonları uygulamaya çalışırken karmaşık özel JavaScript yazmakta zorlanıyorlardı. Bu durum, web sitelerinin performansını da marjinal olarak etkiledi.
Nykaa neden görünüm geçişlerini uyguladı?
Görünüm geçişlerinin kullanıma sunulmasıyla birlikte Nykaa'nın ekibi, bu geçişlerin yerel olarak kullanılabilmesinin sayfa geçişlerinin kullanıcı deneyimini performansta herhangi bir maliyet olmadan önemli ölçüde iyileştirebileceği bir fırsat olduğunu fark etti. Nykaa, ürün ayrıntıları sayfasından ürün listeleme sayfasına geçiş yapmak için görünüm geçişlerini yoğun bir şekilde kullanıyor.
Uygulamanın teknik ayrıntıları
Nykaa, SPA'sını oluşturmak için React ve Emotion'ı kullandı. React ile görünüm geçişlerini kullanma hakkında 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'da uygulamalardan sorumlu Sunit Jindal, görünüm 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ı efektinin gösterilmesinin kullanıcılara içeriklerin yüklenmesi için ne kadar beklemeleri gerektiğini bildirmediğini fark etti. Görünüm geçişlerinde, geçişin kendisi kullanıcılara "bir şeyler olacak" hissi veriyordu ve bu da bekleme süresini daha az rahatsız edici hale getiriyordu.
Nykaa, görünüm geçişleriyle web sayfasının yeni geliştirilmiş kullanıcı deneyiminden çok memnun kaldı ve görünüm geçişlerini diğer sayfalarda da uygulamaya hazır. Tasarım başkan yardımcısı şunları söyledi:
Görünüm geçişlerini, anlamlı olduğu tüm yeni özelliklerde uygulamaya kararlıyız. Bazı alanlar zaten belirlendi ve ekip bu alanlara aktif olarak yatırım yapıyor.
Krishna R V, Tasarımdan Sorumlu Başkan Yardımcısı
PolicyBazaar
Merkezi Gurgaon'da bulunan PolicyBazaar, Hindistan'ın en büyük sigorta toplayıcısı ve çok uluslu finansal teknoloji şirketidir.
PolicyBazaar neden görünüm geçişlerini uyguladı?
Web'e öncelik veren bir şirket olan PolicyBazaar ekibi, her zaman kritik kullanıcı yolculuklarında mümkün olan en iyi kullanıcı deneyimini sunmayı hedeflemiştir. JavaScript ve CSS kullanılarak özel geçişler uygulamak, View Transitions API'nin kullanıma sunulmasından önce bile yaygın bir uygulamaydı. Bu geçişler, kullanıcı deneyimini iyileştiriyor, sorunsuz bir gezinme akışı oluşturuyor ve web sitelerinin genel görsel çekiciliğini artırıyordu.
Ancak bu özel uygulamalar, zaman zaman performansa dayalı gecikmelere, kod bakımıyla ilgili karmaşıklıklara ve kullanılan çerçevelerle uyumluluğun ideal olmamasına neden oldu. View Transitions API, yerel olarak kullanılabilen performans avantajlarıyla birlikte 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 almak için gerekli ayrıntıları sağlamasını heyecan verici hale getirmek amacıyla teklif öncesi yolculuklarındaki farklı öğelerde görünüm geçişlerini kullandı.
Uygulamanın teknik ayrıntıları
Kod tabanlarının büyük bir kısmında Angular ve React'in hakim olduğu hibrit bir çerçeve yaklaşımı kullanırlar. Aman Soni (PolicyBazaar'ın Baş Arayüz Geliştiricisi) tarafından paylaşılan ve Angular ile yazılmış kodun VT alıntısı aşağıda verilmiştir:
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
Tasarım Başkanı (Life BU) Rishabh Mehrotra, görünüm geçişlerinin kullanılabilirliği, etkileşimi ve genel memnuniyeti artırarak kullanıcıların web sitesi deneyimini iyileştirmede önemli bir rol oynadığını söyledi. Sorunsuz gezinme, rehberli etkileşim, azaltılmış bilişsel yük, modern estetik ve daha birçok konuda yardımcı oldu.
PB için web deneyimini iyileştirmek en önemli hedeflerden biridir ve VT, bu hedefe ulaşmada son derece sorunsuz bir şekilde yardımcı olan bir araç olduğunu kanıtlamıştır. Hem geliştirici topluluğumuz hem de kullanıcı tabanımız tarafından yaygın olarak beğenilmesi, ekibimize büyük bir heyecan verdi. Bu özelliği farklı POD'lerde entegre etmeyi planlıyoruz. Bu sayede memnuniyet düzeyleri ve operasyonel mükemmellik üzerinde geniş kapsamlı olumlu bir etki yaratmayı bekliyoruz.
Saurabh Tiwari (CTO, PolicyBazaar)
Sonraki adımlar
Görünüm geçişlerini denemek ister misiniz? Daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atabilirsiniz: