Formlar her zaman sinir bozucudur. Tam bitirdim derken geri dönen hata mesajları, kafa karıştırıcı seçenekler ya da doğru formatta yazılması gereken alanların ayrıştırılamaması kullanıcınızın sıkılmasına ve formu doldurmayı tamamlamadan sayfadan ayrılmasına sebep olur. Bu yazımızda, kullanıcılara formlarda nasıl yardımcı olabileceğimizden, onlardan istediğimiz bilgileri alırken nasıl daha kolay bir deneyim sunabileceğimizden bahsedeceğiz.
Formlar her zaman sinir bozucudur. Tam bitirdim derken geri dönen hata mesajları, kafa karıştırıcı seçenekler ya da doğru formatta yazılması gereken alanların ayrıştırılamaması kullanıcınızın sıkılmasına ve formu doldurmayı tamamlamadan sayfadan ayrılmasına sebep olur. Bu yazımızda, kullanıcılara formlarda nasıl yardımcı olabileceğimizden, onlardan istediğimiz bilgileri alırken nasıl daha kolay bir deneyim sunabileceğimizden bahsedeceğiz.
Zorunlu ve isteğe bağlı alanları belirgin hale getirin
Kullanıcıların bir çoğu formlarda sorulan gereksiz sorular karşısında pes ederler. Bu durum, kullanıcıların kendilerine ait bilgileri paylaşmak istememelerinden ya da form dolduran kullanıcının fazla zaman harcamak istememesinden kaynaklanabilir.
Bu yüzden, formlarda hangi alanların doldurulmasının zorunlu, hangi alanların isteğe bağlı olduğu konusunda basit ve açık olunmalıdır. Formlarda zorunlu alanları genellikle şu teknikleri kullanarak belirtiriz:
Zorunlu alanları küçük sembollerle belirtebilirsiniz. Genellikle kırmızı “*” işaretiyle gösterilir. Bu işaret, yaygın kullanımı sayesinde artık çoğu kullanıcı için zorunlu alanları ifade ediyor.
Zorunlu alanları “zorunlu” şeklinde yazılı olarak belirtebilirsiniz.
Doldurulması gereken alanları, bold etiketlerle öne çıkartabilirsiniz.
Kullanıcıların dikkatini zorunlu alanlara çekmek bir çözüm olsa da; ideal yaklaşım, zorunlu alanları mümkün olduğunca az sayıda tutmaktır. Sizin için o bilgileri almak çok önemli olabilir. Ama kullanıcılarınız her zaman sizinle aynı şeyi düşünmezler. Özellikle kimlikle doğrudan ilişkili olabilecek bilgileri vermek kullanıcıları daha fazla tedirgin eder. Kafada oluşabilecek bu soru işaretini engellemek için, bu alanları bir bilgi kutusuyla destekleyebilir, bu bilgiye neden ihtiyaç duyduğunuzu kullanıcınıza açıklayabilirsiniz. Örneğin koalay.com’un teklif alma deneyiminde, T.C. Kimlik numarası istenen aşamada görüntülenen açıklama, kullanıcının “Neden?” sorusuna cevap veriyor.
Bu içerik ücretsiz!
Okumaya devam etmek ve SHERPA Blog okuru olmak için aşağıdakilerden birini seç. Her hafta yenileri eklenen yüzlerce içeriğe ücretsiz ve sınırsız eriş.
Kullanıcılarınızı sizin belirlediğini formata uygun olarak yazmak konusunda zorlamayın. Bunun yerine, kullanıcınızın yazdığı bilgileri, otomatik olarak formatlandıran ve kullanıcının her seferinde doğru formatlı veri girmesini sağlayan bir çok eklenti var. Bu eklentiler, kullanıcıların kredi kartı ve telefon numarası gibi bilgilerini girerken, girilen metni otomatik olarak formatlanmış haliyle gösterir.
Aynı şekilde tarih formatları da kafa karıştırıcı olabilir. 12.11.2016, 12/11/2016 ya da bazı ülkelerde geçerli olan gün ve ay’ın sıralamasındaki farklılık gibi. (gg/aa/yyyy yerine aa/gg/yyyy şeklinde kullanılması.)
Bunun için kullanabileceğiniz en iyi yöntem, tarih seçici (date picker) eklentilerini kullanmaktır. Kullanıcı burada seçmek istediği tarihi, doğal ve hataya olanak vermeyen bir deneyimle doğrudan takvim üzerinden seçer ve bu durumun rahatsız ediciliği ortadan kalkar.
Kullanıcılara form alanlarıyla ilgili ipucu verin
Bazı veri alanları her ne kadar açık olarak belirtilse de; kullanıcıya form alanlarıyla ilgili ipucu vermek, sıkıcı formları kullanıcılar için daha basit ve anlaşılır hale getirebilir. Bunun için en kullanışlı yöntem formlar için örnek metin (placeholder) kullanmaktır. Bunu, Internet Explorer’ın 10 ve daha yüksek sürümlerinde ve diğer tüm tarayıcılarda da desteklenen placeholder= “örnek metin” kullanımıyla kolaylıkla sağlayabilirsiniz. Bu sayede, kullanıcıya, o alana hangi formatta giriş yapmasını istediğinizi göstermiş olursunuz.
Kullanıcılarınızı sadece geçersiz veri girişi durumunda uyarmayın; doğru veri konusunda da yol gösterin. Örneğin; şifre tanımlama gibi durumlarda kullanıcılarınızın sizin belirlediğiniz bazı kriterlere uyması gerekir. Bu durumda kullanıcınızı, bu kriterlerle ilgili bilgi vererek yönlendirmeniz gerekir. Aşağıdaki MailChimp kayıt formu buna iyi bir örnek.
Karakter sayısı sınırlamalarını kullanıcılara gösterin
Formlarda kullanıcıların giriş yapacağı alanlarda bir maksimum karakter sayısı sınırı belirlemeniz gerekebilir. Ama bu limitleri, veri giriş alanlarınının niteliklerini hesaba katarak tanımlamalı ve form alanının bütününde bir tutarlılık elde etmeyi amaçlamalısınız.
Örneğin karakter sınırlandırma, özellikle adres alanlarında kullanıldığında çok sinir bozucu olabiliyor. Aşağıdaki örnekte göreceğiniz gibi, adres tanımı 64 karakterle sınırlandırılırken (Burada örnek olarak yazılan metin sadece 16 karakter), asıl adresin yazılacağı alan 32’şer karakterle sınırlandırılan iki satıra bölünmüş.
Bu form, birçok yanlış uygulamaya örnek teşkil ediyor. Adres alanlarının genişliği formdaki diğer elemanlardan büyük olmasına rağmen, aynı sayıda karakter alıyor. Form, adres alanında karakter sınırını geçtiğinizde size herhangi bir uyarı vermiyor. Adresi başka bir yerden kopyalayıp forma yapıştırdığınızda, fazla karakterleri size herhangi bir uyarı vermeden siliyor. Bu deneyimi bir kullanıcınızın ürün sipariş ederken yaşadığını varsayalım; yanlış adres bilgisi girişi ve bu nedenle gerçekleşen yanlış gönderim nedeniyle bütün sipariş deneyimine zarar vermiş oluyorsunuz.
Karakter sınırlaması konusunda en güzel örnek Twitter’dan. Tweet metnini yazarken kalan 20. karakterden sonra karakter sayacının rengi gri, 10. karakterden sonra kırmızı oluyor. Eğer karakter sınırını geçerseniz, fazladan yazdığınız karakterler renk değiştiriyor, sayaç “-2, -3, -4…” olarak değişiyor ve Tweetle butonu pasif konuma geçiyor. Bu uygulama, kullanıcıyı yaptığı hata konusunda herhangi bir metinle uyarmadan, sadece dinamik bilgilendirmeleri kullanarak göstermenin çok iyi bir örneği aslında.
Kullanıcılarınızın değişiklik yapamadığı alanları, hiç göstermeyin.
Bazı durumlarda kullanıcılarınızı yanlış seçim yapma konusunda uyarmanız gerekebilir. Bunları pasif durumda göstermek veya seçildiğinde “Bu seçeneği işaretleyemezsiniz.” şeklinde uyarmak yerine, bu seçenekleri hiç göstermeme yolunu seçin.
Örneğin bir uçak bileti alırken, bulunduğunuz günden önceki günleri göstermek, Saat 12:00’da sipariş verirken, gönderim saati olarak sabah 07:00’ın da seçilebilir olması gibi durumlarda, kullanıcıya bir uyarı göstererek kullanıcınıza efor harcatmak yerine, bu seçenekleri tümüyle gizlemek çok daha etkili bir deneyim sunar.
Bu problemle e-ticaret sitelerinde sıkça karşılaşabilirsiniz. Genellikle bir ürüne “Sepete Ekle” butonuna birden fazla tıkladığınızda ürün, birden fazla adet olarak sepete atılır. Ama kullanıcı alışveriş sepetine gittiğinde ve sipariş miktarına dikkat etmediğinde, yanlışlıkla birden fazla ürün satın almasına sebep olabilirsiniz. Bu durumu engellemek için birçok yöntem var.
idefix.com‘da “Sepete ekle” butonuna tıkladıktan sonra buton sepete eklendi olarak değişiyor. Butona birden fazla bastığınızda sepetteki ürün adedi değişmiyor.
Hepsiburada.com’da bir ürünü iki kere sepete eklediğinizde “Adet” güncellenmeden, aynı üründen iki tane görünüyor.
Amazon.com’da aynı üründen iki tane eklediğinizde size bir uyarı mesajı gösteriliyor ve bu durumla ilgili size bilgi veriliyor.
Butonu, sadece tüm alanlar doğru şekilde doldurulduğunda aktifleştirin
Bir formu onaylamak için gönderim butonuna tıkladığınızda bir hata oluşursa, o zamana kadar oluşturduğunuz bütün deneyimi mahvedebilirsiniz. Bu yüzden formlardaki validasyonları mutlaka gönderim onaylanmadan önce yapmalısınız. Kullanıcının bazı alanları atlamaması için form gönderimini onaylama butonunu pasif konumda tutmanız, kullanıcıların sürekli olarak hata mesajı almalarına ya da sayfada gerekisiz yere beklemelerini engeller.
İnsanlar form doldururken acelecidir. Yaptıkları işlemlerde sizin yazdığınız notlara dikkat etmeyebilirler. Form gönderimlerinde birden fazla tıklamaları mutlaka engelleyin. Bu tip hatalı tıklamalar, birden fazla hesap oluşturma, yanlışlıka sipariş verme gibi durumlara sebep olabilir.
Yenile (Temizle) Butonunu kaldırın
Eğer bir formda “Temizle” butonu kullanıyorsanız, kaldırın. Çünkü bu buton hataya davetiye çıkartır. Kullanıcılarınız yaptıkları işlemi tamamlamak isterken, yanlışlıkla bütün formun sıfırlanmasına sebep olabilirler. Dolayısıyla bu buton, umduğumuz sonuçlardan çok, kargaşaya sebep olabilir. Çoğu kullanıcı bulunduğu sayfayı yenilemek istediğinde sayfa içinde bir buton aramak yerine sayfayı tarayıcıyla yenileme yolundan gider. Bu da aslında yenile butonunun gereksiz olduğunu gösterir.
Formdaki verilerin kaybedilmesine engel olun
Bir formu doldurdunuz, bir sürü işlem yaptınız. Tam kaydetmek üzereyken, tarayıcınız çalışmaz hale geldi. Sayfayı yenilediniz ve bir baktınız ki, girdiğiniz onca veri bir anda yok olmuş.
Kullanıcılarınız bu tip durumlardan korumalısınız. Özellikle birden fazla aşamalı formlar söz konusu olduğunda, kullanıcınızın kaldığı yerden devam edebilmesini sağlayacak çözümler geliştirmelisiniz.
Kullanıcılarınızın kaldığı yerden devam edebilmesi için:
Nerede kaldığıyla ilgili bilgileri kaydedin.
Eposta adresi veya başka bir bilgiyle kaldıkları aşamaya ulaşmalarını sağlayın sağlayın.
Kullanıcıların bu forma ulaşımlarını kolaylaştırın.
Bu işlem özellikle kredi başvuruları, detaylı kayıt formları gibi durumlarda çok daha kolay bir deneyim sağlar; doldurulan verilerin kaybolup, bütün formun tekrar doldurulmasına engel olur.
Bir web sitesindeki kayıt ve giriş formlarının etkili bir şekilde hazırlanması, dönüşümü arttıran en önemli faktörlerden birisidir. Hiç kimse, form doldurmak gibi sıkıcı bir süreçle uğraşmak istemez. Ancak bu süreçle ilgili olarak yapacağınız yukarıdaki gibi optimizasyonlarla, kullanıcılarınızın bu süreçte daha kolay ilerlemelerini sağlayabilir; işlemlerini etkili hata ve yönlendirme mesajlarıyla daha hızlı bir şekilde tamamlamalarını sağlayabilirsiniz.
Formlardaki hata mesajlarının optimizasyonları kısaca özetlemek gerekirse,
Zorunlu alanlarla, isteğe bağlı doldurulacak alanların birbirinden ayrıştırılmasını sağlayın.
Farklı formatlarda yazılması gereken (tarih, telefon numarası, kredi kartı, vs.) gibi alanlar için kullanıcıları özgür bırakın. Daha anlaşılabilr olması için formatlama işlemini siz yapın.
Formlarda istediğiniz bilgiler için kullanıcılarınıza ipucu verin. Örnek metinler (placeholder) kullanın.
Eğer karakter kısıtlaması yapmanız gerekiyorsa, bu durumu kullanıcıya anlık olarak gösterin.
Kullanıcının yanlış seçimler yapmasını engellemek için geçersiz seçenekleri gizleyin.
