Design UI site: Ghid pentru începători

Interfețele de utilizator, sau UI pe scurt, sunt o parte extrem de importantă a designului web, care se ocupă de modul în care vizitatorii sunt capabili să navigheze în multe pagini diferite și materiale interactive pe care le oferă un site web. Interfața de utilizare era mult mai simplă în primele zile ale internetului, deoarece HTML era vedeta spectacolului, fiind relativ puține în ceea ce privește alegerea artistică. Cu toate acestea, tehnologia de dezvoltare a site-urilor web și așteptările utilizatorilor de internet au crescut exponențial în ultimele decenii, făcând aspectul fizic și capacitatea de utilizare a designului interfeței web absolut critice.

Pentru cei care doresc să crească traficul și să îmbunătățească SEO, interfața de utilizare a site-ului web este unul dintre cei mai importanți factori implicați. A avea un site web plăcut din punct de vedere estetic și ușor de utilizat este o modalitate garantată de a-i determina pe vizitatori să nu doar să facă clic pe diferite pagini web, ci și să viziteze un site web și să îl recomande altora.

Elementele de bază ale unui design bun al interfeței de utilizare web

Deși aspectul este important, cât de ușor este de utilizat un site web este modalitatea principală de a crește popularitatea și de a crea o bază de utilizatori dedicată. Cheia este să combinați diferite elemente de interfață pentru a face layout-urile paginilor web cât mai invariabile și logice posibil. Utilizatorii nu vor să fie nevoiți să ghicească sau să se forțeze prea mult atunci când încearcă să navigheze prin paginile unui site web. Este necesar să se facă evident unde sunt elementele de interfață pe o pagină, să aibă descrierea acelor elemente

ușor de înțeles și faceți plasarea elementelor cât mai identice posibil pe fiecare pagină. În timp ce ultima cerință ar putea fi dificil de realizat, a avea o modalitate consecventă de a traversa un site web, cum ar fi o bară de navigare universală, este o parte esențială a unui design bun al site-ului web.

Elementele comune de proiectare a interfeței de utilizare web cărora să le acordați o atenție deosebită sunt:

• Sfaturi instrumente
• Bare de file (în special pentru utilizatorii de telefonie mobilă)
• Steppers/Clidere
• Câmpuri de căutare
• Bare laterale
• Butoane
• Pesmet (link trasee)
• Selector de dată/ora
• icoane
• Notificări
• Meniuri (kebab, hamburger, bento, doner, chifteluță)
• Secțiuni de comentarii
• Bare de progres
• Verificare/Butoane radio
• Acordeoane

Combinația corectă de elemente de interfață poate îmbunătăți considerabil experiența utilizatorului, deși este mai bine să nu complicați totul prea mult. De exemplu, culoarea poate fi folosită în mod eficient pentru a direcționa atenția oamenilor către anumite părți ale unei pagini web, dar dacă vine cu prețul de a face o pagină greu de citit sau distrage atenția de la alte elemente, probabil că nu merită până la urmă.

Designul UI ar trebui să fie relativ perfect și să ofere un sentiment de încredere că dezvoltatorii de site-uri web sunt o autoritate în orice subiect pentru care creează conținut. Ar trebui să țină cont de ceea ce caută utilizatorii atunci când navighează pe pagini, astfel încât să nu fie nevoiți să se gândească prea mult la modul în care este structurat un site web. Conținutul site-ului ar trebui să fie structurat logic, cu o ierarhie sensibilă a informațiilor și serviciilor.

Sarcinile complexe trebuie condensate în structuri simple pe care utilizatorii le pot accesa cu ușurință. De exemplu, având un meniu derulant cu cele mai relevante informații enumerate în partea de sus, cu toate celelalte listate în ordinea descrescătoare a importanței. Aceasta ar fi o alternativă excelentă pentru a plasa pur și simplu o grămadă de link-uri sau funcții aleatorii unul lângă celălalt, fie într-o bară laterală, fie într-o bară de navigare. De exemplu:

(Credit imagine: mediu)

Elementele UI ar trebui să fie întotdeauna amplasate unul lângă celălalt într-un mod care să maximizeze interesul utilizatorilor. Dacă un site web are instalată o funcție de căutare, este întotdeauna o idee bună să plasați butoanele de căutare lângă locul în care utilizatorii aleg sau introduc termenii de căutare. Codarea culorilor poate ajuta enorm în situații ca aceasta, dar numai atunci când nu interferează cu restul aspectului unei pagini.

De asemenea, este o idee bună să evitați să plasați prea multe informații pe una sau doar câteva pagini. Chiar dacă există o mulțime de informații sau instrumente bune disponibile pe un site web în general, dacă prea multe dintre ele sunt compactate într-un spațiu prea mic, va fi dificil pentru utilizatori să navigheze, rezultând o experiență slabă și dorința de a evita vizitele viitoare. . În timp ce utilizatorii ar putea să nu fie conștienți de anumite caracteristici ale site-ului web, dacă totul este distribuit mai uniform, aceasta va fi mai mult decât compensată, făcând conținutul mai ușor de înțeles.

Testează SEO și performanța site-ului tău în 60 de secunde!

Un design bun al site-ului web este esențial pentru implicarea vizitatorilor și pentru conversii, dar un site lent sau erorile de performanță pot face chiar și cel mai bine conceput site-ul să aibă performanțe slabe. Diib este unul dintre cele mai bune instrumente de monitorizare SEO și performanță a site-ului web din lume. Diib folosește puterea datelor mari pentru a vă ajuta să vă creșteți rapid și ușor traficul și clasamentele. După cum se vede în Entrepreneur!

• Instrument SEO automatizat ușor de utilizat
• Monitorizare cuvinte cheie și backlink + idei
• Asigură viteza, securitatea și urmărirea Core Vitals

• Sugerează în mod inteligent idei pentru a îmbunătăți SEO
• Peste 250.000 de mii de membri la nivel mondial
• Benchmarking și analiză a concurenței încorporate

De exemplu, „www.diib.com”

Înregistrează-te gratuit

Folosit de peste 250.000 de companii și organizații:

• 
• 
• 
• 

Se sincronizează cu

Lucruri de implementat în designul UI al site-ului web

Având în vedere elementele de bază ale designului UI web, este bine să ne uităm la câteva considerații mai avansate care pot îmbunătăți considerabil experiența utilizatorului.

• Furnizați opțiuni pentru feedbackul site-ului : deși este posibil ca unii să identifice cu exactitate ceea ce utilizatorii vor plăcea sau urăsc despre aspectul unui site web, realitatea pentru majoritatea oamenilor este că vor exista nenumărate probleme de care nu vor fi complet conștienți. .

În mod realist, singurul mod în care vor avea loc îmbunătățirile site-ului este dacă există un flux consistent de feedback din partea vizitatorilor site-ului, care afirmă ce le-a plăcut sau nu le-a plăcut despre experiența lor de utilizator. Majoritatea persoanelor care vizitează nu se vor strădui să spună administratorilor ce părere au despre site, așa că este foarte important să existe o opțiune de trimitere a feedback-ului ușor de găsit și ușor de utilizat. Iată un exemplu de șablon de feedback pe site care este ușor de utilizat:

(Credit imagine: Mopinion)

• Țineți cont de dispozitivele mobile : în lumea de astăzi, se fac tot mai multe căutări pe internet pe telefoanele și tabletele oamenilor. Din păcate, un design bun al interfeței de utilizare web, care pare impecabil pe un computer, nu va arăta neapărat atât de bine pe un dispozitiv mobil. În unele cazuri, un site web poate fi la limită imposibil de utilizat pe un telefon. Analiza site-ului ar fi neprețuită în acest caz, deoarece ar putea dezvălui dacă un procent mare de vizitatori utilizează dispozitive mobile ca opțiune principală de căutare pe web. În cazul în care aceste informații sunt necunoscute, ar fi o idee bună să greșiți din partea precauției și să creați un aspect al interfeței de utilizare care să țină cont de telefoanele și dispozitivele similare. Există instrumente care vă pot ajuta să aflați dacă site-ul dvs. este prietenos cu dispozitivele mobile, cum ar fi Testul de compatibilitate cu dispozitivele mobile de la Google:

(Credit imagine: Asistență Google)

• Aduceți întotdeauna modificările la locul potrivit : deși site-urile web pot fi proiectate în mod expert, vor exista inevitabil alegeri de aspect și design care sunt complet în mâinile utilizatorilor. Acestea pot include lucruri precum informații despre biografie, fotografii de profil și opțiuni de mesagerie. În cazul în care un utilizator dorește să schimbe ceva, opțiunile pentru a face acest lucru ar trebui să fie evidente și ușor disponibile. Aceasta implică, de obicei, adăugarea unei pictograme familiare, ușor de recunoscut în colțul unei secțiuni de pagină web unde vor avea loc modificările, de exemplu, plasarea unei pictograme creion în colțul din dreapta sus al unei secțiuni „despre mine”.
• Utilizați bare de progres pentru formulare : ușurința în utilizare este absolut crucială pentru a face un site atrăgător. În multe cazuri, poate fi necesar ca utilizatorii să completeze formulare pentru a accesa servicii. Deși proiectarea formularelor pentru a le face cât mai cuprinzătoare și relevante ar trebui să fie o prioritate, nu este cu adevărat suficientă pentru a maximiza experiența clienților. Pentru formularele care au o cantitate excesivă de informații, este o idee bună să le împărțiți în secțiuni.

Oamenilor nu le place să fie copleșiți de prea multe sarcini simultan, așa că împărțirea cererilor de trimitere în bucăți ușor de urmărit și consecvente tematic îi va convinge pe oameni să respecte un proces mult mai lung decât ar face-o altfel. Această secțiune a unui formular de trimitere ar trebui, de asemenea, să fie însoțită de o bară de progres care indică cât mai departe trebuie să parcurgă un utilizator înainte de a fi completat. Acest lucru va avea ca rezultat nu numai un ușor sentiment de realizare pe măsură ce fiecare secțiune este finalizată, dar va oferi și un indiciu cu privire la cât mai departe trebuie să meargă cineva înainte de finalizarea unei sarcini. De exemplu:

(Credit imagine: Dribble)

• Puneți măsuri de siguranță pentru a preveni erorile utilizatorilor : mai ales dacă un site web se ocupă cu o mulțime de informații financiare sau necesită foarte mult timp, poate fi inconfortabil sau frustrant pentru utilizatori dacă fiecare mică greșeală pe care o fac poate avea consecințe grave. Înțelegerea greșelilor pe care le-ar putea face oamenii și găsirea unor modalități de a le preveni să se întâmple sau de a oferi opțiuni pentru a le rectifica va îmbunătăți în mod dramatic satisfacția vizitatorilor cu un site. Aceste tipuri de măsuri de siguranță pot fi adesea văzute pe site-urile de comerț electronic atunci când le solicită clienților să confirme că doresc să facă o achiziție sau dacă doresc cu adevărat să scape de articolele din coșul de cumpărături. În mod mai universal, măsurile de protecție sunt folosite pentru a reaminti utilizatorilor că nu au completat complet toate secțiunile necesare ale trimiterii unui formular.
• Lăsați o mulțime de spațiu gol : este obișnuit ca oamenii să creadă că „mai mult este mai bine” atunci când vine vorba de design de site-uri web; cu toate acestea, nimic nu poate fi mai departe de adevăr. Prea multe informații pe o pagină web pot fi foarte copleșitoare pentru vizitatori. Interfața de utilizare a site-ului web este cel mai bine implementată atunci când sunt afișate doar cele mai necesare informații și într-un mod sensibil. În timp ce a avea prea mult spațiu poate face ca o pagină web să pară goală, a avea spații de dimensiuni decente poate fi foarte utilă pentru evidențierea informațiilor. Oamenii au tendința de a scana informațiile în loc să le analizeze în detaliu, așa că lăsarea spațiilor goale în secțiunile potrivite le va oferi oamenilor o impresie mult mai bună despre informațiile cu adevărat importante pe un site web.

Lucruri de evitat în designul UI al site-ului web

Deși există numeroase moduri prin care designul interfeței web poate fi îmbunătățit, există și o mulțime de lucruri care ar trebui cu siguranță evitate pentru a preveni ca un site web să devină un coșmar de utilizat.

• Nu faceți pictogramele ambigue : deși cu siguranță va fi o provocare pentru anumite lucruri, asigurați-vă întotdeauna că pictogramele sunt cât mai ușor de recunoscut. Nu este neobișnuit ca site-urile web să schimbe sau să converge funcțiile utilizate în mod obișnuit în ceva de nerecunoscut și să primească o mulțime de întrebări cu privire la ce s-a întâmplat cu interfața de utilizare. Cel puțin, acesta este cel mai bun scenariu; de multe ori mulți utilizatori nici măcar nu se vor obosi să se uite ce sa întâmplat cu o pictogramă folosită anterior sau ce ar trebui să reprezinte o pictogramă nouă. Dacă o modificare a pictogramei este legată de ceva precum partajarea pe rețelele sociale, rezultatul final ar putea dăuna grav SEO. Dacă vi se pare că pictogramele dvs. sunt prea ambigue, încercați să le creați o etichetă text, de exemplu:

(Credit imagine: Thomas Byttebier)

• Evitați să faceți acțiunile importante prea vagi : similar cu schimbarea pictogramelor ușor de recunoscut, funcțiile importante ale site-ului ar trebui să fie cu adevărat evidente. Dacă scopul principal al unui site web este ca utilizatorii să poată colabora pe un forum deschis, faceți posibilitatea de a-i face pe oameni să discute între ei cât mai proeminentă posibil. Aceasta poate include crearea de pictograme de postare a firelor sau de răspuns excepțional de mari sau de culori contrastante pentru a atrage atenția utilizatorilor asupra lor. Dacă oamenii nu sunt siguri ce ar trebui să facă pe un site într-o perioadă scurtă de timp, este posibil să renunțe la utilizarea acestuia destul de repede.
• Nu faceți necesar să schimbați setările implicite : de multe ori oamenii nu observă setările implicite ale programelor sau dispozitivelor atunci când le folosesc, deoarece se presupune că totul ar trebui să funcționeze bine de la început. În timp ce unii oameni se bucură de multă flexibilitate atunci când vine vorba de setări, majoritatea oamenilor doresc doar să folosească un serviciu cât mai repede și ușor posibil. Când cineva începe să folosească un site web, este imperativ să nu fie necesar sau să se simtă obligat să se încurce cu opțiunile de setări doar pentru a începe să folosească totul așa cum este prevăzut. Chiar dacă să vi se ofere mai multe opțiuni pare un plus dintr-o perspectivă obiectivă, nu va părea așa din punctul de vedere al utilizatorului.
• Evitați să fiți prea unici : creativitatea este un lucru bun și este de obicei motivul pentru care o mulțime de eforturi devin de succes, dar de multe ori este foarte supraevaluată. Mulți oameni folosesc șabloane de site-uri web și structuri similare de UI dintr-un motiv: utilizatorii îl preferă. Există doar atât de multe moduri în care o pagină web singulară poate fi configurată pentru a arăta diferit de toți ceilalți, menținând în același timp funcționalitatea. Cele mai multe site-uri web au aspecte și pictograme vag similare, deoarece s-a dovedit a fi cele mai bune în satisfacerea nevoilor utilizatorilor.

Resurse și sfaturi suplimentare

Deși poate fi complet posibil să compilați o listă de lucruri care îmbunătățesc foarte mult designul UI, implementarea lor pe un site web poate fi incredibil de dificilă. Din fericire, există o mulțime de moduri diferite prin care oamenii își pot da seama ce funcționează și ce nu. Un prim pas grozav este să aruncați o privire asupra site-urilor web deja consacrate, cu un aspect excelent al interfeței de utilizare, cum ar fi Airbnb sau Dropbox, și să vă inspirați din designul lor general. De exemplu, aruncați o privire asupra designului Airbnb pentru dispozitive mobile:

(Credit imagine: Google Design)

Există, de asemenea, un număr mare de companii care oferă clienților lor șabloane care iau în considerare numeroasele puncte de referință diferite pe care site-urile web mai mari le folosesc pentru a atrage baza lor de utilizatori. Multe dintre aceste șabloane sunt compatibile cu dispozitivele mobile și sunt actualizate frecvent pentru a fi cât mai atrăgătoare și cu timpul posibil. În plus, aceste șabloane pot fi întotdeauna completate cu propriul fler creativ al unui designer, permițând un grad maxim de flexibilitate și inspirație.

Sperăm că ați găsit acest articol util.

Dacă doriți să aflați mai multe despre sănătatea site-ului dvs., obțineți recomandări și alerte personale, scanați-vă site-ul web de către Diib. Durează doar 60 de secunde.

Intră pe site-ul tău

De exemplu, „www.diib.com”

Înregistrează-te gratuit

Mă bucur foarte mult de SEO și alte forme de optimizare a site-ului pentru site-ul meu cu contract KoffeeKlatch. Nu m-am gândit niciodată că voi rosti fiecare acele cuvinte. Îmi plac actualizările regulate prin e-mail cu privire la numerele mele și sarcinile pentru a le îmbunătăți. Îmi place să obțin numere relevante și pe care să le înțeleg și să fac ceva.

Annabel Kaye
Revizor de 5 stele Google verificat

Având în vedere inspirația, există o mulțime de resurse publice care pot fi folosite pentru a descoperi un format și un aspect unic. În zilele noastre, Pinterest este un focar de oameni care doresc să-și arate lucrările creative și există potențial milioane de modele și machete diferite care pot fi văzute complet gratuit. Alte locuri care ar putea merita o privire sunt Dribble și Ui Movement. Imaginea de mai jos arată cum arată Mișcarea Ui:

(Credit imagine: Product Hunt)

Diib: Metrici de bază pentru a vă face backup designului UI

Dacă dezvoltarea unui design de site de la zero este prea copleșitoare, există și un număr mare de programe disponibile care învață cum să proiectați corect interfața de utilizare. CareerFoundry și Treehouse sunt ambele bine stabilite și sunt foarte recomandate. De asemenea, vin cu resurse suplimentare pentru a ajuta la proiectarea site-ului web, care se extinde dincolo de interfața de utilizare. Ca întotdeauna, Diib oferă un tablou de bord pentru utilizatori programat special pentru a vă completa designul UI și pentru a urmări aspectele tehnice SEO ale site-ului dvs. Iată câteva dintre caracteristicile pe care știm că le veți aprecia:

• Instrumente de monitorizare și urmărire a cuvintelor cheie, backlink și indexare
• Experiența utilizatorului și optimizarea vitezei mobile
• Monitorizarea și repararea ratei de respingere
• Integrarea și performanța în rețelele sociale
• Pagini sparte în care aveți backlink (verificator 404)
• Monitorizare tehnică SEO

Faceți clic aici pentru scanarea gratuită sau sunați pur și simplu la 800-303-3510 pentru a vorbi cu unul dintre experții noștri în creștere.