Razlika med “dobro” in “slabo” oblikovano spletno stranjo

Razlika med “dobro” in “slabo” oblikovano spletno stranjo

Katera spletna stran je dobra in katera slaba, je pogosto stvar osebnega okusa obiskovalca spletne strani.

Razumljivo. Vsake oči imajo svojega »malarja«.

Iz istih razlogov, kot je nekaterim določena stran všeč, je drugi ne marajo.

Merila, kaj je za koga lepo, uporabno, koristno, nezanimivo, grdo, so različna.

V nobenem primeru pa spletna stran ne sme biti narejena površno.

Povedano drugače, spletna stran ne sme imeti napak, po katerih lahko vsak uporabnik opazi, da pri izbiri oblikovalca niste imeli ravno srečne roke.

Se vam morda zdi, da ljudje tega ne opazijo?

Pomislite na dejstvo, da je kar 60 % ljudi »vizualcev«, ki si (prvo) mnenje ustvarijo v trenutku, na podlagi videnega.

Zato vam bom v tem blogu, primer za primerom, predstavil nekatere (oblikovalske) napake, ki se pogosto pojavljajo na spletnih straneh in za katere si gotovo ne želite, da bi se pojavile tudi na vaši spletni strani.

In še nekaj, preden gremo na omenjene primere.

Eno najpogosteje zastavljenih vprašanj podjetnikov, ki razmišljajo komu zaupati izdelavo spletne strani je:

»Zakaj se cene izdelave »Wordpress« strani tako razlikujejo?«

Pomemben razlog različnih cen se skriva ravno v vsebini tega bloga. Temu pritrjuje tudi znan rek, da »nobeno kosilo ni zastonj«.

  • PRIMER 1: slabo izbrana tipografija
  • PRIMER 1: slabo izbrana tipografija

Raziskave dokazujejo, da je branje z ekrana bolj površno kot branje s papirja.

Pri tem je treba upoštevati še dejstvo, da so ljudje pri prebiranju spletnih strani (zelo pogosto) časovno omejeni.

Zato mora biti izbrana vrsta pisave čitljiva, jasna in primerne velikosti.

Prva napaka je zato izbira zapletene pisave.

Ali veste, da naši možgani veliko težje preberejo in razumejo tekst, ki je na spletni strani napisan v zapleteni (dizajnerski) pisavi?

Zato se posebne pisave uporabijo le za poudarjanje sloganov, pa še to bolj kot grafični element. Za besedila na spletnih straneh pa se praviloma uporabljajo pisave, ki so najbolj berljive.

Na spodnjem primeru lahko sami presodite, katero besedilo lažje preberete.

V kolikor si želite pri postavitvi strukture spletne strani dober nasvet, nas kontaktirajte in pogovorili se bomo o tem, kako bi se mi lotili analize vaših strank oziroma kako bi mi zastavili vsebino vaše strani.

 

V kolikor si želite pri postavitvi strukture spletne strani dober nasvet, nas kontaktirajte in pogovorili se bomo o tem, kako bi se mi lotili analize vaših strank oziroma kako bi mi zastavili vsebino vaše strani.

Naslednji primer pokaže povsem drugo težavo.

Besedilo na spletni strani je premajhno in pisava presvetla, zato jo večina ob brskanju preprosto preskoči.

Izogibati se je treba tudi svetlega besedila na temni podlagi, saj je branje takšnega besedila lahko precej naporna reč.

Ne tako redko se zgodi, da šumniki (č, š, ž, ć) odstopajo od drugih črk. Niso videti enako kot ostale črke in zelo skazijo izbrano besedilo.

To se zgodi v primerih, ko je oblikovalec pozabil nastaviti font na »latin extended« ali pa je izbral font, ki teh črk ne pozna. V obeh primerih je to groba napaka, ki lahko marsikoga zmoti.

Pogosto se takšna napaka pojavi tudi, če spletna stran ni redno vzdrževana in posodobljena.

Kako je videti takšen zapis, si poglejte na spodnji sliki.

  • PRIMER 2: preveč zgoščeno in nerazumljivo napisano besedilo
  • PRIMER 2: preveč zgoščeno in nerazumljivo napisano besedilo

Pisanje besedila za spletno stran se razlikuje od pisanja za kakšen drug medij.

Podobno kot slabo izbrana tipografija je preveč zgoščeno ali preveč strokovno (beri za večino uporabnikov nerazumljivo) napisano besedilo lahko ena večjih napak, ki se lahko zgodijo pri oblikovanju spletne strani.

Uporabniki danes bolj kot berejo, dejansko skenirajo vsebino spletnih strani.

Če ne želimo, da našo stran zapustijo že po nekaj sekundah, jim moramo pri tem pomagati.

To naredimo tako, da pišemo kratke in razumljive stavke in odstavke.

Poglejmo dva primera.

Prvi je iz zobozdravstvene strani, še preden smo besedilo v naši agenciji predelali in zapisali nekoliko drugače.

Pred popravkom:

RESTAVRACIJA STRUKTURE NA POVRŠINI ZOBA hibridni- in nano-kompozitni dentalni materiali v kombinaciji s kompozitnimi adhezivi zagotavljajo odlično lepljivost na sklenino in dentin, kar omogoča dolgotrajnost kompozitnih dograditev. Mehanske in estetske lastnosti kompozitov omogočajo izvrstno integracijo v zobno strukturo in možnost oblikovanja sekundarne morfologije in izgleda. Restavracija poškodovane strukture v jedru zoba zaradi dobrih mehanskih, fizikalnih in kemičnih lastnosti se za dograditve poškodb v predelu jedra zoba uporablja t.i. steklaste cemente.

 

Po popravku:

 

Kaj storiti pri zobnem kariesu?

 

Zobni karies je bolezen zoba, ki lahko, če se ustrezno ne pozdravi, v relativno kratkem obdobju uniči celoten zob.

 

Zdravljenje kariesa poteka tako, da najprej odstranimo del, ki ga je napadla zobna gniloba.

 

Odstranjeni del nato nadomestimo z enim od polnilnih materialov.

 

Na voljo je več različnih materialov: srebrni amalgam, zlato, porcelan, najpogosteje pa se uporabljajo plastični in stekleni materiali, imenovani kompozitna polnila oziroma bele plombe.

 

Obseg poškodbe, stroški polnilnega materiala, zavarovanje posameznika in priporočilo zobozdravnika pomagajo določiti vrsto polnilnega materiala, ki bo najbolje ustrezal vašim potrebam, željam in zmožnostim.

 

Sodobno zobozdravstvo zagotavlja povrnitev lepega izgleda vašega zoba.

Opazite razliko?

Prvi zapis razumejo samo zobozdravniki, drugega vsi.

Podobno vas k branju ne bo pritegnilo niti besedilo, ki je sicer manj strokovno, a zato napisano zgoščeno, brez odstavkov in poudarkov.

  • PRIMER 3: napačna izbira barv
  • PRIMER 3: napačna izbira barv

Izbor pravih barv je ena najpomembnejših odločitev pri izdelavi spletne strani.

Dobra barvna kombinacija pritegne pozornost in pri obiskovalcu strani ustvari željo po branju in nakupu.

Prvi pogoj, ki ga mora oblikovalec spletne strani upoštevati, je logotip oziroma celostna grafična podoba podjetja. Več o izdelavi logotipa si preberite na tej strani.

Drugi pogoj, ki ga je treba upoštevati, je psihologija barv.

Da na tej točki ne bom predolg, se ne bom spuščal v podrobnejšo psihologijo barv. Dovolj bo, da se zavedate, da vsaka barva nosi v človekovi podzavesti določen pomen.

Tako denimo k nekaterim dejavnostim sodijo določene barve, ki morda nekaterim drugim dejavnostim ne bi ustrezale. Svetlo zelena barva je tesno povezana z naravo in naravnimi izdelki. Po drugi strani pa je vsekakor preveč agresivna za spletno stran kakšne odvetniške pisarne.

Pri izdelavi spletne strani najbolj zgrešite, če na njej uporabite preveč različnih barv ali je prevladujoča barva v nasprotju s tem, kar pričakujejo uporabniki.

Tule je slika spletne strani, ki je zaradi prevelikega števila različnih barv – milo rečeno – grda.

  • PRIMER 4: izbor in oblikovanje slik
  • PRIMER 4: izbor in oblikovanje slik

Ker smo ljudje vizualna bitja, pri ustvarjanju dobrega prvega vtisa spletne strani pripomorejo prav pravilno izbrane in lepo oblikovane slike.

Slike morajo biti povezane z (vašo) zgodbo, privlačne, v sozvočju s celostno grafično podobo in pravilno pozicionirane.

V nemalo primerih ni tako.

Najpogostejše napake pri izboru in oblikovanju slik so:

  • slike so prevelike, zaradi česar se stran počasi nalaga,
  • slike so preveč umetne in zato ne vlivajo zaupanja,
  • slike niso primerne resolucije,
  • slike so preveč skupaj ali nesimetrično porezane.

Primer slike, ki je prevelika in zato na desni strani izstopa iz okvirja preostale spletne strani.

Naslednji je primer slabo izbrane slike za ozadje. V ozadje namreč ni postavljena slika, temveč oglasni banner, ki je bil narejen za drug namen, povrhu vsega pa je tudi premajhne resolucije, zaradi česar so elementi na njem nejasni.

  • PRIMER 5: razmiki in presledki med pasovi
  • PRIMER 5: razmiki in presledki med pasovi

Vsaka spletna stran je sestavljena iz različnih elementov oziroma pasov.

Res je, da sem sam oblikovalec in imam posledično »poklicno deformacijo«, vendar pogosto imajo oblikovalci pomanjkanje občutka za estetiko. Ali pa so samo zelo površni.

Številne spletne strani so oblikovane tako, da vsebina na njih premalo »diha«. Z drugimi besedami, presledki med elementi so premajhni ali nesorazmerni.

Najlažje je to prikazati z nekaj primeri.

Primer premajhnega razmika med sivim in belim pasom pod njim.

Primer preveč stisnjenega menija:

Primer slabo postavljenih presledkov med posameznimi elementi. Naslov je takoj pod zaključkom zgornjega pasu; manjka presledek med sliko in besedilom; spodnje besedilo je bolj narazen kot zgornje …

  • PRIMER 6: neprilagojenost mobilnim telefonom
  • PRIMER 6: neprilagojenost mobilnim telefonom

Ali veste, da bo več kot polovica uporabnikov spleta vašo spletno stran videla na mobilnih telefonih?

Ena največjih napak, ki se lahko zgodi oblikovalcu spletnih strani je, da »pozabi« na izgled strani na telefonu.

Prilagoditev spletnih strani mobilnim telefonom je zato ena najpomembnejših nalog oblikovanja spletnih strani.

Programske in oblikovalske rešitve gredo v smeri, da je treba nekatere dele strani oblikovati posebej za računalnike in posebej za mobilne telefone.

Tako denimo veliki naslovi, v kolikor oblikovalec ne bo posebej nastavil njihove velikosti za različne naprave, na mobilnih telefonih ne bodo izgledali enako lepo kot recimo na večjem monitorju.

Enako velja za slike, ki morajo biti povečini oblikovane za različne naprave posebej. V nasprotnem primeru se kaj rado zgodi, da se besedilo na mobilnih napravah ne bere enako kot iz monitorja.

Poglejmo nekaj primerov »odzivnih« spletnih strani, kjer so oblikovalci prepustili avtomatiki, da sama prilagodi vsebino velikosti zaslona uporabnika.

Naj dodam, da so prikazani primeri izrezov spletnih strani povsem ustrezno oblikovani za namizne monitorje. Na manjših napravah pa…

Prva slika je primer neoptimiziranega slajderja, ki ni znal samostojno postaviti vseh elementov na pravo mesto ob zmanjšanju prikaza. Na drugi sliki vidimo primer neustrezne kombinacije ozadja in pisave, saj je besedilo na mobitelu skoraj nemogoče prebrati. Pri tretji sliki je oblikovalec “pozabil” nastaviti velikost fonta posebej za mobitel v naslovni sliki, ki se je pri spremembi naprave odzval tako, da je postal premajhen oz. nečitljiv. Četrta slika predstavlja nasprotno situacijo. Naslov ni odziven, zato ga na mobitelu polovica izgine.

Takšne in podobne “napake” lahko vsakodnevno srečate na spletu med brskanjem po različnih spletnih straneh in portalih.

  • PRIMER 7: neprevedeni izrazi iz angleškega jezika
  • PRIMER 7: neprevedeni izrazi iz angleškega jezika

Če smo do sedaj govorili o pogostih oblikovalskih napakah, se bomo v nadaljevanju bolj posvetili tehničnim površnostim.

Ena takšnih – zelo pogosto prisotnih – je, da na slovenskih spletnih straneh najdete angleške izraze ali »lorem ipsum« nadomestno besedilo.

Največkrat se to zgodi na podstraneh, kot so novice ali blog prispevki.

Poglejmo dva primera neprevedenih izrazov, ki se najpogosteje pojavljajo na raznih blogih in novicah.

  • PRIMER 8: »nevarne« strani
  • PRIMER 8: »nevarne« strani

Za zagotovitev varnejše spletne izkušnje se je Google že pred leti odločil, da bo spletne strani, ki nimajo varne povezave z uporabo SSL certifikata kaznoval tako, da prikaže opozorilno sporočilo »NI VARNO«.

Če kaj, si zagotovo ne želite, da Google vašim (potencialnim) strankam sporoča, da vaša spletna stran ni varna.

  • PRIMER 9: neurejeni URL naslovi
  • PRIMER 9: neurejeni URL naslovi

To, sicer pogosto, napako opazijo zgolj redki.

Po svoje je med vsemi navedenimi, še najmanj moteča, kaže pa na visoko stopnjo neprofesionalnosti oblikovalca spletne strani, predvsem pa prve strani iskalnika Google vaša spletna stran ne bo nikoli videla.

  • PRIMER 11: nedefinirani opisi strani in meta oznake
  • PRIMER 11: nedefinirani opisi strani in meta oznake

Med manj vidne (za uvrščanje v brskalnikih pa usodne) napake sodijo napačne nastavitve za t. i. »meta oznake spletnih strani«. Mednje sodijo ključne besede, opisi strani v brskalnikih, poimenovanje slike itn.

Tovrstne pomanjkljivosti uporabniki sprva niti ne opazijo, zazna pa jih Google in zaradi njih vašo stran ovrednoti kot neustrezno ali manj pomembno.

Sčasoma se neurejen zapis opazi tudi med zadetki v Googlu, kjer z meta opisom (če ga Google sploh upošteva) sporočimo iskalcem najpomembnejše sporočilo, ki jih pritegne h kliku na vašo stran.

Če tega ne naredimo potem Google po lastni presoji izbere prikazano besedilo, kar lahko izpade precej neverodostojno.

Kaj smo se v tem zapisu naučili?

Kaj smo se v tem zapisu naučili?

Oblikovalec je tisti, ki v navedenih primerih drži »škarje in platno« v svojih rokah.

Od njegovega znanja in truda je odvisno, ali bo vaša stran oblikovalsko in tehnično brezhibna.

Je pa čas, ki ga oblikovalec nameni izdelavi spletni strani povezan z denarnimi sredstvi, ki ste jih pripravljeni vložiti v svojo spletno stran.

Razlog za pojav zgoraj opisanih napak bi največkrat pojasnil znani rek, da za malo denarja dobite malo muzike.

V blogu »Cenik spletnih strani« sem vam natančno razložil, kaj lahko pričakujete od spletnih strani v različnih cenovnih razredih.

Če ga še niste prebrali, si ga odprite na tej povezavi in si ga preberite še danes.

Za konec ponovimo še osnove, ki so potrebne za dober videz spletne strani:

  • Ozadje spletne strani naj bo v odtenku svetlih barv.
  • Ena ali največ dve barvi naj prevladujeta, druge so uporabne za detajle.
  • Uporabljajte največ dva različna fonta pisave.
  • Velikost pisave naj ne bo prevelika ali premajhna.
  • Pristna fotografija poveča zaupanje obiskovalcev strani.
  • Vedno preverite spletno stran na svojem mobilnem telefonu.

Pravilno izdelana in oblikovalsko dovršena spletna stran je lahko vaša velika prednost pred konkurenco!

Zaupajte nam izdelavo svoje spletne strani. Garantiramo vam, da boste zadovoljni.

Če imate kakršno koli vprašanje oziroma bi se želeli posvetovati o s svoji spletni strani, mi pišite ali pokličite na tel. št.: 040 200 198

Aljoša Rižner