Cum să proiectați pentru web folosind modele de design

Modelele de design sunt fundamentul unei bune utilizări a site-urilor web și sunt elementele pe care sunt construite site-urile web. Sunt o decizie strategică de design pe care o ia un designer web pentru a asigura o experiență bună pentru utilizator. Sarcina unui designer este să rezolve problemele comune de utilizare și să creeze cea mai intuitivă soluție pentru utilizator, iar modelele creează o experiență de utilizator previzibilă, intuitivă și optimizată. Indiferent dacă sunteți începător în design sau un profesionist experimentat, trebuie să rămâneți la curent cu modelele de design obișnuite ale interfeței de utilizare și să țineți pasul pe măsură ce modelele evoluează.

Exemple de modele de design

Probabil ați auzit de componente; lucruri precum butoanele, câmpurile de formular, barele de căutare etc. sunt toate exemple ale acestora. Pentru a le folosi, le puteți folosi prin crearea de modele în designul dvs.

Un lucru de care trebuie să fii conștient: uneori termenii „componente” și „modele de design” sunt folosiți interschimbabil. În sensul acestui articol, componentele sunt elementele de bază ale unui site web, iar tiparele sunt moduri stabilite prin care utilizatorii sunt obișnuiți să îndeplinească sarcini.

După cum veți vedea, un model este „mai mare” decât o singură componentă. Modelele reprezintă modul în care optimizați ceea ce se face cu componentele individuale. Există multe modele tradiționale de design, cum ar fi:

• O siglă care trimite la pagina de pornire în antetul unui site web
• Navigare Hamburger pe site-uri mobile
• Formulare de autentificare cu un link „Resetează parola”.
• Breadcrumbs care permit utilizatorilor să țină evidența locației lor pe un site
• Cărucioare cu contoare de articole pe ele

De ce ar trebui designerii să se concentreze pe modele de design?

Există multe avantaje în utilizarea modelelor de design. Nu numai că vă fac munca mai eficientă ca designer, dar și mai important, modelele fac experiența mai ușoară pentru utilizatori.

Modelele de design stabilesc încredere

Utilizatorii fac presupuneri rapide în momentul în care ajung pe site-ul tău. Într-o fracțiune de secundă, ei determină dacă merită să interacționeze cu conținutul sau dacă ar trebui să găsească o altă opțiune.

Este ușor de navigat pe site-ul tău? Este ușor să găsiți informațiile pe care le caută utilizatorii dvs.? Nu vor avea răbdarea să facă clic și să remedieze problemele. Este absolut esențial să faci o primă impresie bună și să stabilești încredere utilizatorilor tăi.

În ceea ce a devenit istoria web-ului, anumite tipare au devenit obișnuite. Designerii s-au bazat pe aceste elemente de interfață cu utilizatorul consacrate pentru a proiecta site-uri web, iar utilizatorii s-au obișnuit să vadă aceste modele de design. Ei recunosc punctele comune dintre site-uri și au încredere în ceea ce este familiar.

Să luăm un exemplu de model de design stabilit pe un site de comerț electronic. Utilizatorii sunt obișnuiți să vadă mici previzualizări ale produselor într-o grilă și apoi să facă clic pentru a afla mai multe despre articolul individual. Folosind modele stabilite în designul dvs. și creând o experiență ușor de utilizat, construiți încredere cu utilizatorii dvs., plus că este mai probabil ca aceștia să fie un vizitator revenit.

Modelele de design sunt intuitive

Pe măsură ce utilizatorii interacționează cu site-ul dvs., factorul de predictibilitate devine foarte important. [twitter_link]Modele previzibile permit cea mai intuitivă experiență.[/twitter_link] Este esențial să ai modele familiare, dar este, de asemenea, important să te asiguri că aceste modele sunt utilizate în mod consecvent.

Un exemplu de model obișnuit, previzibil se găsește pe formulare. Mai exact, toate formularele oferă mesaje de validare și de eroare. Toate formularele de pe site-ul dvs. fac acest lucru în mod constant? Sunt toate mesajele în același loc? Ce zici de butonul de trimitere? Există un mesaj care să indice că formularul a fost trimis?

Din perspectiva designului, utilizatorii au mai întâlnit aceste modele de multe ori înainte. Furnizarea de validare a formularului cu mesaje utile indică utilizatorului unde sunt problemele, iar un mesaj care indică că formularul a fost trimis este un indicator util că o acțiune a avut loc.

Poate părea de bun simț atunci când auziți că modelele și predictibilitatea sunt necesare pentru o experiență bună de utilizator. Cu toate acestea, nu este prea greu să întâlniți site-uri care încalcă tiparele comune, ceea ce poate provoca frustrare sau confuzie. Având în vedere acest lucru, continuați să proiectați cu modele utile de interfață de utilizare. Cu cât utilizatorii sunt mai familiarizați cu ele, cu atât știu mai mult la ce comportament să se aștepte. Modelele și convențiile împiedică utilizatorii să se confunde, iar respectarea tiparelor creează o experiență previzibilă.

Modelele de design oferă un limbaj comun între designeri

[twitter_link]Experiențele grozave încep cu un design eficient.[/twitter_link]

În multe cazuri, designerii lucrează în echipă. Ajută echipa să lucreze mai eficient atunci când există modele de design stabilite. Nu este nevoie să reinventezi roata dacă problema a fost deja rezolvată.

Păstrarea tuturor tiparelor într-un singur ghid de stil central frontal este un loc minunat pentru a păstra inventarul. Ca resursă globală, este un ghid rapid pentru toți membrii echipei pentru a înțelege cazul de utilizare pentru fiecare model. Chiar dacă lucrați singur, urmărirea modelelor de design pe care le utilizați vă va permite să lucrați mai eficient și să priviți înapoi la ele în viitor.

Faza de planificare

Este destul de clar de ce ar trebui utilizate modelele de design, dar cum le pun de fapt designerii web pe acestea atunci când proiectează pentru web? Iată câteva sfaturi care ajută la ușurarea procesului de proiectare.

Utilizați ceea ce știți deja pentru a începe

Dacă proiectați o reproiectare completă sau o „extindere” a site-ului, este util să faceți un inventar și să vă uitați la ceea ce știți deja. Obținerea unui punct de plecare bun este esențială. Dacă este un proiect complet nou, este important să vă gândiți la aceste lucruri și să vă așteptați ca unele întrebări să fie necunoscute la început. În această situație, folosirea experienței anterioare de proiectare pentru a începe este un prim pas bun. Acest lucru informează deciziile inițiale, deoarece au lucrat la alte proiecte.

Începerea cercetării

Cercetarea este cheia pentru o fundație puternică a proiectului. După cum știți bine, utilizatorii vor căuta întotdeauna cel mai simplu mod de a realiza o anumită acțiune pe un site web. Înțelegerea problemelor și sarcinilor la îndemână vă va asigura că proiectați ceea ce trebuie. Pentru a începe, gândiți-vă la aceste elemente:

• Cine sunt utilizatorii actuali? (Obiectivele lor, demografice etc.)
• Ce mai doriți să aflați despre acești utilizatori?
• Cu ce ​​tipare interacționează cel mai mult?
• Există modele cu care acești utilizatori au probleme?
• Ce îmbunătățiri pot fi aduse?
• Ce funcții noi sunt proiectate?
• Poate funcționa vreun tipar stabilit în prezent?

Faza de cercetare este timpul pentru a identifica ceea ce utilizatorii trebuie să realizeze atunci când interacționează cu site-ul tău. Exemple ar fi lucruri precum căutarea de conținut, înscrierea la un buletin informativ, efectuarea unei achiziții etc. În fața unor elemente familiare, utilizatorii vor avea nevoie de mai puțin timp pentru a gândi și vor avea mai multe motive pentru a converti. Păstrați designul concentrat pe crearea de modele într-un mod care să pară familiar utilizatorilor dvs., pe baza cunoștințelor lor existente din ceea ce experimentează pe web.

Când rezolvați problemele de proiectare, timpul și bugetul sunt întotdeauna un factor, dar faceți cât mai multă cercetare. Este timpul să descoperiți principalele puncte dure ale utilizatorilor dvs. și să studiați modelele de design existente. Ce este comun pe web? Ce tipare ați folosit cu succes în trecut? După ce definiți problemele pe care trebuie să le rezolvați, explorați site-uri cu modele care vizează aceleași obiective ale utilizatorilor. Asta va servi ca o bună inspirație pentru proiect. Nu este necesar să le „copiați”, dar este util să luați notă de ceea ce există.

Până în acest moment, ți-am recomandat să fii consecvent și previzibil. Merită menționat că modelele existente pot fi modificate și pot exista cazuri de a face ceva nou. Asigurați-vă că, dacă introduceți un model nou, acesta este justificat de datele utilizatorului și este bine testat.

Proiectare pentru web cu modele de design

Prototip și testare

După faza de cercetare, este timpul să începeți să folosiți ceea ce ați învățat. Aici designul prinde viață prin prototipare. În funcție de procesul dvs., prototipurile pot fi simple wireframes de joasă fidelitate sau modele mai complexe de înaltă fidelitate.

Începeți cu modelele existente din cercetarea dvs. ca bază. Pe măsură ce parcurgeți procesul, asigurați-vă că prototipul acoperă toate caracteristicile de care aveți nevoie și că ține cont de toate obiectivele utilizatorului. Poate fi nevoie de puțină revizuire și reglare fină pentru a ajunge la un bun punct de plecare.

Odată ce sunteți sigur că toate cerințele sunt incluse în prototip, este timpul să faceți câteva teste pentru a obține o perspectivă asupra gradului de utilizare a designului. Aici veți valida eficacitatea modelelor de design împreună cu funcționalitatea generală.

Motivul pentru care testarea este atât de importantă în faza de prototip este că, în unele cazuri, clienții nu își pot articula sau prezice pe deplin gândurile și nevoile. Testarea utilizatorilor le permite să arate în loc să spună. Participanții demonstrează cum ar folosi de fapt site-ul, în timp ce tu observi și înveți din acțiunile lor. Acest lucru este util atât pentru participanți, cât și pentru dvs., ca designer.

Este important să ții notițe cu privire la obiectivele de bază ale utilizatorilor atunci când intri în testare, pentru a rămâne concentrat. După ce ați invitat participanții la test, puneți designul în fața cât mai mulți utilizatori. Dacă constrângerile de timp sunt strânse, asigurați-vă că testați cu cel puțin cinci utilizatori.

Subiectul testării utilizatorilor este un întreg subiect în sine. Alegeți orice metodă are cea mai bună sens în funcție de timpul și bugetul dvs. Ar fi grozav să aveți întotdeauna timp adecvat, dar acest lucru s-ar putea să nu fie întotdeauna posibil. Într-un pic, testele de utilizare „în hol” sau „în stil cafenea” pot fi utile (un test de utilizare configurat într-o zonă cu trafic pietonal intens, folosind oameni care trec pe acolo pentru a-ți testa produsul). Chiar și să implici câțiva colegi este întotdeauna mai bine decât să nu faci nicio testare.

Sunt șanse ca modelele dvs. de design să nu fie perfecte din prima poartă. Vor trebui făcute modificări și vor fi necesare mai multe teste pentru a valida designul actualizat. Cu toate acestea, veți obține mai multe informații din fiecare fază de testare și veți putea încorpora ceea ce ați învățat pentru a continua repetarea și testarea până când designul este optimizat.

Modelele de web design asigură o experiență constantă a utilizatorului. Mai jos sunt link-uri utile care oferă mai multe informații pentru a începe:

• Ghid cuprinzător pentru testarea utilizatorilor
• Operația cu rachetă a lui Steve Krug a fost ușoară
• Exemple de ghid de stil