UI – User Interface

Live Design \ UI – User Interface
“Design is not just what it looks like and feels like. Design is how it works.”

“Design is not just what it looks like and feels like. Design is how it works.”

Steve Jobs

Am ales citatul de mai sus pentru că stă la baza modului în care privim, în Live Design, zona de User Interface Design. Deși nu are nicio legătură cu arta, misiunea unui UI designer este comparabilă cu a unui artist. Trebuie să te facă să înțelegi și să iubești ceea ce vezi, luptându-se cu foarte multe constrângeri.

De aici pornim…

Un user nu este pe site-ul tău sau aplicația ta să admire designul, e acolo să rezolve o problemă.

De ce ai nevoie de UI?

De ce ai nevoie de UI?

  • te va ajuta să faci o primă impresie bună, ca să obții o a doua șansă de la utilizatori  
  • userii înțeleg ușor ce au de făcut
  • UI designul îți permite să transmiți informație, dar și emoție, poți crea o stare
  • le poți indica utilizatorilor ce e important și ce e secundar 
  • UI este un element diferențiator, te ajută să ieși din tiparul framework-urilor de design
  • interfața ta are nevoie de brand alignment 

Câteva piese de bază în UI

Designul de interfețe este mult mai matematic decât ți-ai imagina. În era mobile-first, ai foarte puțin spațiu pentru creativitate. Dacă suprapui și constrângerile care îți vin din brand book, ești și mai presat. Cu toate acestea, există zone în care poți face diferența.  

Aesthetic effect

… sau frumusețea designului. Culori, contrast, proporții, spațiere, icon-uri, fotografii – toate creează atracție, te ajută să te diferențiezi. Userii percep o interfață plăcută ochiului ca fiind mai bună decât una cu un UX bun, dar cu un UI slab (the halo effect). 

Ierarhia

Trebuie să-i comunici utilizatorului ce este important și ce este secundar. Titlurile sunt mai mari, butoanele cu acțiunea principală sunt evidențiate mai bine etc. Rezistă tentației să faci să pară că totul e important! Obții efectul contrar.

Consistența

Se referă la cât de consecvenți suntem. Adică tratăm unitar un element în tot proiectul sau grupăm itemii care au comportament similar. Îi ajutăm astfel pe useri să intuiască ce au de făcut. Haosul în design poate fi spectaculos, dar niciodată eficient. 

Grid-urile

Companiile de UX/UI folosesc, cu succes, grid system. Este inventat de tipografi, iar azi e de neconceput să nu-l folosești când creezi interfețe pentru produse digitale. Presupune: column, baseline, și rectangles. Totul capătă simetrie, devine ordonat. Iar creierul nostru iubește asta. 

Typography

Modul în care arată textele are un impact major în interfață. Caracteristicile principale pe care le urmărim sunt lizibilitatea și scalabilitatea. Iar typography înseamnă mai mult decât fonturi. Uneori, pot apărea conflicte cu brand book-ul. 

Brand alignment

Te poate ajuta sau încurca mult, dar e esențial să-l respecți. Dacă ai de făcut un UI pentru Nike, de exemplu, punctul tău de plecare este solid. Totodată, nu este validă scuza: clientul nu are un manual de identitate. Dacă nu există, trebuie creat (măcar esențialul) înainte să te apuci de UI.

Ce este User Interface Design?

User interface design (UI) este procesul prin care designerii construiesc interfețe pentru produsele software (ex. aplicații sau site-uri). Obiectivul lor principal este ca userii să le considere plăcute și, în egală măsură, ușor de folosit.  

UI este o ramură a human-computer interaction (HCI), o știintă care acoperă toate formele de design dedicate computerelor / tehnologiei. Interaction Design Foundation inventariază 3 forme de UI: Graphical user interfaces (GUIs) – orice site, aplicație; Voice-controlled interfaces (VUIs) – ex. Siri sau Alexa; Gesture-based interfaces – ex. jocurile controlate prin gesturi.

Ajută-te de librăriile sau framework-urile de UI

Ajută-te de librăriile sau framework-urile de UI

Efortul de a face totul de la zero de fiecare dată este nejustificat. Ai la dispoziție, chiar și gratuit, resurse incredibile. 

Framework-uri

Icons

Chiar dacă faci un compromis în zona de creativitate, gândește-te la avantajele majore pe care le ai atunci când ții cont de aceste framework-uri. Cel mai mare dintre ele este viteza în development, fiindcă toate vin cu componente deja codate. Totodată, ele sunt deja validate de piață. 

Importanța unui Design System

Un design system este un set de standarde, o colecție de componente pe care le poți refolosi pentru a construi o aplicație sau un site. Capeți viteză dacă nu încerci mereu să reinventezi roata.

Pentru proiectele mai mari, elementele propriu-zise sunt însoțite de specificații legate de modul de utilizare, comportamente, restricții sau instrucțiuni tehnice. Exemplu de componente: butoane, linkuri, meniuri, titluri, blocuri de text, icon-uri, formulare, inputuri etc.

Este recomandat să ne folosim de acest instrument pentru a fi rapizi și consistenți în design. Iar acest lucru va avea un impact pozitiv și în viteza etapei de development. 

Ai nevoie de UI în proiectul tău?

Referințe

O viziune concisă, pragmatică despre UI: Michal Malewicz, co-founder and CEO of UX consultancy Hype4

Diferența dintre UI și UX

The Aesthetic-Usability Effect

Licenta foto Steve Jobs: