În Tips & Tricks

Design Patterns – soluții, estetică și bun simț

patternuri de design

Șabloanele de proiectare (design patterns) reprezintă soluții la problemele pe care le întâlnim în crearea interfețelor sau experiențelor cu utilizatorul. Discutăm despre tehnici precum filtrări, wizzard-uri, paginație, thumbnail-uri, componente care ne pot face viața mai ușoară atunci când rămânem blocați la un design de interfață sau flow.

Ele ne pot ajuta să oferim consecvență și eficiență atunci când vine vorba de vizitarea unui website sau de folosirea unei aplicații pe un dispozitiv mobil. Însă folosirea lor nu ne asigură succes instant. Trebuie să fim logici, preciși și să nu ne grăbim când trebuie să decidem ce șablon vom aplica pentru care problemă.

Astfel de pattern-uri regăsim zilnic cât timp petrecem pe Internet. Printre cele mai uzuale (în afară de cele menționate mai sus) putem enumera și: tab-urile folosite pentru navigație, galeriile de imagini, pagina de produs (esențială oricărui eCommerce), formularele de înregistrare/conectare pentru orice cont, completarea de captcha, rating-urile și lista poate continua. Toate acestea sunt componente și interacțiuni cu care am intrat în contact cel puțin o dată, uneori fără să ne dăm măcar seama.

Formularul cel de toate zilele

Să luăm drept exemple câteva situații concrete cu care utililizatorul se confruntă atunci când este pus în fața formularelor:

  • abonarea la newsletter
  • landing page de campanie
  • formular de contact
  • formular trimitere CV

Este mai ușor să-i ofer utilizatorului un calendar (date-picker) pentru introducerea unei date, decât să-l pun să completeze manual sub un anumit format (DD-MM-YYYY sau  MM/DD/YY). Este mai convenabil să-i ofer încărcarea de fișiere (file uploader), decât să fie nevoit să introducă toată calea de pe calculatorul său spre fișierul respectiv și așa mai departe – exemplele pot continua.

CFR Călători Redesign – calendar picker pentru data plecării
cfr

Căutarea

De regulă, suntem tentați să folosim cele mai uzuale design pattern-uri pentru cele mai comune probleme întâlnite. Să luăm ca scenariu căutarea și rezultatele unei căutări de produse. Problema pe care trebuie să o rezolvăm este aceea de a ajuta utilizatorii să găsească rapid ceea ce caută. Pentru aceasta, putem folosi funcția autocomplete sau autosuggest, atunci când este posibil. Astfel, vom oferi rapiditate la introducerea datelor de intrare, eliminând posibilele greșeli de scriere. Nu putem citi mintea utilizatorului, dar putem să-i oferim un punct de pornire în funcție de cât de bine îl cunoaștem.

Three.co.uk – sugestii atât pentru căutare de produse, cât și a informațiilor ajutătoare
threecouk

Paginația vs scroll-ul continuu

În unele cazuri, este posibil să avem un număr considerabil de rezultate obținute în urma unei căutări. Ce facem acum? Le afișăm pe toate sau vom folosi paginație? Dacă optăm să le afișăm pe toate, riscăm să îngreunăm vizita utilizatorului. Paginația vine în ajutorul nostru și putem să-i oferim utilizatorului un minim de rezultate, după care să le descopere pe restul. Mai mult decât atât, putem aplica filtre sau sortări pentru a ne rafina căutarea (poate vrem cele mai ieftine produse din categoria “alimentare” care sunt la promoție, nu au expirat încă și mai sunt și best-sellers).

În schimbul paginației, putem folosi încărcarea dinamică a rezultatelor (după vizualizarea primelor rezultate vor fi afișate automat următoarele). Pentru utilizator, ar fi mai uşor să navigheze printre produse (mai ales în combinație cu filtrele), dar riscăm să ajungem la acel mirifc infinite scroll. Noroc că putem aplica soluții precum Return to top sau să grupăm rezultatele astfel încât să știm unde am rămas anterior (Fun fact: 9gag.com poartă acest nume pentru că prezintă serii de 9 postări haioase).

9gag – infinite scroll&return to top
9gag

Ajustarea conținutului

Putem alege să folosim aceste șabloane deja existente sau putem încerca să ne definim propria noastră abordare, rafinând ceea ce era în fața ochilor noștri în tot acest timp. Gândiți-vă la Pinterest și la stilul lor de afișare a conținutului de înălțime variabilă. Este un exemplu de soluție care a devenit un curent (trend). Doar ca impact, când am văzut prima oară noul design de la MySpace, în mintea mea deja regăseam urme de inspirație de la Pinterest.

Pinterest
Pinterest

MySpace
new-myspace

Dark patterns

Desigur, felul în care aplicăm pattern-urile ține strict de noi. Le putem folosi pentru obiectivele utilizatorului, pentru a-i face vizita una prielnică, cu dorință de reîntoarcere sau, dimpotrivă, pentru scopurile noastre ce țin mai mult de business. În cazul din urmă, ele devin dark patterns. Lăsând la o parte aspectele legate de securitatea datelor personale, de ce i-am cere utilizatorului informațiile aferente cardului de credit pentru a descărca o versiune de probă (trial) a unui program? De ce l-am bombarda pe utilizator cu reclame de care nu poate scăpa decât prin a da acel click? Felicitări, ai câștigat o vizită/un hit/un like/un download, dar utilizatorul nu se va mai întoarce indiferent pe ce cale încerci – desktop, tabletă sau telefon mobil.

Dark pattern – Descarcă Adobe Flash Player, dar și McAfee Security Scan Plus dacă nu ești atent
adobe

Dar cum rămâne cu mobile?

Trăim într-o perioadă în care nu mai stăm în confortul scaunului de la birou pentru a accesa informațiile electronice. Le avem cu noi zilnic pe smartphone, tabletă sau hibrid (phablet). Mai mult, deja se anunță că le vom avea și în ochelari și la încheietura brațului (smartwatch).

Nu mai este suficient să gândim doar pentru desktop, prin urmare apar alte întrebări și provocări: de exemplu, dacă voi folosi „firimituri” (breadcrumbs) pentru ca un utilizator să știe unde se află pe site, cum aș putea să le reprezint eficient pe o rezoluție de 320 pixeli lățime pentru dispozitiv mobil? Sau dacă într-o parte am folosit tab-uri și în cealaltă le colapsez, cum păstrez consecvența de la un ecran la altul, fără să dăuneze experienței cu utilizatorul?

Nici să nu mai pomenesc de pretențiosul Retina Display. De ce pretențios? Datorită numărului ridicat de pixeli per inch, imaginile se vor a fi mult mai calitative, prin urmare nivelul nostru de detaliu și atenție trebuie să atingă până și cel mai rătăcit colț rotunjit. La fel, fonturile trebuie să-și păstreze calitatea, mai ales atunci când micșorăm/mărim textul(fie din browser-ul web, fie la aplicarea gesturilor pe ecrane tactile) sau când schimbăm rezoluția display-ului.

Drept soluție (pe principiul „better safe than sorry”), ar fi indicat să avem un set de iconițe sau elemente grafice dedicate strict pentru ecrane Retina (pentru a evita timpul îngreunat de încărcare sau un afișaj defectuos al layout-ului). Apar multe provocări, dar ăsta reprezintă farmecul design-ului: să găsim soluții. Și asta reprezintă doar o mică porțiune din grijile noastre.

Mai ales acum, cu bătălia dintre giganți (Apple, Google, Microsoft etc.), a crea produse și pentru dispozitive mobile nu se mai rezumă la o simplă scalare și gata. Trebuie să iei în calcul factori precum stilul vizual și interacțiunea sistemului de operare mobil. Poate am gândit întâi interfața pentru web, dar cum o adaptez pe iOS? Sau, mai provocator, cum o ajustez pe comportamentul unui Windows Phone (cu tot cu estetica sa minimalistă și navigarea panoramică)?

Aici ține mai mult de brandul respectiv: cu cât compania are o imagine mai puternică și rezistentă în timp și la schimbări, cu atât poți face mai multe compromisuri. Da, pot să fac aplicația să fie disponibilă și pe iOS, și pe WindowsPhone, și pe Android, poate chiar și pe nou-venitul FirefoxOS. Iar dacă utilizatorul va rămâne cu aceeași emoție și percepție despre brandul respectiv, indiferent de platformă, atunci paguba va fi minimă dacă, de pe un sistem de operare pe altul, experiența nu se păstrează consecventă.

De la stânga la dreapta: Evernote pentru Android, iOS, WindowsPhone (disponibil și pe Blackberry, WebOS, Windows 8, iPad, Ipod, Mac OS X)

evernote

Scurtă concluzie

Design-ul și tehnologiile avansează împreună. Nu am fi avut curentul „skeumorphism” dacă Apple nu ar fi pariat pe el cu fiecare aplicație acceptată. Nu s-ar fi adoptat un vizual plat (flat) și curat dacă Microsoft nu ar fi introdus Modern UI, nu s-ar fi creat FlatUI, iar iOS7 nu s-ar fi lansat. Același lucru se aplică și pentru Bootstrap și design-ul responsive. Este datoria noastră ca designeri și entuziaști să ținem pasul cu tendințele, practicile curente și cele de viitor, dar mai înainte de toate, ar trebui să ținem cont și de bunul nostru simț.