Ce este proximitatea în design web și cum o poți folosi?

Este fascinant cum funcționează mintea umană. Te-ai întrebat vreodată despre felul în care oamenii își iau lumea vizual?

În secolul al XX-lea, psihologii germani Max Wertheimer, Kurt Koffka și Wolfgang Kohler au încercat să găsească un răspuns la această întrebare. Ei au efectuat o serie de studii și, ca urmare, au dezvoltat principiile gestalt, care sunt un set de linii directoare simple care explică modul în care oamenii văd lumea din jurul lor.

Proximitatea este considerată a fi unul dintre principiile gestalt. Acest principiu are un impact semnificativ asupra esteticii designului contemporan al interfeței cu utilizatorul. În acest blog, vă voi spune ce înseamnă proximitatea în Web Design și cum o puteți utiliza.

Ce este proximitatea în web design?

Conceptul de proximitate se referă la elementele care trebuie ordonate vizual și la scopul de a obține cea mai mică confuzie posibilă. Este important să separați conținuturile care nu sunt legate între ele pentru a evidenția absența unei legături între ele.

De exemplu, trebuie să fi observat că pictogramele pentru mai multe platforme de social media au fost grupate împreună și nu răspândite pe un site web. Este mai asemănător cu o tehnică de a pune totul într-o singură locație.

Aspectele care folosesc proximitatea pentru a minimiza ambiguitatea vizuală și pentru a promova înțelegerea sunt mai ușor de înțeles. Proximitatea ajută și la structura aspectului site-ului. Aplicarea corectă a proximității are un efect semnificativ și benefic asupra experienței utilizatorului.

Designerii beneficiază de principiul proximității, fiind capabili să atingă obiective majore, cum ar fi ca machetele să pară mai puțin aglomerate și gruparea variabilelor care sunt conectate colectiv.

Cum să folosiți proximitatea în design web?

Spatiu alb

Înțelegerea importanței spațiului alb în design este primul pas în adoptarea cu succes a noțiunii de proximitate în design.

Lipsa spațiului alb în design este o problemă comună. Când vine vorba de experiența utilizatorului, spațiul alb îl poate afecta la fel de mult ca și conținutul real de pe pagină. Spațiul alb direcționează privirea utilizatorului, generează contrast și lasă un impact de durată asupra minții utilizatorului.

Prin design, designerii comunică natura site-ului web. Poate fi prin text și imagini. Dar un design eficient este ceva care are un spațiu alb bine organizat, care poate spori elementele dintr-un site web.

Creați o ierarhie vizuală

Structura site-ului web și modul în care este organizat și prezentat conținutul sunt elementele de bază ale proximității eficiente. Un designer trebuie să fie capabil să construiască o ierarhie vizuală atrăgătoare a conținutului pentru a atinge acest obiectiv de proximitate efectivă. Este esențial să oferiți site-ului dvs. o ierarhie vizuală clară, așa că este important să utilizați eficient spațiul alb și să aranjați elemente comparabile împreună.

Gruparea și subgruparea ulterioară a părților site-ului este cea mai bună tehnică pentru a menține ierarhia pe loc. Utilizatorul este mai capabil să înțeleagă unde a fost și unde vrea să ajungă ca urmare a acestei ierarhii, care ajută și la exprimarea obiectivului site-ului.

Faptul că utilizatorul poate vedea acest lucru indică faptul că este conștient și înțelege unde sunt stocate informațiile relevante, ceea ce indică faptul că ați comunicat cu succes mesajul și scopul site-ului.

Îmbunătățiți înțelegerea conținutului

Conținutul este rege. Pentru multe produse, materialul de conținut este motivul pentru care ființele umane încep să le folosească în primul rând. Claritatea bună (confortul cu care un cititor poate recunoaște un conținut textual scris) și lizibilitatea (comoditatea cu care un cititor poate decoda simboluri) sunt case esențiale ale designului de produs.

Multe elemente pot contribui la claritate și lizibilitate, care includ familia de fonturi, dimensiunea fontului și contrastul conținutului textual. Dar modul în care modelați materialul de conținut pe o pagină web, în ​​plus, fără întârziere, afectează lizibilitatea și claritatea materialului de conținut.

Lizibilitatea poate trece în timp ce un conținut textual este furnizat fără nicio formatare. Prin furnizarea de materiale de conținut în blocuri scurte, care se pot scana fără efort - gruparea propozițiilor în paragrafe sau secțiuni și deosebirea lor cu o bucată de spațiu alb - îi ajutați pe clienți să testeze și să studieze conținutul textual.

Au un aspect care poate fi scanat

Citirea și scanarea conținutului care este structurat într-o ierarhie și clasificat într-o manieră logică este mult mai simplă. Atunci când își construiește arhitectura și designul, un site web ar trebui să folosească proximitatea pentru a nu supraîncărca utilizatorii cu conținut.

Prin urmare, în ciuda faptului că este relativ simplu să puneți în practică conceptele de proximitate pe site-urile web care au o cantitate limitată de material, proximitatea este semnificativ mai crucială pe site-urile care au mult conținut. Ca rezultat, ar trebui să verificați dacă aspectul dvs. este simplu, lizibil și scanat de utilizator.

Subliniați anumite elemente

Accentul este unul dintre conceptele vitale maxime ale designului experienței personale (UX). A acorda prioritate unor factori precisi sau materiale de conținut pe o pagină web este una dintre responsabilitățile maxime, deloc neobișnuite, pentru designeri.

În timp ce designerii pot folosi multe strategii exclusive pentru a obține consecințe adecvate, care includ mărirea unui detaliu sau includerea unui contrast suplimentar, este viabil să obțineți consecințe identice fără nicio modificare a detaliului autentic. În schimb, te-ai putea juca cu cantitatea de zone sărace din detaliu.

Există o legătură imediată între zonele sărace și interesul personal. Zona extrem de săracă pe care o încărcați rotund și detaliat, cu atât va deveni foarte importantă pentru privitor. Acest lucru are loc în mod natural - pentru că interesul persoanei ar putea fi ghidat în direcția unui detaliu cu o zonă suplimentară săracă, într-adevăr datorită faptului că nu există nimic altceva în acel loc care să îi atragă interesul.

Merită să menționăm că, probabil, este dificil să recunoști care detaliu atrage interesul maxim pe o pagină de internet. Prin urmare, este încurajat să aplicați un program software de layout pentru a crea un prototip al aspectului dvs. și să îl validați cu cel de-al 5-lea test.

Arată-ți prototipul persoanelor care constituie publicul tău timp de 5 secunde, după care întreabă-le: „Care sunt factorii primari pe care ți-ai amintit?” Dacă ei numesc un detaliu (sau factori) pe care trebuie să-i vadă, atunci ești bine.

Ghidați ochiul spectatorului prin conținut

Preceptul de proximitate vă ajută să creați un waft o modalitate bună de a ghida privirea privitorului de la un factor la altul. Prin ajustarea spațiului alb, puteți crea fără efort factori focali sau regiuni care atrag în mod clar atenția utilizatorului.

Crearea factorilor focali începe prin a evolua cu creșterea unei grile de aspect pe internet, o modalitate bună de a vă permite să înconjurați factorii de aspect (împreună cu conținut textual, imagini sau comenzi practice) întotdeauna în interiorul aspectului.

După ce aveți o grilă, doriți să configurați factori pentru clienții manuali prin secțiunile cheie ale materialelor de conținut. După cum ați putea vedea mai jos, exact asta face Evernote cu ajutorul împerecherii blocurilor de conținut textual cu ilustrații. Drept urmare, ochiul privitorului urmează un traseu în zig-zag în timp ce derulează prin această pagină.

Încheierea

Concentrarea la distanța relativă dintre factorii UI este vitală în timp ce configurați diverse monitoare și rezoluții. Designul care apare chiar pe monitoarele de laptop mari nu va apărea chiar pe monitoarele celulare mici.

Atunci când aspectul dvs. este redus pentru a găzdui monitoare mai mici, distanța dintre factori poate fi redusă la minimum, ceea ce ar putea distruge presupusele relații ale factorilor UI. Este important să vă verificați aspectul pe diverse monitoare și rezoluții pentru a vedea dacă aspectul dvs. se scalează bine sau nu. Este viabil să aplicați echipamente Google Chrome Dev pentru a simula dispozitive celulare.

Cum să îmbunătățiți experiența utilizatorului site-ului web este, de asemenea, ceva despre care poate doriți să aflați mai multe. Contactați-ne dacă doriți să proiectați sau să reproiectați pagina dvs. web.