Mobile-First, Task-First, Content-First: Üçü Aynı Sorunun Cevabı Değil

Mobil tasarım yazılarında üç terim sürekli yan yana geçer: mobile-first, task-first, content-first. Üçü de aynı kalıpla kurulduğu için aynı sorunun rakip cevapları sanılır. Değiller. Biri hangi ekran genişliğinden başlayacağını söyler, diğer ikisi o ekrana ne koyacağını.

Mobile-first: dar ekrandan geniş ekrana doğru yazmak

Mobile-first, arayüzü en küçük ekran için kurup ekran büyüdükçe üstüne eklemek demek. Terimi 2009'da Luke Wroblewski yaygınlaştırdı; o dönemde tartışma masaüstü sitenin mobile nasıl sıkıştırılacağı üzerineydi, öneri sırayı ters çevirmekti.

Somut karşılığı CSS'te birkaç satırlık bir fark. Mobile-first yazarken temel kurallar dar ekranın kurallarıdır, genişlik arttıkça min-width sorgularıyla yeni kurallar eklenir:

.kart { display: block; } @media (min-width: 48em) { .kart { display: grid; grid-template-columns: 1fr 2fr; } }

Tersi de mümkün: temel kuralları masaüstüne göre yazıp max-width ile ekran daraldıkça geri almak. İkisi de çalışır, aradaki fark birikimde. Ekleyerek gidince her breakpoint yeni bir kural yazar; geri alarak gidince her breakpoint önceki kuralı iptal etmek zorunda kalır ve iptal listesi projeyle birlikte uzar. Altı ay sonra bir kartın neden o genişlikte öyle davrandığını aramak, birbirini ezen üç ayrı max-width bloğunu okumak anlamına gelir.

Google'ın mobil öncelikli indeksleme yapması bu tercihi tek başına zorunlu kılmaz. İndeksleme sitenin mobil sürümünü esas alır, CSS'i hangi yönden yazdığını değil. Yönü seçerken bakılacak şey bakım maliyeti.

Task-first: kullanıcının ne yapmaya geldiğini sıraya koymak

Task-first, arayüzü sayfa yapısı yerine kullanıcının tamamlamak istediği iş etrafında kurar. Yöntemi basit: kullanıcıların ürüne geliş sebeplerini tek tek fiil olarak yaz, sıklığa göre sırala, ilk maddeyi ana ekranda tek dokunuşluk mesafeye getir.

Şarkı tanıma uygulamaları bunun ders kitabı örneği. Uygulamanın tamamı tek bir fiile indirgenmiştir ve o fiil ekranın ortasında, parmağın doğal olarak durduğu yerde büyük bir butondur. Ayarlar ve geçmiş ikinci katmanda bekler.

Yaklaşımın sınırı da burada görünür. Tek baskın görevi olan ürünlerde işe yarar; üç ayrı işi birbirine yakın sıklıkta yapan bir yönetim panelinde ana görev seçimi tahmine dönüşür. Kullanım kayıtlarına bakmadan yapılan böyle bir sıralama, tasarımcının kendi alışkanlığını kullanıcıya dayatmasıyla biter.

Content-first: yerleşimi gerçek metinle denemek

Content-first, tasarıma arayüz kutularından değil ekranda duracak asıl şeyden başlamayı söyler: yayına girecek metin ve görseller. Kulağa soyut geliyor ama testi fazlasıyla somut. Tasarımı lorem ipsum ile mi doldurdun, yoksa gerçek başlıklarla mı?

Fark ilk gerçek içerik geldiğinde ortaya çıkar. İki satırlık örnek başlığa göre yüksekliği sabitlenmiş bir kart, on bir kelimelik gerçek bir ürün adında taşar; sığdırmak için ya yazı tipi küçülür ya da başlık kesilir, ikisi de tasarımın kararı değil zorunluluğun sonucudur. Aynı şey boş durumlar için de geçerli. Sıfır kayıt, tek kayıt ve iki yüz kayıt hâlleri çizilmemişse, o ekranları canlıda ürünün kendisi çizer.

İçerik envanterini çıkarırken en uzun ve en kısa örneği ayrı ayrı topla, yerleşimi ikisiyle birden dene. Ortalama uzunlukta tek bir örnekle çalışan tasarım hiçbir şey kanıtlamaz, çünkü kırılma noktası zaten ortalamada değil uçlardadır.

Üçünü aynı listeye koymak neden yanlış

Bu üç yaklaşım genelde “hangisini seçmeli” diye sunulur, sonra da “hepsini dengeleyin” diye bağlanır. İkisi de yanlış yerden bakıyor. Mobile-first bir uygulama tekniğidir ve neyi tasarladığın hakkında tek kelime söylemez. Task-first ile content-first ise aynı ekranda neyin önce geleceğini tartışır, yani asıl birbirlerinin rakibidir.

Zaman ekseninde de tek bir “önce” olabilir. Elinde içerik ve görev listesi yokken en dar ekrandan başlamak, ne olduğunu bilmediğin bir şey için dar bir sütun üretmekten ibaret kalır. Sıra şöyle işler: ne göstereceğini ve kullanıcının ne yapacağını belirle, sonra bunu en dar ekranda kur, genişledikçe ekle.

Task-first ile content-first çatıştığında tercih ürünün türüne bağlıdır. Bir işlem ürününde (rezervasyon, ödeme, başvuru formu) görev kazanır, içerik o görevi destekleyecek kadar vardır. Okunan bir üründe (haber, dokümantasyon, katalog) içerik kazanır, görev okumanın kendisidir. Hangisi olduğuna karar verilemeyen ürünlerde sorun önceliklendirmede değildir; ürünün ne olduğu henüz tanımlanmamıştır.