Arayüz geliştirmede “mobile first” stratejisi

Hala aklınızda, “Neden web sitemi mobil uyumlu yapmalıyım?” gibi bir soru varsa aslında bunun cevabını en iyi siz biliyorsunuz. Artık verilen tüm hizmetler ya da satın alınan ürünler internetten erişebilir durumda. Yine de”Ama benim ürünüm/hizmetim mobil kullanıcılara hitab etmiyor.” gibi bir düşünceniz varsa bu durumu bir kez daha değerlendirseniz iyi olur.

Bu sorularınızın cevabı aslında kullanıcılarınızda saklı. Eğer ki kullanıcılarınız web sitenize mobil cihazlarda da kullanıyorsa, onların bu deneyimlerini iyileştirmek için mutlaka bir şeyler yapmalısınız. Çünkü, bunu siz yapmazsanız rakipleriniz mutlaka yapacaktır 🙂

Responsive/Adaptive/Fluid Arayüz Geliştirme Süreci

Responsive web sitesinin geliştirilmesi aşamasında süreç genel olarak, önce bilgisayarlar(masaüstü ve dizüstü bilgisayarlar) için büyük ekranlardaki gride göre tasarlanıp geliştirilir. Daha sonrasında ise @media query’lerle istenilen ekran çözünürlüklerine uygun olarak css ve javascript işlemleri uygulanır. Aslında en basit haliyle iş akışı bu şekilde ilerliyor. Bazen adaptif yapılarda önce desktop daha sonra mobil ve mobilden tablet çözünürlüğüne uygun olarak @media query yazarak da ilerleyebiliyoruz. Tasarım aşamaları da aslında bu şekilde ilerliyor.

Bunu “Yukarıdan aşağıya” doğru giden bir iş akışı olarak düşünebiliriz.

Nedir bu “Mobile First”?

Mobil cihazların kullanımındaki artış ve ortaya çıkan yüzlerce farklı cihaz, farklı sorunları da beraberinde getirdi. Daha önceki gibi insanları sabit bir genişliğe hapsetme devri neredeyse bitti. Her ne kadar hazırlanan arayüzler responsive veya adaptive olarak hazırlansa ve hatta fluid yapıda olsa bile, mobildeki ihtiyaçları ne ölçüde karşıladığı hep bir soru işareti olarak kalacaktır.

“Mobile First” yaklaşımını kısaca özetlemek gerekirse, projenin en başından itibaren, kullanıcı deneyimi tasarımı ve geliştirme aşamalarında odak noktasının mobil cihazlar olarak alınması, her türlü değerlendirme ve planlamanın mobil ekranlar üzerinde yapılması olarak açıklanabilir.

“Mobile first” stratejisi demek, inşa ettiğiniz yapının odağına mobil cihazları ve bunları kullanan kullanıcıları oturtmak demektir.

Böyle bir yaklaşımı benimseme gerekliliği ise mobil cihazlar ile bilgisayarlar arasındaki deneyim farklılıklarından kaynaklanmaktadır. Bu farklılıkların ana sebeplerinden en çok öne çıkanları şöyle sıralayabiliriz:

1- Hız

Mobil erişim teknolojileri hızla değişiyor. (3g-4g-5g iletişim teknolojileri) Ama insanların sitenizin hızlı açılmasıyla ilgili beklentisi hiç değişmiyor. Hız beklentisi doğal olarak tüm kullanıcılar için geçerli ancak mobil kullanıcların sürekli hareket halinde olduğu düşünüldüğünde kullanıcı memnuniyeti açısından daha da önem kazanıyor.

Mobil = Hız = Performans = Memnuniyet

2-Bellek ve Şarj Problemleri

Mobil cihazların bazen çok katı kuralları olabiliyor. Sunduğunuz hizmet bir mobil uygulama ya da web sitesi olabilir hiç fark etmiyor. Bir projemizde bnu katı kurallardan biriyle karşılaşmıştık. iOS cihazlardaki tarayıcılar scroll ile gerçekleşen animasyonlardan birini bilinçli bellek ve şarj durumu yüzünden engelleniyordu. (Doğruluğu konusunda emin değilim ancak explorer 8’de bile gayet iyi çalışan animasyonlar tablette neredeyse tarayıcıyı kilitleyecek duruma geliyordu.)

3-Cihaz Kullanımı

Bilgisayar ve mobil cihazlar deneyimleri arasındaki en büyük farklılıklar bu cihazların kullanım şekillerinden kaynaklanıyor. Bilgisayarlar, kullanım şekli açısından konforlu olarak değerlendirilebilir. Genellikle bir koltukta otururken, bir masada arkamıza yaslanarak kullanmaktayız. Mobil cihazların sürekli hareket halinde ” tek parmak ve tek göz” kullanımıyla kıyaslandığında kullanıcı ihtiyaçları büyük ölçüde farklılaşmaktadır.

“Mobile First” neyi sağlıyor?

Mobile first aslında sadece bir development yaklaşımı değil, bir design&development yaklaşımı olarak değerlendirilmeli. Tasarım ve UX aşamalarından itibaren değerlendirilmesi gereken bir durum. Yukarıda saydığım ve daha bir çok etken göz önüne alınarak tasarlanacak deneyimin öncelikli olarak mobil kullanıcıların ihtiyaçlarına göre değerlendirilmesi ve küçük ekranlardan daha büyük ekranlara doğru giden bir tasarım ve geliştirme yapılması esasına dayanadır. Bunu da “Aşağıdan Yukarıya” doğru giden bir iş akışı olarak düşünebiliriz.

Development açısından değerlendirdiğimizde ise;

• Kullanacağımız kütüphaneler ve eklentilerin cihazlarla uyumluluğu denetlenmeli,
• Farklı ekran çözünürlükleri arasındaki değişimler değerlendirilmeli,
• Cihaz döndürme hareketleri dikkate alınmalı,
• Kullanıcı deneyimini zorlaştıracak etkenlerden kaçınılmalı,
• Kod yapısını planlarken, mobildeki şartlar dikkate alınarak planlama yapılmalı,
• Performans kriterlerine özellikle dikkat edilmelidir.

Mobile first yaklaşımla bir arayüz tasarlarken dikkate almamız gereken 4 önemli nokta

1 – Önce küçük ekranlar için tasarlayın

İçeriklerin belirlenmesi ve wireframe aşamasındayken desktopa göre hazırlanacak içerik ve tasarım mobil için ihtiyaçları karşılamada yetersiz kalabilir uygun olsa dahi development aşamasında mobile gelene kadar oluşacak kod yükü, performans ve kullanıcı deneyimi açısından kötü sonuçlara sebep olabilir.

Önce küçük ekranlar dikkate alınarak yapılacak tasarım ve geliştirme süreçlerinde mobil cihazlar ve kullanıcıları dikkate alınarak çok daha etkili bir deneyim sağlayabilirsiniz.

2- Başparmak kullanımını dikkate alarak tasarlayın.

Akıllı telefon kullanımında dikkat etmeniz gereken en önemli faktör, başparmak kullanımıdır. Tıklanacak butonlar, bu butonların animasyon ve efektleri, hover’ların mobil cihazlardaki çalışma durumu gibi etkenleri düşünmeden yapacağınız geliştirmeler, farklı sorunların ortaya çıkmasına sebep olacaktır.

Ayrıca, tasarım aşamasında da çok küçük butonlar, olması gerekenden çok büyük veya çok küçük tıklama alanları, kullanıcıların deneyimini kötü yönde etkileyecek şeylerdir.

Özellikle, yeni phablet mantığıyla üretilen cihazlarda bile bununla ilgili bazı şeyler yapılıyor. Kullanıcıların başparmakları ile kontrol edebildikleri alanlar cihaz boyutlarına göre değişiklik göstermektedir.

Örneğin, iPhone 6+’ta, “double touch” yaparak ekranın üst kısmının aşağı doğru kayması sağlanarak kullanıcılar için kolaylaştırılmış oluyor. .

3- Tek göz kullanımı için tasarlayın

Mobil cihazların, hareket halinde sıkça kullanıldığından bahsetmiştik. Bir gözünüzün yolda , bir gözünüzün telefonununuzda olduğu o anlarda, kullanıcıya derdinizi anlatabileceğiniz kısacık bir “an” veriyor size. Bu durumda, doğru zamanda kullanıcıyı yakalayabilmeniz için tasarlamanız gereken deneyim çok daha önemli hale geliyor.

4-Bağlantı Hızlarını dikkate alın

Bilgisayarlardaki internet bağlantı hızı artık çok yükseldi. Günümüzde, bağlantı hızı sebebiyle web sitelerine erişim problemleri neredeyse ortadan kalkmış durumda. Ancak mobil kullanıcılar için internet hızı oldukça değişken olabiliyor. Bulunulan bölgeye, kullanılan cihaza göre değişiyor.Bu hız değişikliğinin performansı üzerindeki etkisini de mutlaka dikkate almalısınız. Bunun için özellikle css ve js dosyaları sitede kullanılan görsellerin optimizasyonunu gözden kaçırmamalısınız. Bu açıdan “Mobile First” yaklaşımı size kullanacağınız görsellerin ve/veya videoların da kullanılabilirliğini önceden denetleyebilmenizi ve kurguladığınız deneyimi buna göre hayata geçirebilmenizi sağlar.

Özet olarak,

• Önce, küçük ekranları tasarlayın.
• Kullanıcı ihtiyaçlarına odaklanın.
• Kullanıcıları ve cihazları göz ardı etmeyin.
• Her zaman daha hızlı ve daha hızlı olun.