Jaunās mājas lapas lietotāju pieredzē ieguldotī elementi ir mājaslapas logotips, kas ir zīmolsveidojošs un pelna savu atsevišķu izvēršanu. Šajā rakstā es vēlos jums sniegt dažus padomus no mūsu aģentūras prakses, kā nodrošināt augstu lietotāju pieredzi ar jūsu mājaslapas logotipu.

Mājaslapas logotips aizvieto sākuma lapas izvēlnes punktu

Logotips bieži tiek novietots navigācijas joslā, un tam VIENMĒR jābūt saistītam ar sākumlapu. Lietotāji šodien gaida, ka nospiežot uz logotipa, tiks atgriezti sākumlapā. Tādējādi logotips arī aizvieto "Home" izvēlnes saiti, kas dažreiz joprojām ir redzama mājaslapās, lai veidotu saiti ar sākumlapu. Atsevišķa sākuma lapas saite navigācijā nav nepieciešama. Tas arī ietaupa vērtīgu vietu.

Ziemeļvācijas pilsēta Berlinē, kur atrodas mūsu uzņēmums, ir izlēmusi dalīties lietotājam ar mājas ikonu kā palīdzību, lai nodrošinātu iespēju interaktīvajā veidā atgriezties sākumlapā. Iespējams, ka šeit tas tika izmantots no diviem iemesliem: no vienas puses, papildus logotipam tika novietots vēl viens logotips, kas varētu samazināt klikšķu skaitu uz logotipu. No otras puses, var gadīties, ka šādas mājaslapas lietotāji internetā ir mazāk pieredzējuši. Tiešām, šī mājaslapa ir tikai daļēji uzlabojusi lietotāju pieredzi, jo tajā ir daudz pamanāmu trūkumu saistībā ar informācijas arhitektūru, lietotāja saskarni un arī pieejamību (īpaši kontrasti lasāmam teksta saitēm un tekstiem). Tādēļ Berlinē paliek kā negatīvs piemērs.

Atsaucīgs logotips: Logotipa pielāgošana pēc ierīces izšķirtspējas

Kā jau Desktop skatījumos ir pieejams daudz vietas, tādēļ uzņēmuma nosaukums vai slogans logotipā var būt iekļauts, mobilajā skatījumā tā vietā, no vietas un uzmanības apsvērumu dēļ logotips jānovieto samazinātā formā.

Logotipiem, tāpat kā mājaslapām, jau vairākus gadus pastāv tendence pielāgoties izmērā, vidē un apkārtnē. Šo tendenci apraksta arī responsive Logo , kas nozīmē, ka logotips ņem vērā apkārtējo situāciju un lieliski prezentē sevi arī uz mazākiem medijiem, iespējams, ka dažiem aspektiem tas jāparāda atšķirīgi. Atšķirībā no stingrajām logotipiem, kas izskatās vienādi visās ierīcēs un ekrāna izmēros, reaģējošie logotipi pielāgojas konkrētajām prasībām un piedāvā konsistentu un optimizētu lietotāja pieredzi dažādās ierīcēs. Šādā veidā logotips samazinās tikai formā, bet ne savā zīmolāsānā.

Pozitīvu piemēru sniedz Šveices uzņēmums Victorinox. Pirmajā skatā lietotājam tiek rādīts liels ikona. Vienīgais mīnuss: Logotips ir iekļauts kā PNG failā, nevis kā SVG.

Skrūvējoties uz leju, tiek rādīts tikai attēla elements. Fona ir izteikts kalns, kas uzsvēra Šveices izcelsmi. Pirmajā skatā zīmolsveidošana ir svarīga. Lietotājam jāsaprot, ka šeit tieši viņš ir pareizi ieradies Victorinox. Ja lietotājs ritin uz leju, galvenie satura elementi kļūst svarīgāki. Logotips samazinās attēlošanā un dod galvenajiem satura elementiem vairāk vietas. Navigācija paliek iestiprināta augšpusē, kas no lietojamības viedokļa ir ļoti loģiska.

Citu pieeju ievēro Guinness mājaslapa: logotips ir novietots kopā ar uzņēmēja nosaukumu. Ritinot uz leju, logotips nedaudz samazinās, saglabājot navigāciju redzamību. Ja lietotājs sāk ritināt augšup, gan logotips, gan navigācija atkal kļūst lielākas, jo konstatēts, ka lietotājs vēlas apmeklēt citas lapas.

Nevēlamu risinājumu atstājot ir Commerzbank ar savu mājaslapu. Logotips ir redzams kopā ar uzņēmuma nosaukumu un novietots kā SVG, kas ir labi risināta. Tomēr tas spēcīgi konkurē ar blakus esošajiem navigācijas punktiem. Ritinot uz leju, navigācija pilnībā pazūd, un lietotājam jārit uz augšu, lai atkal redzētu navigāciju. Labākais risinājums būtu, ja, ritinoties augšup, navigācija parādītos tūlīt, kā to piemērojis, piemēram, zeit.de.

No konversiju optimizācijas viedokļa ļoti labi risinājusi Commerzbank lielisko attēlu ar divu personu skatiena virziena vadību. Viņi skatās uz pogu virzība uz priekšu, kas automātiski virza apmeklētāja skatienu uz pogu. Tādas skatiena vadības atzīmes uz zvanu darbību ir ļoti efektīvas. Labi paveikts, Commerzbank!

Interesanti kļūst, kad mēs apskatām piemērus mobilajā versijā.

Mobilajā versijā Victorinox logo ir attēlots vēl mazāks un centra pozīcijā, lai labāk strukturētu lietotāju interakcijas iespējas. Guiness ir izvietojis tekstu labajā pusē no logotipa vietā zemāk. Tādējādi harfa iegūst vairāk vietas un augšējā navigācijas līnija netiek pārāk liela. Savukārt Commerzbank vienkārši iznīcina tekstu smartphone izšķirtspējā.

Atbildīgais logo loma lietotāja pieredzē ir svarīga, jo tā palīdz saglabāt vizuālo saskaņu un zīmola identitāti neatkarīgi no tā, kā lietotāji piekļūst vietnei.

Ja logo nereaģē uz mainīgajām izšķirtspējām, tas var pārāk piesaistīt lietotāja uzmanību. Piemēram, Hypovereinsbank ļoti iespaidīgais logo spēcīgi sacenšas ar labajā pusē novietoto aicinājumu turpināt rīkoties - it īpaši smartphone skatījumā. Vidēji pelēkie navigācijas punkti tiek viegli palaisti garām pie galddatora skatījumā. Kopumā šai vietnei ir arī vairākas citas UX kļūdas.

Dizaineriem, lai nodrošinātu atbildīgus logotipus, jānodrošina vairāki logo pielāgojumi. Logo jādarbojas arī dažādos fona krāsu variantos un dažādos izmēros. Jo mazāka ir izšķirtspēja, jo detalizētāks ir logo reducējums. Taču tas nedrīkst zaudēt zīmola būtību. Tas ir augstais mākslas līmenis, izmantojot atbildīgus logotipus. Tāpēc, ja pasūti zīmola atjaunošanu, jau tagad domā par šo prasību, izmantojot nākamo logotipu.

Weblapas logotipa faila formāts

Atbildīgu logotipu izmantošana ir saprātīga, jo pareizais izmērs tiek ielādēts atkarībā no izšķirtspējas. Pie mazākiem izšķirtspējas, piemēram, piemēram, mobilajā tālrunī, tiek ielādēta arī mazāka grafika. Tas ietaupa ielādes laiku. Lielāko ietekmi uz jūsu ielādes laiku jūs iegūsiet, ja jūs:

1. ielādē logotipu ar pareizo izšķirtspēju (arī ar norādēm par augstumu un platumu). Bieži logotipi tiek ielādēti pārāk augstā izšķirtspējā un tad tiek samazināti skatam.
2. ielādē logotipu formātā SVG vektora formātā vietā PNG vai JPG.

Weblapa logotipa izmantošana kā favikona

Izmantojiet arī savas logotipa samazināto veidu kā favikonu. Tādējādi atteikieties no tekstiem vai citiem maziem elementiem, kas nav redzami favikona mazajā izšķirtspējā.

Kamēr Güness tīmekļa vietne no iepriekšminētā piemēra ļoti veiksmīgi izmanto responīvu logotipu vietnes lietojumprogrammai, kā favicons tas nav optimāli. Mazais baltais Güness teksts nav redzams un favikona kontekstā kopējais iespaids ir samazināts. Kontrasts ir zems. Iespējams, ka iespaids būtu skaidrāks bez teksta un tikai ar logotipa harfām. Pārējie piemēri no šā raksta visi ir labāk atrisinājuši problēmu nekā Güness.

Ja meklē firmu, kas uzstāda responīvus logotipus kā prioritāti, droši sazinies ar mums. Mēs, 4eck Media, esam Lietotāja pieredzes profesionāļi.

Ja jums ir svarīga profesionāla pozicionēšanās, iespējams, jums būs interesanti arī šādi ikonu pakotnes un uzņēmuma dizaina šabloni: