Vedeți câteva practici care să vă ajute în prototiparea viitorului site web, pentru a vă asigura că îndeplinește atât așteptările părților interesate/clienților, cât și nevoile utilizatorilor.
Dar mai întâi, să clarificăm câțiva termeni pe care îi vom utiliza.
Wireframes, machete și prototipuri: etapele unui proces
Înainte de a începe cu cele mai bune practici pentru prototiparea unui site web, trebuie să definim ce este un prototip. Un prototip nu este un wireframe și nici o machetă, deși le puteți crea pe ambele pentru site.
Wireframes-urile, machetele și prototipurile pot fi văzute ca etape ale procesului de proiectare. Fiecare pas ducându-vă cu un pas mai aproape de reprezentarea site-ului final, funcțional. Astfel, vă puteți referi la fiecare prin nivelul său de „fidelitate” față de produsul final.
Wireframes: low-fidelity
Wireframes-urile comunică aspectul prin elemente grafice abstracte, cum ar fi linii și casete, similar unei scheme electronice. Puteți vedea unde se află toate circuitele și cum se leagă fiecare element între ele.
Machetele: mid-fidelity
Machetele sunt similare cu wireframes. În loc de casete gri care reprezintă imagini, vedeți grafică reală, fonturi și culori în concordanță cu identitatea de marcă a clientului. Acestea sunt excelente pentru a arăta modul în care un site web va surprinde esența unui brand.
Wireframes-urile pot ajuta în stadiile inițiale de dezvoltare. Ele vă vor ajuta să începeți proiectarea unui prototip. Modelele pot fi bune pentru a obține acceptarea de la un client despre cum va arăta un site web.
Ce este un prototip?
Un prototip este o reprezentare interactivă a unui site web. Nu este necesar ca fiecare interacțiune și animație să fie la locul ei. Dar, trebuie să aveți elementele cheie prezente pentru a arăta cum va funcționa. În acest sens, un prototip este o versiune de înaltă fidelitate a site-ului final: majoritatea, dar nu neapărat toate, componentelor sunt la locul lor.
Datorită interactivității lor, prototipurile sunt mult mai bune decât machetele la demonstrarea funcționalității unui site web. Să le arăați clienților exact cum funcționează designul este cel mai facil mod de a-i face să înțeleagă valoarea acestuia. De aceea, prototipurile sunt modalitatea perfectă de a prezenta clienților un concept de design.
Cunoaște-ți publicul
Audiența 1: clienții dvs., colegii de muncă și alte părți interesate
Procesul de proiectare și dezvoltare poate implica multe persoane diferite, de la scriitori de conținut până la directori executivi. Ceea ce arăți unui departament de marketing poate fi diferit de ceea ce puneți în fața unui grup de dezvoltatori backend.
Deci, indiferent de stadiul în care vă aflați, asigurați-vă că prototipul dvs. are acele caracteristici care sunt relevante pentru publicul dvs. Oricât de spectaculoase ar fi acele tranziții animate, un copywriter este probabil mai interesat de modul în care conținutul lor se potrivește designului.
Audiența 2: publicul final al site-ului
Una este să aduceți prototipul în fața oamenilor care au participat la întâlniri și care știu despre el de luni de zile. Este cu totul altceva să obțineți perspectiva unui străin de la cineva care chiar va folosi site-ul.
Astfel, trebuie să:
- Aflați cine vor fi utilizatorii dvs. finali.
- Înțelegeți așteptările lor pentru acest tip de site.
- Rulați cu ei teste de utilizare a site-ului pe un prototip.
Amintiți-vă, majoritatea oamenilor nu sunt familiarizați cu limbajele de proiectare și dezvoltare. Va trebui să puneți întrebări simple, fără jargon, pentru a obține feedback semnificativ.
Aflați ce site-uri web vizitează în mod regulat și ce îi face să revină? Ce caracteristici și funcționalități ale acestor site-uri web redau o experiență plăcută? Odată ce cunoașteți obiceiurile și particularitățile site-ului, îi puteți întreba care sunt așteptările lor pentru prototipul dvs. Despre ce speră să învețe? Ce sarcini doresc să îndeplinească? Și ce caracteristici speră ei să aibă?
De asemenea, veți dori să oferiți utilizatorilor dvs. de testare sarcini comune de îndeplinit. De exemplu, dacă construiți un site web de restaurant, ați putea cere persoanelor cu care testați să:
- facă o rezervare online;
- să găsească și/sau să lase o recenzie;
- să navigheze și să citească conținutul site-ului.
Punerea unui prototip în fața unui utilizator extern este neprețuită în testarea funcționalității, arhitecturii informațiilor și a gradului de utilizare general. În timpul acestui proces, veți descoperi probleme de design pe care poate nu le-ați observat. Problemele legate de navigare și funcționalitatea acestuia pot ieși la iveală în această etapă.
Gata, setați prototipul!
Știm că uneori este posibil să trebuiască doar să pregătiți rapid un prototip. Keynote și PowerPoint sunt două programe de prezentare care pot face o treabă solidă în comunicarea unei versiuni simplificate a modului în care va arăta site-ul dvs. Aceste programe au limitări în ceea ce privește elementele și interacțiunile. Dar dacă vă simțiți nevoiți să schițați un prototip, ele pot funcționa în stadiile inițiale de dezvoltare.
Îmbrățișați puterea HTML și CSS
Datorită interactivității și imaginilor lor, un prototip codificat este cel mai bun mod de a demonstra cum va arăta și funcționa un site web. Un prototip funcțional construit cu HTML și CSS pregătit pentru web este ideal.
Prezentarea unui prototip creat cu cod economisește timp și bătăi de cap. Cu multitudinea de ecrane disponibile, un prototip HTML și CSS oferă cel mai simplu mod de a demonstra cum va arăta și va funcționa site-ul dvs. pe diferite dispozitive. Acest lucru simplifică procesul de proiectare.
Un prototip creat cu cod arată exact cum se va fi afișat pe diferite browsere și dispozitive. Și dacă sunt necesare modificări, le puteți face direct în modelul de lucru. Acest lucru accelerează procesul de dezvoltare și vă permite să lansați mai devreme decât dacă ați fi creat prototipuri în moduri mai tradiționale.
În procesul de dezvoltare, vor apărea erori și neconcordanțe. Prototipurile codificate dezvăluie aceste probleme de la început. Acest lucru vă permite să vă ocupați de acestea în etapele preliminare, în loc să vă grăbiți să le rezolvați înainte de lansare.
Design cu conținut real
Gândiți-vă la conținut ca la baza unui design superb, foarte utilizabil. După cum am discutat, un prototip este mult mai mult decât un wireframe sau o machetă. De asemenea, am menționat că nu trebuie să fie o versiune completă.
Trebuie să utilizați conținut real în procesul de proiectare. Nu trebuie să fie complet completat, dar ar trebui să aveți titlurile și o aproximare a conținutului care urmează. Folosirea unui text fals pentru a completa spațiul gol este în regulă, dar este mai bine să folosiți textul real, chiar dacă este doar o schiță timpurie. Ar trebui să existe suficient conținut pentru a oferi cuiva o idee despre despre ce este vorba în pagină și despre fluxul de informații.
Ține cont de afișarea pe mobil
Prototipul unui site web trebuie să funcționeze pe o varietate de dispozitive mobile. În special pe cele pe care publicul acestuia le folosește cel mai des.
În proiectarea oricărui design de site web, trebuie să fiți conștient de două lucruri:
Ideea care trebuie comunicată de către design-ul final.
Ce acțiuni vrei să întreprindă vizitatorii atunci când ajung pe site.
În design-ul pentru dispozitivele mobile, eliminați elementele care distrag atenția și sunt repetitive (cu excepția butoanelor pentru CTA). Păstrați aspectul curat și textul concis. Includeți numai conținut și elemente grafice obligatorii.
Deoarece oamenii vă vor folosi designul pe un ecran mai mic, cu doar un deget pentru a interacționa cu el, simplificați navigarea. Lăsați-i pe oameni să realizeze ceea ce vreți să facă în cel mai mic număr de pași. Acest lucru este vital pentru orice design bun.
Microinteracțiunile, animațiile și alte elemente dinamice fac experiența pe mobil să fie distractivă și interactivă. Un prototip trebuie să arate cum vor fi integrate acestea pentru a îmbunătăți experiența utilizatorului.
Testați prototipul pe mobil. Deschide site-ul pe fiecare dispozitiv mobil la care aveți acces. Apoi trimite-l către prieteni cu dispozitive diferite pentru a parcurge prototipul.
Începeți cu un prototip, terminați cu un produs final mai bun
Prototipurile sunt printre cele mai puternice instrumente din colecția dvs. A crea un site web fără un prototip este ca și cum ai încerca să construiești o casă fără un plan. Sigur, puteți aduna împreună materiile prime într-o aproximare a unei clădiri, dar cel mai probabil veți avea mai multe bătăi de cap pe parcurs.
Un prototip de site web funcțional, construit pentru a răspunde nevoilor și așteptărilor bine definite, vă va permite să vă lansați site-ul mai rapid și cu mai puține probleme. Și sperăm că va reduce numărul schimbărilor pe care trebuie să le faceți la sfârșitul proiectării design-ului.
