În Tips & Tricks

Primii paşi în wireframing

wireframing

Wireframe-ul, deși este un concept ce a apărut odată cu dezvoltarea UX Design-ului, la începutul anilor 90, abia recent a început să ia amploare, odată ce industria IT a realizat că proiectarea unei experiențe și cercetarea prealabilă este cea care determină succesul unui produs, și nu implementarea directă a unei soluții de moment.

 

Deși încă în multe medii construcția de wireframe-uri și cercetarea sunt privite ca niște lucruri opționale, orele petrecute de designeri și șefi de proiect reiterând aceleași și aceleași probleme, fără să ajungă la soluții satisfăcătoare își cam spun cuvântul.

În acest context a ajuns wireframe-ul să fie valorificat.

 

Ce este un wireframe?

Un wireframe este un schelet, un concept grafic, al unei pagini dintr-o aplicație sau un website.

Conține doar informații referitoare la structură, conținut, aranjare în pagină, puncte cheie de interes, story, journey, omițând complet orice detaliu grafic (culori, imagini, fonturi, forme etc).

Este realizat de obicei într-un tool grafic specializat, astfel încât un grafician să poată pe baza lui crea un design complet, detaliat.

 

În UX Design, wireframe-urile sunt un fel de vârf al aisbergului. Par ceva simplu, banal. Dar în fapt este rezultatul multor eforturi de cercetare, discuții cu clientul, interviuri cu utilizatorii, brainstorming-uri și strategii puse cap la cap.


Altfel spus, e încununarea cu succes a unei munci de cercetare bine făcute.


Etape pregătitoare

De un wireframe nu te poți apuca direct. Există anumite elemente care trebuiesc definite înainte de a începe.

 

Scopul paginii

• Ce își dorește business-ul pentru pagină?
(ex: să crească numărul de useri, să promoveze anumite produse, să educe utilizatorii despre domeniul businessului etc).

• Ce își dorește un user care ajunge pe această pagină?
(să comande un produs, să afle detalii înainte de a lua o decizie, să poată configura o comandă etc).

• Ce rol are pagina în legătură cu celelalte pagini din site / aplicație?

 

Cui te adresezi

Un mic studiu despre useri. Cine sunt, ce vârstă au, ce experiență cu calculatorul au, ce îi motivează, ce probleme au în viața lor pe care site-ul sau aplicația le poate adresa.

Mulți neglijează această parte. Dar în fond, site-ul, aplicația ta este pentru useri.

Trebuie să vorbești pe limba lor, să le înțelegi nevoile ca să poți construi ceva util pentru ei.

 


Structura proiectului, aplicației, a website-ului

Cum ajung userii pe această pagină? Unde vrei să îi duci în continuare?

Pagina actuală trebuie să fie bine integrată în „povestea” site-ului, aplicației, în povestea userului.

Este foarte important să nu ajungă userul pe o pagină și să se întrebe: „Ce e asta, unde sunt, unde trebuie să apăs acum…?” Acesta este un semn clar că există o greșeală de proiectare.

Dacă trebuie să faci wireframe-uri pentru un întreg site, atunci este obligatoriu să ai o ierarhie a informațiilor, un sitemap pe baza căruia să construiești meniul.

 

Un mic studiu despre domeniul aplicației, business-ului

E bine să nu reinventezi roata, ci să folosești tipare cu care userii sunt obișnuiți deja.

În plus, userii interesați de un domeniu sunt probabil deja familiari cu anumiți termeni, au anumite așteptări, întrebări, nevoi specifice, pe care e bine să le cunoști și să le folosești.

 


Câteva întâlniri cu clientul, departamentul de marketing, tehnic și alți stakeholderi
în care să stabiliți în ce direcție să mergeți, care sunt punctele cheie de atins, ce constrângeri sunt, ce așteptări există din partea fiecăruia.

 

S-ar putea ca clientul să aibă deja o anumită idee, să îți povestească lucruri interesante și utile din experiența lui cu clienții săi, departamentul de marketing să își dorească atingerea anumitor targeturi, un anumit tip de conținut, sau tehnic să fie mai preferabile unele soluții de proiectare decât altele.

E bine să pui la punct lucrurile dinainte.

Cu cât mai clare vor fi lucrurile la început, cu atât va trebui să faci mai puține variante.

Se pot face și niște schițe pe hârtie inițial pentru aceste discuții, se pot implementa tehnici de card-sorting, diagrame, flow-uri.

 

Totuși, pentru un proiect mai mic, cu buget mai redus, ar fi suficient una sau două discuții cu clientul în care să atingi cât de cât aceste puncte, în funcție de ce simți că îți este util să ajungi la un rezultat favorabil.


De la idee la machetă

După ce ai adunat informațiile necesare, în continuare trebuie să vezi cum transpui aceste informații și cerințe în soluții de proiectare concrete.

 

Pentru fiecare punct din „Scopul Paginii”, să zicem, trebuie să găsești câteva idei de implementare prin care se poate atinge acel scop în interiorul paginii.

 

De exemplu: pentru construirea încrederii într-un produs, s-ar putea alege din următoarele soluții:

  • afișarea de review-uri de la utilizatorii care l-au comandat deja
  • o recomandare a unei persoane avizate / cunoscute care să fi folosit produsul
  • o listă cu beneficii, certificări de calitate
  • informații despre originea ingredientelor, materialelor
  • prezentarea produsului din mai multe unghiuri

Aceste idei se pot exprima apoi prin anumite controale și itemuri specifice: slidere, bannere, liste, taburi, popup-uri, rating stars, imagini, clipuri video, iconițe, blocuri sliding, secțiune de comentarii.

Dacă nu găsești pe moment soluții, poți cerceta să vezi cum au implementat alți designeri aceste idei.

 

În funcție de tipul și profilul utilizatorilor se pot rafina aceste itemuri și mai mult:

  • Pentru persoane tinere, probabil vei afișa mai multe imagini, unele chiar interactive, animate, lucruri mai dinamice, mai moderne, în trend, integrare cu social media.
  • Pentru useri mai business, ar merge mai multe informații de tip bullet, taburi, detalii tehnice, request a call, integrare cu email, Skype.
  • Pentru persoane peste 50 de ani care nu au experiență cu calculatorul, poate ar fi bine un layout mai conservator, fără prea multe animații, instrucțiuni mai precise despre ce pași trebuie să urmeze. Scris mai mare, butoane mai mari etc.

 

Ordonarea informațiilor în pagină și povestea ei

În funcție de pagina de pe care vine utilizatorul, cea pe care ne dorim să îl ducem, și ideile pe care le-am adunat despre pagina actuală, se construiește o poveste a paginii, se prioritizează secțiunile de conținut, se crează un flow cu pașii pe care trebuie să îl parcurgă utilizatorul.

Se ține cont ca drumul parcurs de utilizator să fie cât mai simplu și intuitiv, astfel încât acesta să atingă scopul pentru care a venit pe pagină cât mai rapid și fără a-și pune prea multe întrebări.

Aici se pot aplica niște principii de usability, interaction, user psychology.

 

Copywriting-ul de asemenea trebuie să urmărească povestea și să ghideze utilizatorul printr-un limbaj familiar acestuia.

 

Fără lorem ipsum

Nu e recomandată folosirea de „lorem ipsum” în wireframe-uri.

În primul rând pentru că omite povestea, iar apoi, clientul probabil nu va înțelege prea mult din ce ai vrut să exprimi.

E mai bine de folosit un dummy text care să sune asemănător textului final. Pentru asta este recomandat să colaborezi cu un copywriter și să stabiliți o direcție.

 

Ochiul userului trebuie ghidat prin secțiuni.

Trebuie să construiești o cale pe care ochiul trebuie să parcurgă pagina, folosind principiile de bază din design: aliniamentul, proximitatea, contrastul, repetiția.

 

Construirea navigației prin site / aplicație trebuie facilitată.

Userului să îi fie ușor să descopere alte feature-uri, alte pagini, secțiuni care pot fi utile intereselor lui, care îl pot educa în domeniu, sau care îi pot arăta mai multe detalii despre companie.

 

Dacă userul vine de pe o altă pagină unde a făcut o acțiune, e bine să se continue la începutul paginii curente cu acea poveste.

 

Paginile spre care dorim să conducem userul în continuare vor fi materializate în butoane call-to-action care trebuie să fie vizibile și cu rol evident în pagină.

 

Desenarea wireframe-ului

Un wireframe se poate desena atât pe hârtie cu creionul, asta numindu-se mai mult mockup. Fie într-un tool grafic specializat. Iată câteva dintre ele.

 

Balsamiq

Este un tool plătit, în variantă atât desktop cât și online.

Este destul de larg utilizat pentru wireframing. Are o varietate mare de controale predefinite, iconițe. E simplu și rapid de utilizat, și are particularitatea că aspectul wireframe-urilor este foarte basic, schițat, dezbrăcat de ornamente, tocmai pentru ca designerul să nu fie tentat să se piardă în detalii.

Mie personal îmi place foarte mult. Este exact ce îți trebuie pentru wireframe-uri.

 

Axure

E un tool puțin mai complex, cu o curbă mai mare de învățare.

Are librarii de controale, funcții avansate. Poți lucra mai detaliat, dar și mai greoi câteodată.

Are avantajul că se pot construi prototipuri interactive și alte lucruri utile în proiecte de anvergură. Este de asemenea plătit.

 

UXPin, Moqups, Wireframe.cc

Acestea sunt niște tooluri colaborative online. Unele au și variantă gratuită cu funcții limitate.

E foarte potrivit pentru echipe, colaborare la distanță, sesiuni de feedback.

Dezavantajul este că sunt dependente de browser și conexiune la internet.

 

Pencil Project

Este un tool free, atât online cât și variantă desktop. Ușor și rapid de folosit.

Are controale mai basic, dar este util pentru un proiect mai simplu, sau efectiv de joacă atunci când nu ai altceva la îndemână.

 

Sketch

Este o super unealtă atât de wireframing cât și de design grafic în variantă mai minimalistă.

Este foarte lăudat de cei care îl folosesc. Singurul dezavantaj este că este disponibil doar pentru Mac.

 

Plugin-uri de Photoshop

Există oarece plugin-uri și librării de Photoshop care permit construirea de wireframe-uri.

Unii designeri le folosesc destul de mult. Eu personal nu am avut norocul să dau peste unul care să îmi placă cu adevărat și să îl folosesc pe termen lung. Dar poate voi veți avea mai mult noroc.

 

Înaintea construirii efective a wireframe-ului este foarte important să:

  • Stabilești un grid pe baza căruia să lucrezi. E bine să fie același cu cel care va fi utilizat în designul grafic și dezvoltare, așa că trebuie să te consulți cu designerul și programatorul, înainte de a începe.

  • Te gândești la o
    lățime de referință a paginii. Dacă faci pagina full width, sau cu content centrat.

  • Ai în vedere mai multe
    rezoluții în minte atunci când construiești macheta. Dacă proiectezi un design pentru rezoluția mare, s-ar putea pe laptop să arate ciudat. Și invers. De asemenea, pot fi necesare și variante de mobil.

 

După toate acestea, tot ce trebuie să faci este să îți aduni toate ideile și inspirația, și să desenezi efectiv macheta în toolul ales, folosind anumite controale cu drag and drop, ca în orice tool grafic.

Nu e nimic deosebit sau complicat.

 

Apoi urmează câteva sesiuni de feedback cu clientul, stakeholderii, sau șeful de proiect, se discută ideile, iar wireframe-ul ori ajunge la implementare, ori va trebui rafinat.

 

Dacă munca de UX s-ar termina odată cu livrarea wireframe-ului ar fi genial. Dar mai urmează câteva chestiuni importante.

 

Acum e foarte important ca experiența pe care tu ai proiectat-o, știind date despre useri, business, având un concept în minte, să ajungă efectiv online în felul în care ai gândit-o.

 

Pentru că există multe cazuri în care de la wireframe la varianta online să se piardă foarte multe detalii importante, din cauza lipsei de comunicare cu designerii și developerii.

 

Asigură-te că designerul cunoaște aceleași detalii despre useri și business pe care le știi și tu.

Puneți-vă de acord asupra unei direcții grafice în care să credeți amândoi.

Realizează o variantă anotată de wireframe, unde să precizezi anumite detalii.

E foarte important ca designerul să înțeleagă de ce ai făcut anumite alegeri, care e idea de bază, pentru că dacă la el ajunge doar wireframe-ul și nimic mai mult, s-ar putea să ai surprize.

 

Apoi, și la capitolul development ar mai trebui aruncat un ochi.

E una când ai un design în față, și e alta când vezi rezultatul live mișcându-se sub ochii tăi.

S-ar putea ca pagina să nu se încarce bine, animațiile să fie prea rapide, o secțiune să arate în plus, ca designul să nu fie implementat foarte fidel etc.

 

După ce conceptul pe care l-ai gândit a ajuns live, se poate testa cu useri rezultatele.

Se poate vedea poate diferența între ce ai gândit că se va întâmpla și ce s-a întâmplat în realitate.

A crescut rata de signup? Au crescut vânzările? Sunt userii fericiți?

Dacă da, felicitări, ai făcut o treabă minunată! Dacă nu, ceva nou sigur ai învățat, așa că e cazul să îți iei iarăși trusa de unelte și să o iei de la capăt.

 

Cam asta e povestea wireframe-urilor.

Îți doresc mult succes!


susana-ferencSusana Ferenc – UI/UX Designer, Freelancer

Entuziastă și pasionată în general – de oameni, ingeniozități, forme, culori, abstract, concret, înțeles și neînțeles. De formare Inginer, activează din 2013 în domeniul UI/UX Design, atât ca freelancer cât și în colaborare cu diferite companii.