De ce wireframes sunt importante în procesul de proiectare
Publicat: 2017-01-29Wireframing este o modalitate rapidă și eficientă de a identifica problemele de utilizare la începutul procesului de proiectare.
Dacă sunteți un designer web, sunt sigur că sunteți familiarizat cu wireframing și dacă sunteți un designer de experiență de utilizator (UX), ca mine, probabil vă petreceți un procent mare din timp creând wireframes fie manual, cu hârtie și creion, fie folosind un instrument digital precum Proto.io .
Acest articol este pentru cei dintre voi care au auzit termenul și ar dori să afle mai multe despre de ce wireframes-urile ar trebui să joace un rol important în procesul de proiectare. Vom acoperi, de asemenea, cum pot fi utilizate cel mai bine în conversațiile cu părțile interesate și clienții relevanți.
Să începem cu a răspunde la întrebarea „Ce este un cadru fir?”
Îmi place să mă gândesc la un cadru fir ca un schelet al paginii. Acest schelet este o reprezentare bidimensională a interfeței unei pagini care arată distanța dintre elementele de pe pagină, modul în care conținutul este prioritizat, ce funcționalități sunt disponibile și modul în care utilizatorii vor interacționa cu site-ul. Ele joacă, de asemenea, un rol vital în conectarea arhitecturii informaționale la aspectele vizuale ale designului, arătând căi între diferitele pagini. Wireframes-urile sunt intenționate lipsite de culoare, grafică și fonturi stilizate.
Dacă nu avem un schelet puternic pentru a începe, atunci toate lucrurile pe care le punem deasupra, cum ar fi funcționalitățile sau stilul, chiar nu au nicio șansă.
Gândiți-vă la procesul de construire a unei noi case. Dacă vă concentrați toată energia pe designul interior, cum ar fi culorile pereților și țesătura pentru canapele, mai degrabă decât pe planul structurii casei, credeți că acesta își va servi scopului? Probabil ca nu. Începând cu designul interior, mai degrabă decât structura de bază a casei, este contraintuitiv.
Ce nu ar trebui să fie inclus într-un cadru fir?
Este foarte important să vă păstrați wireframes simple. Acest lucru se datorează faptului că scopul wireframing-ului, așa cum sa menționat mai sus, este de a arăta cum sunt așezate elementele pe pagină și cum ar trebui să funcționeze navigarea pe site. Prea multe culori sau imagini pot distrage atenția cititorului de la concentrarea asupra aspectului și a elementelor de navigare. Asigurați-vă că eliminați sau reduceți utilizarea culorilor, imaginilor, graficelor și fonturilor stilizate pentru a vă atinge obiectivul de a reprezenta o reprezentare vizuală simplă a scheletului.
Tine cont de acestea:
Recomandat pentru tine:
Cum va transforma Metaverse industria auto din India
Ce înseamnă prevederea anti-Profiteering pentru startup-urile indiene?
Cum startup-urile Edtech ajută forța de muncă din India să își îmbunătățească abilitățile și să devină pregătite pentru viitor...
Stocuri de tehnologie New-Age săptămâna aceasta: problemele Zomato continuă, EaseMyTrip postează Stro...
Startup-urile indiene iau comenzi rapide în căutarea finanțării
Platforma de marketing digital Logicserve are finanțare de 80 INR Cr, rebrand-urile ca LS Dig...
- Păstrează-ți culorile la gri, alb și negru.
- Utilizați un font generic. Acest lucru ajută la prevenirea ca utilizatorul să fie distras de stilul tipografiei. Afișarea ierarhiei informațiilor prin font este totuși importantă și poate fi afișată prin simpla schimbare a dimensiunii fontului și dacă este „regulat”, „ cursiv ” sau „aldin”.
- Evitați graficele și imaginile extrem de stilizate. În schimb, sugerez să folosiți dreptunghiuri și pătrate ca substituenți, adăugând un „x” în mijlocul casetei pentru a arăta unde va fi plasată imaginea. De asemenea, puteți face același lucru pentru a arăta unde vor fi poziționate videoclipurile cu un triunghi ca buton de redare în centrul casetei.
Cele 5 motive principale pentru a folosi wireframes
Wireframes-urile sunt un instrument excelent pentru a-ți determina clienții să se concentreze pe ceea ce vrei să se gândească la începutul procesului de proiectare.
Wireframes-urile sunt o modalitate excelentă de a ghida clienții și părțile interesate prin structura design-urilor dvs., fără a le oferi șansa de a se lăsa distras de culori și imagini. Dacă scopul întâlnirii tale este de a-ți determina clienții să se gândească la ce elemente ar trebui să fie pe pagină și la modul în care aceste elemente vor funcționa pe site, pur și simplu scoaterea culorilor, imaginilor și paginilor stilizate îl face mult mai simplu. Apoi, puteți culege cu ușurință feedback de la clientul dvs. și de la părțile interesate cu privire la navigarea site-ului și alocarea elementelor din pagini. În loc să se concentreze asupra modului în care culoarea roșie „nu funcționează pentru ei” ca buton de îndemn. Sună amuzant, dar se întâmplă foarte multe!
Wireframes-urile vă permit să mapați funcționalitatea paginilor, să identificați problemele devreme și să economisiți timp la revizuiri ulterioare.
Este mult mai puțin dureros să faci modificări la un cadru fir decât la o machetă de înaltă fidelitate cu o mulțime de elemente de design. Pentru a reelabora o machetă de înaltă fidelitate necesită mult mai mult timp pentru a face modificări. Dacă investiți timp în gândirea la funcționalitatea paginilor prin wireframing la începutul procesului de proiectare, veți fi atât de fericit că ați făcut-o. Este cu siguranță un timp bine petrecut și foarte eficient.
Cu alte cuvinte, cartografierea devreme a funcționalității va reduce cantitatea de dus și înapoi care vine adesea odată cu faza de dezvoltare. Este cu siguranță mai ușor să rescrieți funcția într-un cadru fir, în comparație cu o aplicație web.
Wireframing-ul vă oferă oportunitatea de a vă cunoaște mai bine clientul.
Veți începe să vedeți modele în comportamente și motivații cu cât petreceți mai mult timp cu clientul dvs. De-a lungul timpului, cunoștințele pe care le dobândești din feedback-ul lor vor influența doar modul de lucru cel mai bun cu ei în viitor și cum să-ți faci timpul cu ei cel mai productiv. Wireframingul este , de asemenea, o modalitate excelentă de a-ți determina clienții să se concentreze. Clienților le place să facă cinci pași înainte, deoarece este interesant să înceapă să se gândească la produsul final. Dar eliminarea oportunităților clienților de a se distra de la a se gândi la funcționalitatea și structura designului va fi ceva pe care îl veți găsi foarte recompensant.
Wireframingul este un instrument excelent pentru a colecta feedback și a descoperi defectele din timp.
Dacă eficiența este un obiectiv al tău, ceea ce este cel mai probabil, atunci wireframing este locul unde ar trebui să începi. S-ar putea să existe ocazii în care te simți presat să începi să proiectezi o machetă de înaltă fidelitate imediat din cauza constrângerilor de timp sau bani. Încercați să vă amintiți că, fără a aduna din timp feedback-ul de calitate, ați putea crea mai târziu un proces de revizuire mai minuțios și mai consumator de timp, făcând totul mult mai puțin eficient.
Wireframes-urile sunt o modalitate excelentă de a prioritiza conținutul, ajutând la dezvăluirea constrângerilor de spațiu și la proiectarea ierarhiei elementelor de pe pagină.
Având oportunitatea de a vizualiza din timp ierarhia paginilor dvs. și de a începe afișarea vizuală a constrângerilor de spațiu vă va economisi mult timp mai târziu, când veți începe să stilizați paginile și să le umpleți cu conținut. Ar trebui să culegeți feedback despre wireframes de la părțile interesate, să mutați rapid lucrurile pe wireframes pe baza feedback-ului primit, să culegeți din nou feedback și să repetați până când vă atingeți obiectivul dorit.
Concluzie
Wireframes-urile împing utilitatea în prim-plan și utilizarea lor este o modalitate puternică de a ilustra aspectul paginilor și funcționalitatea elementelor de pe pagină.
Utilizarea wireframe-urilor la începutul procesului de proiectare vă obligă pe dumneavoastră și pe clienții dvs. să priviți în mod obiectiv ușurința de utilizare, căile de conversie, plasarea elementelor și vă ajută să evidențiați din timp defectele. Acestea sunt toate lucruri care duc la produse intuitive, funcționale și încântătoare.
[Această postare a apărut pentru prima dată pe blogul Proto.io și a fost reprodusă cu permisiunea.]