freepik_35

De-a lungul timpului s-au enunțat foarte multe reguli de design pentru web și pentru creatorii de software, pornind de la principii împrumutate din designul de obiect și aplicate unui ecran inițial slab performant. Pe măsură ce monitoarele nu au mai fost un obstacol în crearea de produse digitale, atenția s-a mutat pe nevoile utilizatorului, pe simplificarea operațiunilor pe care acesta trebuie să le facă pentru a-și atinge scopul și s-a migrat către un stil relativ minimalist de prezentare a informațiilor.

Accentul s-a transferat în timp de la a oferi foarte mult suport pentru utilizatori și de la a-i învăța cum să folosească anumite funcțiuni către a crea acțiuni suficient de simple încât aceștia să nu aibă nevoie de explicații suplimentare și să se bazeze pe intuiție. În același timp, prevenția erorilor a devenit mai puțin importantă decât posibilitatea de a reveni facil la un pas anterior pentru a încerca un traseu nou. Cel mai bun exemplu de simplificare a traseelor și de migrare către un layout și un design minimalist este chiar pagina de start a celui mai utilizat motor de căutare, Google:

1996 vs 2016

google shrink

Structură, formă, culoare

Orice utilizator este obișnuit să structureze vizual toată informația pe care o primește. Creierul înțelege foarte repede formele întregi, figurile care îi sunt familiare și obiectele uzuale și, chiar și în momentul în care formele pe care i le oferi nu sunt întregi, el automat le completează cu cel mai apropiat obiect/formă cunoscut/ă pentru a-i da un sens.

Un bun exemplu în acest sens este logo-ul companiei IBM care nu este nimic altceva decât o suită de linii întrerupte. Dispunerea acestora face ca userul, care va completa formele automat, să vadă literele I B și M.

ibm 1

Același logo ilustrează foarte bine și conceptul de proximitate pe care un bun designer trebuie să îl aibă în vedere. În momentul conceperii designului unui homepage și al paginilor secundare ale unui website, informația trebuie prezentată structurat și marcată corespunzător.

Blogger, web designer, account în agenție, startupper? Află informații complete despre strategia dezvoltarii produsului tău și aplică-le într-un workshop de două zile. Învață să îți definești publicul țintă, să deduci patternurile sale de interacțiune cu produsul tău, descoperă cum se formează obiceiurile în online și cum poți concepe un site funcțional, o strategie de dezvoltare și una de content marketing și află de ce instrumente ai nevoie pentru a-ți controla evoluția și cum să le utilizezi. Înscrie-te azi la curs!

Detalii si inscriere aici: Curs – Online de la A la Zen

Cu cât două obiecte sunt mai apropiate cu atât tindem să le atribuim o soartă comună și să le considerăm parte a unui întreg. Acest principiu al proximității este esențial în special în momentul în care creăm formulare online, dar nu numai. Odată ce două obiecte nu mai sunt suficient de apropiate unul de celălalt tindem să le tratăm ca pe entități diferite și ne așteptăm la comportamente diferite din partea lor atunci când interacționăm cu ele.

ibm 2

Pentru obiectele similare care aparțin aceleiași categorii sau care acționează fie în tandem fie secvențial, dar care nu pot fi poziționate unul în apropierea celuilalt se pot folosi marcaje. Marcajele se realizează prin semnale grafice(de exemplu același icon în dreptul informațiilor similare), formă grafică (același font și aceleași dimensiuni), aceeași culoare etc. Este o practică recomandată, atât pentru confortul utilizatorului care se va simți în siguranță în navigare recunoscând repere familiare, dar acționează și ca un pilon în ierarhizarea înformațiilor și pentru construirea identității vizuale. Iată un exemplu de marcare a subcategoriilor aparținând unei categorii-mamă cu aceeași culoare într-un homepage.

categorii

Fundal vs Informație

“Hai să punem și o poză cu maci pe fundal”. Macii sunt frumoși, nimeni nu poate contesta asta. Dar cât de ușor citești de pe o petala de mac fie ea și la opacitate 30%. Cu cât îi este utilizatorului mai ușor să deosebească informația de fundal, cu atât îi este mai simplu să o asimileze și să acționeze.

Evitați să creați platforme pline de zgomot vizual pentru că îngreunează comportamentele automate ale clientului. Zgomotul vizual nu se referă doar la o delimitare slabă între informație și fundalul acesteia, ci și la texte pline de cuvinte și expresii redundante. Zgomotul vizual nu este doar fotografic. Zgomotul vizual se refera în special la fundaluri. Zgomotul vizual nu ține doar de fundaluri. Zgomotul vizual poate fi cauzat și de text. Zgomotul vizual poate fi cauzat și de repetiția inutilă a cuvintelor. Zgomotul vizual frustrează cititorul. Zgomotul vizual îi dă impresia că îl subestimați și îi subapreciați atenția pe care v-o oferă. Scrieți fără zgomot vizual.

Nu modifica. Adaugă

Dacă exista ceva ce predic de foarte mulți ani este arhicunoscutul îndemn “If it’s not broken, don’t fix it” (“Dacă nu e stricat, nu îl repara”). Ceea ce nu înseamnă că ar trebui să avem un internet plin de website-uri construite pe aceeași structură și că nu avem loc să inovăm, înseamnă doar că platformele online, la fel și software-ul nou creat, ar trebui să se dezvolte în jurul unor obiceiuri ale grupului țintă de utilizatori. În cazul magazinelor online, modelul recomandat cel mai adesea este cel al titanului Amazon și tehnologia 1-Click checkout. Așa cum discutam și în capitolul despre puterea obișnuinței, cu cât acțiunea utilizatorului este mai redusă, cu atât mai mult acesta va alege să revină într-un loc în care își rezolvă o problemă cu minim de efort și resurse.

În plus, dacă site-ul sau aplicația voastră este deja folosit/ă de suficient timp încât utilizatorii săi să își fi format acțiuni automate, nu alegeți să inovați brusc mecanismele de bază. Să ne aducem aminte de primele zile în care am folosit Facebook-ul și de cel puțin trei, patru schimbări care ne-au iritat în timp: mutarea iconurilor de Acasa și Mesaje din stânga în dreapta, modificările aplicate NewsFeed-ului și dispariția opțiunilor de listare a informației în ordine cronologică, modificarea timeline-ului din două coloane într-una singură etc. Acestea nu s-au întâmplat brusc, dar au generat reacții negative temporare.

Gradul ridicat de utilitate al rețelei sociale i-a obligat pe utilizatori să se adapteze, risc pe care este însă foarte dificil să și-l asume un business de nișă, un business cu o competiție ridicată sau un proaspăt antreprenor care abia își cunoaște publicul. De ce vorbim tot despre aceste lucruri într-un capitol dedicat designului? Pentru că designul unui site este o etapă intermediară a creării acestuia, profund interconectată cu celelalte, în special cele care îl preced, și anume realizarea traseelor utilizatorului în site și conceperea wireframe-urilor (schițelor) pe care se va construi imaginea finală. Iar în timp ce clientul are o listă de cerințe cu titlu obligatoriu, acestea nu sunt destule pentru a trece direct la desen. Mai mult, de grafică depinde implementarea ulterioară a funcțiunilor site-ului. Cu o grafică incompletă, adaptabilă tuturor scenariilor de utilizare, modificările operate ulterior lansării unui produs vor îndepărta utilizatorii.

De exemplu, dacă aveți un shop online atunci în procesul de cumpărare, la câteva luni după lansare, nu puteți introduce un pas 2.1 între pasul 2 și pasul 3, de tipul reactualizare a datelor userului, sau de abonare la un serviciu special, mai ales un pas de care să depindă bunul mers al unui proces de achiziție deja cunoscut de client. Chiar dacă pagina nu se abate de la designul general al site-ului și păstrează elementele de identitate vizuală, schimbarea nu poate trece neobservată mai ales dacă implică o acțiune a utilizatorului. Este și cazul publicațiilor online care au decis să introducă în platformele lor sistemul de plată pentru conținut.

În timp ce acesta este un model de business reușit, el trebuie implementat fie de la început, fie conținutul plătit să fie prezentat

a) ca fiind un bonus față de cel deja existent pe site sau

b) ca o schimbare profundă de model de business al brandului.

Tipul acesta de modificare, făcut brusc și fără consultarea prealabilă a cititorilor poate avea un impact puternic negativ asupra rezultatelor siteului. Culoarea joacă și ea un rol foarte important în stimularea unui uilizator atunci când vine vorba de a lua decizii, dar ea este folosită și pentru a-l ghida prin platformă. Roșul este utilizat pentru erori, oranjul pentru cumpărături de impuls, negrul este asociat cu produse premium, iar albastrul cu instituții de stat sau medicale etc. Apoi luați în calcul convențiile, defecțiunile de vedere și factorii incontrolabili care influențează percepția culorilor, cum ar fi display-urile diferite, suprafețele și condițiile de utilizare. Există foarte multe aspecte de dezbătut și în privința aceasta.

Nu în ultimul rând, există patternuri de scanare a unui site, precum și moduri în care vederea periferică ne joacă feste, iar multiplele ecrane pe care putem acum vizualiza un site ne obligă să ne adaptăm produsul la toate tipurile de display și de browsere.

Exagerez voit când spun că designul unui website nu are mai nimic de a face cu arta, ci este mai mult legat de utilitate și fluiditate în navigare, decât este de criterii estetice, dar talentul unui webdesigner se reflectă în modul în care reușește să transpună utilitatea unui website într-o formă grafică impecabilă.

 

 

_______________________

Pst!

Te mai țin două secunde să îți spun că pe 17-18 septembrie ne vedem la cursul Online de la A la Zen unde vorbim despre websiteuri, aplicatii, scris, public, tipuri de content, google analytics și multe altele.

Cursul ține două zile în care trecem prin toate punctele cheie utile unui Online Project Manager adevărat – website building, design, content writing, strategii, un strop de social media și analytics. Mai mult, avem și invitați speciali. Detalii și înscriere aici

Sharing is caring :)
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Written by Olivia
I am always online.