Çocuk Arayüzü Tasarımı: Yaş Aralığı, Dokunma Hedefi, Sesli Yönlendirme
Çocuk arayüzünde ilk kararı yaş aralığında verirsin, geri kalan her şey ona bağlanır. Elinde "3-12 yaş" yazan bir brief varsa iş daha başlamadan yanlış kurulmuştur: üç yaşındaki kullanıcı okuyamıyor, dokunma isabeti düşük, ekrandaki ikonu bir amacın temsili olarak değil doğrudan nesne olarak görüyor. On yaşındaki kullanıcı menüde geziniyor, uzun metni tarıyor, yaptığı hatayı kendi geri alıyor. Bu ikisine aynı ekranı veremezsin.
Aralığı böl, sonra tasarıma başla
Üç bandı ayrı ürün gibi düşün. Değişen şey renk paleti değil, etkileşimin tamamı.
- 3-5: metin yok, büyük ikon ve karakter var. Her dokunuşa anında görünür tepki: renk değişimi, kısa animasyon. Navigasyon tek seviye, geri dönüş tek düğme.
- 6-8: kısa başlık ve tek satır yönerge çalışır. İkonların yanına etiket koyabilirsin; ikonu etiketsiz bırakmak bu bandı en çok takan şey.
- 9-12: çok adımlı akış, kaydedilen ilerleme, daha uzun metin kaldırır. Masaüstü ve tablet arasında geçiş yapıyorlar, iki girdi türünü de hesapla.
Müşteri "hepsi olsun" diye tutturuyorsa ortada buluşmaya çalışma. Bir bandı seçip onu düzgün yap, diğerlerini sonra ayrı giriş noktası olarak ekle. Ortalama bir çocuk arayüzü hiçbir yaşa oturmuyor; 3 yaşındakine fazla karmaşık, 10 yaşındakine bebeksi geliyor.
Dokunma hedefinde yetişkin minimumları yetmez
Apple'ın insan arayüzü kılavuzu 44pt, Material 48dp öneriyor. Bu sayılar yetişkin eliyle yapılan ölçümlerden geliyor ve çocuk arayüzünde taban kabul edilmeli, hedef değil. Okul öncesi bandında hedefleri bunun belirgin üstünde tut, aralarına da boşluk koy; yanlış dokunuşun çoğu komşu düğmeye gidiyor.
Bir de şu var: küçük çocuk tableti avucunu ekrana yayarak tutuyor. Tek parmak varsayan bir arayüz bu avuç temasını ikinci bir dokunuş sanıp sayfayı kaydırıyor ya da gereksiz bir menü açıyor. Kaydırma ve pinch gibi jestleri gerçekten gerekmedikçe kapat, ilk temas noktasını referans al, geri kalanını yok say. Bu tarafı bitirmeden ikonları büyütmekle uğraşmak boşa emek.
Sesli yönlendirme ilk ekranda susar
Okuma bilmeyen kullanıcıya sesli komut vermek mantıklı görünür, uygulamada bir duvara çarpar. Chrome ve Safari, kullanıcı sayfayla etkileşime geçmeden ses çalınmasını engelliyor. Yani "siteyi açınca karakter çocuğa ne yapacağını anlatır" senaryosu tam açılışta, en çok ihtiyaç duyulan anda çalışmaz.
Çözümü basit ama tasarıma girmesi gerekiyor: ilk ekranda tek bir büyük başlat düğmesi olur, ona dokunulduğunda hem ses bağlamı açılır hem anlatım başlar. Kodda karşılığı AudioContext'in suspended durumundan resume() ile çıkması, birkaç satır. Ama bu düğmeyi makete koymadıysan geliştirici onu kendi kafasına göre bir yere sıkıştırır (sesi navigasyonun tek taşıyıcısı yapan tasarımları zaten fazla iddialı buluyorum).
"Çocuk alıştığı arayüzü sever" sözü hangi yaş için doğru
Bu tavsiye genelde evrensel gibi yazılır, değil. Alışkanlık birikim gerektirir. Okuma öncesi bandın birikimi yok: hamburger menü, geri oku, disket biçimli kaydet ikonu onun için hiçbir şey ifade etmiyor. Yerleşik kalıplara uyma tavsiyesi aslında 9-12 bandı için geçerli, oraya gelmiş çocuk başka uygulamalardan beklenti taşıyor.
Küçük bantta tutarlılık dışarıya değil kendi ürününe bakar. Bir ikon senin arayüzünde hep aynı şeyi yapıyorsa çocuk onu iki denemede öğrenir. Aynı işi iki ekranda iki farklı simgeyle gösterirsen öğrendiğini silmiş olursun.
Testte neyi ölçtüğünü bil
6-8 bandında iki çocuğu birlikte oturtmak yaygın bir yöntem, utangaçlığı kırıyor ve konuşturuyor. Bedeli şu: hangi tereddüt kimin, ayırt edemiyorsun ve genelde baskın olan fareyi eline alıyor. Konuşma duymak istiyorsan ikili, bir görevin tek başına tamamlanabildiğini ölçmek istiyorsan tekli test yap. İkisini aynı seansta yapmaya kalkışma.
Yönergeyi tek adıma indir, çocuğu uzman yerine koy, ne yaptığını anlatmasını iste. Yüzüyle söylediği arasındaki uyumsuzluğu not al; "kolaydı" diyen çocuk üç kere yanlış yere dokunmuşsa doğru veri eldekidir, söylediği değil. Sonuçta tek bir ölçüt kalıyor: yetişkin ipucu vermeden görev bitiyor mu.