CSS ve kullanıcı arayüzü özellikleri, özel JavaScript çözümlerini veya bazı CSS hilelerini azaltmanıza ya da değiştirmenize ve daha iyi ve daha basit kod yazmanıza yardımcı olan yeni CSS özelliklerini ve söz dizimini ifade eder. Modern CSS özelliklerini kullanmaya başlayan geliştiriciler:
- Geliştirme süresini kısaltın.
- Kod verimliliğini, okunabilirliğini ve sürdürülebilirliğini iyileştirin.
- Performansı artırın.
- Sorunsuz, verimli ve erişilebilir güzel kullanıcı arayüzleri oluşturun.
Bu örnek olay serisinde, çeşitli e-ticaret sitelerinin kaydırma destekli animasyonlar, görüntü geçişleri, Popover API, kapsayıcı sorguları ve has() seçiciyi nasıl benimsediğini ve bu sayede elde ettikleri avantajları öğrenin.
E-ticaret siteleri bu özellikleri neden kullanmalıdır?
Forrester Research'in Daha İyi Kullanıcı Deneyimi için Altı Adım başlıklı çalışmasında, iyi tasarlanmış bir kullanıcı arayüzünün dönüşümleri %200'e varan oranda artırabileceği gösteriliyor. Kullanıcılar, tasarım kalitesini güvenle ilişkilendiriyor. Tüketicilerin% 94'ü, bir web sitesini terk etmelerinin veya siteye güvenmememelerinin başlıca nedeni olarak tasarımı belirtiyor. Bu nedenle, e-ticaret siteleri bu CSS ve kullanıcı arayüzü özelliklerinden özellikle yararlanacaktır. Dönüşüm dönüşüm hunileri, kullanıcıların görevlerini kolayca ve güvenle tamamlayabilmesi için olabildiğince sorunsuz olmalıdır. Duyarlı etkileşimler ve sorunsuz gezinme, kullanıcıya iyi bir görsel geri bildirim sağlayabilir ve genel yolculuğa keyif ve ifade katabilir.
Bu özellikler, kullanımı kolay olacak şekilde tasarlanmıştır ve çoğunlukla minimum JavaScript ile CSS'de uygulanabilir. Bu API'ler, aynı işlevi oluşturmak için üçüncü taraf kitaplıklarına veya özel JavaScript'e başvurmak zorunda kalmadan harika e-ticaret deneyimleri oluşturmanıza yardımcı olur. Daha az JavaScript kullanmak da performansınızı artırabilir. Bu sayede, bu deneyimler daha akıcı ve duyarlı hale gelir.
Web kullanıcı arayüzü özellikleri, kullanıcı yolculuğunun tüm bölümlerinde kullanılabilir. Aşağıda gerçek hayattan birkaç örnek verilmiştir:
| Özellik/Şirket | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| Kaydırmayla çalışan animasyonlar | Alışveriş sepeti | Ürün listeleme sayfası (PLP) | Ürün Ayrıntıları Sayfası (PDP) |
| Geçişleri görüntüleme | Giriş | PDP | PDP |
| Pop-up | - | - | PDP |
| Kapsayıcı Sorguları | Ana Sayfa | - | PDP |
| :has() | - | PLP | PDP |
Bu, dönüşüm hunisi olarak da gösterilebilir:
Aşağıdaki örnek olaylarda, şirketlerin bu özellikleri nasıl uyguladığı ve elde ettiği avantajlar paylaşılmaktadır.
Bu makale serisini inceleyip geri bildirimde bulunan Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme ve Rachel Andrew'a teşekkür ederiz.