Wireframe'in Türkçesi nedir?

Yaygın karşılığı tel kafes. Ben günlük işte İngilizcesini, yani wireframe'i kullanıyorum.

Wireframe çizmek için hangi araç gerekir?

Kâğıt ve kalın uçlu bir kalem yeter. Ekip uzaktaysa herhangi bir çizim ya da tasarım aracında gri kutularla aynı işi yaparsınız.

Wireframe'de gerçek metin kullanılır mı?

Low-fi çizimde metin yerine çizgiler yeter. Buton gibi kararı etkileyen yerlere gerçek etiket yazmak işe yarar. Gordon da eylem çağrılarına (CTA) metin etiketi eklemeyi öneriyor.

Wireframe kullanıcıyla test edilebilir mi?

Evet. Pernice'e göre kaba prototiplerde katılımcılar daha rahat eleştiriyor. Kâğıt testte bir kişi ekranları sırayla değiştirir.

Wireframe (tel kafes) nedir? Tanım ve örnek

Wireframe ne gösterir

NN/g'den Kelley Gordon'a göre bir wireframe dört şeyi görünür kılabilir: kullanıcının izlediği yol, sayfa düzeni, bilgi hiyerarşisi ve etkileşimler. Ayrıntı düzeyi (fidelity) de geniş bir aralıkta değişir. Hızlı bir kalem eskizi de wireframe'dir, son tasarıma yakın ayrıntılı bir çizim de.

Ben "wireframe" dediğimde çoğunlukla low-fi olanı kastediyorum. Low-fi, son ürüne az benzeyen kaba çizim demek: gri kutular ve birkaç etiket. Menünün ve sayfaların yerleşimi önceden konuşulduysa, yani bilgi mimarisi belliyse, ekranları çok daha hızlı çizersiniz.

Neden işe yarar

Kaba çizim tartışmayı doğru yere çeker. Kara Pernice'in NN/g yazısına göre kaba bir tasarım bitmemiş görünür, bu yüzden kullanıcılar onu daha rahat eleştirir. Paydaşlar işin bitmediğini görür, tasarımcı da eskize cilalı bir ekran kadar bağlanmaz.

Vazgeçmek de ucuzdur. Wireframe'de bir kutuyu silip yeniden çizersiniz. Kodlanmış bir ekranda aynı değişiklik yeni bir geliştirme turu ister.

Uygulamada da yaygın bir çıktı. Page Laubheimer'ın NN/g için 86 UX uzmanıyla yaptığı 2015 anketinde katılımcıların %71'i statik wireframe'i "sık" ürettiğini söyledi. Ankette en sık üretilen çıktı buydu.

Örnek: bir ürün sayfasının wireframe'i

Çizim işaretleri basit. Gordon'a göre görsel, içinden çarpı geçen bir dikdörtgendir; başlık kalın, gövde metni ince bir çizgidir. Açılır menü ok işaretli bir dikdörtgendir, seçili radyo düğmesi ise dolu bir daire.

Gezinme menüsü, ekranda duracağı yere çizilen bir dikdörtgendir. Bulunduğunuz sayfanın bağlantısının altı çizilir ya da etrafına kutu çizilir.

Örnek çizim

Kendi çizdiğim örnek: telefonda bir ürün sayfası. Yukarıdan aşağıya: geri oku ve sepet, arama kutusu, çarpılı görsel kutusu, başlık, fiyat, açıklama, beden menüsü, iki teslimat seçeneği ve Sepete ekle butonu. Renk ve fotoğraf yok.

Bu ekranda sorduğum sorular görünüşle ilgili değil. Kullanıcı bedeni butondan önce mi seçmeli? Teslimat seçeneği bu sayfada mı durmalı, sepette mi? Bunlar wireframe'de birkaç dakikada konuşulur.

Audit'lerde en sık gördüğüm sorunlardan biri de burada başlıyor: ekran güzel ama öğelerin sırası yanlış. Renk eklendikten sonra bu sırayı kimse sorgulamıyor. Wireframe, o soruyu renkten önce sormanın en ucuz yolu.

Dört adımda çizim

Gordon'un sırası şöyle:

Ekranın oranını belirleyin; tarayıcı ya da telefon çerçevesini de çizin.
Gezinme menüsünü ve arama alanını yerleştirin.
En büyük öğeleri ekleyin: başlıklar, banner'lar, görseller.
Kalan ayrıntıları tamamlayın: butonlar, açılır menüler, onay kutuları, metin alanları, gövde metni satırları.

Gordon kalın uçlu kalem ve süre sınırı öneriyor; ona göre dağınık çizim gayet normal. İlk turu kâğıtta yapın. Kalın kalem, ayrıntıyla uğraşmanıza izin vermez.

Daha ayrıntılı bir wireframe çizecekseniz Gordon sabit ekran ölçüleriyle başlamayı öneriyor. Web için verdiği örnekler 1024x768 ve 1920x1080 piksel. Mobilde ben ürünün kullanıcılarında en sık görülen telefon boyutunu esas alırım.

Sık karıştırılan: mockup ve prototip

Pernice'e göre sadakat üç eksende değişir: görsel, içerik ve etkileşim. Wireframe üçünde de düşüktür. Mockup ise aynı ekranın renk, yazı tipi ve gerçek görsellerle giydirilmiş ama tıklanmayan halidir.

Prototip etkileşimi ekler. Tıklanabilir bir dosya olabilir ya da birinin ekranları elle değiştirdiği bir model. Kullanılabilirlik testine bu aşamada girersiniz.