Tüm Sayfalar / 05 - Akıcı Arayüz
Sayfa 05 / 161
Kullanıcı Deneyimi

Tıklayın, Anında Olsun

Spotify ve Netflix gibi akıcı bir deneyim. Sayfa yenilenmeden her şey güncellenir.

Biz Ne Yaptık?

Eski web sitelerinde bir butona tıkladığınızda tüm sayfa yeniden yüklenir. Bu hem yavaştır hem de kullanıcı deneyimini bozar. Biz sitenizi modern uygulama gibi tasarladık. Tıkladığınızda sadece o bölüm güncellenir, sayfa yenilenmez.

Eski Sistemler

  • Her tıklamada sayfa yenilenir
  • Beyaz ekran görürsünüz
  • Müzik durur, kayıp yaşarsınız
  • Her şey sıfırdan yüklenir

Muzibu

  • Sadece değişen kısım güncellenir
  • Sayfa hiç yenilenmez
  • Müzik kesintisiz çalar
  • Spotify gibi akıcı deneyim

Arkaplanda Neler Çalışıyor?

Siz bir butona tıkladığınızda sistem şunları yapıyor:

Tıklamanızı yakalıyor

Alpine.js tarayıcıda tıklamanızı algılıyor. Sayfa yenilenmeden işlem başlıyor.

Sunucuya küçük bir mesaj gönderiyor

Tüm sayfa değil, sadece "kalp ikonuna tıklandı" gibi küçük bir bilgi gönderiliyor.

Livewire sunucuda işlemi yapıyor

Sunucudaki Livewire komponenti favorilere ekleme işlemini veritabanında gerçekleştiriyor.

Sadece değişen kısmı geri gönderiyor

Tüm sayfa değil, sadece kalp ikonunun yeni hali (dolu kalp) geri dönüyor.

Ekran anında güncelleniyor

Alpine.js gelen yeni HTML'i sayfada doğru yere yerleştiriyor. Göz açıp kapayıncaya kadar!

Müzik hiç kesilmiyor

Sayfa yenilenmediği için player çalmaya devam ediyor. Spotify deneyimi!

Günlük Kullanımda Ne Değişiyor?

İşte sitenizde her gün yaşanan bazı senaryolar.

Favorilere Ekleme

Bir şarkıyı favorilere eklediğinizde sayfa yenilenmez. Kalp ikonu anında dolar, şarkı çalmaya devam eder. Kullanıcı hiçbir kesinti yaşamaz.

Instagram'da fotoğraf beğenmek gibi düşünün.

Anlık Arama

Arama kutusuna yazdıkça sonuçlar anında güncellenir. Enter'a basmanıza gerek yok. Her harf yazıldığında arama yapılır.

Google'da arama yaparken çıkan önerilere benzer.

Sayfa Geçişleri

Bir sayfadan diğerine geçtiğinizde müzik çalmaya devam eder. Player altta sabit kalır, sadece içerik alanı değişir.

Spotify'da playlist'ler arasında gezinirken şarkının kesilmemesi gibi.

Açılır Pencereler

Menüler, popup'lar, bildirimler... Hepsi anında açılır ve kapanır. Sayfa yenilenmeden, pürüzsüz animasyonlarla.

Telefon uygulamalarındaki gibi yumuşak geçişler.

Bu Teknolojinin Faydaları

Mutlu Kullanıcılar

Akıcı deneyim kullanıcıları sitede tutar. Kesintisiz müzik, hızlı tepkiler, modern his.

Kesintisiz Müzik

Sayfa değişse bile müzik durmuyor. Kullanıcı istediği gibi gezinirken dinlemeye devam ediyor.

Uygulama Hissi

Web sitesi değil, uygulama gibi hissettiriyor. Profesyonel ve modern görünüm.

Daha Az Yük

Sadece gerekli veriler güncelleniyor. Sunucu daha az çalışıyor, internet daha az harcanıyor.

Bu Sayfanın Anahtar Terimleri

Reaktif Arayüz

(Reactive UI)

Veri değiştiğinde ekranın otomatik güncellenmesi.

Favori ekleyince kalbin anında dolması gibi.

Kısmi Güncelleme

(Partial Update)

Tüm sayfa yerine sadece değişen bölümün yenilenmesi.

Tüm evi boyamak yerine sadece lekeli duvarı boyamak.

SPA

(Single Page Application)

Tek sayfa üzerinde çalışan, sayfa yenilemeyen uygulama.

Gmail, Spotify, Netflix hep SPA mantığıyla çalışır.

Component

(Bileşen)

Tekrar kullanılabilir arayüz parçası.

Lego parçası gibi: bir kez yap, her yerde kullan.

Sayfa yenilenmeden güncelleniyor