Toast – Element UI

Ce este Toast in UI/UX Design?

Toast este un element UI care actioneaza ca un mesaj de feedback usor personalizabil ce apare pe ecranul utilizatorilor pentru a le oferi un anumit tip de feedback. Acestea sunt adesea afisate in coltul unei user interfetei al unei aplicatii sau unui site web. Cunoscute si sub denumirea de notificari toast, aceste mesaje mici care apar pe ecran dispar la scurt timp dupa ce mesajele sunt livrate.

Un mesaj toast UX apare ca raspuns la o activitate pe care o desfasuram in prezent sau poate aparea pentru a informa utilizatorul ca o actiune a fost finalizata. Toast UI design nu are scopul de a intrerupe utilizatorul sau de a-l impiedica sa intreprinda o anumita actiune, ci mai degraba de a recunoaste si informa. Toast-urile pot fi utilizate atat ca toast-uri web, cat si ca toast-uri mobile, adaptandu-se la interfata digitala disponibila.

Un editor UI toast poate fi intalnit si atunci cand se folosesc notificari toast. Un editor UI toast ofera posibilitatea de a personaliza seturile de text disponibile si de a le schimba in diverse limbi.

Tipuri de Toast-uri in designul UI/UX

1. Default

Un Toast UI design default sau de baza permite utilizatorilor sa actioneze asupra mesajului pe care il primesc. Un exemplu in care acest toast mobil sau web poate fi implementat este pentru anularea unei actiuni, cum ar fi stergerea unui e-mail care tocmai a fost trimis.

2. Mesaje multiple

O alta optiune pentru utilizarea toast UX UI design este implementarea mai multor toast-uri - mai multe toast-uri care pot fi afisate simultan, in functie de caz. Notificarile cu mesaje multiple toast au fost create pentru a evita aglomerarea si confuzia care ar putea fi declansate sau cauzate atunci cand sunt necesare multe mesaje toast intr-un design.

3. Cu durata personalizata

Acest tip de element de design UI toast permite personalizarea duratei in care este afisat pe ecran. Durata implicita a unui toast este de 5000 de milisecunde. Cu acest tip de toast UX, putem asigura timpul potrivit de care au nevoie utilizatorii nostri pentru a vizualiza un mesaj.

4. Cu actiune

Acest tip de toast UX se refera in mod specific la cazurile in care utilizatorii pot actiona asupra unei anumite sarcini. Un toast UX cu actiune poate ajuta utilizatorul sa finalizeze o actiune mai rapid si sa mentina un design fara cusur.

5. Eroare

Aceste mesaje toast UX au rolul de a semnala utilizatorilor ca a aparut o eroare si ca trebuie sa actioneze in consecinta. Astfel, atunci cand o intrare nu este introdusa corect, utilizatorii potentiali vor fi constienti ca actiunea trebuie schimbata.

6. Succes

Un alt tip de toast UI este cel care comunica utilizatorilor ca o actiune a fost finalizata cu succes. Similar cu mesajele toast de eroare, toast-ul de succes mobil sau web are rolul de a informa utilizatorul ca o actiune a fost finalizata corect.

‍

Cum sa folosesti Toasts in UI UX Design

UI UX designers ar trebui sa urmareasca urmatoarele aspecte cand creaza un toast UI element. 

• Text: Textul inclus intr-un toast UI ar trebui sa fie direct si usor accesibil pentru toti utilizatorii. Ar trebui sa evitam adaugarea unor blocuri mari de text si sa folosim cuvinte simple si intuitive.
• Dimensiune: Deoarece toast-ul este un element UI, trebuie sa sprijine echilibrul vizual in raport cu restul designului. Dimensiunile pe care le poate avea un toast sunt mari, medii si mici, si vor lua o anumita dimensiune in functie de contextul in care apar.
• Culoare: Exista doua aspecte principale in ceea ce priveste culoarea unui toast UI design. Primul este ca trebuie sa se potriveasca cu scopul sau. De exemplu, un toast care este destinat sa comunice utilizatorilor ca o actiune a fost finalizata cu succes ar trebui sa fie intr-o nuanta de verde. Al doilea aspect care necesita atentie este ca culoarea elementului UI toast trebuie sa se potriveasca cu estetica generala a site-ului web sau a paginii.

Cand sa folosesti Toasts in UI UX Design

Ca si celelalte UI elements dintr-un UI UX design, toasts are rolul de a imbunatati user experience. Tocmai de aceea, trebuie sa fim atenti la urmatoarele aspecte cand cream toasts in UI UX design.

• Scop: Ca regula generala, toast-urile sunt integrate de UI UX designers pentru a comunica mesaje scurte si concise utilizatorilor. Daca trebuie trimise mesaje mai lungi utilizatorilor, ar trebui trimise alerte in schimb.
• Utilizare pe Mobil: Una dintre cele mai comune reguli care ar trebui urmate de UI UX designers in cazul unui mobile app design este ca toast-urile care au zone actionabile trebuie sa fie mai mari. 
• Evitarea mesajelor de eroare: Desi toast-urile de eroare exista, UI UX designers ar trebui sa le evite deoarece erorile pot intrerupe experienta utilizatorului si ar putea fi potential ignorate de utilizatori daca sunt semnalate printr-un toast.

‍

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 toast 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.