Etkin Mobil Deneyimi İçin Hız Odaklı Çözümler

Kullanıcı deneyiminin güçlü etkileşimler ve akıcı unsurlar ile zenginleştirilmesine yönelik uygulamalar.

-99 design studio
Feb 6 · 5 min read

Hem erişim, hem de kullanıcı tercihleri açısından mobil uygulama ve uygulama hissiyatı veren web siteleri çok daha popüler bir konumda. Bu yazımızda etkin bir mobil deneyimi tasarlamak ve bu deneyimi olabildiğince hızlı, akışkan şekilde sunabilmek için kullanılabilecek çözümlere değineceğiz.

01 — App Shell ve Skeleton screen tasarımı

App Shell

Güncel front-end teknolojileri bu mimariye sahip uygulamaları telefonlarda cacheleyebilmekte, menüler arası geçişlerde ya da bir sonraki ziyarette dahi sunucuya herhangi bir istekte bulunmadan kullanıcıya sunulmasını sağlayabilmekte. Birincil hedef bir kez daha kullanıcının içeriğe daha hızlı ulaşabilmesini sağlamaktır.

a.Cache ye kaydedilmiş “App shell” ani bir şekilde yüklenir. b.“Skeleton screen” sayfa geçişlerinde hız algısı sağlar. c.Sayfa içeriği yüklenince sayfayı doldurur

Skeleton Screen

Skeleton screen ile içeriğin aslının bire bir paralel olması kesin bir şart değildir. Örneğin, LinkedIN skeleton screende sadece kaç içeriğin geleceği tahmin edilebilirken, içeriklerin uzunluğu bire bir skeleton screen üzerinden anlaşılamamakta. Tam tersine Facebook’ta ise içeriğin uzunluğu kadar bir yazı alanı skeleton screen üzerinden yansıtılır.

Sonuç olarak:

Kullanıcı beklemedeyken kendisine sunulacak içerikleri tahmin edebilmeli ve dikkatini tasarımda tutabilmeli.

02 — Aktif Mod’da bekleme

Atari GIF by Myles.

Uzun yükleme süresinin kaçınılmaz olduğu durumlarda kullanıcıya sunulacak ufak bir boyama aktivitesi dahi onları aktif modda tutup, genel hız algılarını pekiştirecektir. Bunun yanı sıra tasarım elementlerini bölüm bölüm kullanıcıya sunmak da algıyı değiştirecektir.

Örneğin ikisi de 5 saniyede açılan aynı tasarımları ele alalım. İlk örnekte birinci saniyede tasarımın ilk öğesi kullanıcıya sunulup aktif moda geçiş sağlanırken ikinci örnekte kullanıcı 4 saniye bekledikten sonra içerikleri gözlemlemeye başlıyor. Facebook, Instagram, Amazon gibi detaylı kurgulanmış yapılarda kullanıcılar devamlı aktif modda tutulup, içerikler kademeli olarak daha kısa sürede yüklenme hissiyatına göre yüklenmektedir.

03 — Doğru yükleme göstergesi “preloader” kullanımı

Tahmin edilen sürelere göre spinner, progress bar veya rakam kullanılır.

Özellikle sayfa geçişlerinde olmak üzere, belirli bir sayfa yüklemesinin gerçekleşeceği durumlarda bu süreyi en doğru şekilde yansıtan ve özetleyen göstergeyi tasarlamak kullanıcı ile tasarım arasındaki şeffaflığı artırır.

Yükleme süresi her ne kadar kısa olursa olsun, yarım saniyelik bir animasyon dahi tüm tasarımın sürükleyiciliğini değiştirecektir. Burada önemli olan kriter, kısa süreler için daha hareketli ve hızlı animasyonlar seçerken, daha uzun süreler için yükleme çubuğu (loading bar) tarzı seçmektir.

Yükleme çubuklarında lineer bir yüzdesel artış yerine kalan süreyi aktarabilecek bir animasyon ya da belirteç daha olumlu geribildirim sağlayacaktır. Trafik ışıklarında olduğu gibi kalan süreyi göstermek, kullanıcıları beklemek konusunda daha motive edici olacaktır.

04 — Anlık mikro etkileşim

Vakkorama Mobile App Prototype

Bu tip anlık hareketler ile sitenin akışkanlığı artarken, kullanıcının pasif moda geçmesine yönelik bir boşluk da kalmamış oluyor. Kullanıcı bu sayede sitedeki tüm işlemleri çok daha hızlı yapabildiğinin farkına varıp, alışveriş sürecini çetrefilli ve uzun bir süreçten ziyade hızlı ve anlık olarak algılıyor.

05 — Doğru “easing” kullanımı

  • Ease-out: Hızlı başlayıp, sonrasında yavaşlayan tipte animasyondur.
  • Ease-in: Yavaş başlayıp, ease-out ile aynı süre içerisinde sonradan hızlanır.
  • Ease-in-out: Başta ve sonda yavaş olup, ortada ivme kazanan tipte animasyondur.
  • Elastic ve bounce: Elastic, hareketi daha uzun süreye yayan, hızlı başlayan animasyon olup, bounce sürekli iniş ve çıkış gösteren hareket hızlarını içerir.

Çok daha hareketli ve canlı bir site için animasyonlar daha anlık olabilecekken, daha rahat ve oturaklı bir hissiyat için yavaştan hızlıya geçişin sağlandığı easing’ler faydalı olacaktır. Easing’in 4 temel kuralına uyarak bu hissiyatları dileğiniz yönde şekillendirebilirsiniz:

  1. Tasarımda yer alan UI nesneleri için Ease-out kullanın.
  2. Ease-in ve Ease-in-out sürelerini kısa tutun.
  3. Bounce ve Elastic tipi hareketler için 800ms-1200ms süre aralığı ideal olacaktır.
  4. Ease-out ve Ease-in tipi hareketler için 200ms-500ms süre aralığı ideal olacaktır.
ease-out vs ease-in

Tasarımınızda ekrana gelecek hemen hemen her nesne için ease-out kullanımı daha güvenli ve risksiz bir tercih olacaktır. Bu seçimdeki temel hareket noktası, seçim ya da tıklanma anındaki ilk animasyonun olabildiğince hızlı başlaması ile doğru orantılıdır. Web sitesi daha hızlı tepki gösteren fakat sonrasında ritmine oturan bir hissiyata kavuşur. Bounce ve elastic için süreyi daha uzun tutmak, verilmek istenen animasyonun daha rahat anlaşılabilmesini mümkün kılar.

06 — İyimser “optimistic” UI tasarımı

Örneğin Instagram’da internet bağlantınız olmasa dahi fotoğrafları beğendiğinizde like animasyonu size gösterilmektedir. Instagram daha sonrasında sunucu ile bağlantı kurup, işlemi gerçekleştirebilir fakat kullanıcıya geribildirimi anlıktır.

Bu tip bir uygulama kullanıcı o an internet bağlantısı ya da sunucuya erişim problemleri ile meşgul etmeyip, daha dolu bir deneyim sunmayı mümkün kılar. Bağlantısal sorunlar etkileşimin sonrasında kullanıcıya yansıtılmadan zaten otomatik olarak çözülecektir. Bir diğer yandan iyimser UI tasarımı sitenin ya da uygulamanın her an ve her koşulda çalıştığı hissiyatını da tetikler.

07 — Proaktif işleme başlama (Preemptive start)

Yapmış olduğunuz sitedeki arama çubuğuna tıklandığı anda “Enter”’a basılacağı düşüncesi ile sonuç sayfasının o anda yüklenmeye başlaması sağlanarak tasarımın bütünlüğüne başka bir parça daha ekleyebilirsiniz.

08 — Erken tamamlama (Early completion)

Airbnb, Uygulama hazır olmadan önce arama UI hazır gibi görünüyor.

Airbnb uygulama ve sitesinde tasarımın tamamı yüklenmeden arama çubuğunun aktif olduğu görüntüsü bütüncül bir his verirken, tıklandığında geri bildirim alınmaması ürünün çalışmadığına yönelik bir his de verebilir.


Özetlemek gerekirse dijital arayüz tasarlarken burada sıralanan 8 maddenin koşulsuz şekilde eklenmesi şart değildir. Farklı tasarım metotları ve yolları izlenebilir fakat sıralamış olduğumuz unsurlardan ne kadar fazlası tasarıma dahil edilirse kullanıcı deneyimi o kadar akışkan ve hızlı olacaktır.

-99 design studio

Written by

-99 design studio is a multi-disciplinary digital agency, run by a group of creative design addicts who live and breathe UI/UX.