Çocukların Motor Becerilerine Göre Arayüz Tasarımı

Çocuk arayüzünde tasarımı belirleyen şey estetik değil, parmağın ve bileğin o yaşta ne yapabildiğidir. Üç yaşındaki çocuk ekrana vurur, sürüklemez; dokuz yaşındaki çocuk fareyle çok adımlı bir işlemi rahatça yürütür. Aradaki fark buton rengiyle değil, hedef boyutu ve etkileşim biçimiyle kapanır.

Yaş grupları ve gerçekte yapabildikleri

Kaba motor beceri büyük kas gruplarını, ince motor beceri parmak ve bilek kontrolünü kapsar. Arayüzdeki karşılığı şu: birincisi ekrana dokunmayı ve kaydırmayı, ikincisi küçük bir hedefi tutturmayı ve sürüklerken parmağı ekranda tutmayı belirler.

• 3-5 yaş: Dokunma ve kaba kaydırma sorunsuz. Sürükle-bırak ve küçük hedefe isabet zor. Etkileşim alanları büyük ve birbirinden ayrık olmalı.
• 6-8 yaş: Fare veya trackpad ile tek tıklama, kısa klavye girişi mümkün. Uzun ve hassas sürükleme hâlâ zorlar.
• 9-12 yaş: Eşzamanlı klavye-fare kullanımı, uzun sürükleme ve çok adımlı işlemler yürür. 11 yaş civarında motor kontrol yetişkine yaklaşır.

Bu aralıklar keskin sınır değil, aynı sınıftaki iki çocuk arasında bir yıla varan fark görürsünüz. Ama tasarım kararını bir yere dayamak gerekiyorsa, hedef kitlenin alt yaşına dayayın.

Büyük buton tavsiyesinin bedeli

Çocuk arayüzlerinde sık verilen tavsiye, dokunmatik hedefleri 2 santimetre civarında tutmak. Bunun CSS tarafında ne demek olduğunu görmek gerekir: referans piksel 1/96 inç, yani yaklaşık 0,26 mm. 2 cm yaklaşık 76 CSS pikseline denk geliyor, yetişkin için yaygın olarak önerilen 44 piksellik hedefin neredeyse iki katı.

Sonucu hesaplayın. 360 piksel genişliğindeki tipik bir telefon ekranında, aralarında 16 piksel boşluk ve kenar payıyla bir satıra üç hedef sığar, dördüncüsü taşar. Yani butonları büyütmek bir CSS rötuşu değil, bilgi mimarisi kararıdır: menüyü kısaltmak ya da ikinci seviyeyi ayrı bir ekrana taşımak zorunda kalırsınız. Sadece padding artırıp geçen ekipler aynı sayıda öğeyi aynı ekranda tutar, hedefler de yeniden birbirine yapışır.

Sürükle-bırak yerine iki aşamalı seçim

Dokuz yaş altı için sürükle-bırak tek etkileşim yolu olmamalı. Parmağın ekrandan bir an kalkması işlemi iptal ediyorsa, çocuk bunu kendi hatası gibi yaşar ve tekrar denemez. Aynı işlemi önce nesneye, sonra hedefe dokunarak da tamamlanabilir hale getirin; sürükleme yolu isteyen için açık kalsın.

Bir eğitim oyununda tam bunu yaptık: eşleştirme adımına ikinci yol olarak iki aşamalı seçimi ekledik, ebeveyn geri bildirimlerindeki oyun takılıyor şikâyetleri büyük ölçüde kesildi. Takılan oyun değildi.

Dokunmatik ile masaüstü aynı problem değil

Dokunmatikte iş parmağın kalınlığıyla sınırlanır, masaüstünde imleci küçük bir hedefe götürüp orada tutmakla. 9 yaş altı için masaüstü tarafında tek tıklama ve kısa klavye girişinin dışına çıkmayın. Uzun fare sürüklemeleri ve basılı tutma gerektiren işlemler bu yaşta hata üretir.

Duyarlı tasarım burada ekran genişliğine göre yeniden akan bir grid meselesi olmaktan çıkar. Aynı sayfa tablette daha az öğeyle ve daha büyük hedeflerle, masaüstünde daha yoğun bir düzenle çıkmalı. Tek bir breakpoint setini iki farklı etkileşim modeline zorlamak yerine, giriş biçimini de bir kırılma noktası olarak ele alın.

Talimatı yazıyla vermeyin

Okuma becerisi henüz oturmamış bir kullanıcıya metinle yönerge vermenin karşılığı yok. Kısa bir animasyon, ok işareti ya da ilk denemede gösterilen örnek hareket, aynı işi yapan cümleden çok daha hızlı anlaşılır. Geri bildirim de anında olmalı. Dokunuşun karşılığı ekranda görünmüyorsa çocuk dokunmayı tekrarlar, çoğu zaman da yanlış yere.

Gizlilik tarafı tasarımın parçası

Çocuklara yönelik üründe veri toplama kararı sonradan hukuka devredilecek bir konu değil, doğrudan ekran akışını belirler. COPPA gibi düzenlemeler 13 yaş altı için ebeveyn onayı ister, bu da kayıt ekranını, profil alanlarını ve üçüncü parti analitik entegrasyonlarını baştan kısıtlar. En sade çözüm burada aynı zamanda en doğrusu: kişisel veri toplamadan çalışan bir akış kurun. Toplanacak alan kalmadığında onay problemi de kalmaz.