Jaki jest najlepszy interfejs użytkownika do wprowadzania daty urodzenia? [Zamknięte]

Jaka jest najlepsza metoda wyboru daty urodzenia?

• 3 wejścia tekstowe (miesiąc / dzień / rok) lub jedno wejście maski. Użytkownik MUSI używać klawiatury
• 3 pola wyboru. Użytkownik może korzystać z klawiatury lub myszy.
• Jeden niezły datownik .

Chcę wiedzieć, jakie jest najbardziej użyteczne i bezproblemowe rozwiązanie, aby użytkownik nie był w ogóle zdezorientowany.

Dla zaawansowanego użytkownika wprowadzanie tekstu jest najlepsze, jeśli użytkownik zna format daty, jest bardzo szybkie. Dla niezbyt zaawansowanego użytkownika sugeruję użycie datepickera. Ponieważ zazwyczaj masz również zaawansowanych i niezaawansowanych użytkowników, sugeruję połączenie wprowadzania tekstu i wyboru daty.

Jeśli Twoim celem jest upewnienie się, że „użytkownik nie będzie w ogóle zdezorientowany”, myślę, że jest to najlepsza opcja.

Nie polecałbym wybierania daty urodzenia . Najpierw musisz przejść do roku (kliknij, kliknij, kliknij…), następnie do miesiąca (kliknij więcej), a następnie znajdź i kliknij maleńką liczbę na siatce.

Datepickers przydają się, gdy nie znasz dokładnej daty z góry głowy, np. Planujesz wyjazd na drugi tydzień lutego.

Chociaż jest to bardzo stare pytanie, jest tak ważne, aby uzyskać poprawną datę urodzenia, zwłaszcza w formularzu rejestracyjnym.

Myślę, że nikt nie zrobił tego lepiej niż rejestracja kont Google:

Wybierz pierwszy miesiąc z pola wyboru i ręcznie wpisz datę i rok. Prosty.

Łatwe do sprawdzenia. Łatwy do znalezienia przez użytkowników. Żadnego przewijania lat w wybranym oknie od 1900 do bieżącego roku. Nie ma potrzeby aktualizowania pola wyboru „dzień” na podstawie wprowadzonego miesiąca. Świetnie działa w sieci. Działa świetnie na urządzeniach mobilnych. Działa we wszystkich lokalizacjach, np. 10.01.2014 - czy to 1 października czy 10 stycznia? Spodziewam się, że w przyszłości ten format selektora urodzin będzie znacznie częstszy.

Datepicker to po prostu kiepskie rozwiązanie. Tyle kliknięć! Moim zdaniem datepicker jest przydatny tylko wtedy, gdy znajomość dnia tygodnia jest ważna np. Przy rezerwacji biletów.

Aktualizacja 2/6/2016: Pochodzę z Wielkiej Brytanii, więc bardziej znam formaty dzień / miesiąc / rok niż miesiąc / dzień / rok. Jednak użytkownicy, którzy będą używać kursora do wybierania miesiąca, uważam, że znacznie łatwiej jest mieć najpierw pole wyboru, niż wprowadzać dane> zaznacz pole> wprowadzać. Data komentarza to 2 czerwca, a nie 6 lutego;)

Jak wspomniano w tym artykule Jakoba Nielsena , należy unikać list rozwijanych w przypadku danych dobrze znanych użytkownikowi :

Menu zawierające dane dobrze znane użytkownikom, takie jak miesiąc i rok urodzenia. Takie informacje są często wbudowane w palce użytkowników, a konieczność wybierania takich opcji z menu łamie standardowy paradygmat wprowadzania informacji, a nawet może przysporzyć użytkownikom więcej pracy.

Idealnym rozwiązaniem jest prawdopodobnie coś takiego:

• Zapewnij 3 oddzielne pola tekstowe dla dnia, miesiąca i roku (odpowiednio oznaczone)
• Sortuj pola tekstowe zgodnie z kulturą użytkownika.
• Pola tekstowe Dzień i Miesiąc powinny mieć taką wielkość, aby zakładano wpisanie 2 cyfr.
• Pole tekstowe roku powinno mieć taką wielkość, aby przyjąć 4-cyfrowy rok.
• Pozwól użytkownikowi wprowadzić rok z 2 lub 4 cyframi. Załóżmy, że rokiem dwucyfrowym jest 1900 i zaktualizuj pole tekstowe, aby odzwierciedlić to na Blur (lub na kolejnym kroku potwierdzenia).
• Pozwól użytkownikowi wprowadzić numer miesiąca LUB nazwę miesiąca.

EDYCJA: Oto jak zaimplementowaliśmy nasz selektor DOB: Zamaskowane pole wprowadzania tekstu z wyrażeniem regularnym HTML5, aby wymusić klawiaturę numeryczną na urządzeniach z systemem iOS.

http://www.huntercourse.com/usa/texas/

Daty urodzenia różnią się od innych dat, ponieważ ludzie często wpisują swoją konkretną datę urodzenia.
Pole tekstowe z przykładem jest jasne, szybkie i łatwe do wprowadzenia:

 _______
|_______| (example: 31/3/1970)

Powinno to obsługiwać elastyczne formatowanie, takie jak 1/1/1970 lub 20/07/70.

Jeśli musisz wspierać różne kultury z różnymi konwencjami dat (np. USA i Wielka Brytania), może to być podatne na błędy dla osób, które nie zważają na przykład. Aby tego uniknąć, możesz użyć
listy wyboru dla miesiąca i pól tekstowych dla daty i roku .

 _________   __   ____
|March  |V| |__| |____|

Eliminuje to niejednoznaczność między porządkiem dziennym i miesięcznym, ale jest trochę trudniejsze w użyciu.

Powinieneś spojrzeć na Datejs .

Datejs to biblioteka dat JavaScript typu open source.

Kompleksowe, ale proste, ukryte i szybkie. Datejs przeszedł wszystkie próby i jest gotowy do ataku. Datejs nie tylko analizuje ciągi, ale dzieli je czysto na dwie części.

Martwi mnie przewaga rozwiązań zamiast projektowania. OP powiedział: „Chcę wiedzieć, jakie jest najbardziej użyteczne i bezproblemowe rozwiązanie, aby użytkownik nie był zdezorientowany”. Niezależnie od tego, czy jest to jQuery, JavaScript, C # czy FORTRAN, projekt jest ważny - i liczy się tutaj projekt UX, a nie projekt interfejsu użytkownika. (Kolejna prośba o uniknięcie niepoprawnej i nielogicznej konstrukcji „UX / UI”).

Użyj wprowadzania tekstu. Użyj trzech oddzielnych pól oznaczonych jako Dzień, Miesiąc i Rok (lub Miesiąc, Dzień i Rok). Pozwól użytkownikom wpisywać daty. Mieszanie tekstu i list w tej samej interakcji jest złą rzeczą (nie używaj wprowadzania tekstu dla roku, ale na przykład selektor dat lub list dla miesiąca i dnia).

Użyj pojedynczego pola tekstowego ze wskazówkami dotyczącymi formatu w polu, na przykład [dzień / miesiąc / rok] Nie wymagaj formatów zbyt sztywno. Jeśli użytkownik wpisze JUN w miejscu, w którym spodziewasz się miesiąca, użyj na zapleczu czerwca. Jeśli użytkownik wpisze 6 w miejscu, w którym spodziewasz się miesiąca, użyj na zapleczu czerwca. Jeśli użytkownik wpisze 06 w miejscu, w którym spodziewasz się miesiąca, użyj czerwca na zapleczu.

Użyj Brzytwy Ockhama jako przewodnika (w efekcie przez większość czasu dane będą wystarczająco dokładne). Zmniejsz tarcia poznawcze (nie zmuszaj użytkowników do myślenia).

Poleciłbym również połączenie DatePicker i pól

Zobacz to demo , w którym selektor dat odzwierciedla datę wprowadzoną w polach przez użytkownika.
Opiera się jednak na DatePicker używającym Prototype i Scriptaculous . Wspominam o tym w celach ilustracyjnych.

Wypróbowałem datePicker z moim użytkownikiem, ale okazało się, że jest to dla nich zły interfejs użytkownika. Na ich prośbę kończy się to, że mam 3 pola tekstowe, w których mogą szybko wpisać [dzień] [miesiąc] [rok] :(

Umieść oba i zaktualizuj się nawzajem. Jeśli użytkownik wybierze datę z selektora dat, łatwo jest naprawić drobne błędy kliknięcia w polu tekstowym lub zwizualizować wybór wpisany w polu tekstowym w selektorze dat.

Dlaczego nie przetestujesz wszystkich trzech i nie wybierzesz tego, który działa najlepiej? Wydaje się, że to dobry kandydat do przetestowania przez Optymalizator witryny Google .

Może się zdarzyć, że rodzaj użytkowników lub typ prowadzonej witryny może wpływać na to, że Twoje rozwiązanie powinno być inne niż „norma”.

Zwykle używam obu - selektora dat, który wypełnia pole tekstowe w odpowiednim formacie. Zaawansowani użytkownicy mogą bezpośrednio edytować pole tekstowe, użytkownicy zadowoleni z myszy mogą wybierać za pomocą DatePicker.

Jeśli martwisz się o miejsce, zwykle mam tylko pole tekstowe z małą ikoną kalendarza obok niego. Kliknięcie ikony kalendarza spowoduje wyświetlenie selektora daty jako wyskakującego okienka.

Uważam również, że dobrą praktyką jest wstępne wypełnienie pola tekstowego tekstem wskazującym prawidłowy format (np. „DD / MM / RRRR”). Gdy użytkownik skupi się na polu tekstowym, tekst znika, aby mógł wprowadzić własne.

Jako prawdopodobnie jedna ze starszych osób tutaj urodzonych pod koniec miesiąca, uważam, że rozwijane menu z datami urodzenia są frustrujące. Zwykle muszę przewijać w dół w dwóch menu rozwijanych, a to jest niezręczne. Wolałbym to wpisać.

Jeśli możesz mieć kontrolkę zaprojektowaną w taki sposób, że może akceptować menu rozwijane lub być wpisywana i sprawiać, że będzie jasne, że działa, to byłoby świetnie.

Myślę, że to, czy użyć DatePicker, czy nie, zależy od tego, jak dawno były te daty. Jeśli są one zazwyczaj w bieżącym miesiącu i prawie nigdy nie są starsze niż kilka miesięcy, a wiesz, że Javascript będzie w pobliżu, wybór daty jest dobry. Jeśli daty nie są niedawne (powiedzmy, data urodzenia), myślę, że to najlepsza opcja:

http://img411.imageshack.us/img411/6328/mockupg.png

Zwróć uwagę, że różni się to od odpowiedzi Patricka McElhaneya tym, że rok to pole tekstowe, a nie lista rozwijana . Wybór setek elementów z listy rozwijanej jest bardzo denerwujący dla użytkownika.

Myślę, że selektor dat tylko utrudnia wprowadzenie daty urodzenia.

Jak już wspomniano, połączenie list rozwijanych z dniami i miesiącami z polem tekstowym na rok wydaje się najbardziej wydajne dla użytkownika. Wprowadzenie daty urodzenia w ten sposób zajmuje tylko mniej niż 10 sekund, co jest znacznie szybsze niż w przypadku selektora dat: dzięki klawiszowi tabulacji (którego wszyscy użytkownicy powinni nauczyć się wypełniać formularz), można szybko przejść z jednego formularza element do następnego.

Przynajmniej pod Macintoshem (nie wiem o Windowsie), możesz również użyć klawiatury, aby uzyskać dostęp do daty w zaznaczonych polach: dzięki klawiszowi tab, ustawiasz fokus na elemencie formularza, a następnie naciśnij klawisz strzałki, aby rozwinąć listę, a następnie wpisz na przykład 1967 i dotrzesz na miejsce w mgnieniu oka…

Wolałbym wybór daty (i pole wprowadzania z udokumentowanym formatem jako rozwiązanie awaryjne) dla witryny międzynarodowej.

Formaty dat są różne i czasami trudno je odczytać, jeśli jesteś do nich przyzwyczajony. Szkoda, że ​​wiele osób nie czuje się komfortowo z ISO 8601. :-(

Sugerowałbym użycie rozwijanego menu dla każdego pola, upewniając się, że każde pole jest oznaczone jako dzień, miesiąc i rok. Może też pomóc selektor dat, ale jeśli użytkownik nie ma włączonej obsługi JavaScript, nie zadziała.

Wziąłbym DatePicker. Jest to jedyny komponent, który pozwala doświadczonym użytkownikom wprowadzić go ręcznie i bardzo ułatwia nowicjuszom wprowadzenie daty.

Kalendarz nie powinien wyskakiwać, jeśli wejdziesz przez naciśnięcie klawisza tab, ale klikniesz przycisk. Więc żaden doświadczony użytkownik nie jest tym zirytowany.

Kto nie używa DatePicker interfejsu użytkownika jQuery?

Jest konfigurowalny, aby dopasować się do prawie wszystkich potrzeb. Jedynym minusem jest to, że jeśli dołączasz go do interfejsu użytkownika jQuery, ma dość duży ślad.

Aktualizacja

Wygląda na to, że niektóre rozmiary plików uległy zmianie, dlatego zostały zaktualizowane poniżej. Pamiętaj, że te liczby będą poprawne tylko do czasu ostatniej aktualizacji. Od tego czasu sytuacja mogła się zmienić.

• Motyw CSS - 23kb
• jQuery UI - 71 kb zminimalizowany
• DatePicker - 38kb
• Plus kilka obrazów (następny miesiąc / poprzedni miesiąc, które jestem prawie pewien, że są sprasowane)

Ale to nie jest takie złe ...

Selektor datetime JQueryUI jest najlepszą opcją, ponieważ pozwala profesjonalnym użytkownikom wprowadzić własną wartość w polu tekstowym lub wybrać ją z selektora.

Skonfigurowanie selektora, aby umożliwić łatwe wprowadzanie urodzin lub przyszłych dat, jest również dość łatwe:

$ ('# datepicker'). datepicker ({
    changeMonth: true,
    changeYear: true,
    rok Zakres: '-100: +50'
});

to pokazuje coś takiego (nie mogę opublikować zdjęcia, ponieważ jestem nowym użytkownikiem: http://klalex.com/wp-content/uploads/2009/07/picture-1.png )

and yearRange pokazuje daty od DateTime.Now.Year - 100 do DateTime.Now.Year + 50

znalazłem to na: http://klalex.com/2009/07/jquery-ui-datepicker-for-birth-date-input/

Właśnie odkryłem wtyczkę na JSFiddle. Dwie możliwe alternatywy: 1 pojedyncze wejście LUB 3 wejścia, ale wygląda jak pojedyncze ... (użyj klawisza Tab, aby przejść do następnego wejścia)

[link] http://jsfiddle.net/davidelrizzo/c8ASE/ Wydaje się interesujące!

Myślę, że możesz wypróbować narzędzie do wybierania urodzin wtyczki ,

możesz użyć wtyczki cxcalendar . Wygląda jak inny datepicker. ale możesz wybrać rok i miesiąc w opcji Wybierz po kliknięciu tytułu roku-miesiąca.

Utworzyłem trzy menu rozwijane dla wyboru daty urodzenia i liczby dni zmienia się dynamicznie w zależności od wyboru roku i miesiąca. http://jsfiddle.net/ravitejagunda/FH4VB/10/

daysInMonth = new Date(year,month,1,-1).getDate();