Mobil ve Tablet Tasarımında UX: Ölçüt Genişlik Değil

Telefon ve tablet aynı responsive kovaya atıldığında ortaya çıkan şey ikisine de tam uymayan bir orta yol oluyor. Aslında bu iki cihazı ayıran ekran genişliği değil, kullanım anı: biri ayaküstü ve bölünmüş dikkatle, diğeri oturmuş halde ve uzun soluklu kullanılıyor. Peki bu fark arayüzde tam olarak nereye dokunmalı?

Ayıran şey ekran genişliği değil

Yaygın yaklaşım breakpoint üzerinden ilerlemek: 768 piksele kadar telefon, üstü tablet. Ama bu eşik cihaz türünü değil viewport genişliğini ölçer. Yatay tutulan bir tablet ile 11 inç bir dizüstü aynı breakpoint'e düşer, oysa birinde parmak var diğerinde imleç.

Bir projede tablet düzenini yalnızca genişlikle ayırmıştık, sonuç olarak küçük dizüstülerde de dokunmatik için büyütülmüş arayüz açıldı.

Kodda karşılığı olan ayrım giriş yönteminde:

@media (pointer: coarse) and (hover: none) { ... }

Genişlik yerleşimi belirlesin, giriş yöntemi de etkileşim boyutlarını. İkisini tek bir sorguya bindirmek, sonradan tek tek yamalanan o küçük hataların kaynağı oluyor.

Telefon: kısa oturum, bölünmüş dikkat

Dokunma hedefi için dolaşan "en az 44 piksel" ölçüsü eksik söylenmiş bir kural. Apple 44 pt, Android 48 dp der; ikisi de CSS pikseli cinsindendir, cihazın fiziksel piksel yoğunluğundan bağımsızdır. Bunu retina pikseli sanıp 2x hesaba katmaya çalışan biri yarı boyutta buton üretir ve testte de fark etmez, çünkü kendi parmağı o butonu bulmayı öğrenmiştir.

Telefonda asıl kısıt ekran değil süre. Kullanıcı tek elle, yürürken, iki bildirim arasında geliyor. Birincil eylem başparmağın rahat ulaştığı alt bölgede dursun, ikincil olan yukarı çıksın. Kritik bir akışı üç ekrana bölmek, tek ekranda kaydırmalı devam ettirmekten çoğu zaman daha iyi sonuç verir: kesintiden sonra kullanıcı nerede kaldığını hatırlar.

Tablet: uzun oturum, çoğu zaman ortak cihaz

Tablet evde masada, koltukta, bazen iki kişi arasında dolaşır. Bu iki şeyi değiştirir. Birincisi oturum: kişiselleştirilmiş öneriler ve "kaldığın yerden devam et" gibi özellikler cihazı paylaşan kullanıcıda yanlış hedefe çalışır, o yüzden hesap değiştirme iki dokunuş ötede olmalı. İkincisi düzen: telefonda ardışık ekranlara bölünen liste ve detay, tabletde yan yana durabilir ve kullanıcı geri tuşuna basmadan gezinir.

Peki kullanıcı tableti dizinde mi tutuyor, masaya mı yatırmış? İkisi farklı bir kavrama açısı, dolayısıyla farklı rahat dokunma bölgesi demek. Elinizde analitik yoksa bunu kestirmeye çalışmak yerine sürükle bırak gibi hassas etkileşimlere her zaman basit bir dokunma alternatifi bırakın.

Görsellerde ikon, şema ve logo tarafı SVG'ye taşınırsa yüksek yoğunluklu tablet ekranlarında ayrı bir 2x, 3x üretimi gerekmez. Fotoğraf için geçerli değil, orada hâlâ boyut varyantı üretmek gerekiyor.

Cihaz değişince geriye ne kalıyor

"Cihazlar arası senkronizasyon" çoğunlukla veri eşitlemesi olarak anlaşılıyor: sepet dolu, favoriler yerinde. Kullanıcının hissettiği kopukluk ise başka yerde. Yarım kalan form, listenin kaydırıldığı konum, videonun kaçıncı saniyesi. Bunlar sunucuda tutulmadığında telefondan tablete geçiş her seferinde baştan başlamak olur.

Hesap verisini eşitleyip okuma konumunu eşitlemeyen bir ürün geçiş sorununu çözmüş sayılmaz. Üstelik ikincisi teknik olarak daha ucuz: birkaç alanlık bir durum kaydı, saniyede bir değil, ekran kapanırken yazılan.