Büyük Formlar Tasarlamak için 7 Sır
Hemen hemen her web sitesi tasarımı bir tür form içerir. Basit bir e-posta adresi koleksiyonundan, bir bültene veya tam ödeme tahsilat formlarına bildirime kaydolmak için, kullanımı ve anlaşılması kolay bir form tasarlamanız zorunludur.
Form tasarım standartları da gelişmektedir. Birçok form birden çok sütun içermekle birlikte pek çok bilgi istemesine rağmen, en iyi uygulamalar artık formları olabildiğince basit tutmayı önermektedir. Ve tasarım için de çok şey var. İyi bir form taranabilir, çok fazla yazım gerektirmez ve kullanıcıların formları doğru bir şekilde ilk kez doldurmasına yardımcı olmak için akıllı etiketleme ve biçimlendirme içerir.
Kullanıcıların aslında doldurdukları bir form tasarladığınızdan emin olmak için birkaç sır vardır.
1. Tarama ve Okumayı Kolaylaştırın
Kullanıcıların, web sitelerini bilgi toplayacak ve hangi eylemleri gerçekleştireceklerini veya içerik ile tasarımın ilgisini çekip çekmediğini belirleyecek şekilde taradıklarını biliyorsunuz. Aynı şey formlar için de geçerlidir. Kullanıcı bir bakışta hangi bilgilere ihtiyaç olduğunu söyleyebilmeli ve formun ne olduğu ve nasıl sunulacağı hakkında net bir açıklama sunabilmelidir.
Çok taranabilir bir form aşağıdakileri içerir:
- Kontrast: Metnin kısa ve okunması kolay olması gerekiyor. Çok fazla renkten kaçının ve açık metin-arka plan kombinasyonlarında geleneksel karanlığa tutun.
- Gruplama ve uzay: Daha uzun formlara benzer grup bilgileri. Ödeme bilgilerini toplarken, örneğin müşteri bilgilerini, ödeme bilgilerini ve gönderim bilgilerini gruplandırın. Üç kısa blok bir uzun olandan daha kolay sindirilebilir. Metin ve alan elemanları arasındaki düzgün aralıktan ziyade, bu etiketlerin açıkladıkları alana bağlı oldukları akıllı boşlukları kullanın.
- Net bitirme / harekete geçirici mesaj : Düğmeyi büyük ve görmesi kolay hale getirin. Düğmedeki mikrofotoğraf, kullanıcılara “gönder”, “şimdi öde” veya “bir sonraki adıma geçme” gibi ne olacağını anlatmalıdır. Geri bildirim döngüsünü kapatmayı ve kullanıcıların bir formun düzgün bir şekilde gönderilmesini sağladığını unutmayın.
2. Yüzer Etiketleri Düşün
Form alanları içinde ipucu metin kullanıp kullanmama konusunda çok fazla tartışma oldu. Asıl sorun, bu metnin çok sık bir tıklamayla gitmemesi ve kullanıcıların yazmaya başlamak için aktif olarak silmeleri gerektiğidir. Bu garip.
Dahası, Nielsen Norman Group bulundu Bu boş alanlar göz çekebilir ve kullanıcıların daha net bilgi girmesine yardımcı olabilir.
İpuçları kullanmanız gerektiğini düşünüyorsanız, etkileşimli bir çözümü düşünün - yüzen etiketler. Etiket bilgilerinizi form alanları içine yerleştirin, böylece yer tutucu metin gibi görünür, ancak kullanıcı bir kez gezinirken veya alana tıkladığında metnin canlandırılmasına ve sol üst konuma geçmesine izin verin. Etiket veya ipucu asla kaybolmaz ve kullanıcının formu doldurmaya çalışmasına engel olmaz. (Ayrıca küçük animasyon, kullanıcılar için eğlenceli bir sürpriz.)
3. Alan Maskeleri Kullanın
Saha maskeleri aynı ipuçlarından bazılarını sağlayabilir ve kullanılabilirlik yoluna girmeden ipuçları verebilir. Bir alan maskesi, sadece kullanıcı bir alanı etkinleştirdiğinde görünür ve hangi bilgilerin gerektiği konusunda ek bir tarama ipucu sağlar. Maske, bilgiyi formda tekmeleyecek hataları önlemek için bilgileri otomatik olarak biçimlendirerek kullanıcıya yardımcı olabilir.
Hareket halindeki bir alan maskesinin iyi bir örneği telefon numaralarıdır. Birden çok biçim seçeneğini göz önünde bulundurun:
- (000) 000-0000
- 000-000-0000
- 0000000000
Bir kullanıcı hangisinin çalışacağını nasıl biliyor? Form alanı formatı bir kullanıcı türü olarak belirleyecek ve ayarlayacaktır, bu yüzden bunu düşünmek zorunda kalmaz ve sadece sayıları girmek zorundadır. (Bu ayrıca, bir mobil cihazdaki klavyeler arasında geçiş yapmak zorunda kalmamanızı da sağlar.)
4. Formları Klavye Dostu Yapın
Kullanıcının formunuzla ne tür bir cihazda karşılaşacağını bilmenin bir yolu yoktur, ancak yine de doldurmak aynı derecede kolay olmalıdır. Forma bilgi gönderebilecek ve uygun seçeneği saptamak ve kullanmak için alanları ayarlayabilen tüm farklı klavyeler türlerini göz önünde bulundurun.
Masaüstünde, kullanıcılar bir form girebilmeli ve bir fareyi tıklamak zorunda kalmadan her alanı doldurabilmelidir. Tamamlandığında, bir alandan diğerine otomatik olarak ilerleyin veya sekmeleri kullanın veya hareket etmek için enter tuşuna basın. W3.org'un sağlam bir kümesi var klavye önerileri takip etmen için.
Mobil cihazlarda, klavye türünü gereken verilere eşleştirin. Giriş harfler içinse, alfa klavyesini açın; Sayılar için sayısal seçeneği getirin. Google'dan: “Uygulama kullanıcıları metin girişi için uygun bir klavye sağlayan uygulamalara değer veriyor. Bunun, yalnızca belirli görevler yerine değil, başkaları için değil, uygulama genelinde tutarlı bir şekilde uygulandığından emin olun. ”
5. Dikey Format için Opt
Dikey formlar, kullanıcılar için birden çok sütun biçiminden daha kolaydır. En iyi uygulama kuralı, tüm alanların en üste doğru formatta kaymadan ekrana sığmasını sağlamaktır.
Bir istisna, bir kullanıcının sadece bir e-posta adresi veya isim ve e-posta adresi girmesi gereken süper kısa formlar içindir. E-posta kutusu, kullanıcıların adreslerinin tüm harflerini görmeleri için yeterince uzun olduğu sürece, iki yan yana sütun ve ardından harekete geçirme düğmesi ile bu durum iyi çalışabilir.
Öğeleri dikey olarak da dikey olarak sipariş etmeyi unutmayın. İlk adı, soyadı, e-posta adresini ve saç rengini topluyorsanız, bunları bu şekilde sıralayın.
6. Sınır Yazma
Formlarla mümkün olduğunca çok sayıda önceden doldurma çözümü kullanın. Hiçbir şey daha keyifli değil, daha sonra bir adres ekleyecek ve ilk birkaç dokunuştan sonra Google API başlıyor ve adres seçeneklerini öneriyor.
Bu üç şey yapar:
- Özellikle mobil cihazlar için daha kolay.
- Gerekli alan sayısını sınırlandırmaya yardımcı olur.
- Yanlış yazım gibi bazı kullanıcı hatalarını ortadan kaldırmaya yardımcı olabilir.
E-posta adresleriyle aynı şeyi düşünün, böylece kullanıcılara @ sembolünden sonra popüler e-posta alanları verilir. Bir kullanıcı [email protected] içinde yazdığında…. alan otomatik olarak önerir [email korumalı] .
7. Kısa ve Tatlı Tutun
Kullanıcılara formlarda çok fazla bilgi sormaya davetlisiniz. Dürtüne diren!
Sadece formlarda hayati bilgiler isteyin. Kullanıcıların daha az bağlılık gerektiren formları doldurabilecekleri daha güçlü bir ihtimal var. Daha sonra daha fazla bilgiye ihtiyacınız varsa, daha fazla ayrıntı istemek için bunları listenizden e-postayla gönderebilirsiniz. (Daha önce dahil olan biri olarak, kullanıcının şu anda sizinle daha fazla etkileşim kurması daha olasıdır.)
İsteğe bağlı alanlardan kaçının. Fazla bilgi istemiyorum. Birini kullanabileceğiniz birden fazla alan kullanmayın (örneğin, telefon numaraları).
Sonuç
Bir formu doldurmak için kullanıcılara bir şeyler verin. Eğlenceli ya da ilginç olun. Kullanıcıya teşekkür ederim.
Okunması kolay ve kullanımı kolay bir form oluşturmak, veri toplama ve bir web sitesi ziyaretçisini tekrarlayan bir kullanıcıya dönüştürme şansınızı artıracaktır.