Düzeltilmesi Gereken Sinir bozucu Tasarım Modelleri: Doğum Günü Seçici

Onları daha önce gördün. Bir web sitesinden diğerine gittiğiniz her yerde sizi kovalıyor gibi görünen kafa karıştırıcı ve sinir bozucu tasarım desenleri. Belki de gerçekte neyin yanlış olduğunu asla iletmeyen devre dışı bırakılmış bir gönder düğmesi veya bir kez açıldığında tam bir hatayı düzeltmeniz gerektiğinde giriş alanını kaplayan araç ipuçları. Her yerdeler ve sinir bozucular, genellikle iyi organize edilmiş ve kötü tasarlanmış bir fare kapanı gibi görünen bir şekilde bizi bir çıkmazdan diğerine fırlatıyorlar.

Bu kalıplar kötü niyetli veya kötü değildir. Yangın muslukları ve yaya geçitleri kılığına girmiş yanıltıcı çerez istemleri veya gizemli CAPTCHA'larla pek ortak noktaları yoktur. Kötü niyetler veya zarar düşünülerek tasarlanmamışlardır: Sabahları kimse hemen çıkma oranlarını artırmayı veya dönüşümü azaltmayı umarak uyanmaz.

Sadece yıllar içinde, az ya da çok rastgele tasarım kararları geniş çapta kabul edildi ve benimsendi ve bu nedenle, veri veya kullanılabilirlik testleri tarafından sorgulanmadan veya doğrulanmadan, tekrar tekrar tekrar edildi. Yerleşik tasarım kalıpları haline geldiler. Ve genellikle oldukça fakir olanlar . Test sırasında kullanıcı şikayetleri arasında tekrar tekrar ortaya çıkıyor.

Bu yeni makale dizisinde, haydi bu sinir bozucu tasarım modellerinden bazılarına daha yakından bakalım ve daha iyi alternatifleri, bir tane oluştururken veya tasarlarken akılda tutulması gereken birçok örnek ve soruyla birlikte keşfedelim . Bu bilgiler, gerçekten sizin ve topluluktaki meslektaşlarınız tarafından gerçekleştirilen kullanıcı araştırması ve kullanılabilirlik testlerinden gelmektedir ve elbette, sonraki gönderilerin her birinde bunlara atıfta bulunulacaktır.

Hepimizin bir noktada deneyimlediği mütevazı ve görünüşte zararsız bir modelle başlayacağız - çoğu zaman erişilmez, yavaş ve kullanımı zahmetli olan kötü şöhretli doğum günü seçicisi . Mükemmel tarih ve saat seçiciler hakkında çok ayrıntılı olarak zaten yazdık, ancak doğum günü seçicileri ayrı bir konuşmayı hak ediyor.

Sinir bozucu UX: 2021'de Başlayan Doğum Günü Açılır Menüsü/Widget'ları

Her iş başvurusu yaptığınızda, banka hesabı açtığınızda veya uçak bileti rezervasyonu yaptığınızda, muhtemelen doğum tarihinizi yazmanız gerekecek. Açıkçası, girdi bir tarihtir ve bu nedenle, iyi benimsenmiş bir tarih seçici-takvim benzeri pencere öğesi (yerel veya özel) veya bu belirli girişi istemek için bir açılır menü kullanan arabirimleri görmek çok şaşırtıcı olmamalıdır. .

Bu seçeneklerin sıklıkla tercih edilmesinin nedenlerini muhtemelen tespit edebiliriz. Teknik açıdan, girişin doğru olduğundan emin olmak ve hataları erken yakalamak istiyoruz. Doğrulamamız, girişi doğrulamak, net bir hata mesajı sağlamak ve müşterinin bunu düzeltmek için tam olarak ne yapması gerektiğini açıklamak için yeterince kurşun geçirmez olmalıdır. Sadece bir açılır menü veya bir takvim widget'ı ile ilgili tüm bu sorunları yaşamıyoruz. Ayrıca, yalnızca faturaya uyan seçenekleri sağlayarak herhangi bir yerel ayar veya biçimlendirme farklılıklarını kolayca önleyebiliriz.

Hataların olmasını önlemenin en iyi yolu, hataların yapılması zor olacak şekilde bir kullanıcı arayüzü tasarlamak gibi görünebilir. Bu, form tasarımında katı ve açık olmak anlamına gelebilir - temelde yalnızca iyi biçimlendirilmiş girdilere izin verir. Sonuçta, mevcut tüm seçenekler iyi biçimlendirilmişse, kötü biçimlendirilmiş bir girdi sağlamak imkansızdır. Ancak girdi gerçekten iyi biçimlendirilmiş olsa da, özellikle bu girdiyi sağlamak yorucu ve sinir bozucu ise, doğru olması gerekmez.

Pratikte, aşırı karmaşık ve zorlu parola gereksinimlerinde de benzer hatalar yapıyoruz. İnsanların bu gereksinimlerden rahatsız olduklarını ve şifrelerini ekranlarına yapışkan bir not olarak koyduklarını veya gerektiğinde yeniden yazabilmek için masaüstündeki bir personal.txt dosyasına gizlediklerini görmek alışılmadık bir durum değil. Kurumsal Wi-Fi şifreleri ve çevrimiçi bankacılık için karmaşık bir SuperPIN, eylemde buna iyi örneklerdir.

İnsanların kuralları kendi lehlerine esnetme konusunda çok yaratıcı oldukları ortaya çıktı, bu nedenle bir sistem kullanılabilir olmadığında güvenli de olmaz; ve bir form girişi kullanılamadığında, aldığımız veriler daha az doğru olacak ve daha fazla hataya yol açacaktır. Sonuçta, elbette, kullanıcıların kilitlendiği ve herhangi bir ilerleme kaydedemedikleri için kullanıcı arayüzünü terk etmek zorunda kaldıkları durumlara yol açacaktır.

Bu madalyonun bir de ters tarafı var. Elbette tüm karmaşıklığı ortadan kaldırabilir ve her zaman tek bir giriş alanı sağlayarak kullanıcıların tercih ettikleri her şeyi yazmasına izin verebiliriz. Pratikte bu, tercih ettikleri her şeyi, genellikle kötü yapılandırılmış ve verimsiz bir şekilde yazacakları anlamına gelir.

Bir doğum günü girdisi durumunda, kullanılabilirlik testlerinde müşteriler, genellikle rastgele sınırlayıcılar ve yol boyunca birkaç yazım hatası ve karışık bir gün, ay ve yıl sırası ile Temmuz ile Temmuz 06 ila 6 arasında herhangi bir şey yazarlar. Gönderdikten sonra bu girdiyi doğrulamak, kullanıcılara hangi girdi biçimlendirmesinin işe yarayacağını bilmedikleri için iyi hizmet etmez. Açıkçası ihtiyaçlarımıza da iyi hizmet etmiyor.

Tasarımımızla, erişilebilir bir teknik uygulamanın yanı sıra saygılı, doğrudan bir rehberlik sağlamamız gerekiyor. Bu bizi yerel tarih seçicilerin ve açılır listelerin bazı yaygın olumsuz yönlerine getiriyor.

Yerel Tarih Seçicilerin ve Açılanların Tuzakları

Ne yazık ki, <input type="date"> tarafından istenen yerel tarih seçiciler birçok erişilebilirlik kabusu ile birlikte gelir. Yazma anında, kullanıma hazır kullanıldıklarında, hemen hemen her tür tarih girişi için çok erişilebilir bir seçenek değildirler. Yalnızca çok sayıda ekran okuyucu sorunu değil, aynı zamanda odak ve düzen sorunları, kafa karıştırıcı ve genel hata mesajları da vardır.

Klavye girişini tamamen devre dışı bırakan çok sayıda uygulama gördüm (yukarıya bakın), müşterilerin yerel tarih seçicinin takvim widget'ını yalnızca kullanmasını gerektiriyor. Ve bu acı verici, acı verici bir şekilde yavaş. Bir klavye girişi yedeği olmadan, kullanıcıların günler, aylar ve yıllar arasında uzun soluklu bir yolculuğa çıkmaları, onlarca ve düzinelerce tıklama veya tıklama almaları gerekir.

Tarihi hemen bilsek de, arayüz tarihler arasında gezinmemizi ve oraya vardığımızda aylık genel bakışta tarihimizi bulmamızı ister. Bu deneyimlerin sinir bozucu olmasının nedeni budur.

Bu ışıkta, açılır menüler çok daha hızlı ve gezinmek daha kolay. Bunlara varsayılan olarak erişilebilirler, ayrıca aylar ve yıllar arasında gezinmek yerine doğru sayıları 3 listede (günler, aylar ve yıllar) bulmak yeterlidir. Ancak düşüşler hala yavaş. Yakınlaştırma sorunları var. Kaydırılabilir seçenekleri sıkıştırmak yorucudur. Çok yer kaplarlar. Yılların listesi uzun. Ve girişi belirlerken, kontrole dokunmamız, ardından kaydırmamız (genellikle bir kereden fazla), hedefi bulup seçmemiz ve bir sonraki açılır menüye geçmemiz gerekir. Heyecan verici de değil.

Bu nedenle, son çare UI olarak kabul edilen ve genellikle bir metin kutusunun esnekliğini bir <select> güvencesiyle birleştiren düğmeler (örneğin filtreler için), geçişler, bölümlere ayrılmış kontroller veya otomatik tamamlama kutuları ile değiştirilen açılır menüleri görmek nadir değildir. Kutu. Dropdown'lar başlı başına kötü değildir; sadece kullanıcılar, içlerindeki verileri doldurmak için gerekenden çok daha fazla zaman harcarlar.

Ve sonra varsayılan değerler hakkında bir soru var. Açılır menülerde genellikle varsayılan olarak hiçbir giriş yapmamamız gerekir ( mm/dd/yyyy ), bir tarih seçiciyle takvim görünümü için bir başlangıç ​​noktası sağlamamız gerekir. İkinci durumda, ironik bir şekilde, "başlangıç" tarihi genellikle formun doldurulduğu tarih civarında olur, örneğin 15 Mayıs 2021 . Bu elbette optimal görünmüyor, ancak doğru tarih ne olmalı? Bir yerden başlamamız gerekiyor, değil mi?

Aslında doğru bir tarih yok . Erken veya geç, 3 ay önce veya yarın başlayabiliriz, ancak doğum günü seçicisi söz konusu olduğunda, tüm bu seçenekler tamamen tahmine dayalıdır. Ve bu nedenle, biraz sinir bozucu: Herhangi bir girdi olmadan, müşterilerin 1901'den 1980'lerin sonlarına kadar tüm yolu kaydırmaları gerekebilir ve bazı girdi setleriyle, genellikle on yıllar ileri geri atlayarak düzeltmeleri gerekir. Bu etkileşim, kaydırmada kusursuz bir hassasiyet gerektirecektir.

Hangi seçimi yaparsak yapalım, neredeyse her zaman yanılacağız . Bu, bir otel rezervasyon web sitesi veya bir yemek dağıtım hizmeti ve birçok başka kullanım durumu için farklı olabilir - sadece doğum günü girişi değil. Bu bizi bir form girişinin ne kadar iyi tasarlanmış olduğunu nesnel olarak nasıl değerlendireceğimize dair konuşmaya getiriyor.

Form Tasarımının Kalitesinin Değerlendirilmesi

Tasarım çok öznel bir konu olarak görülebilir. Sonuçta, herkesin belirli bir sorun için doğru yaklaşımla ilgili kendi görüş ve tercihleri ​​var gibi görünüyor. Ancak herhangi bir kendini ifade etme veya sanattan farklı olarak, tasarımın bir sorunu çözmesi gerekiyor. O halde soru, belirli bir tasarımın belirli bir sorunu ne kadar iyi çözdüğüdür. Tasarımcının amacının ifadesi ne kadar net olursa, müşteriler ne kadar az hata yaparsa, o kadar az kesintiye uğrarlarsa tasarım o kadar iyi olur. Bu nitelikler ölçülebilir ve nesneldir .

Kendi deneyimime göre, formlar kullanıcı deneyiminin en zor yönüdür. Mikrokopi ve form düzeninden satır içi doğrulama ve hata mesajlarına kadar pek çok zor yön vardır. Formları doğru almak genellikle arka uç hatalarını ve üçüncü taraf hatalarını ön uçta düzgün bir şekilde ortaya çıkarmayı ve karmaşık bir temel yapıyı bir dizi öngörülebilir ve makul form alanına basitleştirmeyi gerektirir. Bu, karmaşık eski uygulamalarda ve üçüncü taraf entegrasyonlarında kolayca sinir bozucu bir kabus olabilir.

Bu nedenle, tasarım söz konusu olduğunda, projelerimizde her zaman belirli bir çözümün kalitesini aşağıdaki 9 özelliğe dayanarak ölçmeye çalışırız:

• Zihinsel model
  Form tasarımımız müşterinin zihinsel modeline ne kadar uyuyor? Kişisel ayrıntıları isterken, müşterilerimizin işe başlamasına yardımcı olmak için tam olarak gereken minimum şeyi sormamız gerekir. İyi bir nedenimiz olmadıkça hassas veya kişisel bilgileri (cinsiyet, doğum günü, telefon numarası) sormamalı ve kullanıcı arayüzünde açıklamamalıyız.
• karmaşıklık
  Mobilde ve masaüstünde sayfa başına kaç girdi öğesi görüntülüyoruz? Bir form, hepsini tek bir sayfada görüntülemek veya çok sütunlu bir düzen kullanmak yerine 70-80 giriş alanı içeriyorsa, karmaşıklığı daha küçük, yönetilebilir parçalara bölmek için bir görev listesi kalıbı kullanmak iyi bir fikir olabilir.
• giriş hızı
  Müşterinin verileri doğru bir şekilde doldurması için ne kadar zamana ve çabaya ihtiyacı var? Belirli bir girdi için, yol boyunca hiçbir hata yapılmadığı varsayılarak, verilen verilerle formu doğru bir şekilde tamamlamak için kaç dokunma/tuş vuruşu/işlem yapılması gerektiği.
• Ulaşılabilirlik
  Giriş hızından bahsederken, başta ekran okuyucu kullanıcıları ve klavye kullanıcıları olmak üzere çeşitli etkileşim modlarını desteklediğimizden emin olmamız gerekir. Bu, diğer birçok şeyin yanı sıra, uygun şekilde ayarlanmış etiketler, büyük düğmeler, giriş alanının üzerine yerleştirilmiş etiketler ve uygun şekilde iletilen hatalar anlamına gelir.
• ölçeklenebilirlik
  Kullanıcı arayüzünü başka bir dile çevirmemiz veya başka bir form faktörü için uyarlamamız gerekirse, bu ne kadar basit olurdu ve kaç soruna neden olur? (Sorunlu bir çözümün tipik bir örneği, kayan bir etiket kalıbıdır ve bunun hakkında ayrı bir gönderide konuşacağız.)
• Kesintilerin şiddeti
  İster yükleme çarkları, ister erken veya geç satır içi doğrulama, ister sağlanan kullanıcı arabirimine göre arabirimi ayarlamak için kullanıcı arabiriminin bölümlerinin dondurulması (örneğin bir ülke seçildikten sonra), yanlış önceden doldurulmuş verilerin sıklığı olsun, müşterileri ne sıklıkta kesintiye uğratıyoruz, veya yanlış otomatik düzeltilmiş veriler?
• Form başarı oranı
  Kaç müşteri bir formu tek bir hata yapmadan başarıyla tamamlıyor? Bir form iyi tasarlanmışsa, müşterilerin büyük bir çoğunluğu hiçbir zaman herhangi bir hata görmemelidir. Örneğin, bu, tarayıcının otomatik doldurmasına dokunmamızı gerektirir, sekme sırası mantıklıdır ve düzenlemeler yapmak geleneksel ve açıktır.
• İyileşme hızı
  Hatayı bulmayı, düzeltmeyi ve formun bir sonraki adımına geçmeyi başaran müşterilerin oranı ne kadar yüksek? Hata mesajlarının ne sıklıkta göründüğünü ve hangi hata mesajlarının en yaygın olduğunu izlememiz gerekiyor. Bu nedenle, müşteri desteğine uğramak ve ilk olarak müşterilerin sıklıkla şikayet ettikleri şeyleri kontrol etmek genellikle iyi bir fikirdir.
• Form hatası oranı
  Kaç müşteri formu terk ediyor? Bu genellikle yalnızca formun karmaşıklığı nedeniyle değil, aynı zamanda müşterilerin agresif doğrulayıcılar veya devre dışı bırakılmış "gönder" düğmeleri nedeniyle bir hatayı düzeltmenin bir yolunu bulamamaları nedeniyle olur. Aynı zamanda, formun iyi bir sebep olmaksızın çok fazla hassas ve kişisel bilgi istemesi nedeniyle de olur.

Bir formun ne kadar iyi çalıştığını anlamak için, arayüze kendi makinelerinde (mobil cihaz, tablet, dizüstü veya masaüstü) kendi işletim sistemlerinde, kendi tarayıcılarında erişen müşterilerle kullanılabilirlik çalışmaları yapıyoruz. Mümkünse ekranı kaydetmemizi ve sesli düşünme protokolü kullanarak hataların nerede, nasıl ve neden olduğunu takip etmemizi istiyoruz. Ayrıca müşterinin bir form alanından diğerine ne kadar hızlı geçtiğini, ne zaman durup düşündüklerini ve çoğu hatanın ne zaman gerçekleştiğini de inceliyoruz.

Açıkçası, çok sayıda dokunma veya tıklama , girdinin her zaman basit veya hantal olduğunu göstermez. Ancak bazı girdi modlarının hata üretme veya karışıklığa neden olma olasılığı daha yüksek olabilir ve diğerleri, diğer seçeneklere kıyasla çok daha fazla zaman gerektiren aykırı değerler olabilir. Testlerde aradığımız şey bu.

Şimdi bunu doğum günü girdi problemine nasıl uygulayabileceğimizi görelim.

Daha İyi Bir Doğum Günü Girişi Tasarlamak

Biri size doğum gününüzü sorarsa, muhtemelen aklınızda belirli bir rakam dizisi olacaktır. dd/mm/yyyy veya mm/dd/yyyy olarak sıralanabilir, ancak çok küçük yaştan beri her türlü belgede tekrarladığınız 8 basamaklı bir dize olacaktır.

Bir doğum günü girdisinin ne olduğuna dair bu basit modelden, gün, ay ve yıl olmak üzere üç girdinin tümünü birleştirecek basit, tek girdili bir alanla faydalanabiliriz. Bu, kullanıcının her zaman klavyede kalarak 8 rakamdan oluşan bir dizi yazacağı anlamına gelir.

Ancak, bu yaklaşım birkaç sorunu beraberinde getiriyor:

• otomatik biçimlendirme ve maskelemeyi desteklememiz gerekiyor,
• gün/ay girişinin konumunu açıklamamız gerekiyor,
• Giriş boyunca Backspace düğmesinin davranışını desteklememiz gerekiyor,
• maskelemeyi izlememiz ve gizlememiz/göstermemiz/kalıcı olarak görüntülememiz gerekiyor,
• belirli bir değere (örneğin ay) atlamaları desteklememiz gerekiyor,
• mobil cihazlarda belirli bir değeri değiştirmek için giriş içindeki öfke tıklamalarını ve gezinmeyi en aza indirmemiz gerekiyor,
• Otomatik oluşturma kullanılmazsa, her türlü sınırlayıcıyı desteklemek için bir dizi temizleme ve doğrulama kuralı bulmamız gerekir.

Adam Silver, Form Tasarım Kalıpları hakkındaki kitabında, bir girdi yerine birden çok girdi kullanmanın nadiren iyi bir fikir olduğunu, ancak tarihler için iyi bir seçenek olduğunu savunuyor. Her bir girdinin neyi temsil ettiğini açıkça iletebiliriz ve belirli girdiyi odak stilleriyle vurgulayabiliriz. Ayrıca, doğrulama çok daha kolaydır ve girdinin hangi bölümünün geçersiz olduğunu ve nasıl düzeltileceğini kolayca iletebiliriz.

Giriş bittiğinde kullanıcıyı otomatik olarak bir girişten diğerine geçirebilir veya kullanıcıların alanlar arasında kendi başlarına hareket etmesine izin verebiliriz. İlk bakışta, giriş birbiri ardına yazılan sadece 8 basamak gerektireceğinden ilki daha iyi görünüyor. Bununla birlikte, insanlar hataları düzelttiğinde, genellikle giriş arabelleklerine ihtiyaç duyarlar - mevcut girişi düzeltmek için giriş alanı içinde boşluk.

Örneğin, insanların 01 yazarak, bir hata yaptıklarını fark ederek, ardından girişi 010 olarak değiştirip, ardından ilk 0'ı kaldırarak, sadece ters çevrilmiş (ve doğru) bir dize elde etmek için - 10'u gördüklerini görmek yaygındır. bir alandan diğerine otomatik geçiş, daha az soruna neden olabilir ve sadece kullanıcı arayüzünü biraz daha öngörülebilir ve başa çıkması kolay hale getirebiliriz.

Girdiyi açıklamak için gün, ay ve yıl için etiketler sağlamamız ve belki de doğru girdinin bir örneğini göstermemiz gerekir. Etiketler kayan etiketler olmamalıdır, ancak görüntülemek isteyebileceğimiz ipuçları veya örneklerle birlikte giriş alanının üzerinde rahatça yaşayabilirler. Ayrıca, her girdi odakta da vurgulanabilir.

Yıllar boyunca, yıllarca süren testler boyunca bu çözümle ilgili tek bir sorun tespit edemedim ve Gov.uk'ta kullanılan modelin de şaşırtıcı değil.

Sonuçta Bir Tarih Seçiciye İhtiyacınız Olduğunda

Yukarıdaki çözüm bir doğum günü girişi için muhtemelen fazlasıyla yeterli olsa da, daha genel durumlar için yeterince iyi olmayabilir. Müşterilerin sağlamak yerine bir gün seçmesi gereken bir doğum gününden daha az gerçek olan bir tarih girdisine ihtiyacımız olabilir (örneğin, “ Temmuz ayının ilk Cumartesi günü” ). Bu durumda, üç giriş alanını, kullanıcıların da kullanabileceği bir takvim widget'ı ile geliştirebiliriz. Varsayılan giriş, mevcut tarihe veya çoğu müşterinin seçme eğiliminde olduğu gelecekteki bir tarihe bağlı olacaktır.

Adam, NoStyle Tasarım Sistemindeki Unutulmaz tarih modeli için basit bir kod örneği sağlar. Pek çok geliştirme işini çözer ve pek çok erişilebilirlik sorununu önler ve bunların hepsini, takvim widget'larına dokunmaktan veya açılır tekerlekler arasında gereksiz yere kaydırma yapmaktan kaçınarak.

Toplama

Elbette, iyi bir form kontrolü, beklediğimiz tarih girişinin türüne bağlıdır. Müşterilerin bir varış tarihi seçmesini beklediğimiz seyahat planlayıcıları için, takvim aramalı esnek bir girdi yararlı olabilir.

Müşterilerimize doğum tarihlerini sorduğumuzda, çok spesifik bir tarih istiyoruz - kesin bir gün, ay ve yılı ifade eden çok spesifik bir dize . Bu durumda, bir açılır menü gereksizdir. Bir takvim araması da değildir, varsayılan olarak az çok rastgele bir değere ayarlanır. Bir taneye ihtiyacınız varsa, mümkünse yerel tarih seçicilerden ve yerel açılır menülerden kaçının ve bunun yerine erişilebilir bir özel çözüm kullanın. Ve giriş alanının üzerine yerleştirilmiş etiketler ve açıklamalar ile üç basit giriş alanına güvenin.

Ayrıca, mükemmel bir tarih ve saat seçici tasarlama konusunda uzun bir çalışma ve bir tane tasarlamak veya oluşturmak için kullanmak isteyebileceğiniz kontrol listeleri yayınladık.

İlgili Makaleler

Bu makaleyi yararlı bulursanız, burada yıllar içinde yayınladığımız benzer makalelere genel bir bakış - ve birkaç tane daha yolunuza çıkıyor.

• Mükemmel Duyarlı Konfigüratör
• Mükemmel Özellik Karşılaştırması
• Mükemmel Kaydırıcı
• mükemmel akordeon
• Adam Silver tarafından yazılan Form Tasarım Desenleri Kitabı, SmashingMag'de yayınlandı
• Sonrakileri kaçırmamak için e-posta bültenimize abone olun.