it-swarm-eu.dev

Nejpříjemnější pole formuláře pro zadání data / času?

Jaké jsou různé způsoby, jak mít pole v aplikaci datum, čas nebo obojí? Jaké jsou výhody a nevýhody každého z nich?

Nejobvyklejší se jeví kombinace 2–3 rozbalovacích nabídek nebo nějakého widgetu kalendáře formuláře. Jsou k dispozici i jiné možnosti? Který z nich je uživatelsky nejpříjemnější?

45
GSto

Věřím, že pravidelné textové pole s uvedením očekávaného formátu je dostačující. Jak uvedl Kevin, pokud používáte výběr data, měli byste naprosto poskytnout metodu přímého zadání. Mnoho lidí raději jednoduše zadá datum.

Ale to je to, co dělám na Techinsurance.com ...

alt text

Samozřejmě mám také na straně klienta a serveru ověření. Jedinou další funkcí, kterou jsem přidal, je to, že pokud zadají 12121999 nebo 12-12-1999, text se automaticky zformátuje s lomítky, když ztratíte zaměření na textové pole. Tuto techniku ​​jsem přijal v červnu a doposud pro nás docela dobře fungovala.

31
Steve Wortham

Rozhodně souhlasím s Rahulem, že to záleží na kontextu. Widget kalendáře je velmi užitečný pro návrat nebo vpřed o několik měsíců, ale není tak skvělý pro výběr data narození - to by byla klikací noční můra!

Já osobně nenávidím data rozbalování dolů, abych vybral vaše datum narození, také, protože mají tendenci být bolest, která zasáhla váš výběr cíle, ale viděl jsem šikovný jeden nedávno v registračním toku na Kontain.com. Jak vidíte níže, rozložili možnosti v tabulce místo seznamu (a udělali to samé pro den a rok) a zjistil jsem, že to je úžasné vylepšení. Yay!

alt text

27
annemarie lock

Nezapomeňte, že uživatelská přívětivost je produktem publika a domény vaší aplikace. Pokud například budujete službu, jako je Kayak, budete se soustředit na rozumně technologicky zdatné uživatele, kteří budou při používání aplikace hodně ovládat datum. Na druhé straně Google a Amazon mají širší publikum a méně interakcí, takže mají odlišné priority.

V této souvislosti uvádíme několik úvah:

  • Řízení kalendáře. To může být velmi užitečné, pokud chcete při výběru data komunikovat další metadata o datech, časech nebo časových obdobích. Například na stránkách cestovního ruchu si může uživatel zvolit datum pro rezervaci hotelu. Pomocí ovládacího prvku kalendáře můžete určit, která data jsou plně rezervována. Vzhledem k tomu, že ovládání kalendáře se nejvíce podobá jeho skutečnému bratranci, kalendáři, děláte uživatelům laskavost tím, že do svého mentálního modelu vkládáte interakce s daty a časy. Existují však případy použití, kdy jsou ovládací prvky kalendáře nepříjemné; protože ovládání je modelováno tak, že se zobrazuje po jednom měsíci, tlačíte kontrolu nad přeskakováním mezi měsíci na (často) šipky nebo rozevírací seznamy. To může být omezující, pokud se snažíte dát uživateli větší volnost při výběru data.

  • Rozbalovací nabídky. Často uvidíte tři v řadě: [Den] [Měsíc] [Rok]. Fungují dobře, když uživatel právě předem vybere datum, které již zná, například datum narození. Nefungují tak dobře, pokud žádáte uživatele, aby opakoval úkol zahrnující data, protože většina uživatelů bude používat myš, a proto musí kliknout jednou na každou rozevírací nabídku, aby ji otevřela, jednou na každou položku a vyberte ji, a možná přejděte nahoru a dolů po dlouhém seznamu (pro data narození není neobvyklé, že nabídka Rok začíná od roku 1920 a končí od roku 2009). Pokud si vyberete rozbalovací nabídku, nezapomeňte to vzít v úvahu.

  • Pole pro prostý text. Jak ostatní odpověděli, pěkná věc ve vstupních polích je, že můžete přijímat prakticky cokoli. V těchto případech si pamatujte zásady návrhu formuláře: nevynucujte formátování databáze/backend u koncového uživatele. Snažte se být co nejštědřejší při přijímání co největšího počtu formátů. Pomocí ověření na straně klienta upozorněte uživatele na problémy dříve, než odešle formulář (data lze v Javascriptu velmi snadno ověřit zadáním řetězce, který uživatel vyplnil do nové funkce Date (), a zjistíte, zda se vám datum vrátí).

Když se podíváme mimo kontroly, při jednání s daty zvažte několik zásad:

  • Zkontrolujte, zda se uživatel nedopustil chyby. Pokud navrhujete web pro dospívající a někdo říká, že se narodili v roce 1934, zvažte, zda by to měla být možnost, a pokud by měla, zda byste s nimi měli zkontrolovat, zda skutečně jsou 76. Ne pro účely ověření věku, ale jako služba uživateli. Podobně, pokud navrhujete web pro cestování, zvažte, zda uživatel opravdu zamýšlel rezervovat dovolenou na Havaj v říjnu 2011, nikoli v říjnu.

  • Ve většině případů není nutný konkrétní výběr času a pravděpodobně se nemapuje na mentální model uživatele. Při plánování události je maximální pravděpodobnost, kterou budete pravděpodobně potřebovat, v 5 minutových intervalech. Nabízí ovládací prvek, který uživatelům umožňuje vybrat si 12:00, 12:05, 12:10 atd. Spíše než 60 možností za každou minutu. Granularita, na které se rozhodnete, může mít velký vliv na použitelnost konkrétního ovládacího prvku, který se rozhodnete použít (například rozbalovací nabídky).

  • Vždy se dívejte nad rámec standardních ovládacích prvků a do oblasti informační grafiky jako volitelné. Obvykle bude implementace komplikovaná a nákladná, ale pokud je klíčovým prvkem volba data/času, stojí za to. Například hipmunk.com má fantastickou vizuální reprezentaci letových řádů (čtení, nikoli jako vstup), které by mohly být ještě lepší, kdyby byly interaktivní. V těchto případech nezapomeňte zvážit očekávání publika.

16
Rahul

Pokud je to možné, mějte formulář pro zadávání dat zdarma

Programátoři jsou líní! Nechte počítač trochu pracovat a zvažte, zda pro počáteční zadání data nemá konkrétní pole s datem. Kalendář Google umožňuje při vytváření nové události jednoduše říci:

  • 4. července: Večeře u Joe

GC to pak zjistí za vás (včetně toho, kde) a na základě vašeho národního profilu uživatelského profilu bude inteligentní o tom, co to znamená 4/7: Večeře u Joe. Pro následnou editaci je ovládání kalendáře GC příjemné a snadné. Zvažte následující a jak snadné by to bylo pro uživatele:

  1. další Čt
  2. za 4 hodiny
  3. za 2 týdny

A ... SHOCK HORROR, co se stane, když uživatel neví? Neviděl jsem to tolik, ale proč to není přijatelné datum vstupu za určitých okolností:

  • Asi za 3 dny

Vím, že je to děsivé :) Ale Tog On Software Design , Bruce Tognazzini (původní autor Apple Pokyny pro lidské rozhraní) popisuje, jak je implementace uživatelské zkušenosti trochu jako kouzlo trik: 'iluze': vypadá lehce, ale pod ní se děje celá řada šílenství.

Předtím, než řeknu "hej, asi teď jsi chtěl dělat věci"

Použijte také kontext, stejně jako poss:

  • před Joeovými narozeninami

... pokud máte kontakty nebo sociální graf, mělo by být snadné to zjistit; pokud ne, zeptejte se.

Zvažte více než jeden měsíc

Pokud máte časové období, zvažte, že hranice měsíce jsou skutečným problémem pro zobrazení kalendáře, která ukazují pouze jeden měsíc. iCal na počítačích Mac je tak čistý, protože můžete zobrazit libovolný počet měsíců, takže můžete snadno zkontrolovat, jaká přesná data „od 2 do 3 týdnů od teď“ znamenají.

12
Julian H

Normálně používám jen obyčejné textové pole a přidám k němu JQR UI Datepicker.

Když uživatel soustředí textové pole na kartu nebo klepnutím nebo co se pod ním dočasně objeví ovládací prvek kalendáře - bez rušení zadávání text:

alt text

Uživatel pak může buď zadat datum v libovolném formátu, který lze analyzovat, nebo použít myš s vyskakovacím oknem kalendáře. Výběr data myší jednoduše zadá do textového pole v uživatelském preferovaném formátu pro uživatele a zavře vyskakovací okno.

Pro zadání času jsem našel něco podobného udělal někdo, koho jsem zapomněl, ale s (12 nebo 24) hodin vyskakování v tabulkovém widgetu, výběr hodiny pak objeví několik možností minut možnosti, jako 0, 15, 30 a 45. Jak před, jen psaní času funguje dobře, ignorování vyskakovacího okna.

alt text

Také ovládací prvek kalendáře může být naladěn tak, aby zobrazoval více než jeden měsíc najednou, obvykle jej mám zobrazovat 2-3 měsíce vedle sebe - v závislosti na kontextu data. Datum vstupu v mém případě se obvykle točí kolem aktuálního čtvrtletí. Záznam o datu narození by nefungoval tak dobře, jak už někdo zdůraznil ^ ^

7
Oskar Duveborn

Běžnou alternativou k několika rozevíracím seznamům nebo widgetům je text nápovědy standardního formátování. Někdy to uvidíte uvnitř textového pole jako výchozí hodnotu a někdy doprava/pod polem. Výchozí text by řekl něco jako „MM/DD/RRRR“ nebo „dd-mm-rrrr“. Zde je příklad z registračního formuláře Google:

Google's date format

To dává uživateli úplnou kontrolu nad tím, co zadat, a používá pouze jedno textové pole. Jednou nevýhodou tohoto přístupu je potřeba další validace na straně klienta, aby se zajistilo, že dodržují správnou konvence data.

5
wnathanlee

První otázkou je, kolik polí pro zadání data máte v aplikaci a jak často se používají.

Pokud musíte zadat svůj den narození, když se zaregistrujete, a to je dobře, pravděpodobně by to pro vás neměla být vysoká priorita.

Ale pokud máte spoustu schůzek, je třeba zvážit, o čem ještě nikdo nemluvil:

  1. Musíte se postarat o preferovaný formát data uživatele (nejsem v USA, chci, aby moje data byla ve formátu DD/MM/RRRR, ta americká data s měsícem na začátku jsou pro mě obtížně čitelná a typ).

  2. Zvažte také další ovládací prvky kolem datového pole, pokud se jedná o stránku, která je vytvořena tak, aby s ní uživatel komunikoval s myší, měli byste mít výběr data, který může být uživatel pouze s myší, na druhé straně, pokud máte textová pole kolem data, kdy bude uživatel pravděpodobně v režimu psaní, může být nepříjemné vynucení interakce, která vyžaduje myš (jako je více rozbalovacích nabídek).

A konečně, vaši uživatelé nejsou moji uživatelé, měli byste to otestovat, dát polovině uživatelů textové pole a polovinu grafického ovládacího prvku kalendáře, změřit, kolik uživatelů vyplní každý formulář a kolik času průměrně trvá každá skupina, než vyplní formulář .

Pokud je to natolik důležité, aby to bylo posedlé, je to dost důležité, aby to vyzkoušeli.

4
Nir

Moje dva centy: Jsem slepý a myslím si, že nejlepší je: 3 pole se seznamem! Alternativou by mohlo být 2 pole se seznamem měsíců a dnů a vstupní text pro rok, ale měli byste udělat kontrolu v tomto poli ... Pokud bych měl myslet jako programátor, upřednostňoval jsem jediný vstupní text, ale pokud si myslíte, že na vašem webu by mohl být "noob uživatel" Myslím, že nejlepší věc je první možnost :)

3
Filippo1980

Pokud jde o rychlost a snadnost použití, nic nepřekonává jednoduchý číselný zápis, např. 2010-09-21. Použijte jediné textové pole, ale (kromě běžných "/" a "-") také přijímejte karty pro přesun z jednoho pole na další jeden. Stisknutí klávesy [tab] by mělo vložit oddělovač. Jako oddělovač upřednostňuji pomlčku, protože odděluje pole jasněji.

Nenuťte lidi psát vedoucí nuly.

Zadávání textu bych nepoužíval jako zkrácené měsíce, jak navrhuje Bevan, protože vstup trvá déle. Jak také zkrátíte? Tři písmena? Čtyři? Jak jsem řekl ve své odpovědi na Bevana, je to zvláště špatný nápad, pokud pracujete s mezinárodním publikem; „Září“ nemusí být v jazyce uživatele „Září“.

Mluvíme-li o mezinárodním publiku: ne každý používá řád MM-DD-RRRR (ve skutečnosti mimo USA téměř nikdo tak neučiní). Pod textovým polem můžete uvést požadovanou objednávku. Jedním ze způsobů, jak se vyhnout dvojznačnosti dat, jako je 5-06-201, je použít formát ISO 8601 RRRR-MM-DD.

2
stevenvh

Zadejte textový vstup, kde uživatel může zadat datum, spolu s náznakem, jaký formát může použít, ale pak přijměte jakýkoli jednoznačný formát bez ohledu na oddělovače nebo počet číslic. Když uživatel zadá něco jiného než standardní formát, okamžitě jej aktualizujte na standardní formát, aby uživatel přesně viděl, jak interpretujete datum jednoznačným způsobem. Přidání ikony kalendáře umožňuje uživatelům, kteří chtějí vybrat z kalendáře, také dobré - uživatelé, kteří chtějí zadat datum, jej nemusí používat.

1
Sam

Dělal jsem na to jen nějaký výzkum. Aplikace Kalendář jsou dobrým místem pro zahájení. Moje oblíbené rozvržení je datum s časem vpravo. Nelíbí se mi formát Kalendář Google Datum - Čas - Čas - Datum, ale vydavatel a rozbalovací nabídka jsou zcela jasně provedeny.

(Nemohl jsem to zveřejnit, ale já bych vás vyzval, abyste si to prohlédli)

0
sudonim