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.

01 — App Shell ve Skeleton screen tasarımı

Güncel tasarım mimarisinin önemli yaklaşımlarından App Shell ve Skeleton Screen’e yönelik tasarımlar geliştirmek, tüm üretim sürecini kolaylaştırırken, kullanıcının algısını da pozitif yönde desteklemektedir.

App Shell

Web sitesinin ya da bir uygulamanın tüm içeriğinin ekleneceği, diğer sayfalarda da devam edecek header, footer gibi temel tasarım öğelerini barındıran kabuktur. Peki app shell’e yönelik tasarım yapmak ne gibi bir katkı sunar?

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

Eğer tasarlanmış ise, skeleton screen kullanıcıya tüm içeriğin yüklenme süresince sunulacak ön gösterim gibi düşünülebilir. Güncel pek çok platformda karşılaştığımız ilk açılma anındaki yazı, görselin ve çerçevelerin olması gereken yerleri gösteren fakat içeriği tam olarak barındırmayan yapı skeleton screen olarak tanımlanmakta.

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

02 — Aktif Mod’da bekleme

Kullanıcılar pasif bekleme modunda geçirdikleri süreyi yaklaşık %36 oranında daha fazla algılamakta. Bu istatistik tüm bekleme sürelerinin kritik önem taşıdığını ve kullanıcı ilgisinin çok hızlı kaybedilebileceğine işaret eder. Yapılan tasarım pasif mod yerine aktif modda bekleme öğelerini içerirse kullanıcılar bu siteyi ya da uygulamayı daha hızlı bir deneyim olarak algılayacaktır.

Atari GIF by Myles.

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

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

04 — Anlık mikro etkileşim

Anlık mikro etkileşim, tasarlanılan uygulama ya da sitede bir işlem anlık olarak gerçekleşemiyorsa dahi bu işlemi anlıkmış gibi hissettirmeye yönelik ufak dokunuşlardır. Sepete ekleme süreci anlık olmasa dahi anlık bir animasyon ile kullanıcı ödüllendirilirken, animasyon süresi sepete ekleme işleminin arkada tamamlanmasını garantilemiş olur.

Vakkorama Mobile App Prototype

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

Performans algısı yüksek bir deneyim sağlamak için tüm animasyonların doğru “easing”, akış ile tasarlanması gerekmektedir. Sitenin vermesini istediğiniz mesaja ve hissiyata göre easingin seçiminin de değişmesi gerekir. Easing çeşitleri ve tanımları ise kısaca şu şekilde:

  • 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.
  1. Ease-in ve Ease-in-out sürelerini kısa tutun.
  2. Bounce ve Elastic tipi hareketler için 800ms-1200ms süre aralığı ideal olacaktır.
  3. Ease-out ve Ease-in tipi hareketler için 200ms-500ms süre aralığı ideal olacaktır.
ease-out vs ease-in

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

Tamamlanmamış bir işlemi tamamlanmış gibi gösterme felsefesine dayanan tasarım şeklidir. Bir işlemin o an gerçekleştiği hissiyatını verip, kısa bir süre sonra işlemin tamamını gerçekleştirmeyi hedefler.

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

Kullanıcının bir sonraki adımını tahmin ederek önceden işlemi başlatma yöntemi. Örneğin Apple’ın tarayıcısı Safari, arama çubuğuna yazılmaya başlandığı anda en muhtemel aramanın sonucu yüklemeye başlar. Bu şekilde kullanıcı seçimi yaptığında sayfanın yüklenmesi ile vakit kaybetmeyip, sitenin ve tasarımın daha hızlı olduğunu hisseder.

08 — Erken tamamlama (Early completion)

Henüz bitmemiş bir işlemi bitmiş gibi gösterme yöntemidir. Riskli olduğu kadar pek çok kullanıcı için tasarımın tamamlandığı hissiyatını verebilmek adına tercih edilen bir tasarım tekniğidir.

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

-99 design studio is a multi-disciplinary digital agency specialized in creating useful and engaging digital products.

-99 design studio is a multi-disciplinary digital agency specialized in creating useful and engaging digital products.