Date Picker – Element UI

Ce este un Date Picker UI Element?

Date pickers in UI Design permit utilizatorilor sa aleaga o data sau un interval de date dintr-un calendar popup. Acestea fac parte din viata noastra de zi cu zi, fie ca rezervam urmatoarea calatorie sau ne inregistram varsta pe o platforma de social media. Asa ca, a devenit un UI element extrem de important pentru toti UI UX designers. 

‍

Tipuri de Date Pickers in UI UX Design

Exista trei tipuri principale de date pickers folosite de UI UX designers:

1. Docked Date Picker

Aceste tipuri de date pickers in UI design permit utilizatorilor sa selecteze date specifice precum si ani. Primul lucru pe care il vedem cand deschidem un docked date picker este un camp de introducere a datei implicit. Cand apasam pe el, vom vedea un calendar dropdown cu care putem interactiona. Putem alege sa navigam aceste date pickers prin intermediul tastaturii sau cursorului.

2. Modal Date Picker

Exista mai multe moduri de a naviga un modal date picker. Asa ca, UI UX designers trebuie sa creeze design-ul acestor UI elements in asa fel incat sa putem sa glisam orizontal daca dorim sa navigam prin luni. Pentru a naviga prin ani, ar trebui sa derulam vertical si pentru a selecta anul, trebuie sa apasam pe anul respectiv.

3. Modal Date Input

Aceste date pickers permit utilizatorilor sa introduca manual datele folosind numerele de pe tastatura. Pentru a dezvolta un asfel de UI element, UI UX designers trebuie sa aiba in vedere crearea componentelor legate de date picker dar si tastatura functionala.

‍

Cand sa folosesti Date Pickers

Date pickers sunt folosite de UI UX designers pe multe site-uri web si aplicatii deoarece deseori trebuie sa luam in considerare timpul ca utilizatori. Cu toate acestea, tipurile de date pickers pe care le alegem depind de contextul in care ne aflam.

• Docked Date Picker: Datorita diversitatii lor, aceste date pickers sunt potrivite atat pentru datele din viitorul apropiat, cat si pentru cele din viitorul indepartat.
• Modal Date Picker: Aceste date pickers nu sunt potrivite pentru datele din trecutul sau viitorul indepartat. Ar trebui aplicate in cazuri precum rezervarea unui zbor sau a unei camere de cazare.
• Modal Date Input: Modal date input poate fi vizualizarea implicita pentru datele care nu necesita o vizualizare a calendarului.

‍

Cum se folosesc Date Pickers in UI/UX Design

• Familiarizeaza-te cu date pickers: inainte de a alege ce date pickers sa adaugi pe site-ul sau aplicatia ta, ar trebui sa te familiarizezi cu rolurile si tipurile disponibile.
• Compatibilitate: Cand cream un date picker pentru pagina noastra, UI UX designers trebuie sa se asigure ca este compatibil cu cat mai multe browsere pentru ca utilizatorii nostri sa aiba acces facil la acestea.
• Gestionarea erorilor: Exista multe cazuri in care prevenirea erorilor este extrem de utila. De exemplu, in cazul selectarii datelor de zbor, data de plecare ar trebui sa fie intotdeauna mai devreme decat zborul de intoarcere. Este important sa semnalam utilizatorilor cand au facut o greseala.
• Intuitivitate: Este esential ca date pickers sa ajute utilizatorii sa completeze data cat mai usor posibil. De aceea, implementarea diferitelor tehnologii, cum ar fi textul sugestiv care indica formatul pe care ar trebui sa il foloseasca, este de ajutor.
• Eliminarea datelor ilogice: Nu exista niciun motiv pentru care utilizatorii sa aiba optiunea de a selecta anul 1900 ca an de nastere. Date pickers ar trebui sa excluda datele ilogice.

‍

Inscrie-te acum la Cursul de UI UX Design de la Traction Keys

Parcurge cursul nostru de UI/UX design pentru a invata totul despre user interface si user experience. La cursul de UI UX design de la Traction Keys vei invata cum se creaza un sistem de design, cat si cum se creeaza un UI UX Design Date Picker. Stapanirea tuturor elementelor cat si a practicilor de design UI UX te vor ajuta sa devii un designer UI UX complet si iti va asigura urmatorul tau job si viitoarea cariera.