10 ključnih elementov pri izdelavi kakovostne spletne strani

Barbara Arnolj23.03.2016Spletne strani

Raziskava je pokazala, da 75 % obiskovalcev ocenjuje kredibilnost podjetja na podlagi kakovostne spletne strani oziroma trgovine.

Pa vi, sodite med teh 75 odstotkov?
Kakorkoli – ne dovolite, da bi zaradi zastarelosti strani / trgovine izgubljali potencialne stranke.

Spodaj smo zbrali 10 ključnih elementov, ki so izjemno pomembni za izdelavo dobre spletne strani. S pomočjo teh elementov bo stran lahko še dodatno nudila ustrezno uporabniško izkušnjo in videz.

1. Tipografija

Pri ustvarjanju blagovne znamke vašega podjetja lahko izbira tipografije kaže posredne namige o tem, kdo ste. Ali ste zabavno ali resno podjetje? Funkcionalno ali informativno? Ne glede na to, katero pisavo izberete, se prepričajte, da bo njen prikaz deloval na vseh brskalnikih in napravah.

Na strani Google Fonts je možen izbor pisave, ki vsebuje tudi šumnike z izbiro “Latin Extended”.

2. Besedilo

“70 % dejavnosti na spletni strani je osredotočenih na iskanje pravih informacij. Četudi uporabnik najde prave informacije, jih bo 80 % le preletelo celotno stran, prebralo izpostavljeno besedilo, nato pa bodo odšli naprej. Le majhen odstotek uporabnikov bo prebralo celotno stran. “

Zato je pomembno, da stran prilagodimo za teh 80 % uporabnikom.

Primer besedila na levi strani, ki povzema bistvo in je lažje berljiv ter primer besedila na desni strani, kjer je teksta preveč, stran ni zanimiva in privlačna za branje, kar ljudi odbije.

Držite se kratkih in jasnih besedil. Ne opisujte storitev preveč na široko. Vem, da je to lažje reči kot storiti. Vendar veliko obiskovalcev stran le preleti, preberejo krajše stavke, pogledajo slike in izpostavljeno besedilo, drugega pa ne opazijo.

3. Barve

Igrajo zelo pomembno vlogo pri privabljanju uporabnikov na spletno stran. Razvoj učinkovite barvne sheme je eden izmed najbolj zanimivih izzivov na spletu. Popolnoma lahko spremeni videz in občutek spletne strani, narekuje pa tudi razpoloženje ter ton strani.

“Spletni vizual, ki uporablja tri do pet barv, je najbolj prijeten za oko. “

Pomembno je, da ustvarimo ustrezen barvni kontrast med informacijami. Naj gre za naslove, besedila, gumbe, povezave znotraj strani ali tiste, ki gredo izven strani, vedno moramo imeti v mislih, da bodo barve med seboj združljive in nemoteče.

4. Gumbi

Uporabnik pride na spletno stran, nato pa ne ve kako naprej, kaj klikniti, da bi našel iskane vsebine. Še posebej zapleteno je to pri spletni trgovini, kjer mora imeti uporabnik nenehen nadzor nad tem, kaj se bo zgodilo, ko bo kliknil na določen gumb, predvsem ko svoj nakup zaključuje v nakupovalni košarici.

Zato morajo biti vsi gumbi na vidnem mestu in barvno poudarjeni, da se ločijo od navadnega besedila. Napisi na gumbih naj bodo ustrezno poimenovani, saj gumbi s pozivi k dejanju vodijo potencialno stranko do določenih produktov, storitev ali k nakupu.

Primer call-to-action gumbov. Katerega opazite najprej? Predvidevam, da rdečega :)

5. Velike fotografije

Skorajda ni več spletnih strani, ki ne bi vsebovale fotografij. V mislih imam fotografije, ki so prikazane čez celotno širino brskalnika in se prilagajajo za različne naprave.

S postavitvijo slike v ozadje zagotovimo njeno vizualno izpostavljenost, ki lahko, poleg kratkega besedila in gumba za poziv k dejanju, prikaže močno zgodbo, ki bo obiskovalca pritegnila k nadaljnjemu raziskovanju spletne strani in vsebine, ki se skriva na njej.

Odzivna oblika slik zagotovi dobro uporabniško izkušnjo, saj slike na ta način dostopne ne samo na večjih, ampak tudi na manjših zaslonih.

6. Video vsebina

O tem, zakaj dodati video v ozadje spletne strani smo že pisali, saj je video vedno bolj uporaben in ključen element spletnih strani.

Video posnetki, ki se samodejno predvajajo v ozadju, lahko povedo veliko in tako znatno zmanjšajo količino druge vsebine, ki je potrebna, da pojasni namen podjetja.

Video omogoča, da obiskovalec izve ključne informacije o vašem podjetju, ne da bi moral prebrati eno samo vrstico besedila.

Poleg tega naši možgani video dojamejo 60.000-krat hitreje kot navadno besedilom.

this is a caption

7. Video prikaz izdelkov

Poleg video posnetkov v ozadju prve strani so podjetja začela uporabljati tudi kratke video posnetke izdelkov. Ti kratki video posnetki so super, da svojo rešitev oživite in jo prikažete na interaktiven način.

92 % B2B kupcev gleda online video, od tega jih 43 % gleda online video, medtem ko iščejo izdelke in storitve za njihovo poslovanje. Zato je za B2B podjetja ključno, da pripravijo kakovostne video posnetke, ki pojasnjujejo njihove izdelke, saj je to lahko pomemben dejavnik v procesu odločanja kupca.

Primer kratkih gif videov najdete na strani uxpin, kjer s kratkimi animacijami prikažejo delovanje aplikacije.

8. Ikone

Ikone niso samo modni dodatek, ampak lahko razložijo vsebino. Že samo s pogledom na ikone lahko dojamemo, o čem govori besedilo. Ikone lahko govorijo tudi same zase in v nekaterih primerih ob sebi ne potrebujejo dodatnega besedila. Prav tako razbijejo monotonost besedila, še posebej dobrodošle so ob naslovih opisov. Tam jasno prikažejo, o čem govori vsebina oz. v primeru, da naslov ni dovolj jasen, lahko z ikono nakažemo dodatne informacije.

Poseben učinek in dodano vrednost lahko ikonam dodamo, če jih animiramo. To je primerno pri ikonah, s katerimi želimo prikazati delovanje določenih naših storitev.

Lep primer je stran RLS, kjer se ob hover efektu ikona animira in prikaže delovanje storitve.

9. ”Hamburger” meni ali odprti meni?

Prednost hamburgerja je predvsem v preglednejšem prikazu, če imamo več menijskih postavk, ki jih želimo na vrhu strani. Priročni so tudi v primeru, če želimo na strani poudariti druge elemente, saj menijske postavke skrijemo in jih zapakiramo v sendvič. Pardon, v hamburger. :)

Lušten način vključevanja hamburgerja je, ko se premikamo po strani in nam menijska vrstica sledi. V tem primeru je hamburger učinkovita zadeva, saj zmanjša prostor vrstice, ki se pomika z nami, hkrati pa je vedno na voljo, ko postanemo lačni dodatnih informacij na ostalih podstraneh. ;)

Primer sledečega hamburger menija po strani.

Aja in še odgovor na vprašanje, če ste si ga že zastavili: “Zakaj se meni imenuje hamburger?”

Če uporabimo malce domišljije: tri vrstice, ki so zložene ena na drugo do vrha, so videti, kot meso za hamburgerje. :)

10. Responsive oblika oz. odzivna oblika

“Več kot 20 % Google iskanj je opravljenih preko mobilnih naprav. Leta 2012 je bilo na mobilnih napravah izvedenih več kot polovica vseh lokalnih iskanj. Leta 2014 pa je uporaba interneta prek mobilcev prehitela uporabo prek računalnikov.”

Še nimate responsive oblike? To pomeni, da imate najverjetneje že kar staro spletno stran in morate začeti razmišljati o prenovi. :)

“Konec februarja 2015 se je na Googlovem Webmasters blogu pojavila novica o vplivu odzivne oblike na pozicije spletnih strani v iskalnikih. Od 21. aprila 2015 dalje boste te spremembe algoritmov občutili tudi sami.”

Kaj je ta sprememba prinesla in zakaj je dobro imeti odzivno obliko, si lahko preberete tukaj.

this is a caption

Še nekaj dodatnega branja pa najdete v tem članku “Vpliv odzivne oblike spletne strani na pozicije v iskalnikih.”

Na kratko

To je nekaj izbranih elementov, ki so zelo pomembni dejavniki, zato je nujno, da jih na ustrezen način umestimo na spletno stran. Kako to storiti in na katerih elementih je potreben dodan poudarek, pa je odvisno od želja stranke in storitve, ki jo bo spletna stran predstavlja.

In kaj od zgoraj navedenega pripravi stranka?

Da je stran funkcionalna in vizualno dovršena ni odvisno samo od oblikovalca, ki upošteva zgoraj navedene elemente. Pomembno je, da stranka že v prvi fazi pripravi:

celostno grafično podobo, na podlagi katere se gradi videz strani,
kakovostna besedila,
kakovostne slike, ki so v dovolj veliki resoluciji,
svoje dodatne želje :)

Zaključek

Če želimo doseči vizualno lepo in uporabno stran, je zelo pomembno, da poleg spletnega oblikovalca v proces izdelave spletne strani vključimo tudi fotografa, tekstopisca, video snemalce, ki bodo poskrbeli za kakovostno in spletu prilagojeno vsebino.
Če se odločate za izdelavo ali prenovo spletne strani oziroma trgovine, začnite z zbiranjem zgoraj zapisanih vsebin. Pri tem vam lahko pomaga tudi ekipa Optiweb, saj poskrbimo za to, da vaš projekt pripeljemo od ideje do končne izvedbe v obliko kakovostnega in učinkovitega spletnega mesta. :)

Viri:

https://medium.com/@zbigniewgecis/8-tips-for-creating-website-that-sells-941603b47a06#.e9orabvsw
http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx
http://www.inc.com/janine-popick/marketing-to-businesses-make-video-your-marketing-hero.html

Barbara Arnolj

Barbare ni več z nami v pisarni, a verjamemo, da se tudi drugod odlično znajde. Delček nje smo vseeno obdržali pri nas – za lep spomin. :)

10 ključnih elementov pri izdelavi kakovostne spletne strani

Na kratko

In kaj od zgoraj navedenega pripravi stranka?

Zaključek

Viri:

https://medium.com/@zbigniewgecis/8-tips-for-creating-website-that-sells-941603b47a06#.e9orabvsw

http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx

http://www.inc.com/janine-popick/marketing-to-businesses-make-video-your-marketing-hero.html

Deli

Barbara Arnolj

Ne spreglej sorodnih člankov

Digitalna preobrazba spletne trgovine ni enostavna, je pa nujna

Implementacija sistema Pimcore za obvladovanje informacij

Vse poti vodijo v Škofjo Loko