Bežné chyby v dizajne webových stránok; Typ WP

Ó áno. Všetci ich poznáme: miniatúrne obrázky, ktoré sa nedajú zväčšiť, fotografie, ktoré sa aj tak nenačítajú ani po 3 minútach, a položky ponuky, ktoré sú nezrozumiteľné. V skratke: veľa chýb sa často opakuje. Tu je postup, ako ich vykoreniť:

Neboj sa. Nemusíte ísť cez dosku! Nič sa ti nestalo! Pirátske čestné slovo!

Plavím sa za vami nekonečnými morami noviniek WordPress a pripravujem ich raz mesačne zadarmo v emaile.

Neboj sa. Nemusíte lietať na WP-Topia, aby ste dostali najnovšie správy o vývoji WordPres.

Lietam pre vás nekonečnými galaxiami noviniek WordPress a pripravujem to raz mesačne zadarmo v emaile.

Obrázky nie je možné zväčšiť

Boli ste už na nejakej webovej stránke a chceli ste kliknúť na malý obrázok, aby ste ho mohli lepšie, ostrejšie a hlavne väčší zobraziť? Je to hlúposť, ak to nefunguje vôbec. Mnoho obrázkov na webe jednoducho nie je možné kliknúť vôbec a zvyčajne nie sú k dispozícii vo vyššom rozlíšení.
Ak - ako sa odporúča - používate WordPress ako svoj systém na správu obsahu na prevádzku svojej webovej stránky, môžete s istotou nahrávať všetky obrázky vo vysokej kvalite. Automaticky zmenšuje veľkosť obrázkov v závislosti od toho, ako sa používajú. Pri nahrávaní to trvá trochu dlhšie (v závislosti od rýchlosti vášho vlastného internetového pripojenia), mali by ste však prijať túto čakaciu dobu, aby ste od návštevníkov vášho webu získali plusový bod. Pri vkladaní príslušného obrázka jednoducho vykonajte požadovaný výber v časti „Veľkosť“ (pozri obrázok nižšie - poznámka: v novších verziách to vyzerá trochu inak, ale podobne).

bežné
Vkladanie obrázkov do WordPressu

Kompresia obrázkov JPEG a GIF

Obrázky JPEG je možné vopred komprimovať v kvalite 60 až 80 pomocou softvéru na spracovanie obrázkov podľa vášho výberu. Často je dostatočná úroveň kvality 40 až 60. Menej by sa nemalo vyberať, pretože kompresia by inak príliš vynikla a fotografia alebo grafika sa potom „rozmazali“.

Na webových stránkach fotografov musia byť fotografie zobrazené vo vysokom rozlíšení. Ak potrebujete obrázok torty, napríklad pre stránku s témou „chudnutie“, grafika sa dá určite lepšie skomprimovať. (Koniec koncov, torta by pre pravdepodobne mierne kyprých návštevníkov nemala pôsobiť príliš chutne 😉).

Namiesto formátu JPEG použite formát GIF, iba ak zobrazujete grafiku, nie fotografie. Formát GIF predvolene obsahuje iba 256 farieb a nie je vhodný na zobrazovanie fotografií vo vysokej farebnej hĺbke. Existujú aj formáty s vyššou farebnou hĺbkou, v ktorých je zjednodušene povedané povedané povedané, že do jedného súboru je uložených niekoľko jednotlivých obrázkov s vlastnou farebnou paletou. Bez ohľadu na to však nie je možné dosiahnuť dobrú rýchlosť kompresie pri vysokých farebných hĺbkach.

Nesprávne mená v ponuke

Súčasťou samotného dizajnu je, že sa používateľ dokáže orientovať v oblasti navigačnej technológie. Viete, čo znamená „portfólio“? Nie každý má podozrenie, že sa jedná o „O našej spoločnosti“ alebo niečo podobné. Portfólio znamená, že odkaz má viac než iba jednu stránku. Teda zbierka referencií alebo ponúk napr.

Nemali by ste nič komplikovať. Nasledujúce odkazy môžete z ponuky bezpečne odstrániť alebo premenovať:

Navigačné menu

Namiesto „Portfólia“ stačí použiť „O mne“, v prípade spoločnosti „Naša ponuka“ alebo byť trochu konkrétnejší. Príklady: „Naše fotografie“ alebo „vozidlá“.

Každý vie, že pojem „odtlačok“ obsahuje všetky potrebné právne informácie, ako je číslo dane z obratu (ďalšie informácie nájdete v zákone Teleservices Act (TDG), odsek 6). Odtlačok nemá miesto v hlavnom menu. Na webe existuje viac vzrušujúcich vecí, ako je potrebné čítať čísla dane z obratu v položke ponuky ako „Kontakt“. Zasuňte ho úplne dole na bok. Tam je podozrivý a nájdený tými, ktorí ho hľadajú.
Po položke „Kontakt“ by ste mali ponúknuť iba formulár a adresu spoločnosti a telefónne číslo. Malo by byť čo najjednoduchšie, aby vás zákazník alebo návštevník kontaktoval. Ale negenerujte formu príšery. Musíte len uviesť svoje meno, telefónne číslo alebo e-mailovú adresu a voľné textové pole. Nikto nechce uviesť svoju úplnú adresu alebo dokonca dátum narodenia, keď dostane malú otázku. Alebo sami napíšete takéto informácie dobrovoľne do každej internetovej formy, ktorú nájdete? Pravdepodobne nie.

Nastaviť úvodnú stránku ako úvodnú stránku a nie ako domovskú stránku. Ako už bolo spomenuté, veľa ľudí stále nevie perfektne anglicky. Aj keď sa to teraz údajne stalo štandardom.
Na niektorých webových stránkach sa dokonca zaobídete bez výrazu v ponuke úplne. Namiesto toho logo vždy prepojíte späť na domovskú stránku.

V ponuke je príliš veľa odkazov

Nie je neobvyklé, že vás jedálniček priamo „zavalí“. Často je to také dlhé, že už nevieme, kam sa skôr pozerať. Alebo je to také mätúce, že nemôžeme nájsť informácie, ktoré hľadáme.
Obrázok vyššie zobrazuje príklad navigácie obce. Zamyslite sa nad sebou a položte si otázku, aké informácie by mohli byť v časti „Komunita“ a „Radnica“. Čo je v časti „Kultúra“, ale v časti „Turizmus“?
Mali by ste si položiť otázku, čo chce návštevník vášho webu. Ktoré publikum narazilo na web komunity? Ako sa môžu tieto skupiny používateľov najlepšie zorientovať?
V grafickom zobrazení tiež vidíte vylepšenú štruktúru ponuky. Je to založené na nasledujúcich skupinách používateľov:

  • Ľudia, ktorí žijú v komunitnom prostredí
  • Ľudia, ktorí chcú stráviť dovolenku v obci (cestovný ruch)
  • Ľudia, ktorí tam chcú vybudovať svoju spoločnosť (ekonomika)

Všetky tri skupiny ľudí môžu a môžu chcieť niekomu rýchlo zavolať. Preto je tlačidlo kontaktu tiež v hlavnom menu.
Hlavné menu zaisťuje, že nasmerujete správnu skupinu návštevníkov tam, kde by mali byť. Pre človeka, ktorý chce ísť na dovolenku lokálne, iné body (ekonomika, informácie pre občanov) v prvom rade nezaujímajú.

Prečo malé menu a najviac 7 položiek menu?

Zistilo sa, že každý človek si môže rýchlo spomenúť v priemere na 7 vecí. Vedec John Locke objavil tento takzvaný sedem jav pred 300 rokmi. Jeden vie,

  • že by ste mali spať v priemere 7 hodín;
  • že 7 je najbežnejšie šťastné číslo;
  • a že týždeň má 7 dní.

Skúste si spomenúť na všetky veci na vašom stole. Potom zatvorte oči a skúste si spomenúť, čo tam bolo. Ako ďaleko sa dostanete Do siedmej „časti“ je dobré, že ste všetko napísali na 100% správne. Pravdepodobnosť pristátia úderu navyše rýchlo klesá.

Dlhé menu

Nie všetky ponuky môžu zostať malé. Spomeňte si napríklad na online obchody, ktoré majú veľa podstránok. Zlým príkladom by bolo toto:

Ukážka zlej navigácie

Takéto ponuky často generujú webové stránky online obchodu automaticky na základe produktov, ktoré sú momentálne na sklade.
Nie vždy ste dokonalí. Príliš veľa čísel a príliš malá diferenciácia. Aký je rozdiel medzi notebookmi 5760 a 6595? Ako laik je to veľmi ťažké. Potom by ste mali pracovať najneskôr s trikmi. Napríklad s rozbaľovacou ponukou, ktorá vytvára ďalšie ponuky iba s tromi ďalšími podmenu.

Dizajn podponuky

Musíte vyskúšať, ktorá diferenciácia (tu podľa veľkosti notebooku) je pre vašich návštevníkov najvhodnejšia.

Navigácia na nesprávnom mieste

Pri ovládaní vašich návštevníkov webových stránok nezohráva dôležitú úlohu iba dĺžka ponuky. Je tiež možné nesprávne umiestniť navigáciu. Vďaka systémom na správu obsahu teraz platí, že ponuky nájdete tam, kam aj tak patria. A to buď iba v ľavom stĺpci, iba v oblasti hlavičky alebo na oboch miestach webu.

Oprava ponuky

Používatelia sa na vašom webe nenachádzajú

Užitočné nástroje ako Google Analytics vám môžu ukázať, ako sa návštevníci pohybujú po vašom webe. Pomocou takto výkonných nástrojov tiež zistíte, že mnoho návštevníkov sa na webe nezdržuje dlho. Môže to byť preto, že sa jednoducho nevedia zorientovať.
Každý sme iný, a preto nikdy nemôžete potešiť každého. Mali by ste sa však vynaložiť maximálne úsilie na implementáciu toho, čo vám hovoria vaši používatelia.

Trúfame si tvrdiť, že 90% návštevníkov vašich webových stránok s vami nikdy nebude v kontakte. A to ani vtedy, ak by ste napríklad mali mať s webom veľký problém. Len zriedka vám niekto dá vedieť.

Existuje mnoho dôvodov, prečo sa užívateľ nemôže orientovať na vašom webe:

  • Napríklad používateľ má problémy s prezentáciou webu a chýbajú mu dôležité body z dôvodu technických problémov (používa zastaralý prehliadač).
  • Užívateľ nevie, kde nájde ďalšie informácie, pretože jeho obsah je a) skrytý alebo b) je v nepriaznivo popísanom menu.
  • Používateľ si myslí, že webová stránka nie je „krásna“ (napríklad nie je dostatočne estetická). Napríklad ak „vzhľad a dojem“ nezodpovedá typu podnikania.

Mali by ste sa preto každý deň kriticky pozrieť na svoje webové stránky. Otestujte si svoj web pomocou rôznych prehľadávačov na rôznych platformách (ak je to možné v systéme Windows, Mac OS a dokonca aj Linux, ak je vaša čitateľská obec zanietená pre používateľov systému Linux).

Prepojujte technické výrazy v článkoch tak často, ako je to možné, buď na konkrétne miesto na vašom vlastnom webe, alebo na alternatívne zdroje (napríklad Wikipedia). Konečným cieľom je naučiť a informovať návštevníka čo najviac. Preto je na vašom webe!

Okrem toho sa môžete anonymne opýtať každého jedného návštevníka pomocou jednoduchého kontaktného formulára: „Čo by ste zmenili?“ To je rýchle a často dokáže zázraky. V prípade blogového systému si môžete prečítať sekciu komentárov.

Ďalšia alternatíva: Spýtajte sa svojich priateľov a známych, ako nájdu váš web. Sadnite si so sebou za počítač, navštívte svoj web a pýtajte sa napríklad na:

  • „Vyhľadajte, toto a toto‘ “alebo
  • „Rozumieš téme xy?“
  • „Kde by si klikol, aby si našiel ABC?“

Nedôležité je v dôležitom bode

Jedna štúdia zistila, že ľudské oko (alebo prinajmenšom európske oko) začína čítať a pozerať sa na neho zľava hore. Čím ďalej pôjdete doprava, tým menej dôležitého obsahu tam nájdete.

(porov. Gutheim, Philip (2008): Der Webdesign-Praxisguide. Profesionálna koncepcia od plánovania po doktorát. Mníchov: Springer Verlag. s. 42)

Príklad sledovania očí

Preto zvyčajne nájdete ponuky vľavo alebo hore. Bočné panely sú zvyčajne úplne vpravo. Aj v takzvanom footer menu (päta webu) nájdete menej dôležité veci.

Platí tu však to isté: nie všetci sú rovnakí. Oko často najskôr „letí“ k úderným bodom, ktoré sa môžu nachádzať ďalej vpravo dole na obrázku, skôr ako začne analyzovať stránku zľava.

Mali by ste sa držať týchto nepísaných pravidiel a uľahčiť návštevníkom navigáciu tým, že umiestnite veci tam, kde sa od nich očakáva. Takže ponuka vľavo alebo hore.

Zlyhanie krížového prehliadača zlyhalo

„Testovanie viacerých prehliadačov“ v nemčine neznamená nič iné, ako to, že by ste si mali otestovať svoje webové stránky pomocou niekoľkých internetových prehliadačov. To zaisťuje, že každý používateľ internetu vidí vaše webové stránky rovnako ako vy. Každý prehľadávač má inú štruktúru a môže rôzne interpretovať príkazy HTML a Javascript. To môže viesť k deformáciám a nedorozumeniam.

V marci 2017 mali jednotlivé internetové prehliadače trhový podiel (pozri tabuľku nižšie; výber).

Dosah prehliadača
internet Explorer 5%
Firefox 14%
Chrome 75%
safari 4%
Opera 1%

Kompletný a vždy aktuálny zoznam nájdete na adrese w3schools.com: http://www.w3schools.com/browsers/browsers_stats.asp
Tu nájdete zdroje na stiahnutie pre príslušné prehľadávače:

Prípadne môžete na takéto testy použiť bezplatné alebo platené webové služby. Napríklad:

Najmä program Internet Explorer veľmi pravdepodobne zobrazí vaše webové stránky v každej verzii trochu inak. Je to spôsobené tým, že spoločnosti Microsoft sa nepodarilo skutočne štruktúrovať program až do verzie 9 tak, aby správne implementoval platné webové štandardy. Najmenej 95 zo 100 bodov v teste ACID3 (test na kontrolu správne interpretovaných webových štandardov) bolo dosiahnutých IE9 naposledy.

Svoj vlastný prehliadač môžete otestovať napríklad na adrese http://acid3.acidtests.org. V lepšom prípade test ukazuje 100 zo 100 bodov. Takže je všetko v poriadku.

[...] Ukázalo sa, že ponuka by nikdy nemala obsahovať viac ako 7 položiek ponuky. [...]

[...] A ktoré nie sú dôležité. Tu môže byť užitočný aj môj tip na nasledujúcu stránku: Príliš veľa odkazov v ponuke (v článku blogu o najbežnejších chybách v [...]