Wireframe Nasıl Çizilir? Sembollerden Ekran Sayısına
Wireframe çizmek için çizim yeteneği gerekmiyor, bu doğru. Ama "herkes çizebilir" cümlesi işin zor kısmını gizliyor: sorun kutuyu düzgün çizmek değil, hangi kutuyu çizip hangisini çizmeyeceğine karar vermek. Aşağıda sembollerin ne anlattığını, sadakat seviyesinin aldığın geri bildirimi nasıl bozduğunu ve bir projede kaç ekran çizeceğini baştan nasıl kestireceğini anlatıyorum.
Wireframe neyi çözer, neyi çözmez
Wireframe bir arayüzün iskeletidir: neyin nerede durduğunu, hiyerarşinin nasıl kurulduğunu, kullanıcının bir ekrandan diğerine hangi düğmeyle geçtiğini gösterir. Mockup görsel tasarıma yakındır, renk ve tipografi taşır. Prototip tıklanabilir, yani test edilebilir. Üçü farklı soruların aracı.
Rehberlerin çoğu wireframe'in "gereksiz revizyonları engellediğini" söyler. Bu iddiaya temkinli yaklaşırım. Wireframe yalnızca yerleşim tartışmasını öne çeker; işin asıl pahalı revizyonları genelde yerleşimden değil, yanlış anlaşılmış bir kullanıcı ihtiyacından ya da veri modelinin desteklemediği bir akıştan çıkar. Yanlış özelliği çizmişsen, onu kusursuz düzenlemen bir işe yaramaz. Wireframe'i "revizyon sigortası" değil, ekipteki herkesin aynı ekranı kastettiğinden emin olma aracı say.
Çizmeden önce üç karar
Hangi ekran? Hangi akışın hangi adımı olduğunu tek cümleyle yazabilmelisin. "Ana sayfa" bir ekran değil, bir başlıktır; "aramadan sonuç listesine dönen kullanıcının gördüğü ilk ekran" bir ekrandır.
Hangi cihaz? Masaüstü için hâlâ 1024x768 öneren rehberlere rastlıyorum (o ölçüyü kenara bırakalı yıllar oldu). Bugün anlamlı olan yaklaşım sabit piksel değil, kolon sayısı: dar ekranda tek kolon, orta ekranda iki, geniş ekranda üç. Kutuları kolonlara oturtursan çizim doğrudan kodun grid'ine çevrilir.
Hangi sadakat? Kâğıt kalem mi, gri kutulu dijital çizim mi. Bu karar sandığından çok şeyi belirliyor, bir sonraki bölümün konusu.
Sadakat arttıkça geri bildirim bozulur
Çizim ne kadar bitmiş görünürse, insanlar o kadar yüzeysel konuşur. Elle çizilmiş eğri büğrü bir kutu gösterdiğinde toplantıda "kullanıcı buradan nasıl geri dönecek" diye sorulur. Aynı ekranı düzgün kenarlı, hizalanmış, gerçek yazı tipiyle gösterdiğinde konu bir anda butonun rengine ve başlığın puntosuna kayar. Bitmiş görünen şey karar verilmiş sayılır ve kimse yapıyı tartışmaya açmak istemez.
Bu yüzden ilk turda kasıtlı olarak kaba çiz. Estetiğe takılmamak bir tembellik izni değil, geri bildirimi doğru soruya yönlendiren bir taktiktir. Kalın uçlu kalem, küçük kâğıt ve on dakikalık süre sınırı bunu kendiliğinden sağlar.
Semboller: ortak dil kadar iyi
Wireframe sembollerinin tamamı uzlaşımdır, standart değil. İşe yaramaları ekibin aynı şeyi anlamasına bağlı.
- Görsel: içine çapraz iki çizgi konmuş dikdörtgen. Dikkat: aynı işaret bazı ekiplerde "burada görsel olacak", bazılarında "bu alan boş" anlamında kullanılıyor. İlk kullandığında kenarına yaz.
- Metin: alt alta ince yatay çizgiler. Çizgi sayısı metnin gerçek uzunluğunu temsil etmeli, üç satırlık açıklamayı tek çizgiyle geçiştirme.
- Buton: küçük dikdörtgen ve içinde fiil. "Tamam" değil, "Siparişi onayla".
- Açılır liste: uzun dikdörtgen, sağ ucunda aşağı ok. Onay kutusu kare, seçim düğmesi daire; ikisini karıştırmak akış tartışmasını baştan yanlış kurar çünkü biri çoklu, diğeri tekli seçim demektir.
- Navigasyon: üstte bir şerit, içinde kısa çizgilerle bağlantılar, bulunduğun sayfanın altı çizili.
Ekranlar arası geçişi oklarla göster ve okun üstüne tetikleyen eylemi yaz. "Devam" yazan bir ok, adsız bir oktan çok daha fazla bilgi taşır.
Kaç ekran çizeceğini baştan hesapla
"Her sayfayı çiz, önemli kararlarda varyasyon çalış" tavsiyesi kulağa masum geliyor ama sayıyı görmeden kabul etme. Çizeceğin adet, benzersiz ekran sayısı ile kırılma noktası sayısının çarpımıdır. Sekiz ekranlı orta ölçekli bir site ve üç kırılma noktası, 24 çizim demek. Buna ekran başına iki varyasyon eklersen 48'e çıkar. Kimse 48 wireframe'i çizmez, çizse de kimse bakmaz.
Pratikte işe yarayan sınırlama şu: kırılma noktalarını yalnızca yerleşimin gerçekten değiştiği ekranlar için çiz, geri kalanında "dar ekranda tek kolona iner" notu yeterlidir. Varyasyonu da tüm projeye değil, ekip içinde anlaşmazlık çıkan tek ekrana ayır. Varyasyon bir karar aracıdır; karar zaten netse iki alternatif çizmek sadece toplantıyı uzatır.
Dijitale taşırken
Kâğıt çizimi fotoğraflayıp paylaşmak çoğu durumda yeterli. Dijitale geçmenin tek iyi gerekçesi, üzerinde birden çok kişinin çalışacak olması ya da çizimin prototipe dönüşecek olması. Figma ve Balsamiq bu iş için yaygın; Balsamiq'in kaba görünümü sadakat tuzağına düşmeni engellediği için erken aşamada Figma'dan daha güvenli buluyorum, Figma ise prototipe geçişte açık ara önde.
Renk konusunda kural basit: siyah, gri, beyaz. Tek bir vurgu rengini yalnızca birincil eylemi işaretlemek için kullan. İkinci rengi eklediğin an wireframe olmaktan çıkıp kötü bir mockup olur.