Bileşenler

Açılış sahnesi

Hatıl Stüdyo'nun uzun masasında Arda telefon ekranının çıktısını ortaya koyuyor: Kestaneyaka Belediyesi'nin çevrimiçi randevu formu. Beş alan alt alta, beşi de aynı görünüşte. Küçük bir ok, altında kapalı bir kutu. «Temiz oldu,» diyor Arda. «Her şey aynı dilde.»

Selin kâğıdı eline alıp yüksek sesle okuyor. «Birim seç. Gün seç. Saat seç. Ziyaret türü seç. Bildirim seç.» Parmağını dördüncü kutuya koyuyor. «Burada kaç seçenek var?» «İki,» diyor Arda. «İlk başvuru ya da devam.» «Beşincide?» «İki de orada var, kısa mesaj ve e-posta.» Selin başını kaldırıyor: «İkisini de isteyen kişi ne yapacak?»

Arda çıktıya bakıyor. Az önce temiz görünen şey şimdi soru olmaya başlamış. Emre takvimden başını kaldırmadan ekliyor: «Hülya Hanım çarşamba bu ekranı meclise gösterecek.»

Bu derste ne olacak

Bir ekran, kendi işini yapan parçalardan oluşur. Bu parçaları tanımak bir sözlük ezberlemek için gerekli değil: her birinin kullanıcıya söylediği şey ayrı. İlk durağımız web erişilebilirliği standardının bileşen kalıpları. Sonra radyo düğmesi ile onay kutusunun ayrımı üzerine eski ama hâlâ geçerli bir yazı, ardından seçenekleri görünür kılmanın yanıtı nasıl değiştirdiğini ölçen bir deney ve aynı işi farklı bileşenle yaptıran iki küçük çalışma var. Sonunda Arda'nın formu yeniden kurulacak. Bileşen kararının ten rengine dek uzanan bir örneğini de Yeşerti'de göreceğiz.

Kanıt ne diyor

Sahada

Gri alan

Hangi bileşenin ne zaman seçileceği konusunda okuduğumuz kaynaklar güçlü ama eski ve masaüstü ağırlıklı. Bir telefonda radyo düğmesi ile açılır liste arasındaki farkın ne olduğu, kaç seçenekte değiştiği için net bir eşik görmedik; yedi gibi bir sayı duyulursa kaynağını sormak gerekir. Görünürlük etkisi anketten geliyor, randevu formuna taşındığı bir yorum. Nielsen'in varsayılan önerisi ile izne dayalı alanlardaki sınır arasında bir gerilim var; bunu bir hukukçu ile konuşmak gerekebilir. Kart mı liste mi sorusu büyük ölçüde işe ve içerik türüne bağlı, tek bir yanıtı yok. Temsil için seçilen varsayılan el çizimi, yaprak simgesi ya da nötr bir görsel; hangisinin kimi rahatsız etmediği açık bir araştırma sorusu, burada çözülmüyor. Tidwell ve arkadaşlarının kitabını okuyamadığımız için bileşen listemiz de eksik.

Senin işinde

Elindeki bir ekranı aç ve her öğeye bir ad yaz. Her giriş için üç soru sor: kaç seçenek var, aynı anda kaçı seçilebilir, kişi hepsini görmeli mi? Tam biri seçilecekse ve az seçenek varsa radyo, bağımsızsa onay kutusu, uzunsa açılır liste ya da arama düşün. Tek bir birincil düğme bırak; etiketine eylemi yaz. Varsayılan değerleri tek tek oku: bu değer kişi adına ne söylüyor, kimi dışarıda bırakıyor? İzin veren ya da para alan alanlarda önceden işaretli kutu kullanma. Bileşeni görsel olarak değiştirdiysen klavyeyle de dene: odak nereye gidiyor? Sekmeye önemli bilgiyi saklıyorsan kişinin onu bulacağından emin ol. Geliştiriciye verdiğin notta bileşen adı, türü ve durumları yazsın. Bunlar başlangıç; asıl yanıtı kullanıcıyla bir denemede göreceksin, o yüzden denemeyi takvime baştan yaz.

Kendin dene

Aklında kalsın

Bileşen seçmek bir görsel karar kadar bir içerik kararıdır: kaç seçenek, kaçı aynı anda, kişi neyi görmeli? Radyo birini, onay kutusu birkaçını seçtirir; açılır liste yer kazandırır ama saklar. Bir ekranda tek birincil eylem öne çıkar. Varsayılan değer kişi adına konuşur, bu yüzden tek tek okunmalıdır. Bileşen davranışıyla da tanımlanır. Tutarlılık aynı görünüş değil, aynı işe aynı yanıttır.

Sonraki derse köprü

Arda formu yeniden çizerken bir yerde duraksıyor. «Ana sayfaya dönüş bağlantısı logonun üstünde olsa kimse bulur mu?» Selin gülümsüyor: «Bunu kimse sana öğretmedi, ama sen de bulursun. Herkes bulur.» Peki neden? Bazı çözümler milyonlarca ekranda neredeyse aynı biçimde dönüyor. M01-D02, bu tekrarların ne kazandırdığını ve onlardan ne zaman ayrılmak gerektiğini ele alıyor.

Kendini sına

Soru 1 · Kavram

Birbirini dışlayan iki seçenekten birinin seçileceği kısa bir alanda hangisi önerilir?

• A) Onay kutusu kullanmak ve ikisini işaretli bırakmak.
• B) Radyo düğmesi.
• C) Yalnız sekme kullanıp içeriği ayırmak.
• D) Metin alanına serbestçe yazdırmak.

Cevap: B. Radyo düğmesi tam bir seçimi gösterir ve seçenekleri görünür tutar. Onay kutusu bağımsız seçenekler içindir; sekme içerik panellerini ayırır.

Soru 2 · Tuzak

Bir ekip formdaki bütün alanları aynı açılır liste yapıyor ve «Tutarlı olduk» diyor. Bu kararda atlanan ne?

• A) Açılır listelerin hiçbir yerde kullanılmaması.
• B) Formlarda renk kullanılmaması gerektiği.
• C) Bir ekranda hiç düğme olmaması gerektiği.
• D) Alanların farklı iş gördüğü.

Cevap: D. Aynı görünüş aynı iş demek değildir. İki seçenekli alanı saklamak dokunuşu artırır ve seçimi etkileyebilir. Açılır liste uzun seçeneklerde yararlıdır.

Soru 3 · Hesap

Bir formda 6 alan var, her biri 2 dokunuş istiyor. 3 alan birer dokunuşa inerse dokunuş sayısı yüzde kaç azalır?

• A) Yüzde 3 kadar azalır
• B) Yüzde 33 kadar azalır
• C) Yüzde 25
• D) Yüzde 50 kadar azalır

Cevap: C. Önce 6 çarpı 2, 12; sonra 3 çarpı 2 artı 3, 9. Fark 3; 3 bölü 12, yüzde 25. A farkı yüzde sayar. B paydaya yeni toplamı koyar: 3 bölü 9. D alan oranını verir: 3 bölü 6.

Soru 4 · Kavram

Couper ve arkadaşlarının deneyine göre seçenekleri görünür kılmak ne yapıyor?

• A) Görünen seçenekler daha sık seçiliyor.
• B) Hiçbir yanıtı değiştirmiyor, yalnız süreyi uzatıyor.
• C) Sıra etkisini tümüyle ortadan kaldırıyor.
• D) Yanıtları yalnız mobil cihazlarda etkiliyor.

Cevap: A. Yazarlar görünür seçeneklerin daha sık işaretlendiğini ve bunun sıra etkisinden güçlü olduğunu buluyor. Çalışma anket bağlamında; dokunmatik ekran bu özette yok.