Kullanıcı Deneyimi – 1 Form Etiketleri

UX_design_770

Piyasada aynı işlevi gören birden fazla sistem, ürün veya hizmet varken bunların arasından sıyrılıp, kendinizi bir adım öteye taşımak için kullanıcı deneyimini en üst seviyede tutmanız gerektiği bir gerçek. Hazırladığınız bir uygulamadan veya siteden kullanıcılarınızın sıkılıp çıkmasını, sistem içinde kaybolmasını istemezsiniz değil mi? :)

Kullanıcı deneyimi yazı dizimde elimden geldiğince tecrübelerimi sizlerle paylaşmaya çalışacağım. Bu yazımda bir web sitesinin olmazsa olmaz elemanlarından biri olan form elemanlarını ele alalım…

Web sitelerini veya uygulamaları gezerken gözüme en çok çarpan hatalardan biri form etiketlerini yanlış yerde kullanılması. Eskiden kalma bir alışkanlık olsa gerek form etiketleri genelde sola dayalı şekilde tasarlanıyor. Form elemanlarının sola dayalı olması insan gözünün 2 kat daha fazla efor sarf etmesine yol açıyor. Zamanın bu kadar değerli olduğu günümüzde, insanların 1sn bile boşuna beklemeye dayanamadığı günümüzde neden 2 kat daha fazla efor harcayıp yorulalım ki? :) Ayrıca gözün her seferinde 2 noktaya odaklanması gerektiği için hata payı da oldukça yükseliyor.

Oysa ki form etiketleri form elemanlarının üstüne konumlandırıldığında göz takibi açısından daha efektif ve kullanıcıyı daha az yoran bir tasarım meydana çıkıyor.

ux1

 

 

5 comments

  1. Anonim   •  

    Placeholder ı unutmuşsun bence 😉

    • Batuhan Tozun   •     Yazar

      Evet placeholder da bir seçenek fakat çoğu zaman tek başına yeterli olmuyor ve form etiketleri kullanmak daha doğru bir hareket oluyor. Makale başlığı da form etiketleri zaten. :)

  2. Mücahit Kumser   •  

    form etiketi yerine input içinde placeholder kullanmak da bir seçenek aslında ya da value tanımlamasıyla birlikte javascript veya javascript kütüphaneleriye tıklandığında value’yi silmek

    • Batuhan Tozun   •     Yazar

      Evet saydıklarını da yapılabilir fakat placeholder özellikle uzun formlarda tek başına yeterli olmuyor. Dediğin şekilde anca login form gibi kısa formlarda kullanılabilir.

  3. Serdar   •  

    Mobil dizayna uyarlamasinin daha kolay olmasida cabasi

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir