Dacă examinați elementele individuale ale unui site web care contribuie și la experiența utilizatorului, logo-ul este identitar și merită o atenție deosebită. În acest articol, îți voi oferi câteva sfaturi practice din experiența agenției noastre despre cum poți asigura o experiență de utilizator ridicată pentru utilizatorii site-ului tău când vine vorba de logo-ul site-ului.

Logo-ul site-ului înlocuiește butonul de meniu al paginii de start

Logo-ul este adesea plasat în bara de navigare și ar trebui să fie ÎNTOTDEAUNA link-uit cu pagina de start. Utilizatorii se așteaptă ca atunci când dau clic pe logo să fie direcționați înapoi la pagina de start. Astfel, logo-ul înlocuiește și legătura din meniu „Home”, care uneori încă se mai găsește pe site-uri pentru a face legătura cu pagina de start. O legătură la pagina de start ca un element separat în navigare este inutilă. Astfel, se economisește și spațiu valoros.

Orașul Waren (Müritz) din nordul Germaniei, unde se află compania noastră, a decis să ofere utilizatorilor un ajutor cu iconul de casă ca o posibilitate de interacțiune pentru a reveni la pagina de start. Există probabil două motive pentru care a fost folosit aici: pe de o parte, alături de logo a fost plasat și un alt logo, ceea ce ar putea reduce dorința de a face clic pe logo. Pe de altă parte, se presupune poate că utilizatorii acestui site sunt mai puțin familiarizați cu internetul. Să fiu sincer, acest icon al casei crește experiența utilizatorului doar într-o măsură limitată, deoarece acest site prezintă multe deficiențe evidente în ceea ce privește arhitectura informațională, interfața utilizatorului și accesibilitatea (în special contrastul pentru citirea linkurilor și textelor). Astfel, site-ul orașului Waren (Müritz) rămâne un exemplu negativ.

Logo-ul responsiv: Adaptarea logo-ului la rezoluția dispozitivului

În vederile desktop există mult spațiu disponibil, așa că numele companiei sau sloganul din logo ar putea fi incluse, însă în vizualizarea mobilă, din motive de spațiu și atenție, logo-ul trebuie plasat într-o formă redusă.

Pentru logo-uri, la fel ca și pentru site-uri, de ani de zile există tendința de a le adapta la dimensiuni, medii și medii ambiantale. Aici se vorbește și de Logo responsiv, ceea ce înseamnă că logo-ul trebuie să ia în considerare contextul ambiant și să se prezinte perfect și pe dispozitive mai mici, putând fi necesar să fie reprezentat într-un mod ușor diferit. În contrast cu logo-urile rigide, care arată la fel pe toate dispozitivele și dimensiunile ecranelor, logo-urile responsiv se adaptează la cerințele specifice și oferă astfel o experiență consistentă și optimizată a utilizatorului pe diferite terminale. Astfel, logo-ul se reduce doar în formă, nu și în mesajul său de marcă.

Un exemplu pozitiv este oferit de compania elvețiană Victorinox. La prima vizualizare, utilizatorul vede icon-ul mare. Singurul punct negativ: Logo-ul este încorporat ca fișier PNG în loc de SVG.

În scrollare, este afișat doar elementul grafic. În fundal se poate vedea un munte, care subliniază originea elvețiană. În fereastra de vizualizare inițială, branding-ul este important. Utilizatorul ar trebui să înțeleagă. Ești exact în locul potrivit la Victorinox. Dacă utilizatorul face scroll, conținuturile devin importante. Logo-ul se reduce în afișare și oferă mai mult spațiu conținuturilor principale. Navigarea rămâne sus, ceea ce este foarte util din punct de vedere al ușurinței de utilizare.

Un alt concept este urmat de site-ul Guinness: Logo-ul este plasat cu numele companiei. În timpul scrollului, logo-ul devine ceva mai mic, dar navigarea rămâne vizibilă în continuare. Când un utilizator începe să facă scroll în sus, logo-ul și navigarea devin din nou mai mari, deoarece se așteaptă că utilizatorul dorește să viziteze alte pagini.

O implementare nu chiar optimă este exemplificată de site-ul Commerzbank. Logo-ul este amplasat împreună cu numele companiei și este plasat ca fișier SVG, ceea ce este bine. Cu toate acestea, intră în competiție puternică cu punctele de navigare din dreapta sa. În timpul scrollului, navigarea dispare complet, iar utilizatorul trebuie să facă scroll complet în sus pentru a o vedea din nou. Ar fi fost mai bine dacă navigarea apare imediat odată cu începerea scrollului în sus, așa cum a fost implementat de exemplu pe site-ul zeit.de.

O soluție excelentă din perspectiva optimizării conversiilor este imaginea mare de pe site-ul Commerzbank cu ghidajul privirii celor două personaje. Acestea privesc către buton, ceea ce îndreaptă automat privirea vizitatorului către buton. Astfel de ghidări vizuale către apelurile de acțiune sunt foarte eficiente. Bine făcut, Commerzbank!

Interesant devine atunci când analizăm exemplele în varianta mobilă.

În varianta mobilă, logo-ul Victorinox este afișat și mai mic și plasat în centru pentru a structura mai bine posibilitățile de interacțiune pentru utilizator. Guiness a plasat textul la dreapta logo-ului în loc să-l pună sub el. Astfel, harpa are mai mult spațiu și linia de navigare superioară nu devine prea mare. Commerzbank pur și simplu elimină textul în rezoluția smartphone-ului.

Rolul logo-urilor responsive în experiența utilizatorului este important, deoarece ajută la menținerea consistenței vizuale și identității brandului, indiferent de modul în care utilizatorii accesează site-ul web.

Dacă un logo nu răspunde deloc la rezoluțiile în schimbare, acesta poate atrage prea mult atenția utilizatorului. În exemplul următor cu Hypovereinsbank, logo-ul foarte prezent concurează puternic cu call-to-action-ul plasat în partea dreaptă - în special în vizualizarea pe smartphone. Punctele de navigare de un gri mediu sunt ușor trecute cu vederea în vizualizarea pe desktop. În general, acest site web prezintă câteva erori de UX suplimentare.

Designerii trebuie, deci, să furnizeze mai multe adaptări de logo pentru a asigura logo-uri responsive. Logo-ul trebuie să funcționeze bine și pe diferite fundaluri, precum și în diferite dimensiuni. Astfel, logo-ul va fi redus în detaliu cu cât rezoluția este mai mică. Cu toate acestea, nu trebuie să-și piardă esența brandului. Acesta este marea artă în utilizarea logo-urilor responsive. Deci, dacă comanzi un rebranding al brandului, gândește-te deja la această cerință atunci când îți folosești viitorul logo.

Formatul de fișier al logo-ului site-ului web

Utilizarea logo-urilor responsive are sens, deoarece se încarcă dimensiunea corectă în funcție de rezoluție. La rezoluții mai mici, cum ar fi de exemplu pe un smartphone, se va încărca doar grafica mai mică. Acest lucru economisește timp de încărcare. Cel mai mare efect asupra timpului de încărcare îl vei obține însă atunci când:

1. încorporezi logo-ul în rezoluția corectă (și cu mențiuni pentru înălțime și lățime). Adesea, logo-urile sunt încorporate la o rezoluție prea mare și apoi sunt redimensionate pentru vizualizare.
2. încorporezi logo-ul în formatul vectorial SVG în loc de PNG sau JPG.

Utilizarea logo-ului site-ului web ca favicon

Folosește și forma redusă a logo-ului tău pentru a o folosi ca favicon. Renunță și la text sau alte elemente mici care nu sunt recunoscute în rezoluția mică a favicon-ului.

În timp ce site-ul web Guiness din exemplul de mai sus folosește bine logo-ul responsiv pentru site, nu este optim ca favicon. Textul mic alb de la Guiness nu este recunoscut și, în cadrul favicon-ului, reduce impresia generală. Contrastul este scăzut. Impresia ar fi fost mult mai bună fără text și redusă doar la harfa logo-ului. Celelalte exemple din acest articol au rezolvat mai bine situația decât Guiness.

Dacă cauți o agenție care să se concentreze pe logo-uri responsive, nu ezita să intri în contact cu noi. Noi, de la 4eck Media, suntem profesioniști în experiența utilizatorului.

Dacă o poziționare profesională este importantă pentru tine, s-ar putea să îți fie de interes și următoarele pachete de icon-uri și șabloane de design corporate: