web - szerkeszt és módszertana

103
1 Web-szerkesztés módszertana - ELTE IK, Multimédia Sáv -

Upload: yves

Post on 08-Jan-2016

29 views

Category:

Documents


2 download

DESCRIPTION

Web - szerkeszt és módszertana. - ELTE IK, Multimédia Sáv -. Emlékeztető. Határidők, követelmények Keresőoptimalizálási feladat feltöltési határideje: 2008. szeptember 29., Hétfő 12:00. Céges weblap/logó/arculati terv/ SEO napló feltöltési határideje: 2008. december 1., hétfő 12:00 - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Web - szerkeszt és módszertana

1

Web-szerkesztés módszertana

- ELTE IK, Multimédia Sáv -

Page 2: Web - szerkeszt és módszertana

2

Emlékeztető

Határidők, követelmények Keresőoptimalizálási feladat feltöltési határideje:

2008. szeptember 29., Hétfő 12:00. Céges weblap/logó/arculati terv/ SEO napló

feltöltési határideje: 2008. december 1., hétfő 12:00

Utolsó héten mindenkinek be kell mutatnia a munkáját (ajánlott jegy és értékelés)

Aki határidőre nem tölt fel anyagot/vagy nem éri el az elégséges szintet, az nem kaphat jegyet.

Végső javítás határideje: 2008. december 19., péntek 12:00

Page 3: Web - szerkeszt és módszertana

3

Miről lesz szó a félév során?

Ergonómia, marketing, céges weboldalak specialitása

Stíluslapok használata (elmélet), tippek és trükkök

Stíluslapok használata WYSIWYG szerkesztőben

Kódszintű szerkesztőprogramok lehetőségei A Dreamweaver program használata Grafikai programok használata

arculattervezési és logó tervezési feladatokhoz

Page 4: Web - szerkeszt és módszertana

4

Ajánlott irodalom

Jakob Nielsen: Web-design http://www.webreference.com/greatsite.html http://www.usability.gov/pdfs/guidelines.htm http://www.useit.com/ http://weblabor.hu/

Page 5: Web - szerkeszt és módszertana

5

Ergonómiai elvek

Web-fejlesztés előadáson már szerepelt A prezentációk tartalma elérhető a Web-

szerkesztés portálon (PDF formátumban) Tartalma:

Oldaltervezés, platformfüggetlenség, válaszidők, linkek használata, stíluslapok használata, framek, tartalomtervezés, multimédia, metaforák, navigáció, keresési fajták, hátrányos helyzetű felhasználók, nemzetköziség, webreklám, keresőoptimalizálás

Page 6: Web - szerkeszt és módszertana

6

Ergonómia

Az ergonómiai elvek is változnak a kutatások megdöntenek/vagy

megerősítenek bizonyos állításokat http://www.usability.gov/pdfs/guidelines.html

Ingyenesen elérhető, nagyon jó kutatási anyag,rengeteg hasznos irányelvvel

Page 7: Web - szerkeszt és módszertana

7

Felhasználói élmény

Page 8: Web - szerkeszt és módszertana

8

Felhasználói élmény

Kéretlen ablakok / grafikák mellőzése A kéretlenül megjelenő felbukkanó (pop-up) ablakok

frusztrálják a felhasználókat Hitelesség

Jól használható Gyakran ismételt kérdések gyűjtemény biztosítása

A site felépítése logikus Idézetek és referenciák szerepeltetése A készítők nem névtelenek, kapcsolatba lehet velük

lépni Profi arculat A régebbi tartalmak is elérhetőek Aktuális híreket tartalmaz Hiteles oldalakra linkel, és hiteles oldalakról linkelnek

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 9: Web - szerkeszt és módszertana

9

Felhasználói élmény

Feladatmegoldások sorrendje szabványos A site egészén belül az adott feladatokat

ugyanolyan módszerrel kelljen megoldani

Rossz példa:

A dátum kiválasztása eltérő módon történik az egyes aloldalakon

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 10: Web - szerkeszt és módszertana

10

Felhasználói élmény

A számítógépben rejlő előnyös lehetőségek kihasználása Bízzuk a számítógépre azon feladatokat,

amelyeket el tud végezni, hogy a felhasználónak csak azokra kelljen koncentrálnia, amelyeknél emberi beavatkozás szükséges.

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 11: Web - szerkeszt és módszertana

11

Felhasználói élmény

Ne kelljen a felhasználónak emlékeznie korábbi oldalakon lévő információra Például termékek

összehasonlításánál a kiválasztott termékek leírását lehessen egymás mellett/alatt megjeleníteni

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 12: Web - szerkeszt és módszertana

12

Felhasználói élmény

Figyelmeztetés időtúllépésre (time-out) Figyelmeztetni kell a felhasználót mielőtt lejár a

munkamenete, hogy megakadályozhassa a kiléptetést.

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 13: Web - szerkeszt és módszertana

13

Felhasználói élmény

Adatok megjelenítése olyan formában, amelyet már nem kell konvertálni A felhasználói kör számára optimális

formátumban kell az adatokat megjeleníteni. Ha az adott oldalt eltérő nemzetiségű felhasználók látogatják, több formátumot is használni kell. (pl. C, F)

Idő megadása esetén az amerikai látogatók „nem szeretik” a 24:00-s megadást.

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 14: Web - szerkeszt és módszertana

14

Felhasználói élmény

Olyan formában adjuk az információt, amely a felhasználói szokásoknak megfelel Képernyőn / vagy nyomtatás után olvasná el a

felhasználó az adott dokumentumot? A dokumentum mérete meghatározó

Általában az 5 oldalnál méretesebb (vagy komplexebb, jegyzetelést kívánó) dokumentumokat már kinyomtatják a felhasználók

A felhasználás módja is fontos Kutatással, prezentációval kapcsolatos

információkat inkább nyomtatunk, a szórakoztató jellegű írásokat on-line olvassuk

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 15: Web - szerkeszt és módszertana

15

Felhasználói élmény

Jelezni kell, ha a felhasználónak várnia kell 10 mp-nél rövidebb ideig tartó várakozásnál egy

homokóra ikon is megteszi Egyébként folyamatjelzővel (progress bar)

lehetne jelezni a folyamat előrehaladtát. Ha a folyamat tovább tart, mint 1 perc, akkor

egy szolid hanghatással is lehet jelezni a felhasználónak

A hosszú letöltési időket is jelezni kell

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 16: Web - szerkeszt és módszertana

16

Felhasználói élmény

Jól nyomtatható oldalakat kell létrehozni A nem megfelelő

design miatt a tartalom egy része lemaradhat a nyomtatott változatról

Forrás: http://www.usability.gov/pdfs/guidelines.htm

A szöveg jobb oldali része levágásra kerül

Page 17: Web - szerkeszt és módszertana

17

Felhasználói élmény

Nyomtatás felkínálása A letölthető / nyomtatható változatra mutasson

link

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 18: Web - szerkeszt és módszertana

18

Felhasználói élmény

Ne kelljen olvasás közben mással is foglalkoznia a felhasználóknak Ha például emlékeznünk kell korábbi lapokon

látott információkra, akkor lassabban olvasunk Felhasználói segédlet biztosítása

A tapasztalatlan felhasználók, illetve a site-ra elsőként belépő felhasználók számára érdemes a site tartalmával, illetve a navigációval kapcsolatos segédleteket elhelyezni.

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 19: Web - szerkeszt és módszertana

19

Page 20: Web - szerkeszt és módszertana

20

Hardver és szoftver

Page 21: Web - szerkeszt és módszertana

21

Hardver, szoftver

A legelterjedtebb böngészőkre kell fejleszteni, arculatot készíteni, tesztelni Mik a legelterjedtebb böngészők?

Idővel és földrajzi hellyel is változik http://www.w3schools.com/browsers/

browsers_stats.asp

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 22: Web - szerkeszt és módszertana

22

Ugyanazon weblap különböző platformokon megtekintve

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 23: Web - szerkeszt és módszertana

23

Hardver, szoftver

Nem feltételezhetjük, hogy minden felhasználó ugyanolyan tudású böngészőprogramot, vagy éppen alapbeállítást használt Van aki kikapcsolja a hátterek megjelenítését,

vagy az alap betűméretet felnagyítja Az operációs rendszer is számít.

Ugyanolyan típusú, verziójú böngészőprogram máshogy viselkedhet különböző operációs rendszereken

Az átlagos internetkapcsolat sebességét is figyelembe kell venni

A leggyakrabban használt felbontás 1024x768

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 24: Web - szerkeszt és módszertana

24

Kezdőlap szerepe

Page 25: Web - szerkeszt és módszertana

25

Kezdőlap

Bármelyik aloldalról vissza lehessen jutni a kezdőlapra Bevett szokás, hogy a – minden oldalon oldalon

azonos helyen lévő - cég/szervezet logó tölti be a link szerepét

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 26: Web - szerkeszt és módszertana

26

Kezdőlap

Minden fontos információ szerepeljen rajta Nyugodtan lehet szelektálni az elérhető

tartalmak között azok fontossága szerint

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Minden fő kategória szerepel a kezdőlapon

Page 27: Web - szerkeszt és módszertana

27

Kezdőlap

Pozitív benyomást kell kelteni A kezdőlap jó fokmérője az egész site

tartalmának/minőségének Egyik kutatásban a felhasználóknak csúcs

minőségű web-siteokat kellett gyűjtenie. Az esetek felében a felhasználók csak a kezdőlapot nézték meg, ez alapján alkottak véleményt.

Közölni kell a website célját, értékeit Miben különbözik a site a konkurensektől? Mindezt röviden kell leírni. Jól csengő szlogen

(tagline)

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 28: Web - szerkeszt és módszertana

28

Kezdőlap

Minél kevesebb prózai szöveg A felhasználó kulcsszavakat keres, címsorokat

tekint át, hogy képe legyen arról, miről szól a site.

A hosszú, folyó szöveg ezt nem segíti

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 29: Web - szerkeszt és módszertana

29

Kezdőlap

A kezdőlap és az aloldal szerkezete / meg-jelenése ne térjen el nagyon egymástól Ez zavaró lehet a felhasználóknak

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 30: Web - szerkeszt és módszertana

30

Kezdőlap

Lehetőleg egy képernyőoldalnyi legyen a kezdőlap Ami nem szerepel a kezdőlap látható részén, az

sok felhasználó számára örökre láthatatlan marad

Ha a felhasználók számára nem kelti fel az érdeklődést a látható rész, nem fogják legördíteni a tartalmat

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 31: Web - szerkeszt és módszertana

31

Kezdőlap

A website-on történt változásokat jelezni kell a kezdőlapon Kerüljük, hogy a felhasználót kellemetlen

meglepetés érje a változások miatt (új design, megváltozott navigáció, stb.)

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 32: Web - szerkeszt és módszertana

32

Kezdőlap

A kezdőlapon szereplő panelek megfelelő szélességűek legyenek A panelek szélessége nagyon fontos a site

elrendezésének megértésében

Forrás: http://www.usability.gov/pdfs/guidelines.htm

A panelek elég szélesek ahhoz, hogy a linkeket és navigációs infokat tartalmazzák, de eléggé keskenyek ahhoz, hogy ne uralják az arculatot.

Page 33: Web - szerkeszt és módszertana

33

Oldal szerkezete

Page 34: Web - szerkeszt és módszertana

34

Oldal szerkezet

Ne legyen túlzsúfolt az oldal Az

információkeresést megnehezíti a túlzsúfolt oldalszerkezet

A kulcsszavaknak szembetűnőknek kell lennie

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 35: Web - szerkeszt és módszertana

35

Oldal szerkezet

A fontos, kattintható elemeket ugyanarra a helyre, közel az oldal tetejéhez kell elhelyezni

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 36: Web - szerkeszt és módszertana

36

Oldal szerkezet

A legfontosabb elemek helye felül, középen van Itt kezdik az oldal áttekintését a felhasználók,

majd balról jobbra pásztáznak

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 37: Web - szerkeszt és módszertana

37

Oldal szerkezet

Elemek könnyű összehasonlítását tegyük lehetővé A hasonlóságok/különbségek, kapcsolatok jól

láthatók legyenek

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 38: Web - szerkeszt és módszertana

38

Oldal szerkezet

Fontosság megkülönböztetése Az elemeket fontosságuk sorrendjében kell

elhelyezni (felül a legfontosabb)

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Az, hogy mi a legfonto-sabb a látogatóknak kiderülhet kérdőíves felmérésből, logok analizálásából, interjúk-ból.

Page 39: Web - szerkeszt és módszertana

39

Oldal szerkezet

Az elemeket vizuális egymáshoz kell igazítani (függőlegesen/vízszintesen) Szövegblokkok, felsoroláslisták,

választókapcsolók, űrlapelemek esetén nagyon fontos a megfelelő igazítás

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Rossz példa

Jó példa

Page 40: Web - szerkeszt és módszertana

40

Oldal szerkezet

Folyékony arculat A monitor felbontásához igazodjon a design Elkerülhető, hogy a rendelkezésre álló terület

kihasználásra kerülhessen

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 41: Web - szerkeszt és módszertana

41

Oldal szerkezet

Illuzió, hogy nem kell görgetni Ne használjunk olyan hatásokat/elemeket ,

amelyek azt az illúziót keltik, hogy az oldal tetején/alján vagyunk

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Úgy tűnik, az oldal tetején vagyunk

Úgy tűnik, az oldal alján vagyunk

Page 42: Web - szerkeszt és módszertana

42

Oldal szerkezet

Megfelelő oldalhossz alkalmazása A kezdőlap, navigációs oldal, on-line olvasható

tartalom hossza rövidebb legyen Hosszabb oldalak használata javasolt:

Ha nem akarjuk az olvasást megszakítani Meg akarjuk tartani a dokumentum struktúráját Kevesebb oldalt akarunk karbantartani Nyomtatásra / letöltésre szánjuk

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 43: Web - szerkeszt és módszertana

43

Navigáció

Page 44: Web - szerkeszt és módszertana

44

Navigáció

Ne irányítsuk a felhasználót navigáció nélküli oldalra Ha új ablakban nyitunk meg egy oldalt, a

böngésző Vissza gombja nem működik Zavaró lehet a felhasználónak, főleg ha teljes

méretben nyílik meg az ablak Ebben az esetben Ablak bezárása linket

érdemes elhelyezni

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 45: Web - szerkeszt és módszertana

45

Navigáció

Hosszú oldalak esetén legyen megjelenítve tartalom menü is Ezzel a felhasználók a lap megfelelő részére

ugorhatnak. Fontos, hogy legyen Vissza link is

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 46: Web - szerkeszt és módszertana

46

Navigáció

Fülecskék helyes alkalmazása A fülecskék az oldal tetején legyenek Egyértelmű legyen hogy ezek kattintható fülek

(minél jobban hasonlítsanak az igaziakhoz)

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Rossz példák

Jó példa

Page 47: Web - szerkeszt és módszertana

47

Listák

Page 48: Web - szerkeszt és módszertana

48

Listák

Listák, feladatok logikus sorrendben legyenek A listák, linkek, fülek, navigációs elemek

sorrendje logikus (fontosságot követő) legyen Ha nincs kitüntetett sorrend, akkor ábécé

sorrend, vagy sorszám szerint kell megjeleníteni az elemeket

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Ha U.S.A-beli látogatók vannak többségben, legyen az az első

Page 49: Web - szerkeszt és módszertana

49

Listák

Folyamatos szöveg helyett listát használjunk, ahol lehet

A pásztázást segíti a listába rendezés

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 50: Web - szerkeszt és módszertana

50

Listák

A listák elején legyen egy bevezető címsor is Sokat segít abban, hogy a felhasználó eldöntse

mi a kapcsolat a listaelemek között

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 51: Web - szerkeszt és módszertana

51

Listák

Felsoroláslista, számozott lista helyes alkalmazása

Egyenrangú elemeknél használjunk felsoroláslistát

Utasítások / feladatlisták jobb ha sorszámozva vannak

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 52: Web - szerkeszt és módszertana

52

Űrlapok

Page 53: Web - szerkeszt és módszertana

53

Űrlapok

Kötelező / opcionális elemek konzekvens jelölése Egyes kutatások szerint a félkövér jelölés jobb a

felhasználóknak, mint a színnel történő megkülönböztetés

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 54: Web - szerkeszt és módszertana

54

Űrlapok

Nyomógombok szerepét egyértelműen jelezze a feliratuk

Előző, Tovább, Elküld, Alaphelyzet, Frissít, Keres Minden oldalon ugyanazt jelentse!

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 55: Web - szerkeszt és módszertana

55

Űrlapok

Az adatbeviteli mezőket megfelelő (beszédes) címkékkel kell ellátni

Jól kell tagolni, hogy a címke és a mező elkülönüljön

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Itt túl távol van a címke

Page 56: Web - szerkeszt és módszertana

56

Űrlapok

Ugyanazt az információt ne kérjük be többször

Felesleges lassítjuk a felhasználót, ha például a lakcímét többször kell megadnia

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 57: Web - szerkeszt és módszertana

57

Űrlapok

Látható legyen a bevitt adat Gördítés nélkül láthatóvá kell tenni a bevitt

információt

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 58: Web - szerkeszt és módszertana

58

Űrlapok

Látható legyen a bevitt adat Gördítés nélkül láthatóvá kell tenni a bevitt

információt

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 59: Web - szerkeszt és módszertana

59

Űrlapok

Ellenőrizzük a bevitt adatokat Elgépeléseket / tévedéseket jelezni kell a

felhasználóknak (pl. hiányzó @ jel e-mail címben, február 31, stb.)

Az összetett beviteli mezőket érdemes szétszabdalni

A mértékegységeknél is érdemes több beviteli mezőt használni

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 60: Web - szerkeszt és módszertana

60

Űrlapok

Ne váltogassunk a beviteli módok között Vagy egér, vagy billentyűzet A váltás lassítja a folyamatot

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Jó példa

Rossz példa

Page 61: Web - szerkeszt és módszertana

61

Űrlapok

Sose használjunk önállóan egy választókapcsolót Teljesen szokatlan a felhasználók számára ez a

választási mód

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 62: Web - szerkeszt és módszertana

62

Címkék elhelyezése űrlapokban

Melyik a legjobb elrendezés az alábbiak közül?

http://www.uxmatters.com/MT/archives/000107.php

Címkék bal oldalon – balra igazítva Címkék bal oldalon – jobbra igazítva

Címkék fent

Page 63: Web - szerkeszt és módszertana

63

Címkék elhelyezése űrlapokban

Felülre igazított címkék Gyorsabb kitöltést eredményez Több függőleges helyet igényel Az üres helyeknek, kontrasztnak nagy szerepe van Lokalizációs előnyök

http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

Page 64: Web - szerkeszt és módszertana

64

Címkék elhelyezése űrlapokban

Jobbra igazított címkék Tiszta a címke/mező hozzárendelés Kevesebb függőleges helyet igényel Az olvashatóság csökken, mert nem azonos

pozícióban kezdődnek a szövegek Gyors kitöltési idő

http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

Page 65: Web - szerkeszt és módszertana

65

Címkék elhelyezése űrlapokban

Balra igazított címkék A címke pásztázását elősegíti Gyengül az asszociációs a címke-mező között Kevesebb függőleges helyet igényel A címke hosszúságának változása felboríthatja az

arculatot

http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

Page 66: Web - szerkeszt és módszertana

66

Címkék elhelyezése űrlapokban

Szemmozgásvizsgálatok eredménye:

http://www.uxmatters.com/MT/archives/000107.php

Címkék bal oldalon – balra igazítva Címkék bal oldalon – jobbra igazítva

Címkék fent Címkék fent - félkövér

Page 67: Web - szerkeszt és módszertana

67

Címkék elhelyezése űrlapokban

Címke elhelyezése A mező feletti elhelyezés (esetek többségében)

szerencsésebb, mivel nem kell külön a címkét és a mezőt pásztázni

Ügyelni kell a vizuális elkülönítésre Címke igazítása

A balra elhelyezett, balra igazított címke kognitív túlterhelést jelent

Ha nem lehet fent a címke, inkább jobbra igazított legyen

Félkövér címkék A sima címkék jobbak Ha mégis félkövér a címke, akkor az űrlapmező

szegélye ne legyen nagyon markáns

http://www.uxmatters.com/MT/archives/000107.php

Page 68: Web - szerkeszt és módszertana

68

Címkék elhelyezése űrlapokban

Legördülő menük Vonzzák a szemet, ezért fontos(abb) adatok

elhelyezésére használjuk, vagy sorrendben helyezzük a fontosabb mezők alá

Címke és a legördülő menük A legördülő menü alap értéke lehet maga a címke

http://www.uxmatters.com/MT/archives/000107.php

Page 69: Web - szerkeszt és módszertana

69

Grafika

Page 70: Web - szerkeszt és módszertana

70

Grafika

A kattintható képeken címkéket kell elhelyezni

A tapasztalatlan felhasználók nem gondolják, hogy a kép egy részére is lehet kattintani

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 71: Web - szerkeszt és módszertana

71

Grafika

Logo szerepeltetése A Logo szerepeltetése (ugyanazon a helyen,

minden oldalon) biztosítja a felhasználót arról, hogy nem hagyta el a site-ot.

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 72: Web - szerkeszt és módszertana

72

Grafika

A menüt ne lehessen bannerrel összekeverni A dekorációnak, vagy hirdetésnek tűnő

grafikákról a felhasználók többsége nem vesz tudomást

Forrás: http://www.usability.gov/pdfs/guidelines.htm

Page 73: Web - szerkeszt és módszertana

73

Weblapkészítés céges környezetben

Intranet / Extranet fejlesztés

Page 74: Web - szerkeszt és módszertana

74

Intranet

más célok, felhasználók, technikai korlátok dolgozó központú szemlélet általában 10 -100 -szoros információ-

mennyiséget tartalmaz, mint a külső weboldal

platform szabványosításának lehetősége egységes op. rendszer, böngésző típus,

böngésző verzió, felbontás speciális nyelvezet

szakszavak használhatóak

Page 75: Web - szerkeszt és módszertana

75

Extranet

Intranet kiterjesztése külső felhasználók számára biztonsági kérdések, speciális jogosultság

designban is jelezni kell a különbséget Különbségek az Intranethez képest

Itt már figyelni kell a különböző platformokra kisebb a sávszélesség

Page 76: Web - szerkeszt és módszertana

76

Extranet

Extranet Internet a látogatók már valamilyen kapcsolatban állnak

a céggel speciális okokból használják itt már felesleges a marketinget erőltetni

Page 77: Web - szerkeszt és módszertana

77

Látogatottság / Sikeresség

Page 78: Web - szerkeszt és módszertana

78

Sikeres oldal

ha a felhasználók rendszeresen visszatérnek

Miért? Minőségi tartalom Gyakran frissített Gyors letöltési sebesség Egyszerű használhatóság On-line média előnyeit jól használja ki

Page 79: Web - szerkeszt és módszertana

79

Interaktivitás

az email címet tüntessük fel lehetővé tehetjük a közvetlen üzenet

küldést a felhasználók kérdéseiből és a válaszokból

állítsunk össze FAQ-t

Page 80: Web - szerkeszt és módszertana

80

TÉVHITEK és Tipikus hibák a céges honlapok esetén

http://www.marketingcommando.hu/cikkek/top-10-honlap-hiba.html

Page 81: Web - szerkeszt és módszertana

81

Tévhitek

A weboldal befejezhető 2 hét/1 hónap / 1 év / stb. alatt… egy weblap sosem készül el teljesen rendszeresen új információkat kell szerepeltetni nem elégedhetünk meg egy tájékoztató brosúra

szerepeltetésével

Page 82: Web - szerkeszt és módszertana

82

Tévhitek

A weboldal olcsó egyes céges az off-line hirdetésekre rengeteg

pénzt költenek, de az on-line megjelenésre nem szánnak elég pénzt, sokszor nem bízzák szakemberre

Page 83: Web - szerkeszt és módszertana

83

Tipikus hibák Céges honlapoknál

Stratégia nélküli honlap Miért kell?

Hogy nekünk is legyen (ROSSZ megközelítés) Üzleti célnak kell lennie mögötte (mérhető)

Új ügyfelek szerzése Régi vevőkkel folyamatos kapcsolattartás Terméket / szolgáltatást eladni a weblapon

Célközönség? Fő üzenet?

http://www.marketingcommando.hu/cikkek/top-10-honlap-hiba.html

Page 84: Web - szerkeszt és módszertana

84

Tipikus hibák Céges honlapoknál

Hivatalos honlap Internet kompatibilis szöveg kell (az internet más

médium, mint a sajtó) Közérthető, szleng- és szakkifejezés mentes

szöveg kell Darabolni kell a szöveget

Elektronikus prospektus Brossúra site Nem igazán térnek vissza a látogatók Hiányzó interaktivitás

http://www.marketingcommando.hu/cikkek/top-10-honlap-hiba.html

Page 85: Web - szerkeszt és módszertana

85

Tipikus hibák Céges honlapoknál

Arc nélküli cég Hasznos lenne tudni, kik vannak a honlap mögött

(fényképek, bemutatkozás) Bizalomépítés

Én Én Én! Én, mi, termékünk, rólunk, nálunk Ön, önnek, vevőnk, partnerünk

http://www.marketingcommando.hu/cikkek/top-10-honlap-hiba.html

Page 86: Web - szerkeszt és módszertana

86

Tipikus hibák Céges honlapoknál

Hasznos tartalom = 0 A tartalom teheti igazán sikeressé a weblapot

Túl sok a jóból Intrók, animáció hegyek, hangos oldalak Arra a platformra kell tervezni, amely a

legelterjedtebb a célközönségben Statisztikákból kiderül

Labirintus Kusza navigáció A látogató fejével kell gondolkodni

Page 87: Web - szerkeszt és módszertana

87

Tipikus hibák Céges honlapoknál

A régi vevőre ki gondol? Tud reklamálni? Ügyfélszolgálatot elérni?

Támogatást kapni? Ha kész az oldal, hátradőlhetünk

Nincs marketingterv sokszor a dolgozók névjegykártyáján sem

szerepel a honlap címe a www.cegnev.hu konvenció betartása sem

megoldás Eszközök: Banner, linkcsere, keresőre

optimalizálás, off-line marketing, direct mail (DM), szórólap, nyereményjáték

Page 88: Web - szerkeszt és módszertana

88

Hasznos Tanácsok a Keresőrobotokkal kapcsolatban

Ajánlott linkek: http://webni.innen.hu/

http://www.marketingcommando.hu/cikkek/honlap-latogatok-keresovel.html

Page 89: Web - szerkeszt és módszertana

89

Top 30 probléma

A kutatások szerint a keresési lista első 30 helyezettjét nézi át a felhasználók többsége

Egy cégnek létfontosságú lehet a Top 30-ba bekerülés (és bentmaradás)

Page 90: Web - szerkeszt és módszertana

90

Formai, tartalmi irányelvek (Google)

Szöveges linkek, minden oldal legyen elérhető link által

Oldaltérkép használata Hasznos, információkban gazdag oldal Kulcsszavak átgondolt szerepeltetése (ne képeken

legyen FLASH,Javascript szintén gondot okoz

ALT tagek megfelelően kitöltöttek Törött linkek ellenőrzése Dinamikus weboldalak esetén minél kevesebb

paraméter legyen a linkekben

Page 91: Web - szerkeszt és módszertana

91

Technikai irányelvek (Google)

Szöveges böngészővel ellenőrizni az oldalt (a keresőrobot is kb. annyit lát az oldalból)

A keresőrobot bejárhassa az oldalt session id, vagy egyéb argumentum nélkül is.

Webszerver: "If-Modified-Since" HTTP header (változott-e a tartalom)

URL-ekben kerülendő az &id= argumentum Robots.txt fájl létrehozása

Gyökérben. Ebben adjuk meg, hogy a keresőrobot mit indexelhet és mit nem. META tageket is használhatunk.

Példa:User-agent: * Disallow: /cgi-bin/ Disallow: /images/

Page 92: Web - szerkeszt és módszertana

92

Ha kész az oldal (Google)

Oldal bejelentése http://www.google.com/addurl.html

Page 93: Web - szerkeszt és módszertana

93

Ha kész az oldal (Google)

Oldaltérkép bejelentésehttp://www.google.com/webmasters/sitemaps/login?hl=en

Oldaltérkép előállítása: http://www.auditmypc.com/site-maps.asp

Page 94: Web - szerkeszt és módszertana

94

Ha kész az oldal (Google)

Partneroldalakat értesíteni, hogy on-line elérhető az oldal

Tematikus katalógusokba be kell jelenteni

Page 95: Web - szerkeszt és módszertana

95

Keresőoptimalizálás

Forrás: http://webni.innen.hu/

Jól megírt weboldal• Minden szöveges információt el lehessen érni

keresőbarát url-eken keresztül- Fájl és könyvtárnevek fontosak

Domain.hu/Oldal.php?fdskjdfkdfjhi9rejkf Domain.hu/termek/kategoria/oldal.html

Linknépszerűség növelése Minél több bejövő link legyen (kivéve, ha

„büntetett” webhelyekről jön)

Page 96: Web - szerkeszt és módszertana

96

Keresőoptimalizálás 2

Forrás: http://webni.innen.hu/

Webhely-optimalizálás Kulcsszavak megfelelő kiválasztása és

elhelyezése Fontos hely: title, heading, elérési útvonal,

nyitólap, azon oldalak, amelyekre több külső link mutat

Link optimalizálás Kimenő linkek is fontosak. Az adott webhelyet

körülvevő linkhálózat is fontos a rangsorolásnál.

Page 97: Web - szerkeszt és módszertana

97

Keresőoptimalizálás 3

Forrás: http://webni.innen.hu/

Nagyipari kereső-optimalizálás A vállalkozás nyereségessége és a weboldal

látogatottsága között egyenes összefüggés van, akkor sokszor „manipulációra” kényszerítik a webmestert.

Rosszul sülhet el

Page 98: Web - szerkeszt és módszertana

98

Keresőrobot manipuláció (illegális)

Cloaking (álcázás): a webszerver a látogató referrer-ének vizsgálata

alapján a látogatók bizonyos körének más oldalat mutat, mint egyébként

Más oldalt lát a keresőrobot, mint a látogató Web spam (kereső spam)

Keresőprogram félrevezetése Minél több, az adott oldalra mutató link létrehozása,

amelyben kulcsszó is szerepel Lejárt domainnevek megvásárlása, és újraaktiválása Visszaélés mások oldalaival :

Fórumokban, hozzászólásokban, Wiki-ben

Rejtett szövegek, tartalomhoz nem kapcsolódó szavak, aldomain (tartalom duplikálására)

Page 99: Web - szerkeszt és módszertana

99

Legális lehetőségek

Kulcsszó megvétele ha valaki rákeres az adott szóra, a keresési

eredmények előtt vagy mellett megjelenik a reklám (minden oldalon)

Keresőprogram függő, hogy ugyanazt a kulcsszót többen is megvehetik-e

Konkurens cég vagy terméknevének megvásárlása Konkurens cég esetén is a saját reklámod látszik

Megjelenésért/átkattintásért kell fizetni

Page 100: Web - szerkeszt és módszertana

100

Statisztika

Webszerver naplókból (log) sok minden kiderül (de ehhez jól kell beállítani)

A logok analízálására számos (platform függő) megoldás létezik.

Használhatunk ingyenes látogatottsági statisztikákat is

Ha fontos a megbízhatóság, auditált adatokat kell biztosítani (pl. webaudit, auditonline). pár tízezer Ft / hó

Page 101: Web - szerkeszt és módszertana

101

Statisztika 2

Rengeteg hasznos információ kinyerhető Keresztlátogatottság (ide- oda kattintás) Legnépszerűbb oldalak Honlapon belüli mozgás Hivatkozó oldalak Napi/heti/havi/éves látogatottsági adatok

Hasznos eszköz Cookie (süti)

Felhasználó számítógépén található. Számos adat eltárolható benne.

Adatvédelmi szempontból sokszor aggályos

Page 102: Web - szerkeszt és módszertana

102

Statisztika (eXtreme tracking)http://extremetracking.com

Page 103: Web - szerkeszt és módszertana

103

Vége