web-gelistirme-sc.com

Göndermeden önce bir web formunda Zorunlu bir alanı vurgulamanın en iyi yolu nedir?

Bu öznel görünüyor ve öyle; bir müşterim, uygulamalarında web formlarında gerekli alanları kırmızı bir yıldız işaretiyle vurgulamamı istiyor ve kırmızı yıldız işaretleri genellikle benim için bir hata olduğu için bir alternatif arıyorum.

Bir kullanıcıya hangi alanların gerekli olduğunu nasıl bildirebilirim? (Her cevap için bir tane lütfen.)

GÜNCELLEME: Bu, hangi alanların gerekli olduğunu gösterir önce doğrulama/geri gönderme gerçekleşir.

46
Ryan Shripat

Techinsurance.com'da tüm alanların% 95'i zorunlu olduğundan, kararım yalnızca bir alanın gerekli olduğunu belirtmek için kalın harflerle kullanmak ve dağınıklığı azaltmak için isteğe bağlı alanların yanına Word'ü (isteğe bağlı) yazmaktı.

örneğin.

Adı

Soyadı

İşletme Telefon Numarası

Cep telefonu numarası (isteğe bağlı)

Ve belki de aynı derecede önemli olan hata mesajlarının kendisidir. Onları mümkün olduğunca açık hale getirdim ...

zorunlu alan ...

alt text

hatalı ...

alt text

Bu kararlar, gerekli alanı belirtmek için yarı geleneksel kırmızı yıldızlara sahip bir web sitesine sahip olduktan yıllar sonra alınmıştır. Bu yıldız işaretleri çoğu zaman işe yaradı. Sorun, bir doğrulama hatası olduğunda idi. Sayfalarımızdan bazıları oldukça uzun olabilir ve kırmızı doğrulama hataları, zaten kırmızı yıldızlarla zaten dağınık olduğunda sayfada yeterince göze çarpmaz. Bunu biliyorum, çünkü bazen insanlar bizi bu konuda arayacak kadar sinirli olurlar. Ancak tüm göstergeler, yeni (yukarıdaki) tasarımın sorunu düzelttiğini göstermektedir.

57
Steve Wortham

Bunu yapmanın en iyi yolunun, giriş alanından sonra "gerekli" sözcüğünü hecelemek olduğunu hissediyorum. Bu duygu, Luke Wroblewski'nin Web Form Tasarımına da yansımıştır: http://www.lukew.com/ff/entry.asp?725

Örnek bağlantı zorunlu alanlar yerine isteğe bağlı alanlar hakkında konuşurken, yöneticinin aynı kaldığına inanıyorum - kullanıcılar görsel göstergeleri dahil etmek yerine bunları kendileri için yazmayı tercih ediyorlar.

Ayrıca, bakılacak bir şey, gerekli alanlar yerine seçenek olan alanları gösteriyor olabilir. Bana göre, istisna hangisi olursa olsun dikkat edilmesi gereken şeydir. Örneğin, 10 alanınız varsa ve bunlardan 8 tanesi gerekiyorsa, 8 alan için "Zorunlu" yazmak yerine, 2 özel durum için "İsteğe Bağlı" yazın. Ancak yalnızca 2 tanesi gerekiyorsa, istisna oldukları için bu 2 tarafından "Zorunlu" yazın.

9
RussellUresti

Bu soru hayal edebileceğinizden daha sorunlu olabilir.

Örneğin, bazı posterler "zorunlu" olarak belirtmek için yıldız işareti kullanılmasını önerdi, bununla ilgili sorun, bazı web sitelerinin aslında tersi kullanması ve isteğe bağlı alanların yanına yıldız işareti koymasıdır. Kullanıcılar, bir yıldız işaretinin "zorunlu" bir alan mı yoksa isteğe bağlı bir alan mı olduğunu bakarak göz önünde bulundurmazlar ve daha fazla araştırmak, akışlarını kırmak, form işlemi hakkında onları hayal kırıklığına uğratmak ve bazı durumlarda formun terk edilmesine neden olabilirler. birlikte.

RussellUresti, Luke Wroblewski'nin zorunlu alanların yanına "zorunlu" yazmak için "Web Form Tasarım" konusundaki araştırmasını yinelediğini de (10 yıllık tecrübemde) formlar üzerinde en yüksek verimi veren ve en az karışıklığa yol açan bir yaklaşım olmuştur.

İlgili ve göz önünde bulundurulması gereken başka bir şey, bir form alanı isteğe bağlıysa, kullanıcıya sormadan cevabı almak için kendiniz mantığı kullanabilir misiniz?

Örneğin, kullanıcının Erkek mi Kadın mı olduğunu bilmeniz gerekiyorsa, bazı durumlarda adı için seçtikleri başlıktan bir cevap çıkarabilir (bayan, bayan vb. Anlamına gelir) ve soruyu kullanıcıdan kaldırır.

Dikkate alınması gereken diğer bir nokta, adres alanları gibi şeyler içindir, eğer posta kodunu sorabilir ve posta kodu araması yapabilirseniz, yalnızca kullanıcı adresi manuel olarak girmeyi seçerse veya posta kodu araması başarısız olursa isteğe bağlı verilerin birçoğundan kaçınabilirsiniz bu formun gerçekte olduğundan daha uzun görünmesine ve kullanıcının ayrılmasına neden olabilir.

Deneyimlerime göre, eğer bir alan isteğe bağlı ise, alanı tamamen kaldırmak için büyük bir durum söz konusudur. Açıkçası bu her zaman pratik değildir, ancak bazı durumlar, almaya karar verdiğiniz herhangi bir yaklaşım için görsel dağınıklığı azaltmaya yardımcı olabilir ve yardımcı olacaktır.

4
Vincent Pickering

Başka bir çözüm, formu gerekli tüm alanları bir araya getirerek ve sonra da "Zorunlu" bölümün tamamını etiketleyerek iki bölüme ayırmaktır.

3
Chase Seibert

Bulduğum en iyi yol, içine ve sağa hizalanmış bir yıldız işareti koymak.

Example of UX

3
Nijikokun

Burası kesinlikle bunu göndermek için yanlış yerdir, ancak "zorunluluğun" genişletilmiş bir tanımını göz ardı etmeyin - yani, bir öğenin zorunluluğu başka bir öğenin kullanımına (seçim, doldurma, vb.) Bağlı olduğunda.

Örnek, A alanı isteğe bağlıdır. Ancak, A alanı gerçekten de son kullanıcı tarafından doldurulursa, B alanı gereklidir.

Bunu belirtmek için öğe alanlarına nasıl açıklama ekleriz veya gruplandırırız? Yapmalıyız?

PS. Unutmayın ki renk tek başına bilgi iletmek için güvenilir olmayan bir kanaldır. Bazılarımız kırmızı ve yeşil arasında kolayca ayrım yapamayız ve kırmızı, farklı kültürlerin insanlarına farklı şeyler aktarabilir.

3
CSSian

Kırmızı yıldız işaretleri genellikle gerektiği gibi kullanılır, bu nedenle müşteriniz gerçekten yanlış değildir. Turuncu veya site tasarımına uyan başka bir renk seçerseniz, bu iyi olmalıdır.

2
James Buckley

Basit yıldız felsefesinin bir kısmı.

Teğetsel olarak ilgili bir notta, gerekli ve doldurulmamış alanlar için özel hata işaretleri oluşturma örneğiyle birlikte bir süre önce yazdığım bir yazı. Oldukça teknolojiye özgüdür (Rails, Formtastic, jQuery), ancak konsept kolayca uyarlanabilir.

http://thestrake.com/post/459205965/show-n-tell-friday-custom-form-error-markers

1
blackant

Öncelikle, UX uzmanı olduğunuzu varsaydığım için, müşteriniz size UX sorunlarını nasıl çözeceğinizi söylememeli, çözüm değil, çözülecek problemle size gelmelidir.

Bunu bir kullanıcının bakış açısından düşünerek, kullanıcının yıldız işaretinin ne anlama geldiğini bildiğini varsayamayız. Şüphe duyduğunuzda, yazı dilini kullanarak mümkün olduğunca net bir şekilde heceleyin. Yıldız işareti web'de daha az kullanıldığını görüyorum ve genellikle kullanıldığında sayfanın alt kısmında bir açıklama geliyor. Daha basit bir açıklama sadece 'Gerekli' kullanmaktır. Ekran okuyucular da bunu alacak ve sitenizi daha erişilebilir hale getirecektir.

Bu senaryoda aşamalı ifşa ilkelerini uygulamayı düşündünüz mü? Gerekli olmayan alanlar ekranda bile olmalı mı - daha sonraki bir aşamada gizlenebilir veya kullanıcıya gösterilebilir mi? Bu şekilde, aşırı bilgi yüklemesi daha az olur ve ihtiyaç duyulan tüm alanlar sunulur, bu nedenle 'zorunlu' olan ihtiyacı ortadan kaldırır. Bu açıklamanın arkasındaki psikoloji hakkında daha fazla bilgi: https://www.nngroup.com/articles/progressive-disclosure/

0
lg365

Açıklığı dikte eden kullanılabilirlik standartlarını gördüm - (optional). Sumbit denemesinden sonra gerekli alanlar doldurulmazsa, neyin yanlış olduğunu açıklayan bir metinle işaretlenmelidir.

0
awe

Kullanılabilirlik konularının çoğu gibi, bu gerçekten de esas olarak formunuza kaç alanın dahil edildiğine ve formunuzdaki zorunlu alanların sıklığına bağlıdır

Genellikle her zorunlu alana bitişik basit bir kırmızı yıldız işaretini ve ardından "* - zorunlu alan" dipnotunu tercih ederim.

Ayrıca, bir onBlur() olayından sonra alan boş veya geçersiz kalırsa alan kenarlığını kırmızı renkle vurgulamak istiyorum. Kullanıcı gerekli tüm alanları doldurmadan formu göndermeye çalışırsa aynı vurgulama. Bir javascript onFocus() olayında kenar vurgulama kaybolur.

0
wnathanlee