Wireframe – planul de arhitectura in e-Commerce


articol in lectura lui Gabriel Pioaru; download audio

Wireframe-ul unui site web reprezinta o schema logica vizuala, scheletul unui produs online. Termenul provine din limba engleza si este international acceptat. Scopul este reducerea generalului la particular si o mai buna abstractizare a nevoilor entitatilor implicate (clienti, programatori, designeri, consultanti). Focalizarea sa se face pe functionalitate, facand abstractie de stil, culori, forme – important este ca toate acestea sa functioneze bine impreuna. Cu alte cuvinte, ne concentram exact pe toate aspectele care nu tin de grafica.

Cum fac acest schelet ? Un wireframe se poate desena cu creionul pe hartie, cu carioca pe tabla alba (ulterior facute poze) sau prin intermediul unor softuri dezvoltate pe propriul computer sau online, prin alte instrumente specializate exact pentru genul acesta de aplicatie.

Cand desenam un wireframe ne concentram pe

  • functiile sitului web si aplicabilitatea lor
  • prioritatea informatiei
  • regulile de livrare a informatiei
  • spatiile de livrare a informatiei
  • corelatiile informatiilor
  • efectele livrarii informatiei in termeni de cantitate

Un wireframe are 3 componente

  1. Scheletul Informatiei
  2. Scheletul Navigarii
  3. Interfatarea Ergonomica a elementelor

Trebuie facuta o paranteza aici, pentru a intalni un alt termen foarte folosit in faza de prototipare a siturilor web, si anume “mockup”. Diferenta este ca in timp ce wireframe este o ciorna, o schema, un mockup este o reprezentare realista a cum va arata situl web (care poate arata identic cu mockup-ul sau cu mici variatii). Acestea pot fi prezentate fie sub forma unor imagini sau prelucrari soft, fie direct in forma CSS/HTML (in forma navigabila).

Stiintific (desi niciodata se pare ca nu avem timp sa trecem prin toate aceste procese), ar trebui sa avem acest traseu, adica acelasi produs imbunatatit
SCHEMA / CIORNA > WIREFRAME > MOCKUP > PROTOTIP > MAGAZIN

Revenind la Wireframe, schema trebuie sa raspunda intrebarilor clasice CE ? UNDE ? CUM ? ( Iar UX se va ocupa de CINE si CAND )

CE

  • Ce tip de informatie urmeaza sa introducem (text, poza, video)
  • Tipurile de informatie continute in baza de date (data aritcolului, autorul sau, titlul, descriere, comentariu, taxonomie, etc)
  • Care sunt grupele principale de continut (articole, galerii foto, colectii, liste)
  • Organizarea continutului (meniuri, sugestii, ghiduri)

UNDE

  • Structura mare de navigare (prima pagina, pagina articol, pagina categorie)
  • Locurile predefinite (poza in dreapta, video jos, autor sus, taguri sus, etc)
  • Logica lipsei de continut (daca nu am un continut ce se va afisa in locul sau)

CUM – Vizualizarea utilizatorului. Contine elemente de

  • Pozitie: stanga, dreapta, sus, jos
  • Directie: (conteaza mult in alte limbi si citiri) de la stanga la dreapta, diagonal, jos-dreapta, sus-dreapta
  • Griduri, impartirea paginii

BENEFICII

  1. Da clientului inca de la inceput o idee despre cum va arata situl sau
  2. Inspira designerii in procesul de creatie
  3. Da programatorilor o idee foarte buna despre elementele care le vor utiliza in baza de date
  4. Ofera detalii care nu pot fi contestate referitoare la fiecare pagina din site (o problema mult disputata intre project manageri si dezvoltatori)
  5. Fiind schematic, este foarte usor de adaptat si modificat pana la momentul in care ia “bunul de tipar”

Cum sa desenez cel mai bine un Wireframe ?

  • Inainte de a ma apuca de desen, fac o lista cu toate elementele CE
  • Folosesc o suprafata destul de mare pentru desen , sa zicem o foaie A4 – eu o pun in poztia verticala, chiar daca rezolutia acum este “pe lat”
  • Desenul il fac alb-negru, eventual cu alte nuante de gri. Culorile defocuseaza
  • Fac note explicative pe o foaie separat pentru elementele UNDE, preferabil o a doua foaie A4 unde incepeti sa faceti schemele de navigare
  • Elementul de baza este SIMPLICITATEA – nu complic nimic, liniile pot fi usor strambe, scrisul usor neglijent. Este o CIORNA !
  • Preferabil Wireframe-ul sa fie facut cu clientul langa tine.
  • Evit multe detalii, mai ales in prima faza. Ele pot fi dezvoltate ulterior

Pentru o mai buna abordare a subiectului va propun cateva resurse
doua colectii de Wireframes – 1 , 2
un plugin care poate sa va transforme orice site existent in wireframe
un soft specializat

Concluzia:
Exista o zicala care spune “If you fail to plan, you plan to fail” – un indemn la o buna planificare, care in cazul siturilor web inseamna un wireframe bun.
Cel care face un wireframe trebuie sa se asigure ca are toate cunostintele necesare – sa ne amintim ca atunci cand vrem o casa avem nevoie de un arhitect !

Publicitate Parteneri

Claudiu Gamulescu

Din 1998 in afacerile digitale. Dezvoltator si Consultant. Am inceput in 2004 studierea pietei românesti de e-commerce, si de atunci ma preocupa continuu. Ma puteti gasi si pe Facebook si Twitter. Reprezint serviciile Underclick.

You may also like...