Neden gönderme düğmesi durumları önemlidir
Bir gönderme düğmesi sadece bir görsel öğe değildir. Kullanıcıya eylemin kabul edildiği, işlendiği veya reddedildiği konusunda bilgi veren bir karar noktasıdır. Durumlar eksik veya tutarsız olduğunda kullanıcılar tekrar tekrar tıklayabilir, formu terk edebilir veya sistemin bozulduğu varsayabilir. Net durumlar, her adımda mevcut durumu görünür kılmak sayesinde destek yükünü azaltır ve tamamlama oranlarını artırır.
Temel durumlar ve karar kriterleri
Tasarımcılar en az dört birincil durumu tanımlamalıdır:
- Boşta: Düğme etkileşime hazırdır. Etiket eylemi tanımlamalıdır, örneğin "Mesaj gönder" veya "Siparişi ver."
- Yükleniyor: Gönderim devam etmektedir. Düğme daha fazla tıklamayı devre dışı bırakmalı ve bir dönen simge veya iskelet göstergesi göstermelidir.
- Başarılı: Gönderim tamamlandı. Etiket sonucu onaylamalıdır, örneğin "Mesaj gönderildi" veya "Sipariş verildi."
- Hata: Gönderim başarısız oldu. Etiket ne olduğunu açıklamalı ve bir sonraki adımı önermelidir, örneğin "Tekrar deneyin" veya "Hataları düzeltin."
Durum değiştirilmesi konusunda karar vermek için bu kriterleri kullanın:
- Tıklama olayı gerçekleştiği anda ve ağ isteği başlamadan önce yüklenme durumuna geçin.
- Gönderimden önce doğrulama başarısız olursa yalnızca boşta durumuna dönün.
- Sunucu tamamlamayı onayladığında yalnızca başarı durumuna geçin.
- Sunucu bir hata yanıtı döndürdüğünde veya istek zaman aşımına uğradığında hata durumuna geçin.
Düğmeyi süresiz olarak yüklenme durumunda tutmayın. Makul bir süre içinde yanıt gelmezse bunu hata durumu olarak değerlendirin ve kullanıcıya tekrar deneme imkanı tanıyın.
Uygulama adımları
- Form yolculuğunu haritalayın. Geçerli gönderim, geçersiz alanlar, sunucu başarı, sunucu hata, ağ zaman aşımı ve tekrarlı tıklama dahil her olası sonucu belirleyin.
- Her durum için etiketleri ve simgeleri tanımlayın. Metni kısa ve eyleme yönelik tutun. "İşleniyor" gibi genel ifadeleri bağlam olmadan kullanmayın.
- Etkileşim kurallarını ayarlayın. Tekrarlı gönderimleri önlemek için yükleme sırasında düğmeyi devre dışı bırakın. Yeniden gönderime izin verilip verilmediğine bağlı olarak boşta, başarı veya hata durumunda tekrar etkinleştirin.
- Form alanı doğrulamasıyla koordinasyon sağlayın. Satır içi alan hatalarının, kullanıcıların hangi alanları düzeltmesi gerektiğini bilmesi için düğmenin hata durumuna geçmesinden önce görünmesi gerekir.
- Durum değişikliklerini yardımcı teknolojilere bildirin. Ekran okuyucu kullanıcılarının düğmenin yükleme durumundan başarı veya hata durumuna geçtiğini anlaması için canlı bölgeler veya uyarı metni kullanın.
- Gerçek girdilerle test edin. Yavaş bağlantı, geçersiz yükler ve hızlı çift tıklamaları deneyerek durum geçişlerinin beklendiği gibi çalıştığını doğrulayın.
Ticaretsiz örnekler ve tartışmalar
Yükleme sırasında düğmeyi devre dışı bırakmak tekrarlı gönderimleri önler, ancak istek takıldıysa kullanıcıları kapanabilir. Örneğin, ödeme isteğinin saniyeler sürdüğü ve düğmenin devre dışı kalduğu hayali bir ödeme formunu düşünün. Kullanıcı sayfanın donduğu düşünerek ayrılabilir. Daha güvenli bir yaklaşım, yükleme durumunda iptal seçeneği göstermek veya belirli bir aralıkta düğmenin hata durumuna dönmesini sağlayan bir zaman aşımı kullanmaktır.
"Tamam" gibi genel bir başarı mesajı göstermek daha basit bir uygulamadır, ancak kullanıcılara ne olduğunu söylemez. Hayali bir iletişim formunda "Mesaj gönderildi" daha açıklayıcıdır çünkü belirli eylemi onaylar. Ticaretsiz örnek olarak, bu durum her form için benzersiz kopyaya ihtiyaç duyar ve içerik bakımını artırır.
Düğme içindeki bir dönen simge etkinliği iletir, ancak metin için yer azaltır. Küçük mobil ekranlarda, dar bir etiketten ziyade simge odaklı bir yükleme durumu daha açıklayıcı olabilir. Ancak simge odaklı durumlar metin etiketine güvenen kullanıcılar için belirsiz olabilir, bu nedenle simgeleri erişilebilir metinle birleştirin.
Veri işleme güvenlik önlemleri
Başarılı bir kullanıcı arayüzü durumunun sunucunun veriyi aldığını asla varsaymayın. Düğme yalnızca sunucu onaylanmış bir durum yanıt verdiğinde başarı durumuna geçmelidir. İstemci başarı gösterildikten sonra bağlantıyı kaybederse, kullanıcı verinin kaydedildiği varsayabilirken aslında kaydedilmemiş olabilir.
Form verilerini istek beklerken yalnızca bellekte geçici olarak saklayın. Hassas gönderim verilerini ürünün buna açık bir nedeni ve kullanıcı onayı yoksa yerel depolamaya yazmayın. Başarı veya hata sonrası geçici değerleri temizleyin.
Hataları sunucu tarafında sorunları teşvik etmek için yeterli ayrıntıyla kaydedin, ancak ham yığın izlerini veya veritabanı bilgilerini düğme hata mesajında göstermeyin. Kullanıcılara "Gönderilemedi. Tekrar deneyin." gibi güvenli bir mesaj gösterin ve teknik ayrıntıları içsel inceleme için saklayın.
Yaygın hatalar
- Sunucu yanıt vermeden düğmeyi başarı durumuna değiştirmek, istek daha sonra başarısız olursa kullanıcıları yanıltabilir.
- Hata sonrası düğmeyi devre dışı bırakmak, kullanıcıların düzeltme yapıp yeniden göndermesini engeller.
- Boşta ve başarı durumları için aynı etiketi kullanmak, eylemin tamamlanıp tamamlanmadığının anlaşılmasını imkansız kılar.
- Klavye ve ekran okuyucu kullanıcılarını göz ardı etmek, durum değişikliklerinin yardımcı teknolojiler için görünmez olmasına neden olur.
- Alan düzeyindeki hataları yalnızca düğmede göstermek, kullanıcıların hangi girdinin hataya neden olduğunu tahmin etmeye zorlar.
Ön-yayın kontrol listesi
- [ ] Boşta, yükleme, başarı ve hata durumları her gönderme düğmesi için tasarlanmıştır.
- [ ] Düğme tekrarlı tıklamaları önlemek için yükleme sırasında devre dışı bırakılır.
- [ ] Başarı etiketi genel bir kelime değil, belirli eylemi onaylar.
- [ ] Hata etiketi arızayı açıklar ve tekrar deneme yolu sunar.
- [ ] Alan doğrulama hataları düğme durumundan ayrı olarak görünür.
- [ ] Durum değişiklikleri ekran okuyuculara bildirilir.
- [ ] Davranış yavaş bağlantılarda ve hızlı çift tıklamalarla test edilir.
- [ ] Geçici form verileri tamamlanma veya başarısızlık sonrası temizlenir.
İyi tasarlanmış gönderme düğmesi durumları, basit bir tıklamayı kullanıcı ve sistem arasında şeffaf bir konuşmaya dönüştürür. Kullanıcılar ne olduğunu her zaman bildiğinde, formları tamamlamaya ve sonucu güvenmeye daha çok istekli olurlar.