web-gelistirme-sc.com

Tarih / Saat Girmek İçin En Kullanıcı Dostu Form Alanları?

Bir uygulamada tarih, saat veya her ikisi için alan bulundurmanın farklı yolları nelerdir? Her biri için artıları ve eksileri nelerdir?

En yaygın olanı 2-3 açılır listenin veya bazı form takvimi widget'ının bir kombinasyonu gibi görünmektedir. Başka seçenekler var mı? Hangisi en kullanıcı dostu?

45
GSto

Beklenen biçimin göstergesi olan normal bir metin kutusunun genellikle yeterli olduğuna inanıyorum. Kevin'in belirttiği gibi, bir tarih seçici kullanırsanız kesinlikle doğrudan giriş için bir yöntem sağlamalısınız. Birçok kişi sadece tarihi yazmayı tercih eder.

Ama Techinsurance.com'da yaptığım şey bu ...

alt text

Tabii ki yerinde istemci ve sunucu tarafı doğrulaması da var. Eklediğim diğer tek özellik, 12121999 veya 12-12-1999 girmeleri durumunda, metin kutusuna odak kaybettiğinizde metnin otomatik olarak eğik çizgilerle biçimlendirilmesidir. Bu tekniği Haziran ayında benimsedim ve şu ana kadar bizim için oldukça iyi çalıştı.

31
Steve Wortham

Rahul'a kesinlikle katılıyorum, içeriğe bağlı. Bir takvim widget'ı birkaç ay geri veya ileri gitmek için süper yararlıdır, ancak doğum tarihinizi seçmek için çok da iyi değildir - bu bir tıklama kabusu olurdu!

Doğum tarihinizi seçmek için bu tarih açılır listelerinden bizzat nefret ediyorum, aynı zamanda hedef seçiminizi vurmak için acı çekiyorlar, ancak son zamanlarda Kontain.com'daki kayıt akışında şık bir tane gördüm. Aşağıda görebileceğiniz gibi, bir liste yerine bir tabloda seçenekleri ortaya koydu (ve aynı gün ve yıl için yaptım) ve harika bir gelişme olduğunu buldum. Yaşasın!

alt text

27
annemarie lock

Kullanıcı dostu olmanın, kitlenizin ve uygulamanızın alan adının bir ürünü olduğunu unutmayın. Örneğin, Kayak gibi bir hizmet oluşturuyorsanız, uygulamanızla olan deneyimleri sırasında tarih kontrollerini çok fazla kullanacak makul derecede teknoloji meraklı kullanıcılara odaklanacaksınız. Öte yandan, Google ve Amazon'un daha geniş kitleleri ve daha az etkileşimi vardır, bu nedenle farklı öncelikleri vardır.

Bunu göz önünde bulundurarak, bazı noktalar şunlardır:

  • Takvim kontrolü. Bir tarih seçerken tarihler, saatler veya zaman periyotları hakkında ek meta veriler iletmek istediğinizde bunlar çok yararlı olabilir. Örneğin, bir seyahat sitesinde, bir kullanıcı otel rezervasyonu yapmak için bir tarih seçiyor olabilir. Hangi tarihlerin tam olarak rezerve edildiğini belirtmek için takvim denetimini kullanabilirsiniz. Takvim kontrolü gerçek dünya kuzeni olan takvim ile en yakından karşılaştırıldığı için, tarih ve saatlerle etkileşimleri zihinsel modellerine getirerek kullanıcılara bir iyilik yapıyorsunuz. Bununla birlikte, takvim kontrollerinin garip hale geldiği kullanım durumları vardır; kontrol her seferinde bir ay görüntülenecek şekilde modellenmiş olduğundan, aylar arasında atlama (genellikle) okları veya açılır menüleri tekrar kontrol etmeye çalışıyorsunuz. Kullanıcıya bir tarih seçmede daha fazla özgürlük sunmaya çalışıyorsanız bu sınırlayıcı olabilir.

  • Açılır menüler. Genellikle art arda üç tane görürsünüz: [Gün] [Ay] [Yıl]. Bir kullanıcı, doğum tarihi gibi önceden zaten bildiği bir tarihi seçtiğinde bunlar iyi çalışır. Çoğu kullanıcı fareyi kullanacağından ve bu nedenle açmak için her bir açılır listeye bir kez tıklamak zorunda kaldığı için kullanıcıdan tarihleri ​​içeren bir görevi tekrarlamasını isterseniz çok iyi çalışmazlar ve muhtemelen uzun bir liste yukarı ve aşağı kaydırır (doğum tarihleri ​​için Yıl menüsünün 1920'de başlayıp 2009'da bitmesi nadir değildir). Açılır menüleri seçerseniz bunu dikkate aldığınızdan emin olun.

  • Düz metin giriş alanları. Diğerlerinin yanıtladığı gibi, girdi alanlarıyla ilgili güzel şey, neredeyse her şeyi kabul edebilmenizdir. Bu durumlarda, form tasarımının ilkelerini unutmayın: son kullanıcı üzerinde veritabanı/arka uç biçimlendirmesini zorlamayın. Mümkün olduğunca çok biçimi kabul ederken olabildiğince cömert olmaya çalışın. Formu göndermeden önce kullanıcıya sorunları göstermek için istemci tarafı doğrulamayı kullanın (tarihler, kullanıcıya yeni Date () işlevine doldurulmuş dizeyi vererek ve bir tarih geri alıp almadığınızı görerek Javascript'te doğrulamak çok kolaydır).

Kontrollerin ötesine bakarken, tarihlerle uğraşırken bazı sağduyu ilkelerini göz önünde bulundurun:

  • Kullanıcının hata yapmadığını kontrol edin. Gençler için bir site tasarlıyorsanız ve birisi 1934'te doğduğunu söylüyorsa, bunun bir seçenek olup olmadığını ve eğer gerekiyorsa, gerçekten 76 olup olmadığını görmek için onlarla iki kez kontrol etmeniz gerekip gerekmediğini düşünün. Yaş doğrulaması için değil, ancak kullanıcıya bir hizmet olarak. Benzer şekilde, bir seyahat sitesi tasarlıyorsanız, kullanıcının bu Ekim ayında değil, Ekim 2011'de Hawaii'ye gerçekten bir tatil rezervasyonu yapıp yapmadığını kontrol etmeyi düşünün.

  • Çoğu durumda, belirli zaman seçimleri gerekli değildir ve muhtemelen kullanıcının zihinsel modeliyle eşleşmez. Bir etkinlik planlarken, ihtiyaç duyacağınız maksimum ayrıntı düzeyi 5 dakikalık aralıklardır. Kullanıcıların her dakika için 60 seçenek yerine 12:00, 12:05, 12:10 vb. Seçmelerini sağlayan bir kontrol sunun. Karar verdiğiniz ayrıntı düzeyi, kullanmayı seçtiğiniz belirli kontrolün (açılır menüler gibi) kullanılabilirliği üzerinde büyük bir etkiye sahip olabilir.

  • Her zaman standart kontrollerin ötesine ve bir seçenek olarak bilgi grafiği alanına bakın. Genellikle bunların uygulanması karmaşık ve pahalı olacaktır, ancak tarih/saat seçimi temel bir özellikse buna değebilirler. Örneğin, hipmunk.com, etkileşimli olsaydı daha da iyi olabilecek uçuş programlarının (giriş olarak değil, okuma olarak) harika bir görsel temsiline sahiptir. Bu durumlarda, kitlenizin beklentilerini dikkate almayı unutmayın.

16
Rahul

Mümkün olduğunda veri girişini serbest halde tutun

Programcılar tembel! Bilgisayarın biraz çalışmasına izin verin ve ilk tarih girişi için belirli bir tarih alanına sahip olmamayı düşünün. Google Takvim, yeni bir etkinlik oluştururken şunları söylemenize olanak tanır:

  • 4 Temmuz: Joe'nun evinde akşam yemeği

GC daha sonra sizin için her şeyi bulur (nerede dahil) ve kullanıcı profili yerel ayarınıza bağlı olarak 4/7: Joe'nun evinde akşam yemeği ne anlama geldiğinde akıllı olacaktır. Sonraki düzenleme için GC takvim kontrolü Güzel ve kullanımı kolaydır. Aşağıdakileri ve bunun kullanıcılar için ne kadar kolay olacağını düşünün:

  1. sonraki Perş
  2. 4 saat içinde
  3. 2 hafta içinde

Ve ... ŞOK HORROR kullanıcı bilmiyorsa ne olur ?? Bu kadar çok görmedim ama bu neden bazı durumlar için kabul edilebilir bir tarih girişi değil:

  • Yaklaşık 3 gün içinde

Bunun korkutucu olduğunu biliyorum :) Ama Yazılım Tasarımında Tog , Bruce Tognazzini (Apple İnsan Arayüz Kılavuzları) orijinal yazar Kullanıcı Deneyimi uygulaması biraz sihir gibi açıklar hile: 'bir illüzyon': kolay görünüyor, ama altında her türlü delilik devam ediyor.

'Hey, yaklaşık şimdi bir şeyler yapmak istedin' demeden önce yazılımı otomatik olarak hatırlatmak istiyorum.

Ayrıca, bağlamı olabildiğince kullanın:

  • joe'nun doğum gününden önce

... kişileriniz veya sosyal bir grafiğiniz varsa bunun anlaşılması kolay olmalıdır; değilse, sorun.

Bir aydan fazla düşünün

Tarih aralıklarına sahipken, ay sınırlarının yalnızca bir ay gösteren takvim görünümleri için gerçek bir güçlük olduğunu düşünün. Mac'teki iCal bu şekilde temizdir, çünkü istediğiniz sayıda ayı gösterebilirsiniz, böylece 'şu andan itibaren 2 ila 3 hafta arasındaki kesin tarihlerin ne anlama geldiğini kolayca kontrol edebilirsiniz.

12
Julian H

Normalde sadece normal bir metin kutusu kullanın ve Jquery UI Datepicker ekleyin.

Kullanıcı sekme veya tıklama ile metin kutusuna odak getirdiğinde takvim kontrolü geçici olarak altında açılır - metin girişini bozmadan:

alt text

Kullanıcı daha sonra herhangi bir ayrıştırılabilir biçimde bir tarih yazabilir veya fareyi takvim açılır penceresiyle kullanabilir. Fareyle bir tarih seçildiğinde, metin kutusuna sitenin kullanıcı için tercih ettiği biçimde yazılır ve açılır pencere kapatılır.

Zaman girişi için kimin unuttuğum biri tarafından benzer bir şey buldum ama (12 veya 24) saat ile tablo şeklinde bir widget açılır, bir saat seçtikten sonra 0, 15, 30 ve 45 gibi birkaç seçim dakika seçenekleri açılır. önce, sadece zaman yazmak iyi çalışıyor, pop-up göz ardı.

alt text

Ayrıca, bir takvim kontrolü bir seferde bir aydan fazla görüntülenecek şekilde ayarlanabilir, genellikle tarihin bağlamına bağlı olarak 2-3 ay yan yana gösterilmesini sağlarım. Benim durumumdaki tarih girişi genellikle mevcut çeyrekte dönüyor. Bir doğum tarihi girişi, birinin işaret ettiği gibi işe yaramaz ^

7
Oskar Duveborn

Birden fazla açılır menüye veya widget'a yaygın bir alternatif, standart biçimlendirme yardım metnidir. Bazen bunu metin alanının içinde varsayılan değer olarak, bazen de alanın sağında/altında görürsünüz. Varsayılan metin "AA/GG/YYYY" veya "gg-aa-yyyy" gibi bir şey söyler. İşte Google'ın kayıt formundan bir örnek:

Google's date format

Bu, kullanıcıya ne gireceği konusunda tam kontrol sağlar ve yalnızca bir metin alanı kullanır. Bu yaklaşımın bir dezavantajı, uygun tarih sözleşmesini izlediklerinden emin olmak için ek müşteri tarafı doğrulama gerekliliğidir.

5
wnathanlee

İlk soru, uygulamada kaç tarih giriş alanınızın olduğu ve ne sıklıkta kullanıldıklarıdır.

Kaydolurken doğum gününüze girmek zorundaysanız ve işte bu kadar, muhtemelen sizin için yüksek bir öncelik olmamalıdır.

Ancak çok fazla tarihiniz varsa, başka kimsenin henüz konuşmadığını düşünmeniz gereken bazı noktalar vardır:

  1. Kullanıcının tercih ettiği tarih biçimine dikkat etmeniz gerekir (ABD'de değilim, tarihlerimin GG/AA/YYYY biçiminde olmasını istiyorum, ABD'nin başlangıç ​​ayı olan tarihleri ​​okumak benim için zor ve ) kullanımı önerilir.

  2. Ayrıca, tarih alanının etrafındaki diğer denetimleri de göz önünde bulundurun, eğer kullanıcı fare ile etkileşime girecek şekilde oluşturulmuş bir sayfaysa, yalnızca fareyle kullanıcı olabilecek bir tarih seçiciniz olmalıdır, diğer yandan metin alanlarınız varsa kullanıcının "yazma modunda" olacağı tarihte ve fareyi gerektiren zorunlu etkileşim (çoklu açılır menüler gibi) rahatsız edici olabilir.

Ve son olarak, kullanıcılarınız benim kullanıcım değil, test etmeli, kullanıcılara yarım metin alanı ve yarım grafik takvim kontrolü vermeli, her bir formu kaç kullanıcının doldurduğunu ve formu doldurmak için her grubun ortalama ne kadar zaman aldığını ölçmelisiniz. .

Burada takıntılı olmak için önemliyse, test etmek için yeterince önemlidir.

4
Nir

Benim iki sent: Ben körüm ve en iyi şey olduğunu düşünüyorum: 3 açılan kutu! Bir alternatif aylar ve günler için 2 birleşik giriş kutusu ve yıl için bir giriş metni olabilir ama bu alanda bir kontrol yapmalısınız ... Eğer programcı olarak düşünürsem tek bir giriş metni tercih ettim ama sitenizde olduğunu düşünüyorsanız bir "çaylak kullanıcı" olabilir en iyi şey ilk seçenek olduğunu düşünüyorum :)

3
Filippo1980

Hız ve kullanım kolaylığına gelince, hiçbir şey basit sayısal girişi aşamaz, örn. 2010-09-21. Bir tek metin kutus kullanın ancak (ortak "/" ve "-") dışında bir alandan diğerine geçmek için sekmeleri de kabul edin bir. "[Tab]" düğmesine basmak bir ayırıcı eklemelidir. Ayırıcı olarak çizgiyi tercih ederim, çünkü alanları daha net ayırır.

İnsanları baştaki sıfırları yazmaya zorlamayın.

Bevan'ın önerdiği gibi kısaltılmış aylar gibi metin girişini kullanmam, çünkü girmeleri daha uzun sürüyor. Ayrıca, nasıl kısaltılır? Üç harf mi? Dört? Bevan'a cevabımda söylediğim gibi, uluslararası bir kitleyle çalışıyorsanız özellikle kötü bir fikir; "Eylül", kullanıcınızın dilinde "Eylül" olmayabilir.

Uluslararası izleyiciler hakkında konuşmak: Herkes AA-GG-YYYY düzenini kullanmaz (aslında ABD dışında neredeyse hiç kimse kullanmaz). Gerekli sırayı metin kutusunun altında belirtebilirsiniz. 5-06-201 gibi tarihlerin belirsizliğinden kaçınmanın bir yolu ISO 8601 biçimini kullanmaktır YYYY-AA-GG.

2
stevenvh

Kullanıcının hangi formatı kullanabileceğini gösteren bir ipucu ile birlikte tarihi yazabileceği bir metin girişi verin, ancak ayırıcılardan veya basamak sayısından bağımsız olarak herhangi bir kesin formatı kabul edin. Kullanıcı standart biçimden başka bir şey yazdığında, hemen tarihi standart forma güncelleyin, böylece kullanıcı tarihi tam olarak nasıl yorumladığınızı görür. Bir takvimden seçim yapma seçeneği isteyen kullanıcılara bir takvim simgesi eklemek de iyidir - tarih yazmak isteyen kullanıcılar bunu kullanmak zorunda değildir.

1
Sam

Bu konuda biraz araştırma yapıyordum. Takvim Uygulamaları, başlamak için iyi bir yerdir. En sevdiğim düzen sağdaki zamanın olduğu tarihtir. Google Takvim'in Tarih - Saat - Saat - Tarih biçimini beğenmedim, ancak tarih seçici ve açılır liste oldukça açık bir şekilde yürütüldü.

(Resmini gönderemedim, ancak kontrol etmenizi öneririm)

0
sudonim