CSS ve kullanıcı arayüzü özellikleri, özel JavaScript çözümlerini veya bazı CSS saldırılarını azaltmanızı ya da değiştirmenizi sağlayan ve daha iyi ve daha basit kod yazmanıza yardımcı olan yeni CSS özelliklerini ve söz dizimini ifade eder. Modern CSS özelliklerini kullanmak, geliştiricilerin şunları yapmasını sağlar:
- Geliştirme süresini kısaltın.
- Kod verimliliğini, okunabilirliği ve sürdürülebilirliği iyileştirin.
- Performansı artırın.
- Sorunsuz, verimli ve erişilebilir olan şık kullanıcı arayüzleri oluşturun.
Bu örnek olay serisinde çeşitli e-ticaret sitelerinin Kaydırma destekli animasyonları, Görünüm Geçişlerini, Popover API'sini, Kapsayıcı Sorguları ve has() seçiciyi nasıl benimsediğini ve bunun sayesinde elde ettikleri avantajları öğrenin.
E-ticaret siteleri bu özellikleri neden kullanmalıdır?
Forrester Research, Six Steps for Justizing Better Kullanıcı Deneyimi'nde, iyi tasarlanmış bir kullanıcı arayüzünün, dönüşümleri %200'e kadar artırabileceğini gösteriyor. Kullanıcılar, tasarım kalitesi ile tüketicilerin% 94'üne güven duydukları sırada tasarımdan ayrılmalarının veya web sitesine güvenmemelerinin temel sebebinin tasarım olduğunu belirterek aralarında bağlantı kuruyorlar. Bu nedenle e-ticaret siteleri, bu CSS ve kullanıcı arayüzü özelliklerinden özellikle faydalanır. Kullanıcıların görevlerini kolayca ve güvenle tamamlayabilmesi için dönüşüm hunilerinin mümkün olduğunca sorunsuz olması gerekir. 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 kolay kullanılabilecek şekilde tasarlanmıştır ve çoğunlukla CSS'de minimum JavaScript ile uygulanabilir. Bunlar, aynı işlevi oluşturmak için üçüncü taraf kitaplıklar veya özel JavaScript kullanmak zorunda kalmadan harika e-ticaret deneyimleri oluşturmanıza yardımcı olur. Daha az JavaScript kullanılması, performansınızı artırarak bu deneyimleri daha sorunsuz ve duyarlı hale de getirebilir.
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ırma odaklı animasyonlar | Alışveriş sepeti | Ürün Listeleme Sayfası (PLP) | Ürün Ayrıntıları Sayfası (PDP) |
| Geçişleri görüntüleme | Giriş yap | PDP | PDP |
| Pop-up | - | - | PDP |
| Kapsayıcı Sorguları | Ev | - | PDP |
| :has() | - | KKP | PDP |
Bu dönüşüm hunisi olarak da görüntülenebilir:
Aşağıdaki örnek olaylarda şirketlerin bu özellikleri nasıl uyguladıkları ve kazandıkları faydalar paylaşılmaktadır.
Bu makale serisiyle ilgili geri bildirimleriniz ve incelemelerinizden dolayı Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme ve Rachel Andrew'a özel bir çağrıda bulunacağız.