Yük Süreleri Yapmak için 4 Hileler Daha Hızlı Hissedin
Kullanıcı arayüzünüz ne kadar iyi tasarlanmış olursa olsun, bir noktada ya da başka bir yerde, onu kullanan kişiler bir şeylerin yüklenmesini beklemek zorunda kalacaklar.
Yükleme süresi genel deneyime zarar verebilir. Kullanıcıların uygulamanızın yüklenmesi için çok uzun süre bekletilmesi, kullanıcıları sabırsızlaştırabilir. Kullanıcılar bu hissi alırsa, sitenizi terk edip başka bir yere giderler. Neyse ki, kullanıcılarınızın zaman algılayışını hızlandırmak ve içeriklerinizdekinden daha hızlı yüklendiklerini hissettirmek için yapabileceğiniz birkaç şey vardır.
1. Kullanıcıları geri bildirimde bulunmadan asla bekletme
Kullanıcının bağlantısı yavaşsa, bir sitenin ekranda içeriği doldurması biraz zaman alabilir. Bir kullanıcının bekleme süresi, bir eylem başlattıkları anda başlar ve en kötü durum, sitenin aldığı herhangi bir göstergenin olmamasıdır.
Siteniz kullanıcıları bir eylemi tamamlamak için biraz zamana ihtiyaç duyduğunu bildirmediğinde, kullanıcılar genellikle isteği almadığını düşünür ve tekrar dener. Fazladan fazla musluklar, geri bildirim eksikliği nedeniyle sonuçlandı. İnsanları mutlu etmek için, bir şeyler olduğuna dair bir işaret vermemiz, görsel geri bildirim sunmamız gerekir.
2. Statik ilerleme göstergelerinden kaçının
Statik progres göstergeleri, isteğin alındığını göstermek için “Yükleme…” veya “Lütfen bekleyiniz…” gibi unmoving görüntüleri veya metinleri olan göstergelerdir. Herhangi bir geri besleme yoktan daha iyi olsa da, statik göstergeler kötü UX'dir. Kullanıcıların içeriğin yüklenmekte olduğuna dair herhangi bir gösterge yoktur, bu nedenle işlemin gerçekten takılıp takılmadığından emin olmazlar.
3. Animasyonlu yükleme göstergelerini kullanın
Bekleme süresi ile ilgili yapılan psikolojik çalışmalar, kullanıcı odağının herhangi bir geri bildirim olmadan bir saniye bekledikten sonra değişmeye başladığını göstermektedir. Bir kullanıcının belirsizliğini azaltmak için, bundan daha uzun süren herhangi bir işlem için bir ilerleme göstergesi kullanın. (Not: Yüklemenin bir saniye süren her şey için animasyonun kullanılması önerilmez, çünkü kullanıcılar ekranın yanıp sönmesi ve ekranın kapanması konusunda endişeli olabilirler).
Oldukça hızlı operasyonlar için sonsuz yükleme iğneleri
Animasyonlu göstergelerin en basit şekli bir yükleme dönüşüdür. Bu tür görsel geri bildirimler, kullanıcının beklemek zorunda olduğu gerçeğini belirtir, ancak ne kadar beklemeleri gerektiğini söylemez. Genel bir kural olarak, hızlı eylemler için bu tür bir ilerleme göstergesini kullanmalısınız (2–10 saniye).
Merkezi bir noktadan yayılan gri çizgilerden bir iplikçi standart bir yaklaşımdır.
Yükleme iğneleri genellikle çekme-çekme hareketi ile birlikte kullanılır. Kullanıcı arayüzünün iki durumu arasında bir aracı görevi görür ve kullanıcıların ekran değiştiğinde neler olup bittiğini anlamasına yardımcı olur.
İOS için Apple Mail uygulaması
Uzun ömürlü işlemler için yüzde yüz animasyon
Yükleme iğneleri, uzun süreli yüklemeyi belirtmenin doğru yolu değildir. Ne zaman olacağını bilseydik bir şey için beklemek çok daha katlanabilir. Bu yüzden uzun süreli operasyonlar için kullanıcılarınıza ne kadar beklemeleri gerektiğine dair net bir bilgi vermelisiniz. Genel bir kural olarak, 10 veya daha fazla saniye süren daha uzun işlemler için yüzde olarak yapılmış bir animasyon kullanmalısınız.
Resim kredisi: Behance
Alternatif olarak, işlem için genel bir zaman tahmini sağlayabilirsiniz. Kesin olmaya çalışma, basit, “Bu bir dakika sürebilir” kullanıcıyı bilgilendirmek ve onları beklemeye teşvik etmek için yeterli olabilir.
Mac OS X'te yazılım güncellemesi yükleme
4. Kullanıcının zaman algılamasını anlamak
İçeriğinizin ne kadar hızlı yüklendiği, kullanıcının aklında. Daha hızlı bir kullanıcı deneyimi yaratmaya çalışırken, gerçek zamandan ziyade algılanan zamanı kısaltabilirsiniz. Bunu yapmak için, kullanıcının gerçekleştirebileceği içeriği, animasyonları veya eylemleri kullanarak bekleme sürelerini doldurabilirsiniz.
İlerleme çubukları
Bir ilerleme çubuğu, kullanıcıların işlemin ne kadar hızlı işlendiğine dair beklentilerini geliştirmelerini sağlar. İlerleme çubuğunuzun hareket şekli, yükleme süresini nasıl algıladıklarını etkiler. Bir ilerleme çubuğu yapmak için kullanabileceğiniz kullanıcılara daha hızlı hissetmek basit teknikleri takip edin:
- İlerleme çubuğu asla durmamalıdır, aksi halde kullanıcılar sitenin donduğunu düşüneceklerdir. En kötü durum, ilerleme çubuğunun% 99'a yaklaşması ve aniden durmasıdır. Çoğu kullanıcı bu davranıştan rahatsız olur.
- İlerleme çubuğunuzdaki küçük gecikmeleri anında ve sabit olarak hareket ettirerek gizleyebilirsiniz.
- İlerleme çubuğunu başlangıçta yavaş hareket ettirin ve kullanıcılara hızlı bir tamamlanma süresi sağlamak için sonuna kadar hızlandırın.
Resim kredisi: Dribbble
İskelet ekranlar
Bekleme süresi iskelet ekranları için doğru zamandır (geçici bilgi kapları). Bir iskelet ekranı, bilgilerin yavaş yavaş yüklendiği bir sayfanın boş halidir. Geleneksel animasyon göstergelere bir alternatif sağlar. Soyut bir widget göstermektense iskelet ekranlar, ne bekleyeceğine dair beklentiler yaratır ve kullanıcı bekleme süreleri yerine ilerlemeye odaklanır.
İskelet görüntüleri, genellikle basit şekillerden oluşan küçük bir görüntü olduğundan hızlı bir şekilde yüklenir. Bu teknikler, mobil uygulamalarda daha da ileri alınabilir çünkü iskelet şablonu, uygulamanın verileriyle birlikte yerel olarak depolanabilir. İOS için Facebook'un uygulaması, kullanıcıların yükler olarak resim ve metni temsil etmesi için gri blokların ve satırların kullanıcılarını gösterir. Yüklemeyi tamamladıktan sonra, görüntüler ve metin geçici kapsayıcıların yerine görünür. Bu, bir eğirme ünitesine sahip bir yükleme ekranına sahip olmaktan daha hızlı değil, fakat kullanıcının zihninde olduğu gibi hissettiriyor.
Arkaplan işlemleri
Kullanabileceğiniz başka hız hilesi, arka plan işlemleri. Arka plan operasyonlarında paketlenmiş olan eylemlerin iki faydası vardır - bunlar kullanıcıya görünmez ve kullanıcının kendisi için sormadan önce gerçekleşir. Arka planda bir süreç devam ederken, kullanıcılara odaklanacak başka şeyler verin. Bunun iyi bir örneği, Instagram'da fotoğrafların yüklenmesidir. Kullanıcı paylaşılacak bir resim seçer seçmez yüklemeye başlar. Uygulama, resim arka planda yüklenirken kullanıcıları başlık ve etiket eklemeye davet ediyor. Kullanıcıların bir 'Paylaş' düğmesine basmaya hazır oldukları zaman, yükleme tamamlanacak ve resimlerini anında paylaşmak mümkün olacak.
Aşamalı görüntü yükleme
Modern uygulamalar ve siteler daha fazla resim yükledikçe, performanslarını ve kullanıcı deneyimini etkilediği için yükleme işlemlerini düşünmek iyidir. Bir bulanıklık efekti kullanarak, aşamalı bir görüntü yükleme efekti oluşturabilirsiniz.
İyi bir örnek, görüntü tamamen kapanıncaya kadar post görüntü kapağının yanı sıra post içeriğindeki görüntüleri bulanıklaştıran Medium. İlk olarak, küçük bir bulanık görüntü (küçük resim) yükler ve daha sonra büyük resme geçiş yapar. Küçük resimler çok küçüktür (sadece birkaç kilobayt) ve bu da bulanık efekt ile birleştiğinde, sağlam bir renkten daha iyi bir yer tutucuya izin verir, yükten ödün vermeden.
Orta, aşamalı bir görüntü yükleme efekti oluşturmak için bulanıklık kullanır
Görsel distraksiyon
Çizgiyi kısaltamazsanız, beklemeyi daha keyifli hale getirmeye çalışmalısınız. Bir şeylerin olmasını beklerken insanların sıkılmamasını sağlamak için onlara biraz dikkat dağıtın. Güzel animasyonlar ziyaretçilerin ilgisini çekebilir ve uzun yükleme sürelerini göz ardı edebilir.
Hareketli sıçrama ekranı. Resim kredisi: Ramotion (Dribbble)
Resim kredisi: Vimeo