Kullanıcı dostu web formları yapmak için 10 kural

Sep 12, 2025

Nasıl Yapılır

Illustration of web forms on an iMac and tablet

İnsan-bilgisayar etkileşiminin evrimi olmasına rağmen, formlar hala kullanıcılar için en önemli etkileşim türlerinden biridir. Başvurunuzu veya web sitenizi kullanan kişiler belirli bir hedefe sahiptir ve genellikle kullanıcı ile hedefleri arasında duran bir şey bir formdur. Her gün, onları temel faaliyetlerimiz için kullanıyoruz - alımları tamamlamak, sosyal ağlara kaydolmak için, satın aldığımız bir ürün hakkında geri bildirimde bulunmak ve daha fazlası - onlar büyük bir parçası. kullanıcı deneyimi .

Sonuç olarak, çevrimiçi formları hızlı ve kafa karışıklığı olmadan tamamlayabilmemiz çok önemlidir. Harcamamız gereken daha az çaba, biziz. Tasarımcılar ve geliştiriciler olarak, kullanıcılarımız için daha hızlı, daha kolay ve daha verimli form deneyimleri üretmek için çaba göstermeliyiz.

İki makalemin ikincisinde daha iyi formlar nasıl oluşturulacağını keşfedin ( İlk olanı burada bul ) İşte kullanıcı dostu olan formları tasarlamak için 10 ipucum. Ne aradığın şey değil mi? Kılavuzlarımıza ihtiyacınız olabilir Web Sitesi Oluşturucu veya Bulut depolama hizmet.

01. Sadece neyin gerekli olduğunu sor

Gerekli bilgi miktarını kesmek formun doldurulmasını kolaylaştırır. Neden istediğiniz bilgilerin neden kullanıldığını ve nasıl kullanıldığını sorgulamalısınız. Bir forma eklediğiniz her alanın dönüşüm oranını etkileyeceği için, alan sayısını mümkün olduğunca en aza indirmeye çalışın. Soruların ve alanların sayısını sınırlamak, özellikle kullanıcılarınızdan çok fazla bilgi talep ettiğinizde formunuzu daha az yüklenir.

02. Alanları mantıksal olarak sipariş edin

Screenshot compares two forms - one with fields in an odd order, one with headings explaining field groupings, ordered logically — Bir konuşma gibi formunuzu düşünün; Alanları, kullanıcıya mantıklı olan bir sırayla gruplamak ve sipariş etmek istiyorsunuz.

Bir formu bir konuşmaya benzer olarak düşünmek faydalıdır. Herhangi bir normal konuşma gibi, iki taraf arasında mantıksal bir iletişim ile temsil edilmelidir: bir kişi ve uygulamanız. Detaylar, bir kullanıcının bakış açısıyla, uygulama veya veritabanının hiçbiri değil, bir kullanıcının perspektifinden bir siparişte istenmesi gerekmektedir. Örneğin, birinin adını adından önce adresini istemek sıradışı.

Aynı zamanda ilgili soruları bloklardaki gruplamak çok önemlidir, bu nedenle bir dizi sorudan diğerine akış bir sohbete benzer hale getirecektir. İlgili alanların gruplanması, kullanıcıların doldurmaları gereken bilgileri anlamalarına yardımcı olur.

Yukarıdaki resimde iki kayıt formunun örnekleridir. Uzun formlar, ilgili alanları gruplamazsanız, soldaki formu sağdaki gelişmiş versiyona göre karşılaştırın.

Gruplandırma, kodun yanı sıra görsel olarak da yapılmalıdır. Örneğin, kullanabilirsiniz. & lt; fieldet & gt; ve & LEGEND & GT; İlişkili form kontrollerini ilişkilendirme unsurları:

 & lt; fieldset & gt;
  & LEGEND & GT; Kişisel Bilgiler: & LT; / Legend & Gt;
  & lt; div & gt;
    <"first_name" & gt; ilk adı için <"/ etiket ve GT;
    & lt; giriş tipi = "metin" adı = "first_name" id = "first_name" & gt;
  & lt; / div & gt;
  & lt; div & gt;
    <"Last_Name" & GT; soyadı için = "Last_name & GT;
    & lt; giriş türü = "metin" adı = "last_name" id = "last_name" & gt;
  & lt; / div & gt;
    <"Cinsiyet" ve GT; mesleği & lt; / lt; / lt; / lt;
    & lt; giriş türü = "metin" adı = "meslek" id = "meslek" & gt;
  & lt; / div & gt;
& lt; / fieldet & gt;

03. Etiketleri kısa tutun

Alan etiketleri, kullanıcılara karşılık gelen giriş alanlarının ne anlama geldiğini söyle. Temizle etiket metni, UI'lerin daha erişilebilir hale getirmenin birincil yollarından biridir. Etiketler, kullanıcıya alanın amacını söyler, ancak metinlere yardım etmiyorlar. Bu nedenle, kolayca taramalarını sağlamak bir önceliktir - özlü, kısa ve tanımlayıcı etiketleri tasarlamanız gerekir (bunları bir veya iki kelimeye getirin).

04. Alanları çoğaltmayın

Screenshot compares bad and good forms - the bad asks users to retype their email and retype their password — Kullanıcılarınızı iki kez bilgi yazmayın - sadece zamanlarını boşa harcayarak onları sinirlendireceksiniz.

Bu sorun, özellikle kayıt formları için yaygındır: Neredeyse herkes bir e-posta adresi veya şifre yazmanızı gerektiren bir form rütüseldir. Tarihsel olarak, bu yanlışlık hatalarını önlemek için tasarlanmıştır. Ancak, çoğu kullanıcı, uygulamaya izin verdiğinde gerekli alanı kopyalamıştır. Ve orijinal alanın verileri bir hata içeriyorsa, çoğaltıldı.

05. İsteğe bağlı alanları vurgulayın

İdeal olarak, isteğe bağlı alanların olmadığı en iyisidir. Kural numarası 1 doğrultusunda, bir bilgi parçası gerekli değilse, bir kullanıcının zamanını boşa harcamanın bir anlamı yoktur. Ancak bunları kullanırsanız, hangi giriş alanlarının boş bırakılamadığını açıkça ayırt etmelisiniz. Genellikle bir yıldız (*) veya 'isteğe bağlı' etiket gibi küçük bir işaret yeterlidir.

06. Varsayılanlara dikkat edin

Kullanıcılarınızın büyük bir kısmının (örneğin yüzde 90'ı) inanmadıkça statik bir varsayılan dahil olmaktan kaçının, bu değeri seçecektir - özellikle gerekli bir alandır. Neden? Bu yaklaşımla, insanlar hızlı bir şekilde çevrimiçi olarak oluşturduğundan, hataları tanıtmanız muhtemeldir. Tüm seçenekler boyunca ayrıştırmak için zaman ayıracaklarını varsaymayın. Zaten bir değeri olan bir şeyle patlayabilirler.

Bu noktanın tek istisnası, kullanıcının ülkesini coğrafi konum verilerine dayanarak - formun tamamlanmasını daha hızlı ve daha doğru hale getirebilecek olanlar gibi akıllı varsayılandır. Ancak bunları hala dikkatli kullanmalısınız, çünkü kullanıcılar önceden seçilmiş alanları oldukları gibi bırakma eğilimindedir.

07. Yazma ihtiyacını en aza indirin

Yazma yavaş ve hata-eğilimli bir işlemdir ve kullanıcıların sınırlı ekran mülkünün kısıtlamalarıyla karşılaştığı bir cep telefonunda özellikle acı vericidir. Ve küçük ekranlar kullanarak daha fazla insanla, gereksiz yazmayı önlemek için yapılabilecek her şey, kullanıcı deneyimini geliştirecektir. Uygun olduğunda, Otomatik Tamamlama ve Prefill gibi özellikleri veri için kullanabilirsiniz, böylece kullanıcılar sadece çıplak minimum bilgi miktarını yazmak zorundasınız.

Adres bilgilerinizi doldurmak, birden fazla alan, uzun isimler vb. Sayısı, herhangi bir çevrimiçi kayıt formunun en zahmetli kısmıdır. Kullanıcılarınızı, bu alanlar için prefills uygulayarak tüm adreslerini yazmak zorunda kalmadan kaydedin. Google Haritalar gibi kütüphaneler basit bir javascript api sunmak Bunu başarmak için. Yapabilirsin Burada bir çalışma çözümü bul .

08. Gerçek zamanlı doğrulama kullanın

Illustration shows two fields filled with green ticks beside them, one field filled but with a red x beside it — Bir hata yaparlarsa hemen kullanıcıları uyarın - tüm formu tamamlanana kadar beklemelerini yapmayın

İdeal bir dünyada, kullanıcılar gerekli bilgilerle doldurur ve işlerini başarıyla tamamlayın, ancak gerçek dünyada insanlar genellikle hata yapar. Tüm bir formu doldurma işleminden geçmek, yalnızca bir hata yaptığınız başvuruda bulunmak için bir formu doldurma sürecinden geçmekten sinir bozucudur.

Birini sağladıkları verilerin başarısı veya başarısızlığı hakkında bilgilendirmek için doğru zaman, bilgileri sunduktan hemen sonra. Bu gerçek zamanlı doğrulamanın oyuna girdiği yerdir. Kullanıcıları hemen hataları yanlışlarlar ve 'Gönder' düğmesine basana kadar beklemek zorunda kalmadan onları daha hızlı düzeltmelerini mümkün kılar.

Ve hatırlama, doğrulama sadece kullanıcılara yanlış yaptıklarını söylememelidir; Ayrıca onlara doğru yaptıklarını söylemelidir. Bu, kullanıcıların formda hareket etmesi için daha fazla güven verir.

Maydanoz Mükemmel bir JavaScript formu doğrulama kütüphanesidir. Açık Kaynak ve UX odaklı, böylece tam ihtiyaçlarınızı karşılamak için hemen hemen her varsayılan davranışı geçersiz kılar. Aşağıdaki kodda, bir 'mesaj' alanı için basit bir maydanalın doğrulama örneğidir. Alan en az 20 karakter, ancak en fazla 100 olmalıdır.

 <"" Mesaj "için << <" Mesaj "etiketi (20 karakter min, 100 maks): & lt; / label & gt;
& lt; textarea id = "mesajı" sınıf = "form kontrolü" adı = "Mesaj" Veri-parsley-tetikleyici = "KeyUP" Veri-Parsley-MinLength = "20" Veri-Parsley-MaxLength = "100" veri-maydanoz -Minlength-message = "hadi! En az 20 karakter yorumu girmeniz gerekir." Veri-maydanoz-validasyon-eşik = "10" & gt;

Yapabilirsin Burada KOD NUMARASI BULUN .

09. Sabit giriş formatlarından kaçının

Sabit bir formatı zorlamanın en yaygın nedeni doğrulama komut dosyası sınırlamasıdır (arka uç, çoğu durumda, çoğu durumda bir uygulama problemidir). Kullanıcı girişi sırasında bir telefon numarası gibi bir şeyin formatını zorlamak yerine, kullanıcının görüntülemek veya saklamak istediğiniz formata girmesi durumunda dönüştürmeyi mümkün kılın.

10. Sıfırlama düğmelerini kullanmayın

Illustration shows Reset button next to a Save button below a form, with a red cross through it — Gönder seçeneğinin hemen yanındaki bir sıfırlama düğmesi de dahil olmak üzere, hiç iyi geldi.

Bir sıfırlama düğmesi neredeyse hiç kullanıcılara yardımcı olmaz. Birinin, tüm işlerini geri alacak bir düğme isteyeceğini, bu düğmenin onu kurtaran düğmenin yanında oturmasını istediklerini hayal etmek zor. Neredeyse tüm sıfırlama düğmeleri kaldırıldıysa web daha mutlu bir yer olur.

Kullanıcılarınızın web sitenize nasıl cevap verdiğini bilmek ister misiniz? Terbiyeli ağ sağlayıcısı Hizmet size ihtiyacınız olan analitikleri verecektir.

Bu makale başlangıçta ortaya çıktı ağ , profesyonel web tasarımcıları ve geliştiricileri için dergi. Net'e abone olun .

İlgili Makaleler:

29 Web Tasarım Araçları İş Akışınızı Hızlandırmak İçin
En iyi 41 ücretsiz web yazı tipi
13 En İyi Kullanıcı Test Yazılımı Parçası

Kullanıcı dostu web formları yapmak için 10 kural

01. Sadece neyin gerekli olduğunu sor

02. Alanları mantıksal olarak sipariş edin

03. Etiketleri kısa tutun

04. Alanları çoğaltmayın

05. İsteğe bağlı alanları vurgulayın

06. Varsayılanlara dikkat edin

07. Yazma ihtiyacını en aza indirin

08. Gerçek zamanlı doğrulama kullanın

09. Sabit giriş formatlarından kaçının

10. Sıfırlama düğmelerini kullanmayın

Nasıl Yapılır - En Popüler Makaleler

Facebook Gizlilik Ayarları: Profilinizi Nasıl Tutulur

Shapr3d ile giderken Nasıl KIBBASH

Zbrush UI'nizle Akıllı Çalışma

Photoshop Renk Değişimi: Bilmeniz Gereken 2 Araçlar

Babel 7 ile başlayın

Bir burun nasıl çizilir

Damat dayanılmaz bir kürklü yaratık

Güzel bir suluboya manzara boyama nasıl oluşturulur

Kategoriler