WEB UYGULAMALARINDA FORM TASARIMI

Bildirgeçte gördüğüm bir makalede anlatılanları Türkçeleştirerek paylaşmak istedim. Birkaç saatimi acımasızda verdiğim makaleyi özene bezene grafikleriyle beraber yayınlıyorum. Web uygulamalarında form tasarımı, algılama kolaylığı, planlama, görsel elemanların yerleşimi ve doğurduğu sonuçlar ile ilgili bir makale…
By Luke Wroblewski
Originally published: Jun 26, 2007
Türkçeleştiren: Kaner TUNCEL

“Form elemanları gruplar halinde yerleştirilmelidir böylece zihnimiz ilişkili kısımları bir bütün olarak algılayabilir.” – HTML The Definitive Guide
Åzüphesiz, web uygulamaları veri girişi ve ayarlamalar için formlar kullanır. Ancak tüm uygulamalar sürekli bu formları kullanmaz.

Form Planı (Yerleşimi)
Formu doldurma zamanını minimuma indirme ihtiyacı duyulduğunda ve bilgiyi kullanıcıların en alışık olduğu şekilde toplamak istediğimizde, en iyi çalışma şekli dikey yerleştirilmiş elemanlar ve etiketler gibi duruyor. Her etiket ve form elemanı ilişkiselliklerine göre dikey şekilde gruplanır ve etiket – eleman hizalarının uyumu göz hareketini azaltır. Kullanıcılar sadece bir yöne hareket ederler: aşağı.


Bu planda, giriş elemanlarının etiketleri için kalın font kullanmak daha akıllıca. Böylece etiketlerin formun önalanında bulunmasını ve görsel ağırlıklarını arttırmış oluruz. Kalın font kullanmadığımız zaman, form elemanlarıyla aynı ağırlıkta oldukları için karışacak ve kullanıcının dikkatini vermekte zorlanmasına sebep olacaktır.
Bilgiler, alışık olunmayan ya da kolay işlem grupları halinde sunulmayan (bir adresin farklı bölümleri gibi) bir form ile toplanırken, etiketleri sola hizalamak formda istenen bilginin taranmasını kolaylaştırır.

Alternatif bir plan, etiketleri sağa yaslamaktır. Böylece etiket-eleman arasındaki ilişki açıkça belirtilmiş olur. Bununla birlikte etiketlerin sol bölümü, etiketlerin taranmasını zorlaştıracaktır. Batı dünyasında, soldan sağa doğru okuruz. Bu yüzden gözümüz yazıların sol tarafındaki boşluklara alışık değildir.

Görsel Elemanların Kullanımı
Sola hizalı etiketlerin avantajlarına bağlı kalarak (Kısa dikey boşluk, etiketlerin kolay okunması), ilk hatasını düzeltmeye çalışmak daha makul gelebilir: etiketlerin ve ilgili elemanların boşlukları

Bunun gibi bir yaklaşım (ekstra arka plan rengi ve çizgiler): farklı arka plan rengi, bir dizi dikey etiket ve bir dizi dikey eleman oluşturur. Yatay çizgiler ise etiketler ve elemanlar arasındaki ilişkiyi belirler. Bu yaklaşım çekici görünse de birkaç problem doğurur.
Doğal görsel algılama kurallarına göre, plana 15 ekstra görsel eleman eklendi: ortadaki çizgi, her elemanın arka plan rengi ve her kutunun yatay çizgisi. Bu elemanlar gözünüzü meşgul edecek ve plandaki en önemli noktalara odaklanmanızı zorlaştıracaktır: etiketler ve giriş elemanları
Edward Tufte’nin belirttiği gibi “Bilgi, farklılık yaratan farklardan ibarettir.” Başka bir değişle, planınıza yardımcı olmayan elemanlar onu zorlaştırır. Bu etiketleri okumaya çalıştığınızda görülebilir. Gözünüz arka plan rengi ve çizgi kombinasyonuyla oluşturulmuş her kutucuğu dikkate almak için sürekli duraklar.

Tabiή ki bu, formlarda asla bu planı kullanmamalıyız anlamına gelmez. Daha önce belirttiğim gruplaşmayı kullanıcıya gösterecek şekilde yerleştirilmiş ince bir yatay çizgi ya da hafif bir arka plan rengi görsel bütünlüğü sağlayabilir.

Birincil ve İkincil İşlemler
Bir formdaki birincil işlem (genellikle “kaydet”) diğer elemanlardan daha ağır bir görsellik ihtiyacı duyar (örneğin: parlak renk, kalın font, arka plan rengi) ve giriş elemanlarıyla aynı hizada olmalıdır. Bu kullanıcılara formu tamamlamak için bir yol gösterir.
Bir form “Kaydet” ve “Geri Dön” gibi birden fazla işlem içerdiği zamanlarda, ikincil işlemin görsel ağırlığını düşürmek etkili olacaktır. Bu bariz hataları minimuma indirir.

umarım işinize yarar

kaynak: Kaner TUNCEL