Geçişlerin kullanıcılar için birçok faydası vardır. Bunlardan biri de kullanıcıların bağlama uygun şekilde kalmasını sağlamak ve gecikme algısını azaltmaktır. Geliştiriciler, kullanıcıların siteyle etkileşimini artırmaya yardımcı olması için sayfalar arasında sorunsuz geçişler oluşturabilmek isterler.
Ancak, geliştiricilerin iki farklı öğenin durumunu yönetmesini gerektirdiğinden durum geçişlerini etkinleştirmek çok zordu. Basit bir çapraz geçiş gibi bir durum bile her iki durumun da aynı anda var olmasını gerektirir. Bu durum, giden öğede ek etkileşimlerin ele alınması gibi kullanılabilirlikle ilgili zorluklar yaratır. Yardımcı cihaz kullanıcıları için hem öncesi hem de sonra durumunun aynı anda DOM'de olduğu bir dönem vardır. Ayrıca, nesneler ağaç etrafında görsel olarak düzgün şekilde hareket edebilir, ancak okuma konumunun ve odağını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 çakışma olmadan DOM değişikliğinizi yapmanıza ve anlık görüntüler kullanan durumlar arasında geçiş animasyonu yapmanıza olanak tanır.
Uygulamasını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 makale, 4 farklı web sitesinde görüntüleme geçişlerini uygulama süreciyle ilgilidir: RedBus (seyahat), CyberAgent (haber/blog yayıncısı), Nykaa (e-ticaret) ve PolicyBazaar (sigorta) ve View Transitions API'yi kullanarak bu web sitelerinin farklı şekillerde sağladığı avantajlar.
redBus
MakeMyTrip grubunun bir parçası olan redBus, merkezi Hindistan'ın Bangalore şehrinde bulunan ve dünyanın farklı yerlerinde faaliyet gösteren bir otobüs rezervasyon ve bilet web sitesidir. View Transitions API'yi kullanan ilk web sitelerinden biridir.
Redbus neden görünüm geçişleri uyguladı?
redBus ekibi, yerel uygulamalarına mümkün olduğunca yakın, birleşik, uygulama benzeri bir web deneyimi sağlamaya gönülden inanıyor. Hatta yıllar içinde birden fazla özelleştirilmiş çözüm uygulamaya koymuşlardı. Örneğin, View Transitions API'nin geliştirilmesinden önce dahi sayfa geçişleri için özelleştirilmiş JavaScript ve CSS tabanlı animasyonlar hazırladılar. Ancak bu durum, ağ ve cihazların alt segmentlerinde performans yönetimiyle uğraşmaları gerektiği ve zaman zaman uyarlanabilir yükleme stratejisi uygulanan diferansiyel deneyimlere yol açtıkları anlamına geliyordu.
redBus, birden fazla kullanıcı yolculuğu için görünüm geçişlerinden yararlandı. Örneğin, mobil uygulamalarında, Özel Chrome Sekmeleri'nde web sayfalarının açıldığı kendi kendine yardım bölümlerinde ve kullanıcıların envanter listeleme sayfasından ödemeler sayfasına gittiği otobüs bileti rezervasyon dönüşüm hunisinde. İkinci durumda, görüntüleme geçişleri sayfadan sayfaya daha kolay gezinme olanağı sağladı ve dönüşüm oranlarında artış sağladı. Bunun nedeni, en güncel mevcut envanteri getirmek gibi ağır işlemler yürütülürken daha iyi bir kullanıcı deneyimi sunmak ve algılanan performansın daha iyi olmasıdır.
Uygulamaya ilişkin teknik ayrıntılar
redBus, ön uç teknoloji yığını olarak React ve EJS'yi kullanarak farklı yolculuklarda SPA ve MPA'ların bir kombinasyonunu kullanıyor. Aşağıdaki kod alıntısı, görünüm 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, INP iyileştirme çalışmalarının yanı sıra görüntüleme geçişlerini sitesinde uygulamayı tercih etti. Bu, satışları% 7 oranında artırdı. redBus Kıdemli Mühendislik Yöneticisi Amit Kumar, görüntüleme geçişlerinin, gerçekten daha iyi kullanıcı deneyimi isteyen ve daha az bakım yükü isteyenler için harika olduğunu söylüyor.
Çeşitli kullanıcılardan değerli bilgiler içeren kapsamlı kullanıcı geri bildirim oturumları gerçekleştirdik. Kullanıcı tabanımız (otobüs ve tren) ve onların ihtiyaçları hakkındaki uzmanlığımızla bir araya geldiğinde bu özelliğin, en baştan itibaren, A/B testine ihtiyaç duymadan ö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 kapatmaya yönelik bir adımdır.
Anoop Menon, Baş Teknoloji Sorumlusu redBus
CyberAgent
CyberAgent, blog ve haber yayıncılığı da dahil olmak üzere birçok online hizmet sunan Japonya merkezli bir BT şirketidir.
CyberAgent neden görünüm geçişleri uyguladı?
CyberAgent, geçmişte kullanıcı deneyimini iyileştirmek için CSS animasyonları veya animasyonlu geçişler uygulamak için bir çerçeve kullanmayı düşünmüştü ancak DOM oluşturma ve kod sürdürülebilirliği açısından düşük performansla ilgili endişeleri vardı. Chrome, Görünüm geçişleri API'sini desteklediğinde, bu zorlukların üstesinden gelen ilgi çekici sayfa geçişleri oluşturmak için bu API'yi kullanmak çok heyecanlıydı.
CyberAgent, blog listesi ile blog sayfası arasında görünüm geçişleri uyguladı. Burada, öğe geçişini lokomotif resme nasıl eklediklerine dikkat edin. Sitelerini ziyaret edebilir ve hemen canlı olarak deneyimleyebilirsiniz.
Ayrıca, farklı cihazlar için farklı animasyon deneyimleri tasarlamak amacıyla medya sorguları da kullandılar. Mobil sayfalarda öğe geçişleri içeriyorlardı, ancak bu efekt, masaüstü için çok fazla hareket içeriyordu.
@media screen and (min-width: 769px) {
.main-visual {
view-transition-name: none !important;
}
}
Uygulamaya ilişkin 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]);
};
Biraz daha örnek Next.js kodu görüntüleyin.
Önceden işleme teknolojisine sahip MPA için geçişleri görüntüleme
CyberAgent ayrıca yeni View Transitions API for Multiple Page Apps'ı (MPA) (şu anda chrome://flags/#view-transition-on-navigation işaretiyle) haber portalı sitesi olan Ameba News adlı bir hizmette denedi.
Görüntüleme geçişleri iki yerde kullanıldı: Birincisi, bir sonraki videoda gösterilen haber kategorilerinin değiştirilmesi.
İkincisi ise içeriğin bir alıntısının gösterildiği haber öne çıkan anlar sayfası arasındadır. Kullanıcı, Daha fazla ayrıntı göster'i tıkladığında makalenin geri kalan kısmı soluk görünür.
Burada ilginç olan nokta, sadece 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 daha çok bir SPA gibi görünmesini sağlar. Burada yalnızca yeni içerik canlandırılmaktadır:
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ı ve üst bölüme animasyon eklemedi.
::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 kullanımıyla ilgili ilgi çekici bir başka nokta da ayrıntılar sayfasında önceden 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ı uygulamaları hakkında daha fazla bilgiyi bu makaleden edinebilirsiniz.
Referans
CyberAgent'taki Ameba Hizmeti'nin Teknoloji Lideri Kazunari Hara, görüntüleme geçişlerinin işletme üzerinde iki nedenden dolayı önemli bir etki yaratabileceğini söylüyor.
Öncelikle, sayfadaki kullanıcılara yol gösterirler. Görünüm 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ı zenginleştirip vurgularlar. CyberAgent, markasını tanıtmak için özel bir animasyon tasarımına sahip. Şirket, görünüm geçişleri sayesinde bu markalı deneyimi, harici kitaplık tutma maliyetini eklemeden uygulayabiliyor.
View Transitions, en sevdiğim API'lerden biri. Animasyonların standart bir tarayıcı özelliği olarak eklenebilmesi, kitaplıklara bağlı diğer çözümlere kıyasla görünüm geçişlerinin uygulanmasını ve korunmasını kolaylaştırır. Markamızı tanıtmak için daha fazla hizmete görünüm geçişlerini uygulamayı sabırsızlıkla bekliyoruz.
Kazunari Hara, Ameba Baş Teknoloji Sorumlusu
Nikaa
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. Önceden geçiş animasyonlarını uygulamaya çalıştıklarında karmaşık özel JavaScript'ler yazmakta zorlanıyorlardı. Bu durum web sitesinin performansını da marjinal şekilde etkiledi.
Nykaa neden görünüm geçişlerini uyguladı?
Görüntüleme geçişlerinin kullanıma sunulmasıyla birlikte Nykaa'nın ekibi, bu geçişlerin yerel olarak kullanılabilir hale gelmesinin, sayfa geçişlerine ilişkin kullanıcı deneyiminin performansta maliyet olmadan önemli ölçüde iyileştirilebileceği anlamına geldiği bir fırsat gördü. Nykaa, ürün ayrıntıları sayfasından ürün listeleme sayfasına geçiş için yoğun bir şekilde görüntüleme geçişlerinden yararlanıyor.
Uygulamaya ilişkin teknik ayrıntılar
Nykaa, SPA'sını oluşturmak için Tepki ve Emotion özelliklerini kullandı. React ile Geçişleri Görüntüleme özelliğinin 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); }
`
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'nın uygulama başkanı 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 pırıltı efektlerini kullandı ancak pırıltı efektini göstermenin, kullanıcılara içeriğin yüklenmesi için ne kadar beklemeleri gerektiğini sağlamadığını fark etti. Görünüm geçişleriyle, geçiş süreci kullanıcılara "bir şeyler olacak" hissi vererek beklemeyi daha az zahmetli hale getirdi.
Nykaa, web sayfalarının görüntüleme geçişli yeni iyileştirilmiş kullanıcı deneyimi bakımından oldukça heyecanlıydı ve görüntüleme geçişlerini diğer sayfalarda da uygulamaya hazır. Tasarım Başkan Yardımcısı şunları söyledi:
Yakında kullanıma sunulacak tüm özelliklerde uygun durumlarda görüntüleme geçişlerini uygulamak için elimizden geleni yapıyoruz. Bazı alanlar zaten belirlendi ve ekip bu alanlara etkin bir şekilde 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ı ve çok uluslu finansal teknoloji şirketidir.
PolicyBazaar neden görünüm geçişleri 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 sağlamayı hedeflemiştir. View Transitions API'nin kullanıma sunulmasından önce bile JavaScript ve CSS kullanarak özel geçişler uygulamak yaygın bir uygulamaydı. Bu API'ler kullanıcı deneyimini iyileştirdi, sorunsuz bir gezinme akışı oluşturdu ve web sitelerinin genel görselliğini iyileştirdi.
Ancak bu özel uygulamalar zaman zaman performansa dayalı gecikmeler, kod bakımının karmaşıklığı ve kullanılan çerçevelerle yeterince uyumluluk sağlanamamasına neden oluyordu. View Transitions API, yerel olarak sunulan performans avantajlarıyla kullanımı kolay bir arayüz sağlayarak bu zorlukların çoğunun üstesinden gelmelerine yardımcı oldu.
PolicyBazaar, fiyat teklifi öncesi yolculuklarında farklı öğeler arasında görüntüleme geçişlerini kullanarak potansiyel alıcıların sigorta poliçesi satın almak için gerekli bilgilerini sağlamasını heyecan verici hale getirdi.
Uygulamaya ilişkin teknik ayrıntılar
Kod tabanlarının büyük kısmına Angular ve React'in hakim olduğu karma bir çerçeve yaklaşımını kullanırlar. Angular dilinde yazılmış ve Aman Soni (PolicyBazaar'ın Baş Ön Uç Geliştiricisi) tarafından paylaşılan kodlarından VT alıntısını burada 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
Tasarım departmanı başkanı Rishabh Mehrotra (Life BU), görüntüleme geçişlerinin kullanılabilirliği, etkileşimi ve genel memnuniyeti iyileştirerek kullanıcılarının web sitesi deneyimini geliştirmede önemli bir rol oynadığını söylüyor. Bu çözüm, sorunsuz gezinme, rehberli etkileşim, daha az bilişsel yük, modern estetik ve daha birçok konuda yardımcı oldu.
Web deneyimini iyileştirmek PB için en önemli hedef olarak kabul edilir ve VT'nin bunu son derece sorunsuz bir şekilde gerçekleştirmede etkili bir araç olduğu kanıtlanmıştır. Hem geliştirici topluluğumuz hem de kullanıcı tabanımız arasında geniş çapta cazip olması, ekibimizi oldukça istekli hale getirdi. Bu çözümün farklı POD'lerle entegre edilmesini planlarken, memnuniyet seviyeleri ve operasyonel mükemmellik üzerinde geniş kapsamlı ve olumlu bir etki olacağını öngörüyoruz.
Saurabh Tiwari (Baş Teknoloji Sorumlusu, PolicyBazaar)
Sonraki adımlar
Görünüm geçişlerini denemek ister misiniz? Aşağıda, daha fazla bilgi edinmek için başvurabileceğiniz bazı kaynaklar verilmiştir: