Mobil Form Tasarımı İçin En İyi Uygulamalar

(Bu makale Adobe tarafından desteklenmektedir.) Formlar, tüm mobil etkileşimlerin temel taşıdır; kişi ile aradıkları arasında durur. Her gün, temel çevrimiçi etkinlikler için formlar kullanıyoruz. En son ne zaman bilet aldığınızı, bir otel odası rezerve ettiğinizi veya çevrimiçi bir satın alma işlemi yaptığınızı hatırlayın - büyük olasılıkla bu etkileşimler bir form doldurma adımını içeriyordu.

Formlar sadece bir amaç için bir araçtır. Kullanıcılar bunları hızlı ve karışıklık olmadan tamamlayabilmelidir. Bu makalede, etkili bir form tasarlamanıza yardımcı olacak pratik teknikleri öğreneceksiniz.

Etkili Bir Formu Ne Yapar?

Her formun birincil hedefi tamamlamadır. İki faktörün tamamlama oranı üzerinde büyük etkisi vardır:

• karmaşıklık algısı
  Kullanıcıların yeni bir form gördüklerinde yaptıkları ilk şey, onu tamamlamak için ne kadar zaman gerektiğini tahmin etmektir. Kullanıcılar bunu formu tarayarak yapar. Algı, tahmin sürecinde çok önemli bir rol oynar. Bir form ne kadar karmaşık görünürse, kullanıcıların süreci bırakma olasılığı o kadar artar.
• etkileşim maliyeti
  Etkileşim maliyeti, kullanıcıların hedeflerine ulaşmak için bir arayüzle etkileşime girmek için harcadıkları hem bilişsel hem de fiziksel çabaların toplamıdır. Etkileşim maliyeti, form kullanılabilirliği ile doğrudan bağlantılıdır. Kullanıcılar bir formu doldurmak için ne kadar çok çaba harcarsa, form o kadar az kullanılabilir olur. Yüksek etkileşim maliyeti, girilmesi zor verilerin, bazı soruların anlamını anlayamama veya hata mesajlarıyla ilgili kafa karışıklığının sonucu olabilir.

Formların Bileşenleri

Tipik bir form aşağıdaki beş bileşene sahiptir:

• Giriş alanları
  Bunlara metin alanları, parola alanları, onay kutuları, radyo düğmeleri, kaydırıcılar ve kullanıcı girişi için tasarlanmış diğer alanlar dahildir.
• Alan etiketleri
  Bunlar, kullanıcılara karşılık gelen giriş alanlarının ne anlama geldiğini söyler.
• Yapı
  Bu, alanların sırasını, formun sayfadaki görünümünü ve farklı alanlar arasındaki mantıksal bağlantıları içerir.
• Eylem düğmeleri
  Formda en az bir harekete geçirici mesaj olacaktır (veri gönderimini tetikleyen düğme).
• Geri bildirim
  Geri bildirim, bir işlemin sonucu hakkında kullanıcıyı bilgilendirir. Geri bildirim olumlu (örneğin, formun başarıyla gönderildiğini belirten) veya olumsuz ("Verdiğiniz numara yanlış" gibi bir şey söyleyerek) olabilir.

Bu makale yapı, giriş alanları, etiketler, eylem düğmeleri ve doğrulama ile ilgili birçok yönü kapsar. Bu makalede bahsedilen noktaların çoğu görsel olarak yapılacak ve yapılmayacak örneklere sahiptir; tüm bu örnekler Adobe XD kullanılarak oluşturulmuştur.

Giriş Alanları

Form tasarımı söz konusu olduğunda, bir tasarımcının yapabileceği en önemli şey, yazma ihtiyacını en aza indirmektir. Girdi çabasını azaltmak esastır. Tasarımcılar bu amaca form alanı tasarımına odaklanarak ulaşabilirler.

Toplam Alan Sayısını Küçült

Kullanıcılardan doldurmasını istediğiniz her alan biraz çaba gerektirir. Bir formu doldurmak için ne kadar fazla çaba harcanırsa, kullanıcıların formu doldurma olasılığı o kadar az olur. Bu nedenle, form tasarımının temel kuralı daha kısadır - tüm gereksiz alanlardan kurtulun.

Baymard Enstitüsü, ödeme formlarını analiz etti ve çok uzun veya çok karmaşık bir ödeme sürecinin, ödeme sırasında vazgeçmenin en önemli nedenlerinden biri olduğunu buldu. Çalışma, ortalama ödemenin yaklaşık 15 form alanı içerdiğini buldu. Çoğu çevrimiçi hizmet, varsayılan olarak görüntülenen alan sayısını %20 ila %60 oranında azaltabilir.

Birçok tasarımcı “az daha fazladır” kuralına aşinadır; yine de, kullanıcıları hakkında daha fazla veri toplamak amacıyla ek sorular sorarlar. İlk kayıt sırasında kullanıcılarınız hakkında daha fazla veri toplamak cazip gelebilir, ancak bu cazibeye karşı koyun. Bunu şu şekilde düşünün: Formunuza eklediğiniz her ek alanla, potansiyel bir kullanıcıyı kaybetme şansınızı artırırsınız. Bir alandan edindiğiniz bilgiler yeni kullanıcıları kaybetmeye değer mi? Bir kullanıcının iletişim bilgilerini topladığınız sürece, her zaman daha fazla veri talebinde bulunabileceğinizi unutmayın.

Tüm İsteğe Bağlı Alanları Açıkça Ayırın

İsteğe bağlı alanları optimize etmeden önce, bunları gerçekten formunuza eklemeniz gerekip gerekmediğini kendinize sorun. Ne istediğinizi değil, gerçekten ihtiyacınız olan bilgiyi düşünün. İdeal olarak, formunuzdaki isteğe bağlı alanların sayısı sıfır olmalıdır.

Bir beyin fırtınası oturumundan sonra yine de formunuza birkaç isteğe bağlı soru eklemek istiyorsanız, bu alanların isteğe bağlı olduğunu kullanıcılara açıkça belirtin:

• Zorunlu alanlar yerine isteğe bağlı alanları işaretleyin.
  Mümkün olduğunca az sorarsanız, formunuzdaki alanların büyük çoğunluğu zorunlu olacaktır. Bu nedenle, yalnızca azınlıktaki alanları işaretleyin. Örneğin, altı alandan beşi zorunluysa, yalnızca bir alanı isteğe bağlı olarak işaretlemek mantıklıdır.
• İsteğe bağlı alanları belirtmek için "Opsiyonel" etiketini kullanın.
  Yıldız işaretini ( * ) "isteğe bağlı" anlamında kullanmaktan kaçının. Tüm kullanıcılar, yıldız işaretini isteğe bağlı bilgilerle ilişkilendirmez ve bazı kullanıcıların anlamı nedeniyle kafaları karışır (zorunlu alanları belirtmek için genellikle bir yıldız işareti kullanılır).

Boyut Alanları Buna Göre

Mümkün olduğunda, alan uzunluğunu bir kolaylık olarak kullanın. Bir girdi alanının uzunluğu, alanda beklenen bilgi miktarıyla orantılı olmalıdır. Alanın boyutu görsel bir kısıtlama görevi görecektir – kullanıcı sadece alana bakarak ne kadar metin girilmesi gerektiğini bilecektir. Genel olarak, alan kodları ve ev numaraları gibi alanlar, sokak adresleri için olanlardan daha kısa olmalıdır.

Alan Odaklılık Teklifi

Formunuzdaki ilk giriş alanını otomatik olarak odaklayın. Bir alanı otomatik olarak odaklamak, kullanıcıya bir gösterge ve bir başlangıç ​​noktası verir, böylece formu hızlı bir şekilde doldurmaya başlayabilirler. Bunu yaparak, etkileşim maliyetini azaltarak kullanıcıyı gereksiz bir dokunuştan kurtarırsınız.

Aktif giriş alanını belirgin ve odaklanmış hale getirin. Alan odağının kendisi kristal berraklığında olmalıdır - kullanıcılar bir bakışta odağın nerede olduğunu anlayabilmelidir. Vurgulu bir kenarlık rengi veya kutunun solmuş hali olabilir.

Kullanıcılardan E-posta Adreslerini Tekrar Etmelerini İsteme

E-posta adresi için fazladan bir alanın ürün geliştiriciler arasında bu kadar popüler olmasının nedeni açıktır: Her şirket, sert geri dönüş (geçersiz e-posta adreslerinden kaynaklanan teslim edilemeyenler) riskini en aza indirmek ister. Ne yazık ki, bu yaklaşımı takip etmek geçerli bir adres alacağınızı garanti etmez. Kullanıcılar genellikle adreslerini bir alandan diğerine kopyalayıp yapıştırır.

“Şifreyi Göster” Seçeneğini Sağlayın

Parola giriş alanını çoğaltmak, ürün tasarımcıları arasında yaygın olarak yapılan bir başka hatadır. Tasarımcılar, kullanıcıların bir parolayı yanlış yazmalarını engelleyeceğine inandıkları için bu yaklaşımı izliyorlar. Gerçekte, bir parola için ikinci bir alan yalnızca etkileşim maliyetini artırmakla kalmaz, aynı zamanda kullanıcıların hatasız ilerleyeceğini de garanti etmez. Kullanıcılar alana yazdıklarını görmedikleri için aynı hatayı iki kez (her iki alanda da) yapabilirler ve şifre ile giriş yapmaya çalıştıklarında sorunla karşılaşabilirler. Jakob Nielsen'in özetlediği gibi:

Kullanılabilirlik, kullanıcılar parola girdiğinde zarar görür ve aldıkları tek geri bildirim bir dizi madde işaretidir. Genellikle, parolaları maskelemek güvenliği artırmaz, ancak oturum açma hataları nedeniyle işinize mal olur.

Parola alanını çoğaltmak yerine, kullanıcıların oluşturmayı seçtikleri parolayı görüntülemelerine olanak tanıyan bir seçenek sağlayın. Tıklandığında parolanın maskesini kaldıran bir simgeye veya onay kutusuna sahip olun. Parola önizlemesi, kullanıcıların göndermeden önce verilerini kontrol etmeleri için bir fırsat olabilir.

Veri Alanlarını Dilimleme

Tam ad, telefon numarası veya doğum tarihi isterken alanları bölmeyin. Dilimlenmiş alanlar, kullanıcıyı bir sonraki alana geçmek için ek dokunuşlar yapmaya zorlar. Bazı biçimlendirme gerektiren alanlar için (telefon numaraları veya doğum tarihi gibi), yer tutucu olarak net biçimlendirme kurallarıyla eşleştirilmiş tek bir alana sahip olmak da daha iyidir.

Açılır Menülerden Kaçının

Luke Wroblewski, ünlü bir şekilde, açılır menülerin son çare kullanıcı arayüzü olması gerektiğini söyledi. Açılır menüler özellikle mobil için kötüdür, çünkü daraltılmış öğeler küçük bir ekranda veri girişi sürecini zorlaştırır: Bir açılır menüye seçenekleri yerleştirmek iki dokunuş gerektirir ve seçenekleri gizler.

Seçenek seçimi için bir açılır menü kullanıyorsanız, bunu radyo düğmeleriyle değiştirmeyi düşünün. Tüm seçenekleri gözden geçirilebilir hale getirecek ve ayrıca etkileşim maliyetini azaltacak - kullanıcılar öğeye dokunup bir kerede seçebilirler.

Yer Tutucuları ve Maskelenmiş Girişi Kullanın

Biçimlendirme belirsizliği, biçim tasarımının en önemli sorunlarından biridir. Bu sorunun formdan vazgeçme ile doğrudan bir bağlantısı vardır - kullanıcılar veri sağlamaları gereken formattan emin olmadıklarında, formu hızla terk edebilirler. Biçimi netleştirmek için yapabileceğiniz birkaç şey var.

Yer Tutucu Metni

Bir giriş alanındaki metin, kullanıcılara hangi içeriğin beklendiğini söyleyebilir. "Tam ad" gibi basit alanlar için yer tutucu metin gerekli değildir, ancak belirli bir biçimde veri gerektiren alanlar için son derece değerli olabilir. Örneğin, bir koli takibi için arama işlevi tasarlarsanız, takip numarası alanı için yer tutucu olarak örnek bir takip numarası sağlamanız iyi olur.

Formunuzun, yer tutucu metin ile kullanıcı tarafından girilen gerçek değer arasında net bir görsel ayrım olması çok önemlidir. Başka bir deyişle, yer tutucu metin önceden ayarlanmış bir değer gibi görünmemelidir. Açık bir görsel ayrım olmadan, kullanıcılar yer tutuculu alanların zaten değerleri olduğunu düşünebilir.

Maskeli Giriş

Alan maskeleme, kullanıcıların girilen metni biçimlendirmesine yardımcı olan bir tekniktir. Birçok tasarımcı alan maskelemeyi yer tutucu metinle karıştırır - bunlar aynı şey değildir. Temelde statik metin olan yer tutucuların aksine, maskeler kullanıcı tarafından sağlanan verileri otomatik olarak biçimlendirir. Aşağıdaki örnekte, bir telefon numarası girildiğinde ekranda parantezler, boşluklar ve tireler otomatik olarak belirir.

Maskelenmiş giriş, kullanıcıların bilgileri doğrulamasını da kolaylaştırır. Bir telefon numarası parçalar halinde görüntülendiğinde, bir yazım hatası bulmayı ve düzeltmeyi kolaylaştırır.

Eşleşen Klavye Sağlayın

Mobil kullanıcılar, saha için uygun bir klavye sağlayan uygulamaları ve web sitelerini takdir eder. Bu özellik, ek işlemler yapmalarını engeller. Örneğin, kullanıcıların bir kredi kartı numarası girmesi gerektiğinde, uygulamanız yalnızca tuş takımını göstermelidir. Uygulama genelinde klavye eşleştirmesini tutarlı bir şekilde uygulamak önemlidir (uygulamanızdaki tüm formlarda bu özellik olmalıdır).

Doğru tuş takımını göstermek için HTML giriş türlerini ayarlayın. Form tasarımıyla ilgili yedi giriş türü vardır:

• input type="text" , mobil cihazın normal klavyesini görüntüler.
• input type="email" normal klavyeyi ve '@' ve '.com'u görüntüler.
• input type="tel" 0 - 9 arası sayısal tuş takımını görüntüler.
• input type="number" , sayılar ve semboller içeren bir klavye görüntüler.
• input type="date" , mobil cihazın tarih seçicisini görüntüler.
• input type="datetime" , mobil cihazın tarih ve saat seçicisini görüntüler.
• input type="month" , mobil cihazın ay ve yıl seçicisini görüntüler.

Belirli Bir Aralık İsterken Bir Kaydırıcı Kullanın

Birçok form, kullanıcılardan bir dizi değer sağlamasını ister (örneğin, bir fiyat aralığı, mesafe aralığı, vb.). Bu amaçla, "from" ve "to" olmak üzere iki ayrı alan kullanmak yerine, kullanıcıların aralığı başparmak etkileşimi ile belirtmesine izin vermek için bir kaydırıcı kullanın.

Neden Hassas Bilgi İstediğinizi Açıkça Açıklayın

İnsanlar gizlilik ve bilgi güvenliği konusunda giderek daha fazla endişe duyuyorlar. Kullanıcılar, özel olduğunu düşündükleri bir bilgi talebi gördüklerinde, "Hm, buna neden ihtiyaçları var?" diye düşünebilirler. Formunuz kullanıcılardan hassas bilgiler isterse, bu bilgilere neden ihtiyaç duyduğunuzu açıkladığınızdan emin olun. Bunu, ilgili alanların altına destek metni ekleyerek yapabilirsiniz. Kural olarak, açıklama metni 100 karakteri geçmemelidir.

Statik Varsayılanlara Dikkat Edin

Sistemin kullanıcılar hakkında sahip olduğu bilgilere göre hesaplanan akıllı varsayılanlardan farklı olarak, statik varsayılanlar tüm kullanıcılar için aynı olan formlarda önceden ayarlanmış değerlerdir. Kullanıcılarınızın önemli bir bölümünün (örneğin %95) özellikle zorunlu alanlar için bu değerleri seçeceğine inanmadığınız sürece statik varsayılanlardan kaçının. Niye ya? Hata yapma olasılığınız olduğundan — insanlar formları hızla tarar ve tüm soruları ayrıştırmak için fazladan zaman harcamazlar; bunun yerine, zaten bir değeri olduğunu varsayarak alanı atlarlar.

Kullanıcı Verilerini Koruyun

Jef Raskin bir keresinde, "Sistem, tüm kullanıcı girdilerini kutsal kabul etmelidir" demişti. Bu kesinlikle formlar için geçerlidir. Bir web formunu doldurmaya başlamanız ve ardından yanlışlıkla sayfayı yenilemeniz harikadır, ancak veriler alanlarda kalır. Garlic.js gibi araçlar, form gönderilene kadar bir formun değerlerini yerel olarak korumanıza yardımcı olur. Bu şekilde, kullanıcılar sekmeyi veya tarayıcıyı yanlışlıkla kapatırlarsa değerli verilerini kaybetmezler.

Eylemleri Otomatikleştirin

Veri girişi sürecini olabildiğince sorunsuz hale getirmek istiyorsanız, giriş alanlarının sayısını en aza indirmek yeterli değildir - ayrıca veri girişi için gereken kullanıcı çabasına da dikkat etmelisiniz. Yazmanın etkileşim maliyeti yüksektir - fiziksel klavyeyle bile hataya açık ve zaman alıcıdır. Ancak mobil ekranlar söz konusu olduğunda daha da kritik hale geliyor. Daha fazla yazma, kullanıcının hata yapma şansını artırır. Kullanıcı memnuniyetini artıracağı ve hata oranlarını azaltacağı için gereksiz yazmayı önlemeye çalışın.

İşte bu hedefe ulaşmak için yapabileceğiniz birkaç şey:

otomatik tamamlama

Çoğu kullanıcı, Google'ın arama kutusuna bir soru yazarken otomatik tamamlama ile karşılaşır. Google, kullanıcılara, kullanıcının alana yazdıklarıyla ilgili bir öneri listesi sağlar. Aynı mekanizma tasarımı oluşturmak için de uygulanabilir. Örneğin, bir form bir e-posta adresini otomatik olarak tamamlayabilir.

otomatik büyük harf yap

Otomatik büyük harf kullanımı, ilk harfi otomatik olarak büyük harf yapar. Bu özellik, adlar ve sokak adresleri gibi alanlar için mükemmeldir, ancak parola alanları için bundan kaçının.

otomatik düzeltme

Otomatik düzeltme, yanlış yazılmış gibi görünen sözcükleri değiştirir. Adlar, adresler vb. gibi benzersiz alanlar için bu özelliği kapatın.

Kişisel bilgilerin otomatik doldurulması

Bir adres yazmak, genellikle herhangi bir çevrimiçi kayıt formunun en zahmetli kısmıdır. Alanı önceden girilen değerlere göre doldurmak için tarayıcı işlevini kullanarak bu görevi kolaylaştırın. Google'ın araştırmasına göre, otomatik doldurma, insanların formları %30 daha hızlı doldurmasına yardımcı oluyor.

Veri Girişini Basitleştirmek için Mobil Cihazın Yerel Özelliklerini Kullanın

Modern mobil cihazlar, tonlarca şaşırtıcı yeteneğe sahip gelişmiş cihazlardır. Tasarımcılar, veri girme görevini kolaylaştırmak için bir cihazın yerel özelliklerini (kamera veya coğrafi konum gibi) kullanabilir.

Aşağıda, sensörlerden ve cihaz donanımından nasıl yararlanılacağına ilişkin birkaç ipucu verilmiştir.

Konum Hizmetleri

Kullanıcının ülkesini coğrafi konum verilerine göre önceden seçmek mümkündür. Ancak bazen tam adresi önceden doldurmak, doğruluk sorunları nedeniyle sorunlu olabilir. Google'ın Rehber API'si bu sorunun çözülmesine yardımcı olabilir. Kullanıcının tam konumuna göre doğru öneriler sağlamak için hem coğrafi konum hem de adres ön doldurmayı kullanır.

Konum servislerini kullanarak akıllı varsayılanlar sağlamak da mümkündür. Örneğin, bir "Uçuş bul" formu için, kullanıcının coğrafi konumuna göre kullanıcıya en yakın havaalanı olan "Kimden" alanını önceden doldurmak mümkündür.

Biyometrik Yetkilendirme

Günümüzde metin şifresi kullanmanın en büyük sorunu, çoğu kişinin şifreleri unutmasıdır. İnsanların %82'si parolalarını hatırlayamıyor ve oturumların %5 ila %10'u kullanıcıların bir parola sıfırlamasını gerektiriyor. Şifre kurtarma, e-ticarette çok önemlidir. Kullanıcıların %75'i, çıkış sırasında şifrelerini kurtarmaya çalışmak zorunda kalsalar, satın alma işlemini tamamlamaz.

Parolaların geleceği parolaların olmamasıdır. Bugün bile mobil geliştiriciler biyometrik teknolojilerden yararlanabilir. Kullanıcıların bir parola yazması gerekmemelidir; kimlik doğrulama için biyometrik okuyucuları kullanabilmelidirler - parmak izi veya yüz tarama kullanarak oturum açma.

Kamera

Formunuz, kullanıcılardan kredi kartı bilgilerini veya ehliyetlerinden bilgi vermelerini isterse, kamerayı tarayıcı olarak kullanarak veri girişi sürecini basitleştirmek mümkündür. Kartın fotoğrafını çekme ve tüm ayrıntıları otomatik olarak doldurma seçeneği sağlayın.

Ancak, uygulamanız alanları ne kadar iyi doldurursa doldursun, bunları düzenleme için hazır bırakmanın çok önemli olduğunu unutmayın. Kullanıcılar istedikleri zaman alanları değiştirebilmelidir.

Ses

Apple HomePod, Google Home ve Amazon Echo gibi sesle kontrol edilen cihazlar aktif olarak piyasaya giriyor. Ortak işlemler için sesi kullanmayı tercih edenlerin sayısı önemli ölçüde arttı. ComScore'a göre, 2020 yılına kadar tüm aramaların %50'si sesli arama olacak.

Kullanıcılar sesli komutları kullanarak daha rahat ve kendinden emin oldukça, mobil etkileşimlerin beklenen bir özelliği haline gelecekler. Ses girişi, mobil kullanıcılar için birçok avantaj sağlar - özellikle, örneğin araba kullanırken, kullanıcıların ekrana odaklanamadığı durumlarda değerlidir.

Bir form tasarlarken, alternatif bir veri girişi yöntemi olarak ses girişi sağlayabilirsiniz.

Alan Etiketleri

Net ve Özlü Etiketler Yazın

Etiket, kullanıcılara belirli bir giriş alanında kendilerinden hangi verilerin beklendiğini söyleyen metindir. Net etiketler yazmak, bir formu daha erişilebilir hale getirmenin en iyi yollarından biridir. Etiketler, kullanıcının bir bakışta hangi bilgilerin gerekli olduğunu anlamasına yardımcı olmalıdır.

Açıklamak için tam cümleler kullanmaktan kaçının. Bir etiket yardım metni değildir. Kullanıcıların formunuzu hızla tarayabilmesi için kısa ve net etiketler (bir veya iki kelime) yazın.

Etiketi ve Girdiyi Birbirine Yakın Yerleştirin

Her etiketi giriş alanına yakın koyun, çünkü göz bunların birbirine bağlı olduğunu görsel olarak bilecek.

Kaybolan Yer Tutucu Metni Etiket Olarak Kullanmayın

Satır içi etiketler iyi görünüp değerli ekran alanından tasarruf sağlarken, bu avantajlar, en kritik olanı bağlam kaybı olan önemli kullanılabilirlik dezavantajlarından çok daha ağır basmaktadır. Kullanıcılar bir alana metin girmeye başladığında, yer tutucu metin kaybolur ve insanları bu bilgiyi hatırlamaya zorlar. Basit iki alanlı formlar için sorun olmasa da, çok fazla alana sahip formlar için büyük bir sorun olabilir (örneğin, 7 ila 10). Kullanıcıların verileri girdikten sonra tüm alan etiketlerini geri çağırması zor olacaktır. Şaşırtıcı olmayan bir şekilde, kullanıcı testleri sürekli olarak form alanlarındaki yer tutucuların genellikle kullanılabilirliğe yardımdan daha fazla zarar verdiğini gösterir.

Yer tutucuların kaybolması sorununun basit bir çözümü var: kayan (veya uyarlanabilir) etiket. Kullanıcı, etiket yer tutucusu ile alana dokunduktan sonra etiket kaybolmaz, alanın en üstüne çıkar ve kullanıcının verilerini girmesi için yer açar.

Üst Hizalama Etiketleri

Bir formdaki alanların üzerine alan etiketleri koymak, kullanıcıların formu tarama şeklini iyileştirir. Bunun için göz izleme teknolojisini kullanan Google, kullanıcıların bir form göndermeden önce daha az düzeltmeye, daha az düzeltme süresine ve daha az seğirmeye ihtiyacı olduğunu gösterdi.

Üstten hizalanmış etiketlerin bir diğer önemli avantajı, etiketler için daha fazla alan sağlamasıdır. Uzun etiketler ve yerelleştirilmiş sürümler, düzene daha kolay sığar. İkincisi özellikle küçük mobil ekranlar için uygundur. Form alanlarının ekranın tüm genişliğini genişletmesini sağlayarak, onları kullanıcının tüm girdisini gösterecek kadar büyük hale getirebilirsiniz.

Cümle Durumu Vs. Başlık Davası

Kelimeleri büyük harfle yazmanın iki genel yolu vardır:

• Başlık durumu: Her kelimeyi büyük harf yapın. "Bu Başlık Davası."
• Cümle durumu: İlk kelimeyi büyük harf yapın. "Bu ceza davası."

Etiketler için cümle durumu kullanmanın başlık durumuna göre bir avantajı vardır: Okuması biraz daha kolaydır (ve dolayısıyla daha hızlıdır). Kısa etiketler için fark önemsiz olsa da ("Tam Ad" ve "Tam ad" arasında çok fazla fark yoktur), daha uzun etiketler için cümle durumu daha iyidir. Artık Başlık Davasında Uzun Metni Okumanın Ne Kadar Zor Olduğunu Biliyorsunuz.

Etiketlerde Büyük Harf Kullanmaktan Kaçının

Tamamı büyük harfli metin - tüm harflerin büyük olduğu metin anlamına gelir - önemli okuma içermeyen (kısaltmalar ve logolar gibi) bağlamlarda uygundur, ancak aksi takdirde büyük harf kullanmaktan kaçının. Miles Tinker'in Yazının Okunabilirliği adlı çalışmasında belirttiği gibi, tamamı büyük harfle yazdırma, küçük harf türüne kıyasla tarama ve okuma hızını önemli ölçüde yavaşlatır.

Düzen

Artık kullanıcıların web sayfalarını okumak yerine taradığını biliyorsunuz. Aynı şey formları doldurmak için de geçerlidir. Bu nedenle tasarımcılar, taranması kolay bir form tasarlamalıdır. Verimli, etkili taramaya izin vermek, bir formu doldurma sürecini olabildiğince hızlı hale getirmek için çok önemlidir.

Tek Sütunlu Düzen Kullan

CXL Enstitüsü tarafından yapılan bir araştırma, tek sütunlu formların çok sütunlu formlardan daha hızlı doldurulduğunu buldu. Bu çalışmada, test katılımcıları tek sütunlu bir formu, çok sütunlu bir forma göre ortalama 15.4 saniye daha hızlı tamamlayabildiler.

Birden çok sütun, kullanıcının dikey momentumunu bozar; birden fazla sütunla gözler zikzak çizmeye başlar. Bu, göz sabitleme sayısını ve sonuç olarak tamamlama süresini önemli ölçüde artırır. Ayrıca, çok sütunlu formlar kullanıcıda “Nereden başlamalıyım?” gibi gereksiz sorular ortaya çıkarabilir. ve "Sağ sütundaki soruların önemi soldaki sorulara eşit mi?"

Tek sütunlu tasarımda gözler, yukarıdan aşağıya, her seferinde bir satır olmak üzere doğal bir yönde hareket eder. Bu, kullanıcı için net bir yol belirlemeye yardımcı olur. Ekranlar dikey olarak daha uzun olduğundan ve dikey kaydırma, mobil kullanıcılar için doğal bir hareket olduğundan, bir sütun mobil cihazlar için mükemmeldir.

Bu kuralın bazı istisnaları vardır. Kısa ve mantıksal olarak ilgili alanları aynı satıra yerleştirmek mümkündür (şehir ve alan kodu gibi).

Sorularınızla Bir Akış Oluşturun

Soru sorma şeklin de önemli. Sorular, uygulamanın veya veritabanının mantığına göre değil, kullanıcının bakış açısından mantıklı bir şekilde sorulmalıdır, çünkü kullanıcı ile bir konuşma duygusu oluşturmaya yardımcı olacaktır. Örneğin, bir ödeme formu tasarlarsanız ve tam ad, telefon numarası ve kredi kartı gibi ayrıntıları sorarsanız, ilk soru tam ad için olmalıdır. Sırayı değiştirmek (örneğin isim yerine telefon numarası ile başlamak) rahatsızlığa neden olur. Gerçek dünya konuşmalarında, birinin adını sormadan önce telefon numarasını istemek alışılmadık bir durum olurdu.

Derinlemesine Soruları Sona Erteleyin

Sormak istediğiniz sorular için bir akış tasarlamaya gelince, önceliklendirmeyi düşünün. “Zordan önce kolay” kuralına uyun ve derinlemesine veya kişisel soruları en sona yerleştirin. Bu, kullanıcıları sürece kolaylaştırır; bir ilişki kurduklarında, karmaşık ve daha zorlayıcı soruları yanıtlama olasılıkları daha yüksek olacaktır. Bunun bilimsel bir temeli var: Robert Cialdini'nin tutarlılık ilkesi, birisi bir şeye doğru küçük bir adım attığında veya bir adım attığında, bitirmeye daha fazla mecbur hissetmesini şart koşuyor.

İlgili Alanları Birlikte Gruplandırın

Gestalt psikolojisinin ilkelerinden biri olan yakınlık ilkesi, ilgili öğelerin birbirine yakın olması gerektiğini belirtir. Bu ilke, bir biçimdeki soruların sırasına uygulanabilir. Sorular ne kadar ilgiliyse, birbirlerine o kadar yakın olmalıdırlar.

Tasarımcılar ilgili alanları bölümler halinde gruplayabilir. Formunuzda altıdan fazla soru varsa, ilgili soruları mantıksal bölümlere ayırın. Bölümleri görsel olarak ayırt etmek için aralarında yeterli miktarda beyaz boşluk bırakmayı unutmayın.

Uzun Formun Daha Basit Görünmesini Sağlayın

Kullanıcılara çok soru soran bir formu nasıl tasarlarsınız? Tabii ki, tüm soruları tek bir ekrana koyabilirsiniz. Ancak bu, tamamlama oranınızı engeller. Kullanıcılar bir formu doldurmak için yeterli motivasyona sahip değilse, formun karmaşıklığı onları korkutup kaçırabilir. İlk izlenim hayati bir rol oynar. Genel olarak, bir form ne kadar uzun veya karmaşık görünürse, kullanıcıların boşlukları doldurma olasılığı o kadar az olur.

Bir seferde görünen alan sayısını en aza indirin. Bu, formun gerçekte olduğundan daha kısa olduğu algısını yaratır.

Bunu yapmak için iki teknik var.

Aşamalı Açıklama

Aşamalı açıklama, kullanıcılara doğru zamanda doğru şeyi vermekle ilgilidir. Amaç, doğru zamanda küçük ekrana koymak için doğru şeyleri bulmaktır:

• Başlangıçta, kullanıcılara en önemli seçeneklerden yalnızca birkaçını gösterin.
• Kullanıcı etkileşime girdikçe formunuzun bölümlerini ortaya çıkarın.

Kümeleme

Parçalama, uzun bir formu adımlara ayırmayı gerektirir. Bir formu birkaç adıma bölerek tamamlama oranını artırmak mümkündür. Parçalama ayrıca kullanıcıların bilgileri işlemesine, anlamasına ve hatırlamasına yardımcı olabilir. Çok adımlı formlar tasarlarken, kullanıcıları her zaman ilerlemeleri hakkında bir eksiksizlik ölçer ile bilgilendirin.

Tasarımcılar, hem toplam kaç adım olduğunu söylemek hem de kullanıcının o anda ne kadar uzakta olduğunu göstermek için bir ilerleme izleyicisi (yukarıdaki örnekte gösterildiği gibi) veya bir "Adım # dışı #" göstergesini kullanabilir. Adım göstergesi fazla yer kaplamadığından, ikinci yaklaşım mobil formlar için harika olabilir.

Eylem Düğmeleri

Düğme, kullanıcıları bir işlem yapmaya yönlendiren etkileşimli bir öğedir.

Eylem Düğmelerini Açıklayıcı Yapın

Bir düğmenin etiketi, düğmenin ne yaptığını açıklamalıdır; kullanıcılar sadece düğmeye bakarak bir dokunuştan sonra ne olduğunu anlayabilmelidir. Bunun yerine eylemi açıklayan etiketleri kullanarak "Gönder" ve "Gönder" gibi genel etiketlerden kaçının.

Temizle veya Sıfırla Düğmelerini Kullanmayın

Temizle veya sıfırla düğmeleri, kullanıcıların bir formdaki verilerini silmelerine olanak tanır. Bu düğmeler kullanıcılara neredeyse hiçbir zaman yardımcı olmaz ve çoğu zaman onlara zarar verir. Bir kullanıcının girdiği tüm bilgileri silme riski, yeniden başlamak zorunda kalmanın küçük yararına ağır basar. Bir kullanıcı bir formu doldurur ve yanlışlıkla yanlış düğmeye basarsa, baştan başlamama ihtimalleri yüksektir.

Birincil ve İkincil Düğmeler İçin Farklı Stiller Kullanın

Mümkünse ikincil eylemlerden kaçının. Ancak formunuzda iki harekete geçirici mesaj varsa (örneğin, "İndirim uygula" ve "Siparişi gönder" içeren bir e-ticaret formu), birincil ve ikincil işlemler arasında net bir görsel ayrım sağlayın. Düğmeye daha fazla görsel ağırlık ekleyerek birincil eylemi görsel olarak önceliklendirin. Bu, kullanıcıların yanlış düğmeye dokunmasını önleyecektir.

Parmak Dostu Dokunma Hedefleri Tasarlayın

Küçük dokunma hedefleri, kullanıcıların etkileşimli nesnelerle etkileşim kurmasını zorlaştırdığı için korkunç bir kullanıcı deneyimi yaratır. Parmak dostu dokunmatik hedefler tasarlamak çok önemlidir: daha büyük giriş alanları ve düğmeler.

Aşağıdaki görüntü, ortalama bir yetişkin parmağın genişliğinin yaklaşık 11 mm olduğunu göstermektedir.

Malzeme tasarım yönergelerine göre, dokunma hedefleri en az 48 × 48 DP olmalıdır. Bu boyuttaki bir dokunma hedefi, ekran boyutundan bağımsız olarak yaklaşık 9 mm'lik bir fiziksel boyutla sonuçlanır. Daha geniş bir kullanıcı yelpazesini barındırmak için daha büyük dokunma hedefleri kullanmak uygun olabilir.

Yalnızca hedef boyutu değil, aynı zamanda dokunma hedefleri arasındaki yeterli boşluk da önemlidir. Dokunma hedefleri arasında güvenli bir mesafe bırakmanın ana nedeni, kullanıcıların yanlış düğmeye dokunmasını ve yanlış eylemi başlatmasını önlemektir. “Kabul ediyorum” ve “Kabul Etmiyorum” gibi ikili seçenekler yan yana yerleştirildiğinde, düğmeler arasındaki mesafe son derece önemli hale gelir. Malzeme tasarım yönergeleri, dengeli bilgi yoğunluğu ve kullanılabilirlik yaratacak 8 DP veya daha fazla alana sahip dokunma hedeflerinin ayrılmasını önerir.

Dokunmadan Sonra Düğmeleri Devre Dışı Bırak

Form eylemleri genellikle işlenmek için biraz zaman gerektirir. Örneğin, bir gönderimden sonra veri hesaplaması gerekebilir. It's essential not only to provide feedback when an action is in progress, but also to disable the submit button to prevent users from accidentally tapping the button again. This is especially important for e-commerce websites and apps. By disabling the button, you not only prevent duplicate submissions, which can happen by accident, but you also provide a valuable acknowledgment to users (users will know that the system has received their submission).

Assistance And Support

Provide Success State

Upon successful completion of a form, it's critical to notify users about that. It's possible to provide this information in the context of an existing form (for example, showing a green checkmark above the refreshed form) or to direct users to a new page that communicates that their submission has been successful.

Errors And Validation

Users will make mistakes. It's inevitable. It's essential to design a user interface that supports users in those moments of failures.

While the topic of errors and validation deserves its own article, it's still worth mentioning a few things that should be done to improve the user experience of mobile forms.

Use Input Constraints for Each Field

Prevention is better than a cure. If you're a seasoned designer, you should be familiar with the most common cases that can lead to an error state (error-prone conditions). For example, it's usually hard to correctly fill out a form on the first attempt, or to properly sync data when the mobile device has a poor network connection. Take these cases into account to minimize the possibility of errors. In other words, it's better to prevent users from making errors in the first place by utilizing constraints and offering suggestions.

For instance, if you design a form that allows people to search for a hotel reservation, you should prevent users from selecting check-in dates that are in the past. As shown in the Booking.com example below, you can simply use a date selector that allows users only to choose today's date or a date in the future. Such a selector would force users to pick a date range that fits.

Don't Make Data Validation Rules Too Strict

While there might be cases where it's essential to use strict validation rules, in most cases, strict validation is a sign of lazy programming. Showing errors on the screen when the user provides data in a slightly different format than expected creates unnecessary friction. And this would have a negative impact on conversions.

It's very common for a few variations of an answer to a question to be possible; for example, when a form asks users to provide information about their state, and a user responds by typing their state's abbreviation instead of the full name (for example, CA instead of California). The form should accept both formats, and it's the developer job to convert the data into a consistent format.

Clear Error Message

When you write error messages, focus on minimizing the frustration users feel when they face a problem in interacting with a form. Here are a few rules on writing effective error messages:

• Never blame the user.
  The way you deliver an error message can have a tremendous impact on how users perceive it. An error message like, “You've entered a wrong number” puts all of the blame on the user; as a result, the user might get frustrated and abandon the app. Write copy that sounds neutral or positive. A neutral message sounds like, “That number is incorrect.”
• Avoid vague or general error messages.
  Messages like “Something went wrong. Please, try again later” don't say much to users. Users will wonder what exactly went wrong. Always try to explain the root cause of a problem. Make sure users know how to fix errors.
• Make error messages human-readable.
  Error messages like “User input error: 0x100999” are cryptic and scary. Write like a human, not like a robot. Use human language, and explain what exactly the user or system did wrong, and what exactly the user should do to fix the problem.

Display Errors Inline

When it comes to displaying error messages, designers opt for one of two locations: at the top of the form or inline. The first option can make for a bad experience. Javier Bargas-Avila and Glenn Oberholzer conducted research on online form validation and discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. Users need to spend extra time matching error messages with the fields that require attention.

Hata mesajlarını satır içinde konumlandırmak çok daha iyidir. İlk olarak, bu yerleşim, kullanıcının doğal yukarıdan aşağıya okuma akışına karşılık gelir. İkinci olarak, hatalar kullanıcının girdisi bağlamında görünecektir.

Dinamik Doğrulamayı Kullan

Bir hata mesajı görüntülemeyi seçtiğiniz zaman çok önemlidir. Yalnızca gönder düğmesine bastıktan sonra bir hata mesajı görmek, kullanıcıları hayal kırıklığına uğratabilir. Kullanıcıların formu bitirmesini beklemeyin; veriler girilirken geri bildirim sağlayın.

Gerçek zamanlı geri bildirimle satır içi doğrulamayı kullanın. Bu doğrulama, insanlara yazdıkları bilgilerin formun gereksinimleriyle uyumlu olup olmadığını anında bildirir. 2009'da, Luke Wroblewski satır içi doğrulamayı gönderim sonrası doğrulamaya karşı test etti ve satır içi sürüm için aşağıdaki sonuçları buldu:

• Başarı oranında %22 artış,
• Yapılan hatalarda %22 azalma,
• Memnuniyet derecesinde %31 artış,
• Tamamlanma sürelerinde %42 azalma,
• Göz sabitleme sayısında %47 azalma.

Ancak satır içi doğrulama dikkatli bir şekilde uygulanmalıdır:

• Odak noktasında satır içi doğrulamayı göstermekten kaçının.
  Bu durumda, kullanıcı bir alana dokunur dokunmaz bir hata mesajı görür. Hata, alan tamamen boş olsa bile görünür. Odak noktasında bir hata mesajı gösterildiğinde, form daha doldurmaya başlamadan önce kullanıcıya bağırıyormuş gibi görünebilir.
• Yazdığınız her karakterden sonra doğrulama yapmayın.
  Bu yaklaşım, yalnızca gereksiz doğrulama girişimlerinin sayısını artırmakla kalmaz, aynı zamanda kullanıcıları hayal kırıklığına uğratır (çünkü kullanıcılar alanı tamamlamadan önce hata mesajlarını görebilirler). İdeal olarak, satır içi doğrulama mesajları, kullanıcı yazmayı bıraktıktan veya bir sonraki alana geçtikten yaklaşık 500 ila 1000 milisaniye sonra görünmelidir. Bu kuralın birkaç istisnası vardır: Kullanıcı bir parola oluştururken (parolanın karmaşıklık gereksinimlerini karşılayıp karşılamadığını kontrol etmek için), bir kullanıcı adı oluştururken (bir adın kullanılabilir olup olmadığını kontrol etmek için) ve bir parola yazarken yazarken satır içi doğrulama yapmak yararlıdır. karakter sınırı olan mesaj.

Ulaşılabilirlik

Tüm yeteneklere sahip kullanıcılar, dijital ürünlere erişebilmeli ve bunlardan yararlanabilmelidir. Tasarımcılar, bir ürün oluştururken erişilebilirlik ihtiyaçlarını olabildiğince birleştirmeye çalışmalıdır. Formlarınızı daha erişilebilir hale getirmek için yapabileceğiniz birkaç şey var.

Formun Uygun Kontrast Olduğundan Emin Olun

Kullanıcılarınız büyük olasılıkla formunuzla açık havada etkileşim kuracaktır. Hem güneş ışığında hem de düşük ışıklı ortamlarda kullanımın kolay olduğundan emin olun. Formunuzdaki alanların ve etiketlerin kontrast oranını kontrol edin. W3C, gövde metni için aşağıdaki kontrast oranlarını önerir:

• Küçük metin, arka planına karşı en az 4,5:1 kontrast oranına sahip olmalıdır.
• Büyük metin (14 punto kalın, 18 punto normal ve yukarı), arka planına karşı en az 3:1 kontrast oranına sahip olmalıdır.

Renk kontrastını ölçmek bunaltıcı görünebilir. Neyse ki, bazı araçlar süreci basitleştirir. Bunlardan biri, tasarımcıların kontrast seviyelerini ölçmelerine yardımcı olan Web AIM Color Contrast Checker'dır.

Durumu İletmek İçin Sadece Renge Güvenmeyin

Renk körlüğü (veya renk görme eksikliği) dünyadaki yaklaşık 12 erkekten 1'ini (%8) ve 200 kadından 1'ini etkiler. Renk körlüğünün birçok türü olsa da, en yaygın ikisi protanomali veya kırmızı ışığa duyarlılığın azalması ve döteranomali veya yeşil ışığa duyarlılığın azalmasıdır. Doğrulama hatalarını veya başarı mesajlarını görüntülerken, durumu iletmek için yalnızca renge güvenmeyin (yani giriş alanlarını yeşil veya kırmızı yaparak). W3C yönergelerinin belirttiği gibi, renk bilgi aktarmanın, bir eylemi belirtmenin, bir yanıt vermenin veya bir görsel öğeyi ayırt etmenin tek görsel aracı olarak kullanılmamalıdır. Tasarımcılar, halihazırda görünür olanı vurgulamak veya tamamlamak için renk kullanmalıdır. Kullanıcı arabirimini anlamalarına yardımcı olan ek görsel ipuçları sağlayarak renk körü kişileri destekleyin.

Kullanıcıların Yazı Tipi Boyutunu Kontrol Etmesine İzin Ver

Okunabilirliği artırmak için kullanıcıların yazı tipi boyutunu artırmalarına izin verin. Mobil cihazlar ve tarayıcılar, kullanıcıların yazı tipi boyutunu sistem genelinde ayarlamasına olanak tanıyan özellikler içerir. Ayrıca, formunuzda büyük yazı tipi boyutları için yeterli alan ayrıldığından emin olun.

Tasarım Kararlarınızı Test Edin

Yukarıda bahsedilen tüm noktalar, sektördeki en iyi uygulamalar olarak kabul edilebilir. Ancak bir şeye "en iyi uygulama" denmesi, onun her zaman formunuz için en uygun çözüm olduğu anlamına gelmez. Uygulamalar ve web siteleri büyük ölçüde kullanıldıkları bağlama bağlıdır. Bu nedenle, tasarım kararlarınızı test etmek her zaman önemlidir; form doldurma sürecinin sorunsuz olduğundan, akışın bozulmadığından ve kullanıcıların bu süreçte karşılaştıkları sorunları çözebileceklerinden emin olun. Düzenli olarak kullanılabilirlik testi oturumları gerçekleştirin, kullanıcı etkileşimleriyle ilgili tüm değerli verileri toplayın ve bundan bir şeyler öğrenin.

Çözüm

Kullanıcılar formları doldurmakta tereddüt edebilirler. Bu nedenle, tasarımcılar olarak amacımız, form doldurma sürecini mümkün olduğunca kolay hale getirmektir. Bir form tasarlarken, hızlı ve sürtünmesiz etkileşimler oluşturmaya çalışın. Bazen küçük bir değişiklik - örneğin bir hata mesajını düzgün yazmak gibi - formun kullanılabilirliğini önemli ölçüde artırabilir.

Bu makale, Adobe tarafından desteklenen UX tasarım serisinin bir parçasıdır. Adobe XD, fikirden prototipe daha hızlı geçmenizi sağladığı için hızlı ve akıcı bir UX tasarım süreci için yapılmıştır. Tasarım, prototip ve paylaşım - hepsi tek bir uygulamada. Behance'de Adobe XD ile oluşturulan daha ilham verici projelere göz atabilir ve ayrıca UX/UI tasarımına yönelik en son trendler ve içgörüler hakkında güncel kalmak ve bilgi sahibi olmak için Adobe deneyim tasarımı bültenine kaydolabilirsiniz.