Popover – Element UI

Ce este un Popover UI?

Popovers sunt UI elements folosite pentru a afisa informatii nonesentiale intr-o fereastra temporara. Dupa apasarea elementului declansator, popoverul va pluti deasupra continutului paginii. Popovers UI pot include componente precum titluri, hyperlinkuri, bare de derulare si imagini, printre altele.

‍

Tipuri de Popovers in Design UI/UX

In UI UX design, exista mai multe tipuri de popovers UI: 

1. Popover UI fara varf

Aceste popovere pot fi folosite in diverse cazuri de UI UX designers si apar in principal atunci cand butonul declansator are un aspect vizual clar de apasare. Deoarece popoverul nu are un varf, butonul declansator ar trebui sa apara langa el si poate sa se deschida din orice directie (stanga, dreapta, sus sau jos).

2. Popover UI cu varf caret

Aceste tipuri de popovere sunt implementate pentru a evidentia relatia dintre popover si sursa din care a fost declansat. Folosim varfurile caret atunci cand butonul declansator nu are un aspect vizual clar de apasare, precum si pentru butoanele icon.

3. Popover UI cu varf tab

Cea mai comuna utilizare pentru acest tip in UI UX design este atunci cand un popover este conectat la o zona de antet sau la o bara de instrumente unde va sta butonul declansator. Varful tab poate aparea doar pe partea dreapta sau stanga a containerului.

‍

Cum se folosesc UI Component Popover? Cele mai bune practici in UI UX Design

• Dimensiune: Aspectul de dimensiune al unui popover UI se ajusteaza in functie de tipul de continut pe care il include - se vor adapta pentru a-l prezenta cat mai bine.
• Pozitionare: Desi pozitia in care va aparea popoverul depinde de tipul sau, in general poate fi plasat la dreapta, stanga, sus sau jos fata de continutul la care sunt legate.
• Culoare: Deoarece popovers sunt elemente de interfata, trebuie sa mentina coerenta vizuala si sa se potriveasca cu estetica generala a site-ului sau aplicatiei. Ca regula generala, popup-urile care apar pe un fundal deschis ar trebui sa aiba un ton mai inchis si viceversa.
• Continut: Informatiile dintr-un popover nu ar trebui sa fie obligatorii pentru utilizatori. Acest lucru ofera multa flexibilitate pentru categoriile de continut pe care le poate include, atata timp cat informatiile sunt aditionale si nu urgente.
• Buton declansator: Indiferent de tip, fiecare componenta popover ar trebui sa includa un buton declansator.
• Element focalizabil: Desi popoverele pot afisa diverse informatii si elemente de design, este obligatoriu ca fiecare popover sa aiba un element focalizabil clar.

Cand sa folosesti Elementul Popover UI

Ca si UI UX designers, este important sa folosim popovers UI in mai multe contexte:

• Informatii aditionale: Rolul de baza al popoverelor este de a furniza utilizatorilor date secundare si tertiare legate de pagina pe care navigheaza. Daca detaliile incluse in popover nu sunt suficiente, exista optiunea de a adauga un buton de call to action "Aflati mai multe".
• Asistenta cu tooltip: Adesea, continutul pe care dorim sa-l includem este prea mare pentru un tooltip. Popoverele pot fi implementate pentru a asista datele din tooltipuri.
• Context: Popoverele pot fi, de asemenea, implementate pentru a crea o relatie contextuala cu elementele de pe ecran pe care un dialog nu ar putea sa o ofere.
• Mentinerea pozitiei: Popoverele ajuta utilizatorii sa acceseze informatii diferite fara a fi nevoie sa paraseasca pagina pe care se afla in prezent.

‍

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 popover UI design. 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.

‍