Ako navrhnúť úspešný web
description
Transcript of Ako navrhnúť úspešný web
![Page 2: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/2.jpg)
Ako navrhnúť úspešný web
Web je úspešný vtedy, keď…
... spĺňa ciele zainteresovaných strán.
![Page 3: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/3.jpg)
Kritéria kvality webu
Použiteľnosť Presvedčivosť Dôveryhodnosť Prístupnosť Predpoklady pre SEO Konkurencieschopnosť Brand
Ako navrhnúť úspešný web
![Page 4: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/4.jpg)
Ako navrhnúť úspešný web
Proces tvorby webových stránok
Zámer Vstupné analýzy
Charakteristika stránok
Štruktúra stránok
Obsah a funkcionalit
aWireframes Technická
špecifikácia Grafika
Kódovanie (X) HTML Obsah
stránok a SEO
Testovanie beta verzie
Spustenie Ďalší rozvoj
![Page 5: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/5.jpg)
Ako navrhnúť úspešný web
Obsah mojej prednášky
Zámer Vstupné analýzy
Charakteristika stránok
Štruktúra stránok
Obsah a funkcionalit
aWireframes Technická
špecifikácia Grafika
Kódovanie (X) HTML Obsah
stránok a SEO
Testovanie beta verzie
Spustenie Ďalší rozvoj
![Page 6: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/6.jpg)
Analýzy
Charakteristika stránok
Štruktúra
Obsah a funkcionalita
Wirerames
Ako navrhnúť úspešný web
Zámer
![Page 7: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/7.jpg)
Vstupné analýzy
Analýza trhu a konkurencie Stanovenie konkurenčných výhod.
Analýza cieľovej skupinyPrispôsobenie webu potrebám užívateľov. Zvolené kanály na propagáciu.
Inšpiračná analýza konkurenčných webovOdlíšenie sa od konkurencie. Inšpirácia zaujímavými prvkami a
neopakovanie rovnakých chýb.
Analýza kľúčových slov
Ako navrhnúť úspešný web
![Page 8: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/8.jpg)
Analýzy
Charakteristika stránok
Štruktúra
Obsah a funkcionalita
Wirerames
Ako navrhnúť úspešný web
Zámer
![Page 9: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/9.jpg)
Všeobecný popis projektu
stratégiu a obchodný model stránok, hlavný a vedľajší cieľ, cieľovú skupinu, produkty a služby, konkurenciu, termíny a rozpočet na projekt, prípadne ďalšie podklady.
Ako navrhnúť úspešný web
![Page 10: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/10.jpg)
Stratégia a obchodný model stránok.
Ako navrhnúť úspešný web
E-shop
Katalóg Satelit
Firemné stránky
Blog
Obsahový server
![Page 11: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/11.jpg)
Hlavný a vedľajší cieľ stránok
Ako navrhnúť úspešný web
![Page 12: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/12.jpg)
Príklad: E-shop
Hlavný cieľ: generovať zisk
Vedľajší cieľ:Počet registrovaných užívateľov
Konverzia: Uskutočnená objednávka Registrácia
Ako navrhnúť úspešný web
![Page 13: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/13.jpg)
Príklad: firemná prezentácia
Hlavný cieľ: Získavanie nových zákazníkov. Znižovanie nákladov.
Vedľajší cieľ: Budovanie brandu
Ako navrhnúť úspešný web
![Page 14: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/14.jpg)
Cieľová skupina
Mladí vs. starší.
Muži vs. Ženy.
Počítačovo zdatní vs. počítačovo neskúsení. ...
Ako navrhnúť úspešný web
POZOR: Designér webu nie je užívateľ.
![Page 15: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/15.jpg)
Produkty a služby
Ako navrhnúť úspešný web
Počet produktov
Podiel na zisku
Obľúbenosť
Sezónnosť
Varianty produktov
Typ produktu (oblečenie vs. spotrebný tovar)
Cross-selling a up-selling
Balíčky a marketingové akcie
![Page 16: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/16.jpg)
Konkurencia
Ako navrhnúť úspešný web
![Page 17: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/17.jpg)
Termíny a rozpočet
Ako navrhnúť úspešný web
![Page 18: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/18.jpg)
Analýzy
Charakteristika stránok
Štruktúra
Obsah a funkcionalita
Wirerames
Ako navrhnúť úspešný web
Zámer
![Page 19: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/19.jpg)
Návrh štruktúry stránok
Ako navrhnúť úspešný web
![Page 20: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/20.jpg)
Príklad z praxe: Užívatelia nerozumejú ponúkaným produktom
Ako navrhnúť úspešný web
![Page 21: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/21.jpg)
Príklad z praxe: Na webe chýbajú základné vstupné stránky
Ako navrhnúť úspešný web
![Page 22: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/22.jpg)
Príklad z praxe: Príliš mnoho pojmov, ktoré je potrebné
Ako navrhnúť úspešný web
Nástroj: http://websort.net/ / 100 účastníkov – 79 $
![Page 23: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/23.jpg)
Analýzy
Charakteristika stránok
Štruktúra
Obsah a funkcionalita
Wirerames
Ako navrhnúť úspešný web
Zámer
![Page 24: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/24.jpg)
Obsah webu
Ako navrhnúť úspešný web
![Page 25: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/25.jpg)
Obsah titulnej stránky
Z titulnej stránky by mal byť jasný zmysel a účel webu. Zdôraznite konkurenčné výhody. Nepoužívajte úvodnú stránku bez obsahu (intro). Prezentujte na úvodnej stránke novinky alebo iný aktualizovaný obsah.
Ako navrhnúť úspešný web
![Page 26: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/26.jpg)
Ako navrhnúť úspešný web
![Page 27: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/27.jpg)
Analýzy
Charakteristika stránok
Štruktúra
Obsah a funkcionalita
Wirerames
Ako navrhnúť úspešný web
Zámer
![Page 28: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/28.jpg)
Nástroje
Pero a papier
Axure.com Balzamiq.comJustinmind.com Obrázok
Ako navrhnúť úspešný web
![Page 29: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/29.jpg)
Na čo by ste mali myslieť pri tvorbe wireframes
Aký je cieľ danej stránky. Ktoré prvky by sa mali nachádzať nad prehybom stránky. Ktoré prvky je potrebné vizuálne zvýrazniť. Ako má užívateľ pokračovať ďalej.
Ako navrhnúť úspešný web
Každá stránka by mala vyhovovať z hľadiska použiteľnosti, dôveryhodnosti, presvedčivosti, SEO optimalizácie,
![Page 30: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/30.jpg)
8 najčastejších chýb pri tvorbe webu
1. Web sa začína „riešiť“ až v grafikom návrhu.2. Porušenie základných pravidiel použiteľnosti. 3. Nízka priorita dôležitých prvkov na stránke. 4. Chýbajú dostatočne pútavé call-to-action prvky. 5. Nedostatočné prelinkovanie jednotlivých stránok.6. Nevyužívané metódy cross-sellingu a up-sellingu. 7. Slabé interakcia s návštevníkmi webu. 8. Absencia prvkov, ktoré zvyšujú dôveryhodnosť webu
(kontakty, zamestnanci, referencie, ocenenia ...).
Ako navrhnúť úspešný web
![Page 31: Ako navrhnúť úspešný web](https://reader034.fdocuments.net/reader034/viewer/2022042521/546b9876b4af9f8e2c8b4e07/html5/thumbnails/31.jpg)
Ako navrhnúť úspešný web
Ďakujem za pozornosť a prajem veľa úspechov pri tvorbe webových stránok.