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.
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ı
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?
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.
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.
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
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.
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ı
Ö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
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.
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ı
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-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:
- Tasarımda yer alan UI nesneleri için Ease-out kullanın.
- Ease-in ve Ease-in-out sürelerini kısa tutun.
- Bounce ve Elastic tipi hareketler için 800ms-1200ms süre aralığı ideal olacaktır.
- Ease-out ve Ease-in tipi hareketler için 200ms-500ms süre aralığı ideal olacaktır.
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ı
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.
Ö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)
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.
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)
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 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.
