Form Arayüzlerini Kullanıcı Deneyimine Göre Geliştirmek

Haziran 2018

Mobil cihazlar ve tabletler için geliştirilen birçok uygulamaya kullanıcıların giriş yapması gerekiyor. Kullanıcıların bu esnada doldurdukları ve bize veri akışı sağlayan bu formlar ise hala birçok tasarımcı tarafından iyi bir şekilde düzenlenemiyor.

Uygulamalarda kullanıcıyı en çok rahatsız eden konu doldurulması gereken birden fazla formun üst üste karşılarına çıkması oluyor. Gelin bu konuda bize yol gösterecek detayları bir araya toplayalım ve uygulamalarda giriş formlarının en uygun şekilde nasıl kullanabileceğine birlikte bakalım.

Sadece ihtiyacınız olan soruları sorun

Formlarla kulanıcıyı yormamak için yapabileceğiniz ilk şey, gereksiz soruları sormamaktır. Uygulamalarda doldurduğum formlarda çok nadir olarak doğru noktalara değinildiğini görüyorum. Bu da UX tasarımcıların birbirini takip ve taklit ettiğini gözler önüne seriyor.

Şunu unutmamalısınız ki kullanıcıya sunduğunuz form ne kadar kısa ise, onun uygulamayı terk etme ihtimali de o kadar düşük olur. Konumuzun dönüşüm oranı ve nasıl geliştirileceği olmadığını biliyorum. Fakat beklentilerinizi bir kenara koyarsak, bu konu oldukça önemli.

Devam eden çalışmalar gösteriyor ki kullanıcılara ne kadar çok soru sorarsanız, size cevap verme istekleri o kadar azalıyor. Facebook, Twitter ve Google+ gibi sosyal platformların farklı uygulamalara kolayca girilebilmesi adında kullanıcı iznine dayalı API’ler oluşturmasının sebebi de budur. Kullandığınız uygulamalardan en az birinde “Facebook ile giriş yapın” butonunu mutlaka görmüşsünüzdür. Sosyal giriş (social login) olarak adlandırılan bu yöntem; tek bir tıklama ile farklı kaynaklar üzerinden giriş yapma imkanı sağlıyor ve dönüşüm oranlarını %20-60 oranında geliştiriyor. Tek bir tıklama ile giriş, birçok ayrıntıyı içeren formlar doldurmanıza kıyasla %60 daha etkili olabiliyor.

Asıl konuya dönecek olursak; ne kadar az soru sorarsanız kullanıcıların cevap vererek giriş yapma olasılığı o kadar yükselecektir. Asıl sinir bozucu olan hiçbir işinize yaramayacak birçok ayrıntılı bilginin ayıklanmasına harcayacağınız zaman olur. Eğer bir dijital ürün satıyorsanız; kullanıcının mesleğini sormanıza gerek yoktur. Eğer bir ayakkabı satıyorsanız; ödeme, sipariş teyidi ve nakliye için adres, kredi kartı bilgileri ve e-posta sormanız yeterlidir. Başka bir şey gerekmez.

Günümüzdeki en büyük sorunlardan biri e-ticaret uzmanlarının kullanıcı deneyimi hakkında fikir sahibi olmaması. E-ticaret yapan bir şirket olarak beni kaybetmeyi göze alıyorsanız, durup düşünmeniz gerekir. Çünkü bir potansiyel müşteri olarak beni kaybettiğinizde, geri kazanmanızın çok zor olmasının dışında rakibinizi kazandırmış olursunuz. Bu nedenle ihtiyacınız olandan çok bilgi sorarak beni uzaklara itmemelisiniz.

Eğer kullanıcı ile ilgili daha fazla bilgi elde etmek istiyorsanız, kullanıcı uygulamaya giriş yaptıktan ve ürünü satın aldıktan sonra bu bilgileri sorabilirsiniz. Bu durumda bilgi vermek kullanıcının iradesine bağlı olur, fakat en azından onu kaybetmiş olmazsınız.

Yukarıda anlattıklarım, formlar ile kullanıcı deneyimi geliştirmenin ilk adımı diyebiliriz. Formlarınızı geliştirmek için bir başlangıç noktası olabilir.

Tek sütunlu layout kullanın

Eğer kullanıcıların kafasının karışmasını istemiyorsanız tek sütun düzenine dayanan bir tasarım kullanmalısınız. Böylece kimsenin hangi alanda olması gerektiği ile ilgili kafası karışmayacaktır ve bir sonraki adıma kolayca geçilecektir. Eğer form iki sütunlu ise, kullanıcı sütuna ya da satıra göre formu doldurmaya çalışır. Bu da karışıklığa sebep olur.

Formda satırlardan oluşan bir giriş alanı varsa, ortada bir karışıklık olmayacağından, giriş daha hızlı olacak ve dolayısıyla hayal kırıklığı ihtimali de düşük olacaktır. Bu aynı zamanda kullanıcının hiçbir alanı atlamadan doldurmasına yardımcı olur ve göz hareketlerini azaltır.

Etiketlere özen gösterin

Formlarda etiketleme oldukça önemlidir. Etiketler (ad, soyad, e-posta, vs) olmadan doldurulması gereken alanları anlamak mümkün olmayacağından, form yararsız hale gelir. Etiketleri göstermenin çeşitli yolları olduğu gibi bu konuda size yardımcı olacak bazı kurallar da bulunuyor.

İlk olarak, etiketleri her zaman yazı giriş alanlarının dışında bulundurun. Aksi halde etiketler kullanıcı alanları içinde ve kullanıcı bir alana tıkladığında kaybolur ve bu önemli bir sorundur. Kullanıcılar her zaman nereyi dolduracağını görmek ister. Kullanıcı alandayken etiketin kaybolması, kullanıcının işlemini zorlaştıracaktır.

Eğer formda dikey alan yeterli değilse, etiketleri yazı giriş alanının solunda bulundurabilirsiniz. Fakat yeterli alan varsa, giriş alanının üstünü tercih etmelisiniz. Etiketleri sola hizalayın, böylece insan gözünün formu daha kolay taramasına yardımcı olursunuz. Batı dünyası için tasarım yapıyorsanız, bunu aklınızdan çıkarmayın. Çünkü biz soldan sağa okuruz ve bu yüzden ilk görmemiz gerekenler solda olmalıdır.

İlişkili içerikleri gruplara ayırın

Formunuz çok uzun olsa da, ilişkili içerikleri gruplara ayırarak ve renkler ile diğer görsel unsurları etkili kullanarak daha iyi görünmesini sağlayabilirisiniz. Bu, yakınlık ilkesidir. İnsan gözü birbirine yakın yerleştirilmiş unsurların birbiri ile ilişkili olduğunu algılar. Bu durum örneğin 3 alanlı formların daha rahat doldurulmasına yardımcı olur.

Eğer bu şekilde bir form yapısı oluşturursanız, alanların temiz ve organize görünmesini sağlarsınız. Bu grupları birbirinden ayırmak için kullanabileceğiniz en kolay yöntem yatay çizgiler kullanmaktır. Ya da aynı etkiyi yaratmak için çizgiler ya da arkaplan rengi kullanabilirsiniz.

Birincil ve ikincil eylemleri belirtin

Formlarda mutlaka kullanıcının ilerleyebileceği birincil eylemleri ve “iptal”, “geri” gibi butonlarla vazgeçebileceği ikincil eylemleri belirtmelisiniz. Bu, kullanıcılarınızın ilerlemek istemediği zaman vazgeçmesine imkan verecek olsa da, orada bulunması gerekiyor. Yine de her iki butona da aynı şekilde önem vermeniz gerekmiyor.

Çözüm, ikincil eylemi azaltacak şekilde farklı görsel etkileri olan iki buton tasarlamak olabilir. “İptal” butonunun “İlerle” butonu ile eşit statüde olması gerekmez çünkü o kadar da önemli bir buton değildir. Bu, başarılı bir eylemdir çünkü kullanıcıyı doğru bir şekilde yönlendirir.

Mobil optimizasyona önem verin

Web üzerinde birçok form ve sayısız UX tasarımcı olmasına rağmen, formların çok büyük bir kısmının hala mobil uyumlu olmaması oldukça üzücü bir durum. Kabul etmeliyiz ki web dünyasının oldukça büyük bir kısmını mobil devralıyor. Bu nedenle iyi bir kullanıcı deneyimi için mobil optimizasyon düşünülmesi gereken ilk konular arasında geliyor. Mobilden internet kullanımının her geçen gün daha da arttığı bu günlerde, mobil cihazlarda formun yarısının görünmemesi ve geliştiricilerin bunu görmezden gelmesi büyük sıkıntılara neden oluyor.

Her alan ile eşleşen klavye kullanmak, bu konuda iyi bir başlangıç noktasıdır. Eğer kullanıcının kredi kartı bilgileri istenecekse, standart klavye yerine numaraların göründüğü numpadi kullanabilirsiniz.

Check-out işlemler sırasında elinde kredi kartı olan bir kullanıcı ile karşı karşıya olduğunuzu bilmelisiniz. Kullanıcı size ayrıntıları iletecek ve parasına erişme izni verecek. Burası en ufak bir hatanın ya da zayıflığın olmaması gereken alandır, çünkü kullanıcının burada vazgeçme olasılığı yüksektir.

Kullanıcı hatalarını azaltın

Bir tasarımcı olarak sadece kullanıcı hatalarını azaltmakla kalmamalı, aynı zamanda kullanıcıların hata yaptıklarında takip edebilecekleri farklı bir yol haritası oluşturmalısınız. Bunun için bir takım etkileşim tasarımı kalıpları kullanabilirsiniz.

Hataları azaltma konusunda anahtar kelime her zaman doğrulama (validation) olur. Eğer satır içinde (inline) bir doğrulama kullanırsanız, kullanıcının yanlış yapma ihtimali düşük olur. Doğrulama konusunda, kullanıcının 16 hanelik kredi kartı numarasını 15 hane olarak girdiğinde ya da e-posta adresini yazarken sonuna “.com” uzantısı yerine “.xom” yazdığında karşısına çıkan uyarıları örnek gösterebiliriz. Böyle bir durumda sistemi “Sonraki adım” ya da “Gönder” gibi butonlara tıklandığında uyarı verecektir.

Satır içi doğrulamanın avantajı anlık geri bildirim veriyor olmasıdır. Kullanıcı, hatasını hemen fark eder ve bunu yerinde çözer. Eğer hatalı gönderilen formu,düzeltilmesi için tekrar kullanıcının karşısına çıkarırsanız, bu durum oldukça sinir bozucu olacaktır.

Satıriçi doğrulamanın kendi kuralları vardır. Hataları yakalayıp kullanıcıya geri bildirim verirken, zamanlama çok önemlidir. Bu aşamada zor olan, kullanıcıya yanlış olanın ne olduğunu bildirmek olabilir. Hatayı göstermek için kırmızı ile ilgili alanı vurgulamak yeterli olmayabilir. Bu nedenle neyin hatalı olduğunu açıkça belirtmelisiniz. Bırakın kullanıcı hatasının ne olduğunu açıkça görsün, böylece fazla çaba sarf etmeden düzelsin. Kullanıcının işini kolaylaştırırsanız, formu doldurma konusunda daha istekli olacaktır.

Veri kalıpları (input masks) da hataları azaltma konusunda size yardımcı olabilecek bir yöntemdir. Taşınabilir cihazlarda başarıyla kullanılan bu kalıplar, masaüstünde epey yardımcı olabilir. Veri kalıpları hataları önlemekle kalmaz, aynı zamanda cevabın nasıl olabileceği hakkında kullanıcıya bilgi verir. Veri kalıpları sayesinde kullanıcı tutarlı bir format ile bilgilerini girebilir.

Veri kalıpları aynı zamanda bilgilerin derlenmesinde de yardımcı olacaktır. Örneğin doğru bir veri kalıbı kullanıldığında; kullanıcı kredi kartı bilgilerini yazacağı alana yanlışlıkla boşluk ya da bir noktalama işareti koyarsa, sistem bunun düzeltilmesi konusunda harekete geçer.

Yardım ipuçlarının önemi

Kullanıcıların hata yapmasını en aza indirmek için onlara yardım edecek ipuçları kullanabilirsiniz. İlgili alanın üzerinde ikinci bir etiket gibi kullandığınız ipuçları, kullanıcıları yönlendirecektir. Buranın ayrı tutulan bir bilgi alanı olmasında sorun yok, çünkü (etiket gibi) önemli bir konu değildir ve rahatsızlık hissettirmeden formun doldurulmasına rehberlik eder. İpuçları hatanın azalmasını sağladığı gibi formun doldurulma hızını da artırır.

CAPTCHA kullanmayın

CAPTCHA, sınama ya da yanıt doğrulaması olarak bilinen bir güvenlik önlemidir. CAPTCHA spamları engelleme ve şifre çözme koruması sağlanmasında yardımcı olur.

Peki bu kadar önemli bir işlevi olan CAPTCHA formlarda neden kullanılmamalıdır? Çünkü sinir bozucu. Bu konunun detayına çok fazla inmeyeceğim fakat kullanıcıların büyük bir kısmının CAPTCHA’lardan nefret ettiğini söyleyebilirim.

Bazı formlar için CAPTCHA önemli olabilir, ama hepsinde değil. Kullanıcıların kredi kartı bilgilerinin girildiği bir formda CAPTCHA’ya gerek yoktur. Çünkü kredi kartı bilgisi girilen bir form varsa, bu formu dolduran da bir insandır, robot olamaz.

Özet

Webde olsun, mobilde olsun formlar her zaman geliştirilebilir unsurlardan biridir. Form tasarımları üzerinde çalışırken; hedef kitlenizi, ziyaretçilerinizi ve onların ihtiyaçlarını göz önünde bulundurmalısınız. Tabii ki her zaman iyi bir deneyim için göz önünde bulundurmanız gereken bazı yöntemler vardır. Asıl konu bu yöntemlerden size en uygun olanlarını tercih ederek formlarda kullanmanızdır.

Gözden kaçırdığım veya eklemek istediğiniz bir şey olursa yorum kısmına yazabilirsiniz.