Bilmeniz Gereken 4 Form Tasarım UX İpuçları (Örneklerle)

Formları kullanıcı verilerini toplamak için basit bir yol olarak düşünmeye meyilliyiz, ancak bazen de bir yoldur. tek yol, kullanıcılarımız için Bizimle iletişime geçin. Kullanıcıları yapabileceğimizi düşünmek muhtemelen çok yanlıştır. Aşk form doldurmak, ancak kesinlikle mümkün Onları çok rahatsız etmeyen çözümler bulmak için, ve süreç boyunca onlara yardım et.

İnternette gezinirken bazen programatik olarak doğru olan ama en muhtemel şekilde tasarlanan şaşırtıcı çözümler bulabiliriz. Kullanıcıların deneyimsizliği nedeniyle siteyi terk etmesini sağlar.

Formlarımız iyi tasarlanmışsa, sadece kullanıcılarımızı değil, aynı zamanda uğraşabilecekleri arka uç ekibimizi de memnun edebiliriz. çok daha az kullanıcı girişi hatası. Böylece, bu yazıda, nasıl yapabildiğimize bir göz atacağız. kullanıcı girişi hatalarını en aza indirir ve hala kullanıcılarımızı mutlu et.

Kullanıcı İhtiyaçlarını Tahmin Et

Web siteleri ve uygulamalar var farklı kullanıcı tabanları ve hedefleri, ve aynı lokasyon bile, sadece en sık kullanılanları isimlendirmek için farklı türlerde veri toplayan birçok form barındırabilir:

• Giriş formları
• Kayıt formları
• Kullanıcı profili formları
• Bültene kaydolma formları
• Ödeme formları
• Kullanıcı anketleri
• İletişim formları
• Yorum formları
• Arama formları

Tüm bu form türleri farklı şeyler istemek. Bir ödeme formu tasarlarken, kullanıcıları güvenlik konusunda güvenilir bir şekilde güvence altına almak çok önemlidir, ancak yorum formları için bu iyi bir fikirdir. emojiyi veya kullanıcıların gerçek hallerini ifade etmelerini sağlayan diğer yöntemleri ekleyin.

Bununla birlikte, benzer sitelerin bile tüm sitelerin kendilerine göre farklı tasarlanmış olması gerekebilir. benzersiz kullanıcı tabanı. Tasarım sürecine geçmeden önce, her zaman için iyi bir fikirdir Kullanıcılarımızın neye ihtiyacı olduğunu tahmin etmek, ve buna göre tasarım.

Örnek: Kullanıcı İhtiyaçlarını Hedefleyen Sosyal Girişler

Codepen'in giriş formu Github ile en üstte üç sosyal giriş içermektedir. Bu seçim çoğu site için mantıksız olur.

Fakat Codepen için mükemmel, Kullanıcı tabanları, çoğu Github hesaplarıyla giriş yapmak veya geliştirme hesaplarını bir kerede birbirine bağlamak isteyecek olan geliştiricilerden oluştuğundan.

İlk önce Mobil düşünün

Mobil ve masaüstü kullanıcıları farklı ihtiyaçlara sahiptir, ancak formları doldurmak mobil ekranda çok daha büyük bir zorluktur, fiziksel bir klavyeden daha el hareketleri kullanmak mobil-birinci yaklaşım kullanılabilir formlar tasarlamak istediğimizde bizi daha ileriye götürebilir.

Dahası, mobilde iyi çalışan birçok UI modeli masaüstünde de iyi çalışacaktır.

Örnek: Tappable Kontrolleri

Yüksek kaliteli mobil formlar hayal bile edilemez görünür kontroller hangi konuda mobil kullanıcılar kolayca dokunabilir parmaklarıyla.

Web tasarım konferansının bültene kaydolma formu Bir Etkinlik Apartı, mobil kullanıcıların ekrana erişme biçimine adapte olur - iki dokunması kolay giriş alanı ve bir parmak ucunda düğme.

Metin girişi alanları her zaman olduğu gibi daha yüksektir, böylece mobil kullanıcılar bunlara kolayca dokunabilir ve bir kene simgesi olan büyük, turuncu renkli buton, kullanıcıları form göndermeye teşvik eder.

Sitenin masaüstü versiyonu aynı form tasarımını kullanır, aynı zamanda iyi görünüyor ve daha büyük ekranlarda iyi çalışıyor.

Örnek: Harcanabilir Girdi

Mobil için formlar tasarlarken, nasıl yapabileceğimizi düşünmek her zaman önemlidir. kullandığımız alanı en aza indirgemek. harcanabilir girdi UI tasarım deseni son zamanlarda oldukça popüler hale geldi ve özellikle mobil cihazlarda iyi çalışıyor.

Booking.com bu kalıbı mobil sitesindeki arama formunda kullanır. Kullanıcı arama alanına dokunduğunda, hareketler için daha fazla yer bırakın, ve önerilerin yer aldığı bir seçim listesi de.

Kullanıcı alandan çıktığında küçülür ve fazladan bilgi kaybolur.

Örnek: Morphing Button

Geçiş düğmeleri Harcanabilir giriş modelini bir adım daha ileri götürün, kullanıcılar ilk önce bir düğme gördüğünde forma dönüştürmek onlar üzerine dokunun.

Aşağıdaki ekran görüntüsü, Startup'ın birçok yaratıcı çözümü de içeren yenilikçi form tasarımı hakkındaki mükemmel makalesinden alınmıştır..

Girdi Almayı Kolaylaştırın

Uzun formlar kullanıcıları caydırma eğilimindedir. Yapabileceğimiz en iyi şey sadece gerçekten ihtiyacımız olan girişi isteyin. Bu, yalnızca kullanıcı deneyimi açısından değil, aynı zamanda kullanıcılar, kişisel bilgilerinden dolayı çok fazla bilgi vermekte tereddüt edebilir. Gizlilik endişeleri.

Ancak bazen yine daha uzun formlarla birlikte gitmek zorunda. Bu durumda, bu iyi bir fikirdir onları küçük parçalara ayırın, ve parçalara ardışık ekranlar olarak hizmet et.

Çoğu e-Ticaret sitesi (örneğin, Amazon) alışveriş sepetindeki terk oranlarını azaltmak için bu çözümü kullanıyor.

Form alanlarını doldurmayı kolaylaştırmak istiyorsak, kuralın ilkesi: dikkat dağıtıcı ve kullanıcı eylemlerini azaltın mümkün olduğunca.

Örnek: Kişiselleştirilmiş Giriş Seçici

Tarih seçicileri veya renk seçicileri gibi farklı içerik seçiciler, yalnızca doğru girişi almayı kolaylaştırmaz, aynı zamanda formu da oluşturur Daha çekici, ve önemli ölçüde kullanıcı hatalarını azaltmak.

Todoist listesi alma uygulaması kişiselleştirilmiş ipuçları verir Kullanıcı günleri geçtiğinde tarih seçicisinin içinde.

Örneğin, aşağıdaki ekran görüntüsünde, kullanıcı Ağustos 31'de zaten 2 gerekli görevi olduğunu görebilir ve görevler için doğru tarihi belirlerken bu bilgiyi dikkate alabilir. Üretkenlik, kullanıcının asıl meselesi olduğu bir uygulama için mükemmel bir fikir.

Örnek: Sürükle ve Bırak Girişi

Sürükle ve bırak tasarımları genellikle dosya yükleme alanlarıyla iyi çalışır, özellikle de kullanıcıların resim yüklemesi gereken yerlerde.

Muhtemelen kullanıcı işlemlerini sıradan bir Dosya Yükle düğmesine kıyasla daha az azaltmazlar, ancak daha kolay hale getirirler kullanıcının hangi dosyayı yüklemek istediğini seç, bu nedenle yanlış dosya gönderme şansını azaltmak.

WordPress.com, post editör biçiminde zarif ve sezgisel bir sürükle ve bırak kullanıcı girişi arayüzü sunar. küçük minik resimler ve önceden yüklenen dosyaların görsel temsili daha fazla kullanıcının hızlıca yüklemeyi yürütmesine yardımcı olma.

Örnek: Dikkatini Çıkarmak İçin Yer Paylaşımı

Formumuzu doldururken kullanıcılar dikkatini dağıtırsa, hatalara daha yatkındır ve daha kolay sinirlenirler

İçerik kaplamaları minimalist form tasarımına harika bir alternatif. Kullanılırlar daha karmaşık siteler tarafından Aynı ekranda farklı türde bilgileri görüntülemek isteyenler.

Aşağıdaki ekran görüntüsünde, Booking.com'un masaüstü sürümünü görebilirsiniz. Kullanıcılar arama formuna geldiğinde içeriğin geri kalanı grimsi bir kaplama ile kaplanmış onlara yardım için form doldurma işlemine odaklanmaya devam et.

Kullanıcılara Geri Bildirim Ver

Verilmesi doğru zamanda doğru geribildirim kullanıcı deneyimini önemli ölçüde artırabilir.

Form tasarımında, var iki tür kullanıcı geri bildirimi:

1. Geri bildirim verildi önce form gönderme - amacıyla hataları azaltmak ve vazgeçme oranları oluşturmak, ilerleme izleyicileri, kullanıcıları hemen doğru giriş için ödüllendiren anında giriş doğrulama veya yardımcı ipuçları gibi
2. Geri bildirim verildi sonra form gönderme - kullanıcıların bilmesini sağlamak için bir hata yaptılar, hata mesajları gibi

Kullanıcılarımızın ihtiyaç duyduğu kullanıcı geri bildirimlerinin türü, hedef kitlenizin özelliklerine ve sitemizin hedefine bağlıdır..

Örnek: İlerleme İzleyici

Anketler ve çoğu e-Ticaret ödeme formu gibi bir sayfadan daha uzun formlar, ilerleme izci tasarım deseni İlerleme izci vermek anlık görsel geribildirim Kullanıcılara durumları hakkında bilgi vermek ve süreci devam etmeleri için teşvik etmek.

SnapSurveys anketi yaratıcısı web uygulaması, kullanıcıların gönderebilmesi için gönderme düğmelerinin hemen üzerinde küçük bir ilerleme izleyicisi gösteriyor doğal olarak onu görmek.

İlerleme izleyicide herhangi bir etiket kullanılmıyor, ancak tasarlandığı şekilde hedefini netleştirir - çevrelerin sayısı adım sayısını gösterir, daha önce uygulanmış olan adımlar mavi olur ve kullanıcılar kaç adımın hala onlardan önde olduğunu kolayca görebilirler.

Örnek: Gerçek Zamanlı Doğrulama

Body Shop kozmetik perakendeci kullanır gerçek zamanlı doğrulama Hataları ortadan kaldırmak ve form doldurma işleminin UX'ini iyileştirmek için Kullanıcı Profili formunda.

Kullanıcılar formu doldururken girişler kontrol edilir ve doğru ve yanlış cevaplar hemen ile gösterilir. kolayca ayırt edilebilir simgeler biraz sağda, ama yine de görünür alanda.

Örnek: Etkileyici İpuçları

Anlaşılabilir mikroskop Aynı zamanda form tasarımında başarılı kullanıcı geri bildiriminin önemli bir parçasıdır. Tanım olarak, bir web sitesinin mikroskobu, küçük metin parçaları farklı elemanlarda kullanılan - etiketler, düğmeler, hata mesajları, ipuçları vb..

Giriş formunda Barclay'ın bankacılık grubu, kullanıcıların potansiyel olarak yardımı ile sorabilecekleri soruları yanıtlar. iyi tasarlanmış ipuçları o dahil anlaşılması kolay mikroskop.

İpuçları küçük arkasına gizlenmiş? simgeler kullanıcıları rahatsız etmemek Giriş formunun nasıl doldurulacağını kim bilebilir ki her zaman mevcut olmak emin olmayan kullanıcılar için.

Bazı ipuçlarını bile içeriyor açıklamalı bir banka kartının küçük bir görüntüsü Böylece kullanıcılar giriş formuna girmeleri gereken verileri kolayca bulabilirler..