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.
forms
user-interface
usability
Ionuț Staicu
źródło
źródło
month / day / year
jest szczerze dziwny .year / month / day
Odpowiedzi:
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.
źródło
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.
źródło
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;)
źródło
Jak wspomniano w tym artykule Jakoba Nielsena , należy unikać list rozwijanych w przypadku danych dobrze znanych użytkownikowi :
Idealnym rozwiązaniem jest prawdopodobnie coś takiego:
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/
źródło
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:
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 .
Eliminuje to niejednoznaczność między porządkiem dziennym i miesięcznym, ale jest trochę trudniejsze w użyciu.
źródło
Powinieneś spojrzeć na Datejs .
źródło
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).
źródło
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.
źródło
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] :(
źródło
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.
źródło
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”.
źródło
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.
źródło
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.
źródło
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.
źródło
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…
źródło
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. :-(
źródło
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.
źródło
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.
źródło
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ć.
Ale to nie jest takie złe ...
źródło
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:
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/
źródło
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!
źródło
Myślę, że możesz wypróbować narzędzie do wybierania urodzin wtyczki ,
źródło
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.
źródło
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/
źródło