Nagy website-k tervezési megfontolásoklpeter/E-business/7_nagy_web-site.pdf · Web építész gyakorlott technikai személy –webtechnológia (webszerverek, HTML, JavaScript, Java,

Nagy website-k Nagy website-k tervezési tervezési

megfontolásokmegfontolásokBKÁE 2004BKÁE 2004

Miről lesz szó?Miről lesz szó?

Web csapat összeállításaWeb csapat összeállítása web projektek főbb lépéseiweb projektek főbb lépései Webmarketing tanácsokWebmarketing tanácsok Információ architektúraInformáció architektúra Információ architektúra példaInformáció architektúra példa

WebcsapatWebcsapat

A webcsapat feladatai:A webcsapat feladatai: a felső vezetés támogatása a cég a felső vezetés támogatása a cég

webstratégiájának meghozatalábanwebstratégiájának meghozatalában webfejlesztési projekt menedzselése webfejlesztési projekt menedzselése

belső vagy külső fejlesztési belső vagy külső fejlesztési erőforrások bevonásávalerőforrások bevonásával

Üzemeltetés, tartalommenedzselésÜzemeltetés, tartalommenedzselésLehet egy embertől több 100 fős Lehet egy embertől több 100 fős

csapatig.csapatig.

WebcsapatWebcsapat

Internet ügyvezető testületInternet ügyvezető testülettagjai:tagjai: üzleti, és IT felsővezetői vagy általuk üzleti, és IT felsővezetői vagy általuk

delegált tagokdelegált tagok Feladata: döntéshozatal Feladata: döntéshozatal

projektindítás, felügyelet, projektindítás, felügyelet, költségvetés tekintetébenköltségvetés tekintetében

Státuszjelentés, projektütemezés Státuszjelentés, projektütemezés

WebcsapatWebcsapat

Webmester, e-commerce menedzserWebmester, e-commerce menedzser Felelős a cég Internet programjáért, Felelős a cég Internet programjáért,

“mindent tud, mindent lát”“mindent tud, mindent lát” Ismeretek:Ismeretek:

– üzletiüzleti– iparágiiparági– Internet technológiaInternet technológia

WebcsapatWebcsapat

Projekt menedzserProjekt menedzser felelős a projektjéértfelelős a projektjéért Beszámoltatható:Beszámoltatható:

– projekttervprojektterv– elért célok, mérföldkövekelért célok, mérföldkövek– erőforrás gazdálkodáserőforrás gazdálkodás

WebcsapatWebcsapat

Web építészWeb építész gyakorlott technikai személygyakorlott technikai személy

– webtechnológia (webszerverek, HTML, webtechnológia (webszerverek, HTML, JavaScript, Java, JSP stb.)JavaScript, Java, JSP stb.)

– Adatbázisok Adatbázisok – komponens alapú programozáskomponens alapú programozás– Installálás, üzemeltetés, oktatásInstallálás, üzemeltetés, oktatás

WebcsapatWebcsapat

TartalommesterTartalommester felelős a biztosított tartalom felelős a biztosított tartalom

megfelelő helyre való beviteléremegfelelő helyre való bevitelére Ismeretek:Ismeretek:

– HTML, JavascriptHTML, Javascript– a cég dokumentációs, oktatási a cég dokumentációs, oktatási

szabványaiszabványai

WebcsapatWebcsapat

Tartalom menedzserTartalom menedzser a cég egyes üzletági felelős vezetői, a cég egyes üzletági felelős vezetői,

kik a tartalom biztosításáért kik a tartalom biztosításáért felelősek (általában marketing felelősek (általában marketing szakemberek)szakemberek)

web ismeretek alapvetően nem web ismeretek alapvetően nem szükségesek, célszerű bevonni őket szükségesek, célszerű bevonni őket az új fejlesztések tesztelésébe.az új fejlesztések tesztelésébe.

WebcsapatWebcsapat

Grafikai tervező:Grafikai tervező: felelős a website egységes grafikai felelős a website egységes grafikai

arculatáértarculatáért Ismeretek:Ismeretek:

– reklám, oktatási és webgrafikai reklám, oktatási és webgrafikai tapasztalattapasztalat

– Webgrafika sajátosságaiWebgrafika sajátosságai– grafikai eszközök (editorok, grafikai eszközök (editorok,

segédprogramok)segédprogramok)

WebcsapatWebcsapat

Adatbázis adminisztrátorAdatbázis adminisztrátor felelős website támogatását biztosító felelős website támogatását biztosító

adatbázis tervezéséért, hangolásáértadatbázis tervezéséért, hangolásáért Ismeretek:Ismeretek:

– RDBMS ismeretRDBMS ismeret– biztonsági ismeretekbiztonsági ismeretek– webtechnológia sajátosságaiwebtechnológia sajátosságai

WebcsapatWebcsapat

RendszeradminisztrátorRendszeradminisztrátor felelős a website szolgáltatást felelős a website szolgáltatást

biztosító szerverek és hálózat biztosító szerverek és hálózat rendelkezésre állásáért, rendelkezésre állásáért, biztonságáért, és hiba esetén a biztonságáért, és hiba esetén a tartalom lehetőleg legteljesebb tartalom lehetőleg legteljesebb visszaállításáértvisszaállításáért

WebprojektekWebprojektek

Sikeres website - 5 “C” egységeSikeres website - 5 “C” egysége Tartalom (Content)Tartalom (Content) Összefüggések (Context)Összefüggések (Context) Vagány (Cool)Vagány (Cool) Kapcsolat (Contact)Kapcsolat (Contact) Irányítás (Control)Irányítás (Control)


Megvalósíthatósági tanulmány - Megvalósíthatósági tanulmány - – jelenlegi helyzet, jelenlegi helyzet, – erőforrás, pénz, erőforrás, pénz, – Alapelképzelések, statégiai irányvonalakAlapelképzelések, statégiai irányvonalak

Célok, pontos igények Célok, pontos igények meghatározásameghatározása– Cél: marketing, értékesítés? termék- Cél: marketing, értékesítés? termék-

szolgáltatás?szolgáltatás?

WebprojektekWebprojektek Website terv készítés:Website terv készítés:

– Milyen felhasználókat célozunk meg (a site-unk Milyen felhasználókat célozunk meg (a site-unk vonatkozásábanÖvonatkozásábanÖ gyakorlott felhasználók -pl. extranetgyakorlott felhasználók -pl. extranet kezdő felhasználókkezdő felhasználók Nemzetközi felhasználókNemzetközi felhasználók

– Milyen információ jelenik meg és milyen Milyen információ jelenik meg és milyen módon szervezvemódon szervezve VázlatkészítésVázlatkészítés forgatókönyvekforgatókönyvek


Tartalom előállítása:Tartalom előállítása: Marketing, üzlet feladataiMarketing, üzlet feladatai marketing statégia marketing statégia tartalom előkészítése keresőkhöz tartalom előkészítése keresőkhöz

való optimalizáláshozvaló optimalizáláshoz


Webtervezés:Webtervezés: 3-7 előzetes tervezet3-7 előzetes tervezet Grafikai terv:Grafikai terv:

– színek, betűtípus oldalmegjelenésszínek, betűtípus oldalmegjelenés– grafikák, piktogrammokgrafikák, piktogrammok

Oldalgenerálás:Oldalgenerálás:– statikusstatikus– dinamikusdinamikus– részlegesen dinamikusrészlegesen dinamikus– részlegesen statikusrészlegesen statikus


Website előzetes jóváhagyása:Website előzetes jóváhagyása: A tervezetek közül kiválasztjuk a A tervezetek közül kiválasztjuk a

legmegfelelőbbet és ezt fogjuk legmegfelelőbbet és ezt fogjuk megvalósítani.megvalósítani.


Website programozása:Website programozása: HTML, Javascript megvalósításHTML, Javascript megvalósítás Dimamikus oldalak generálásaDimamikus oldalak generálása

– CGI, JSP, ASP, PHP, Perl programozásCGI, JSP, ASP, PHP, Perl programozás– Adatbázis séma elkészítéseAdatbázis séma elkészítése– Programozása standardokProgramozása standardok– Program fejlesztő – HTML kódoló Program fejlesztő – HTML kódoló

(tervező) funkciók felosztása(tervező) funkciók felosztása


Website tesztelése:Website tesztelése: Tartalmi teszt: Tartalmi teszt:

– A projektbe bevont üzleti dolgozókA projektbe bevont üzleti dolgozók– Kiválasztott ügyfelekKiválasztott ügyfelek

Működési teszt – terhelési tesztek – Működési teszt – terhelési tesztek – rendszergazdákrendszergazdák


Website átadása:Website átadása: Telepítés a végső környezetbe (ISP)Telepítés a végső környezetbe (ISP) Oktatás, dokumentáció Oktatás, dokumentáció

(felhasználói-fejlesztői)(felhasználói-fejlesztői)


Website online és offline marketingje:Website online és offline marketingje: TV, újsághirdetésekben a website TV, újsághirdetésekben a website

feltüntetésefeltüntetése Keresőprogramokba regisztrálásKeresőprogramokba regisztrálás Online marketing:Online marketing:

– banner hirdetésekbanner hirdetések– Email hirdetésEmail hirdetés– online nyereményjáték stb.online nyereményjáték stb.– SzponzorációSzponzoráció

Webmarketing tanácsok a Webmarketing tanácsok a tervezésheztervezéshez

Web alapvetően különbözik a többi Web alapvetően különbözik a többi médiától:médiától:

A felhasználó hihetetlenül A felhasználó hihetetlenül türelmetlen,türelmetlen,

hihetetlenül okos,hihetetlenül okos, hihetetlenül igényli az interaktivitásthihetetlenül igényli az interaktivitástA website tervezésnél sajátos A website tervezésnél sajátos

„marketing stratégiát„ kell „marketing stratégiát„ kell alkalmaznunk.alkalmaznunk.


Használjunk a erős üzenetet tartalmazó Használjunk a erős üzenetet tartalmazó címsort!címsort!

A címsor az első benyomás a termékről, A címsor az első benyomás a termékről, szolgáltatásról a felhasználónak.szolgáltatásról a felhasználónak.

Milyen címsort használjunk:Milyen címsort használjunk:– A termék, szolgáltatás hasznoságát A termék, szolgáltatás hasznoságát

hangsúlyozzuk, vagyhangsúlyozzuk, vagy– Újdonságot kifejező címsort, vagyÚjdonságot kifejező címsort, vagy– Érdekességet, kuriozitás fejezzen ki.Érdekességet, kuriozitás fejezzen ki.


Hogyan nézzen ki a jó címsor:Hogyan nézzen ki a jó címsor:– Legyen domináns a laponLegyen domináns a lapon– Fókuszáljon a látogatóra ( „az Ön….”, „Önnek” Fókuszáljon a látogatóra ( „az Ön….”, „Önnek”

kifejezések)kifejezések)– Legyen pozitív üzenete!Legyen pozitív üzenete!

Milyen ne legyen?Milyen ne legyen?– Ne használjuk a társaság szlogenjét, cég Ne használjuk a társaság szlogenjét, cég

nevét!nevét!– Ne kezdjünk magyarázatba, hogy mit csinál a Ne kezdjünk magyarázatba, hogy mit csinál a

cégünk!cégünk!– Ne legyünk túlságosan rabjai a terminus Ne legyünk túlságosan rabjai a terminus

technicusnak! technicusnak!


A termék, vagy a szolgáltatás legyen a A termék, vagy a szolgáltatás legyen a website főszereplője!website főszereplője!

A felhasználó azt A felhasználó azt keresikeresi, mivel , mivel segíthetnénk neki.segíthetnénk neki.

Nem céginfókra, nem piaci pozícióra Nem céginfókra, nem piaci pozícióra kíváncsi elsősorban!kíváncsi elsősorban!


Ha szolgáltatást adunk el:Ha szolgáltatást adunk el: Használjunk fotókat, grafikus Használjunk fotókat, grafikus

ábrázolás nehézkes!ábrázolás nehézkes!– Mutassuk be, hogy hogyan használják a Mutassuk be, hogy hogyan használják a

szolgáltatást az ügyfelek!szolgáltatást az ügyfelek!– Előtte-utána képek (pl. fodrászat, Előtte-utána képek (pl. fodrászat,

plasztikai sebészet stb.)plasztikai sebészet stb.)


Ha terméket adunk el:Ha terméket adunk el: Ne csupán a terméket mutassuk be, fotó, Ne csupán a terméket mutassuk be, fotó,

ábra segítségével!ábra segítségével! A szövegesen domborítsuk ki, milyen A szövegesen domborítsuk ki, milyen

előnyökkel jár a termék használata!előnyökkel jár a termék használata! Egy oldalon maximum két gépelt oldalnyi Egy oldalon maximum két gépelt oldalnyi

szöveger helyezzünk el!szöveger helyezzünk el! Segítsünk a további használati lehetőségek Segítsünk a további használati lehetőségek

ajánlásában! (pl. ital - koktélreceptek)ajánlásában! (pl. ital - koktélreceptek)


A főszereplőnek dominánsnak kell A főszereplőnek dominánsnak kell lennie a lapon:lennie a lapon:

A termék/szolgáltatás képe legyen:A termék/szolgáltatás képe legyen:– Nagyobb mint a céglogoNagyobb mint a céglogo– Nagyobb mint, a minősítések, ajánlásokNagyobb mint, a minősítések, ajánlások– Nagyobb, mint a cég létesítményekNagyobb, mint a cég létesítmények– Nagyobb, mint a cég dolgozóinak képeNagyobb, mint a cég dolgozóinak képe


Mindenki a főszereplőre kíváncsi!Mindenki a főszereplőre kíváncsi! A terméket/szolgáltatást azonnal A terméket/szolgáltatást azonnal

jelenítsük meg a honlapon.jelenítsük meg a honlapon. Lehetőleg kerüljük a fölösleges Lehetőleg kerüljük a fölösleges

kezdőlapokat ( pl. kezdő Flash kezdőlapokat ( pl. kezdő Flash animációk)animációk)

Profi grafikai tálalásProfi grafikai tálalás


A website hívjon fel egyértelmű A website hívjon fel egyértelmű üzenettel, mit kell a felhasználónak üzenettel, mit kell a felhasználónak tennie!tennie!

„„Hívj most”, „Ingyen elérés Hívj most”, „Ingyen elérés azonnal…”, „Azonnali kedvezmény…”azonnal…”, „Azonnali kedvezmény…”

Az üzeneteket ismételjük meg Az üzeneteket ismételjük meg minden téma végén!minden téma végén!

Az üzenet ne legyen támadó, inkább Az üzenet ne legyen támadó, inkább együttműködésre serkentő!együttműködésre serkentő!


A márkajegyek használjuk konzisztensen!A márkajegyek használjuk konzisztensen! Termék logoTermék logo Termék névTermék név Kulcs üzenetKulcs üzenet GrafikaGrafika

– SzínekSzínek– ElhelyezésElhelyezés– Betűtípus, mozgásokBetűtípus, mozgások

Keresők megfelelő tagolás, META elemek Keresők megfelelő tagolás, META elemek elhelyezéseelhelyezése


A felhasználó könnyen elérjen A felhasználó könnyen elérjen bennünket:bennünket:

Telefonszám megadása minden lap Telefonszám megadása minden lap alján (ingyenes számok lehetőleg)alján (ingyenes számok lehetőleg)

Mini-kontakt űrlap – struktúrált Mini-kontakt űrlap – struktúrált üzenetüzenet

Email elérhetőségEmail elérhetőség Fizikai elérhetőség (cím, postacím, Fizikai elérhetőség (cím, postacím,

térkép) a céghez.térkép) a céghez.


Használjunk a terméknek, üzletágnak Használjunk a terméknek, üzletágnak megfelelő grafikai megjelenést!megfelelő grafikai megjelenést!

Vegyük figyelembe a keresőprogramok Vegyük figyelembe a keresőprogramok működési elveit!működési elveit!

Helyezzük el a partnereink logóját! Helyezzük el a partnereink logóját! Bizonyítsuk, hogy egy valódi, reputációval Bizonyítsuk, hogy egy valódi, reputációval bírócég vagyunk!bírócég vagyunk!

Tartsuk tiszteletben a látogató személyes Tartsuk tiszteletben a látogató személyes adatait!adatait!

Információ ArchitektúraInformáció Architektúra

Információ építész:Információ építész: Az az egyén, aki a megkapott komplex Az az egyén, aki a megkapott komplex

adatokat világos szerkezetűvé alakítja.adatokat világos szerkezetűvé alakítja. Az az egyén, aki információ térképeket Az az egyén, aki információ térképeket

készít, amely által mások kialakítják saját készít, amely által mások kialakítják saját útjukat a tudáshoz. útjukat a tudáshoz.

XXI. Századi foglalkozás, amely a XXI. Századi foglalkozás, amely a korigényei szerint, az emberi megértés, a korigényei szerint, az emberi megértés, a világosság, a információszerveződés világosság, a információszerveződés tudományával foglalkozik.tudományával foglalkozik.

Richard Saul Wurman Richard Saul Wurman

Információ ArchitektúraInformáció ArchitektúraAz Információ Építész feladatai:Az Információ Építész feladatai: Pontosan értenie kell mit csinál ma az site, és Pontosan értenie kell mit csinál ma az site, és

hogyan fog működni a jövőbenhogyan fog működni a jövőben Tisztázza az eltéréseket a site missziója és víziója Tisztázza az eltéréseket a site missziója és víziója

között, úgy hogy megteremti az összhangot a között, úgy hogy megteremti az összhangot a fenntartó szervezet és a közönség igénye közöttfenntartó szervezet és a közönség igénye között

Meghatározza a site tartalmát és funkcionalitásátMeghatározza a site tartalmát és funkcionalitását Specifikálja, hogy a felhasználók, hogyan fogják Specifikálja, hogy a felhasználók, hogyan fogják

megtalálni az információt: site szervezését, megtalálni az információt: site szervezését, navigációt, címkéket és a kereső rendszereketnavigációt, címkéket és a kereső rendszereket

Leképezi, hogy időben hogyan fog változni és Leképezi, hogy időben hogyan fog változni és növekedni a site.növekedni a site.


Felhasználói nézet:Felhasználói nézet: Gyorsan és könnyen akar Gyorsan és könnyen akar

információhoz jutni, azonban kevés információhoz jutni, azonban kevés információ is hiba!információ is hiba!

Felhasználók különbözőkFelhasználók különbözők Egyes felhasználók azt sem tudják Egyes felhasználók azt sem tudják

mit keresnekmit keresnekEzért különböző információ elérése Ezért különböző információ elérése

utakra van szükség.utakra van szükség.


Szervezeti nézete:Szervezeti nézete: A site szerketetének is a szervezet A site szerketetének is a szervezet

értékeit kell demonstrálniaértékeit kell demonstrálnia Diplomatikus szerkezet kiküszöböli a Diplomatikus szerkezet kiküszöböli a

„politika” csatákat„politika” csatákat

Ezért a site tervezésékor el kell Ezért a site tervezésékor el kell készülniekészülnie


Információ Építész szükséges Információ Építész szükséges ismeretei:ismeretei:

Grafikai tervezésGrafikai tervezés Infromációs és könyvtári ismeretekInfromációs és könyvtári ismeretek Újságírói ismeretekÚjságírói ismeretek MarketingMarketing ITIT

Információ Architektúra Információ Architektúra készítésekészítése

Meg kell határozni a site célját:Meg kell határozni a site célját: Ki vesz ebben részt?Ki vesz ebben részt? Formális- infromális meghatározás?Formális- infromális meghatározás?


Kérdések, amire világos választ kell Kérdések, amire világos választ kell adni:adni:

Mi a szervezet feladata, vagy Mi a szervezet feladata, vagy missziója?missziója?

Mik a rövid, és hosszútávú célok?Mik a rövid, és hosszútávú célok? Ki megcélzott közönség?Ki megcélzott közönség? Miért jönnek a sitera az emberek?Miért jönnek a sitera az emberek?

A válaszokat le kell szűrni!A válaszokat le kell szűrni!

Eredmény – terv dokumentáció Eredmény – terv dokumentáció


A felhasználói tapasztalat és tudás A felhasználói tapasztalat és tudás meghatározása - csoportosításmeghatározása - csoportosítás

Forgatókönyvek készítése Forgatókönyvek készítése – a felhasználó tudás alapjána felhasználó tudás alapján– Minden felhasználói csoporthozMinden felhasználói csoporthoz– 3-6 forgatókönyv elkészítése3-6 forgatókönyv elkészítése

Összehasonlítás a versenytársakkalÖsszehasonlítás a versenytársakkal


Összehasonlítás a versenytársakkalÖsszehasonlítás a versenytársakkal

A tervdokumentációt ezekkel a termékkel kiegészíteni


A tartalmi és funcionális követelmények A tartalmi és funcionális követelmények meghatározása:meghatározása:

Két listás módszer – Készítünk egy saját Két listás módszer – Készítünk egy saját tartalmi listát – majd mindenki saját tartalmi listát – majd mindenki saját tartalmi igényeit próbálja összekapcsolni, tartalmi igényeit próbálja összekapcsolni, kiegészíteni – tartalmi „raktárkészlet”kiegészíteni – tartalmi „raktárkészlet”

Ehhez igazítjuk a funcionális igényeket Ehhez igazítjuk a funcionális igényeket (statikus lap, tranzakciós lap stb)(statikus lap, tranzakciós lap stb)

Csoportosítsuk és nevezzük el a tartalmatCsoportosítsuk és nevezzük el a tartalmatKiegészítjük a tervdokumentációt!Kiegészítjük a tervdokumentációt!


Struktúra meghatározása:Struktúra meghatározása: Metafórák meghatározásaMetafórák meghatározása

– SzervezetiSzervezeti– FunkcionálisFunkcionális– VizuálisVizuális

Site-stuktúrát fastruktúrában Site-stuktúrát fastruktúrában szövegesen szövegesen


Navigációs utakNavigációs utak Metafórák és tartalom Metafórák és tartalom

összekapcsolásaösszekapcsolása

Tervdokumentáció!Tervdokumentáció!


Vizuális tervezésVizuális tervezés OldalelrendezésOldalelrendezés


Tervvázlatok készítéseTervvázlatok készítése Prototípus készítésPrototípus készítés

Dokumentáció!Dokumentáció!

Documents

Nagy website-k tervezési megfontolásoklpeter/E-business/7_nagy_web-site.pdf · Web építész gyakorlott technikai személy –webtechnológia (webszerverek, HTML, JavaScript, Java,