10 reguli pentru o bună interfață de utilizare care trebuie respectate în fiecare proiect de proiectare web

S-au dus vremurile site-urilor Geocities cu codul lor HTML, care nu se schimbă niciodată. Site-urile și aplicațiile de astăzi sunt dinamice și interactive. Sarcina noastră ca designeri este să o facem astfel încât interfața prin care aceștia interacționează cu proiectarea interfeței noastre web să fie cât mai aproape de ideal posibil. Din fericire, există câteva reguli aproape universale care vă pot ajuta. Am pus laolaltă ceea ce credem că sunt cele mai bune principii de proiectare, astfel încât să puteți îmbunătăți toate viitoarele proiecte de design web.

10 reguli pentru o bună interfață de utilizare care trebuie respectate în fiecare proiect de proiectare web

Abonați-vă la canalul nostru Youtube

1. Faceți accesibil tot ceea ce are nevoie utilizatorul

Fie că este vorba despre o serie de instrumente de proiectare pentru aplicații de proiectare web, inventarul unui personaj dintr-un joc video, o foaie de calcul sau orice altceva, dacă utilizatorul nu găsește ceea ce dorește, acesta va răsfoi software-ul dvs. Filele fac lucrurile accesibile. Comenzile rapide și sfaturile de instrumente cu mouse-ul.

Am ales să folosim filele pentru a organiza Divi, de exemplu. Toate instrumentele de care aveți nevoie sunt chiar acolo în constructor, separate prin categorii. Barele de instrumente sunt accesibile în mod similar. Dacă utilizați WordPress, bara de instrumente de administrare vă oferă posibilitatea de a accesa rapid editorul de mesaje, personalizatorul de teme, setările pluginului și așa mai departe. Opțiunile sunt etichetate clar și nu trebuie să le căutați.

Un alt exemplu îl reprezintă opțiunile Ajutor / Asistență / Contact. Când proiectați o interfață de utilizare, indiferent dacă este vorba despre o aplicație mobilă, aplicații web, site-uri web WordPress sau orice altceva, utilizatorii dvs. vor trebui întotdeauna să găsească butonul Ajutor (sau butonul Contact Support). Va trebui să vă contacteze la un moment dat . De aceea, trebuie să vă asigurați întotdeauna că puneți butoanele de ajutor în față și în centru. Uită-te la Divi. În fiecare modul, avem butonul de asistență pregătit pentru dvs., la îndemână, ori de câte ori aveți nevoie de el.

În plus, fereastra de ajutor apare cu un tutorial video cu orice funcție cu care lucrați. Prin includerea acestui modul integrat, Divi devine mult mai accesibil și mai puțin frustrant. În plus, ca parte a interfeței de utilizare, locația pentru ajutor este consecventă pe întregul produs. Ceea ce ne aduce la următorul punct ...

2. Fii consecvent

Așa cum am spus acum un moment, este important să fiți consecvenți în plasarea caracteristicilor în interfața dvs. de utilizare. Dar ar trebui să vă îngrijorați și faptul că interfața dvs. de operare funcționează și arată uniform pe întregul produs. Nu aveți meniul în partea de sus a unei pagini și în partea de jos a alteia. Nu rearanjați elementele de meniu de fiecare dată când se încarcă. Asigurați-vă că utilizatorii dvs. știu unde sunt lucrurile pe site-ul dvs. Dacă păstrați un formular de contact sub postările de pe blog, nu decideți să îl lăsați. Utilizatorii vor observa și vor fi nedumeriți.

Coerența include, de asemenea, fonturile și designul ar trebui să funcționeze de la pagină la pagină. Nu treceți la schimbarea fonturilor antet / corp de la pagină la pagină.

Există o idee interesantă numită principiul celei mai mici surprize, care spune că dacă îl faci pe utilizator să fie surprins de modul în care funcționează ceva ... reluează-l, astfel încât să fie mai intuitiv.

În plus, ar trebui să vă asigurați că interfața dvs. de utilizare este potrivită pentru platforma dvs. - aplicațiile iOS funcționează diferit în unele cazuri decât Android. Site-urile desktop au nevoi diferite de site-urile mobile pentru meniuri, galerii și chiar verificarea produselor. Coerența înseamnă că nu vă frustrați utilizatorii, făcându-i să-și dea seama ce să facă pe site-ul dvs.

3. Fii clar

Acest lucru poate părea o repetare a celor de mai sus, dar claritatea și consistența sunt diferite. Claritatea înseamnă că doriți ca utilizatorii dvs. să știe ce să facă în orice moment. În anumite privințe, acest lucru sângerează și în designul UX, deoarece reduce frustrarea utilizatorilor dvs. și crește reținerea și reduce rata de respingere.

Claritatea este motivul pentru care designul web minimalist (și într-o măsură brutalist) a fost atât de popular. Oamenii nu sunt confundați cu privire la scopul vreunui site sau pagină, deoarece nu există (sau puțin) dezordine. Vrei să oferi experiența opusă pe care o face Ling's Cars.

O modalitate de a obține claritate este de a trece de la un pas la altul pe pagini diferite. În loc să aveți un proces de parcurgere, derulați pagina în jos - sau fiți conținut într-o singură secțiune sau casetă - solicitați utilizatorilor dvs. să navigheze de la o pagină de produs la o pagină de coș de cumpărături la o pagină de plată la o pagină Alegeți plata dvs. la o pagină de plasare a comenzii la o pagină de confirmare. (Amazon face acest lucru, după cum puteți vedea în imaginea de mai jos).

Vor ști exact unde se află în proces, eliminând orice ambiguitate. Acest lucru este deosebit de important pentru utilizatorii de telefonie mobilă, deoarece proprietățile imobiliare pe ecran sunt la un nivel superior .

4. Oferiți feedback

Ultimul lucru pe care îl doresc utilizatorii este să nu înțeleagă ce se întâmplă. Dacă apasă un buton, furnizați o indicație că butonul a fost apăsat. O puteți face în mai multe moduri. Puteți anima butonul, făcându-l să pară că se scufundă în pagină. Încărcarea pictogramelor (cum ar fi roata curcubeu MacOS) oferă feedback, „Lucrăm la solicitarea dvs.”, fără a fi nevoie să o spunem.

Dacă permiteți utilizatorilor să încarce fișiere (cum ar fi cu Dropbox sau Google Drive), dați o indicație a timpului rămas. Oferiți o fereastră pop-up sau modal care le spune că acțiunea lor a fost un succes, reduce frustrarea și confuzia.

Într-adevăr, ori de câte ori utilizatorul ia orice acțiune în interfața dvs., doar o mică recunoaștere poate fi diferența într-o experiență bună și una lipsită de lumină.

5. Folosiți Recunoașterea, nu Reamintirea

Opusul abilităților bune de a face teste, doriți ca utilizatorii să recunoască totul despre site-ul dvs. atunci când îl văd. Nu ar trebui să se gândească la asta și să-și amintească informațiile. Mai mult decât orice, vă simplificați interfața, astfel încât fiecare parte să fie intuitivă și să treacă de la un punct la altul. Acest lucru se poate face folosind pictograme recunoscute așa cum am menționat mai sus. Oamenii recunosc anumite icoane pentru anumite lucruri.

Se poate face, de asemenea, utilizând tururi virtuale pentru a ghida un utilizator printr-un proces, chiar și atunci când nu este prima dată. Ei vor recunoaște procesul odată ce apare primul modal și nu vor trebui să cheltuiască energia reamintind exact cum să efectueze acele acțiuni.

S-ar putea să reușiți, de asemenea, să realizați acest lucru prin intermediul unei mesaje bine plasate, care să le reamintească utilizatorilor ce face pe site-ul dvs. ce face. Realizăm acest lucru în Divi cu sfaturi simple de hover - chiar dacă cineva nu își amintește ce face pictograma, îi conducem la funcția sa. După aceea, ar trebui să recunoască pictograma. Sau cel puțin sfatul de instrucțiune dacă planează din nou. Sau chiar procesul de planare pentru a obține informațiile.

6. Alegeți cum vor interacționa oamenii mai întâi

credit foto John Picklap, prin amabilitatea MarieClaire.com

Știi ce este cel mai rău? Apăsând pe o ușă de tragere. Mai ales când tocmai ai împins un precedent pentru a ajunge la acela. Proiectantul clădirii a făcut ca interfața cu utilizatorul să fie inconsistentă, așa că nu ați avut nici o idee despre cum să faceți ceea ce trebuia să faceți. Dar dacă apăsați ceva care arată ca un buton care nu este, dar așteptați un răspuns oricum? Ei bine, asta pentru că acei designeri nu au luat în considerare modul în care utilizatorii lor vor interacționa cu produsul lor. Deci, atunci când vă proiectați interfața de utilizare, alegeți o mișcare (poate două) și rămâneți cu ea.

Pe dispozitivele mobile, acest lucru tinde să fie glisat. Uită-te la Snapchat. Aproape fiecare acțiune este efectuată prin glisare , inclusiv prin atingerea setărilor și a profilului. Puteți să glisați în jos pe Snapchat pentru a vă vedea pe dvs., să glisați la stânga pentru a ajunge la conversații, la dreapta la povești și în sus pentru a ajunge la amintirile voastre (sau cum s-ar numi săptămâna aceasta). Au ales modul în care doreau ca utilizatorii lor să interacționeze cu produsul lor și și-au proiectat interfața de utilizare pentru a se potrivi cu asta. Nu invers.

Când vă proiectați interfața de utilizare, alegeți dacă veți folosi meniuri și atingeri, iconografie, glisări și gesturi sau altceva complet. Alexa și Siri folosesc intrarea vocală ca interacțiune principală a interfeței de utilizare. Modul în care furnizează informații și își îndeplinesc sarcinile este conceput în jurul acelei contribuții. Și ca utilizator, știți ce să faceți intuitiv, deoarece aceste informații au fost stabilite pentru dvs. la început. Designerii v-au spus ce să faceți și ați făcut-o . Utilizatorii dvs. vor aprecia că faceți același lucru pentru ei.

7. Respectați standardele de proiectare

Vechea zicală, dacă nu se strică, nu o rezolva se aplică aici. Chiar nu este nevoie să încercați să revitalizați ceva dacă standardul funcționează. Aceasta merge de la utilizarea pictogramelor la plasarea standard a elementelor. Nu doriți să mergeți împotriva a ceea ce utilizatorii dvs. așteaptă să facă lucrurile. Oamenii știu că semnele de întrebare (?) Indică ajutor. Deci, nu utilizați un semn de exclamare (!) . Dacă doriți ca utilizatorii să vă găsească meniul mobil, utilizați pictograma hamburger (cele trei linii stivuite), nu o grilă.

Gândiți-vă la barele de căutare. Acestea tind să se afle în locuri similare pe majoritatea site-urilor: partea de sus a barei laterale sau sfârșitul meniului antet. Dacă nu este acolo, centrul secțiunii superioare a paginii. Dacă decideți să includeți singurul câmp de căutare în partea de jos a barei laterale, subsolurile paginii sau sub textul postărilor de pe blog, oamenii nu vor ști unde să caute. Chiar dacă îl identificați cu pictograma lupă standard.

Nu este nimic în neregulă cu gândirea în afara cutiei și alegerea unui design nou și inovator, dar asta nu ar trebui să însemne că designul este greu de utilizat.

8. Ierarhia elementară este importantă

Nu, nu vrem să spunem că nici Pământul, Vântul, Apa sau Focul sunt șeful celorlalți. Înțelegem că elementele de pe pagina dvs. trebuie să aibă o ierarhie clară atât pentru utilitate, cât și pentru modul în care utilizatorul vede pagina. Practic, doriți să vă asigurați că cele mai importante funcții sunt în partea de sus a paginilor respective. În plus, acest tip de ierarhie poate conduce utilizatorul în jos pe pagină în mod organic, conducând utilizatorul prin serviciul dvs.

Elementele mari care scad ca dimensiune pe măsură ce treceți prin proces sunt indicative de importanță și ordine. La fel și culoarea și contrastul. Utilizarea spațiului alb este, de asemenea, importantă, deoarece dezordinea poate împiedica progresul utilizatorului și poate atrage privirea de la scopul paginii. Liniile curate, mult spațiu și elementele bine definite pot indica vizual utilizatorilor cum să treacă prin interfața de utilizare fără nicio documentație sau adnotare.

O regulă decentă este că doriți să păstrați lucrurile care curg de la stânga la dreapta, de sus în jos.

9. Păstrați lucrurile simple

Uită-te la acest formular de contact:

Uită-te acum la acesta:

Ambele sunt formulare de contact pentru a face o cerere. Una dintre acestea nu este o problemă de completat, în timp ce cealaltă este ceva mai mult o durere de cap. În afară de a fi un formular de guvernare, proiectarea formularului de jos nu este făcută pentru utilizator, ci pentru administrator. Nu asta e treaba ta. Sarcina ta este să faci lucrurile cât mai fără fricțiuni pentru utilizator . Și una dintre cele mai bune modalități de a face acest lucru este să tăiați orice nu este absolut necesar.

10. Păstrați-vă utilizatorii liberi și sub control

Ultimul lucru pe care vrem să-l atingem - și ultimul lucru pe care doriți să-l faceți cu interfața dvs. de utilizare - este preluarea controlului de la utilizator. Sau pentru a-i face să se simtă limitați sau restricționați de designul dvs. Doriți să le împuterniciți, iar interfața dvs. de utilizare ar trebui să le permită să efectueze acțiunile dorite. Această regulă are două părți: contextul și permisiunea .

În primul rând, orice acțiune pe care utilizatorul trebuie să o facă ar trebui să fie situată lângă ceea ce dorește să acționeze. Dacă trebuie să editeze o postare, butonul de editare ar trebui să fie lângă butoanele de salvare , publicare / trimitere , previzualizare . De fapt, opțiunea mai bună este pentru meniurile contextuale pentru toate acțiunile pe care le poate întreprinde utilizatorul asupra unui anumit element (sau pagină). Dacă sunteți consecvent în interfața dvs. de utilizare, așa cum am vorbit mai sus, utilizatorii dvs. vor înțelege că aceste meniuri contextuale sau bare de instrumente vor avea întotdeauna întreaga listă de acțiuni pentru orice element dat.

În plus, interfața dvs. de utilizare ar trebui să facă întotdeauna utilizatorul să se simtă ca și cum ar putea ieși sau anula orice acțiune pe care o întreprinde. În timp ce proiectați interfața de utilizare, ei o vor folosi . Deci, au nevoie de permisiune (sau poate chiar de libertate) pentru a face ceea ce au nevoie pentru a face treaba. A face acest lucru poate fi la fel de simplu ca adăugarea unui buton de anulare la fiecare pagină a comenzii dvs. de comerț electronic (deoarece apăsarea butonului înapoi al browserului poate face ca lucrurile să devină neclare). Poate că este o caracteristică de anulare , așa că ei consideră că experimentarea este în regulă. Sau un istoric al reviziilor pentru proiecte de anvergură (cum ar fi în Google Drive sau WordPress sau Git).

Când utilizatorii dvs. se simt liberi și fără restricții, ați urmat, evident, câteva principii bune de proiectare a interfeței de utilizare.

Sunt UI gata?

Rău de joc. Știu, îmi pare rău. Dar, cu aceste reguli de interfață, veți fi absolut gata să eliminați din parc următorul dvs. proiect de web design. În timp ce unele dintre acestea se pot aplica mai mult unor proiecte decât altele, interfața de utilizare bună este o interfață de utilizare bună, iar interfața de utilizare bună duce la o interfață de utilizare bună. Dar acesta este un subiect pentru o postare complet diferită.

Aveți reguli pentru un design bun al interfeței de utilizare pe care le respectați întotdeauna?

Imagine prezentată de articol de către emojoez / shutterstock.com