Website ergonómia

1

Website ergonómiaHogyan tedd hatékonnyá weboldalad?

Gombos Zsolt

1.

Megszokások

2009. Május 9. 2

Mi az ergonómia?

Kilincs magassága

Szék magassága

Autó műszerfala

2009. Május 9. 3

Mi a website ergonómia?

• A felhasználói kényelem speciálisan az internetes világra értelmezett formája

• Azaz:– Használható– Logikus– Egyszerű– Átlátható– Gyors

2009. Május 9. 4

2.

ÖssznépiWebergonómia Teszt

2009. Május 9. 5

17/01

Az oldal letöltés sebessége

2009. Május 9. 6

Az oldal mérete:>100 kB

de inkább >60 kB

Hidd el:a látogató mindig siet.

17/01

Az oldal letöltés sebességehttp://tools.pingdom.com/

2009. Május 9. 7

17/01

Az oldal letöltés sebessége

2009. Május 9. 8

„Igen, de a sávszélességfolyamatosan nő! Hol vannak már azok a modemes idők?!”

17/01

Az oldal letöltés sebessége

A weboldalam 5 másodpercen belül betöltődik.

2009. Május 9. 9

17/02

2009. Május 9. 10

Kontraszt

17/02

2009. Május 9. 11

Kontraszt

A legjobb megoldás:

Fehér alapon

fekete szöveg

17/02

Kontraszt

A háttér és a szöveg között a megfelelő a kontraszt a

weboldalamon.

2009. Május 9. 12

17/03

Betűtípus:

Georgia Arial Verdana Tahoma Courier New Trebuchet MS

Impact Times New Roman

2009. Május 9. 13

Betűk

17/03

Betűk

2009. Május 9. 14

Betűméret / betűköz:

A felhasználó szabadon változtathassa!

17/03

BetűkAz általam használt betűtípus bárki

által megjeleníthető ÉS lehetőség van a betűméret tetszőleges

megválasztására.

2009. Május 9. 15

17/04

Flash animációk

2009. Május 9. 16

„200 ezerér’ csináltattam az intrót a weboldal elé,

az emberek várják csak ki!”

Nem fogják kivárni.

17/04

Flash animációk

Sőt.

2009. Május 9. 17

17/04

Flash animációkA weboldalam nem tartalmaz

FELESLEGES

Flash animációkat.

2009. Május 9. 18

17/05

Képek mérete + képaláírások

2009. Május 9. 19

Optimális esetben egy kép több méretben is elérhető:

NÉZŐKÉP

+ KÖZEPES MÉRET

+ TELJES MÉRET

17/05

Képek mérete + képaláírások

2009. Május 9. 20

17/05

Képek mérete + képaláírások

Képaláírás (ALT tag)

• Tájékoztatja a gyengén látó felhasználókat a kép tartalmáról

• A kereső robotoknak is hasznos információt nyújt

2009. Május 9. 21

17/05

Képek mérete + képaláírások

A weboldaladon megfelelőek a képek méretei és tartalmaznak magyarázó

(alternatív) szöveget.

2009. Május 9. 22

17/06

Hiba - 404?

2009. Május 9. 23

17/06

Hiba - 404?

• Legyen hibaoldalad!

• Segítsd a tájékozódást!

• Értesülj róla!

2009. Május 9. 24

17/06

Hiba - 404?

Van 404-es hibaoldalam,és van rajta a felhasználónak szánt

értékes tartalom.

2009. Május 9. 25

17/07

Logó

2009. Május 9. 26

• Állandó, jól látható helyen legyen (BF)

• Hivatkozzon a nyitóoldaladra

Véletlenek nincsenek:

17/07

Logó

2009. Május 9. 27

17/07

Logó

A logóm, a weboldal bal felső részében helyezkedik el, és linkel a

nyitóoldalamra.

2009. Május 9. 28

17/08

Szlogen

2009. Május 9. 29

• Legyen jól látható helyen

• Ne legyen több pár szónál

• Mondja el mivel foglalkozol, és mitől vagy más mint a konkurenseid

• Keresőoptimalizálás szempontjából is hasznos lehet

Véletlenek nincsenek:

17/08

Szlogen

A szlogenem rövid, tömör és jó kifejezi mitől vagyok más mint a

konkurensek, és szerepel is a weboldaladon.

2009. Május 9. 30

17/09

5 másodperces szabály

2009. Május 9. 31

Ennyi idő alatt derüljön ki egy új látogatónak, miről szól az oldal

Domain + logó/szlogen + vezérkép + főcím + menüpontok

17/09

5 másodperces szabály(Szerintem…)

Egy új látogatónak van esélye 5 másodpercen belül eldönteni miről

szól a weboldalam.

2009. Május 9. 32

17/10

Rólunk / Bemutatkozás

2009. Május 9. 33

• Unalmas menüpont, de fontos

• Ne az első menüpont legyen!

• De legyen ott a fő navigációban!

17/10

Rólunk / Bemutatkozás

Nem a „Cégünkről” az első menüpontom, de megtalálható a fő

navigációs elemek között!

2009. Május 9. 34

17/11

Elérhetőség

2009. Május 9. 35

• A legfontosabb kapcsolat-felvételi forma legyen állandóan látható

• Minél több mód legyen a kapcsolat-felvételre!

• Ne csak cégnév, hanem legyen fotó, és személynév is, külön elérhetőséggel

17/11

Elérhetőség

Fő elérhetőségeim folyamatosan látszódnak, de van neki külön

menüpont is, jól látható helyen.

2009. Május 9. 36

17/12

Fő navigációs sor (Őrangyal)

2009. Május 9. 37

• Alapkonvenció: Az emberek nem használnak olyan honlapokat, ahol nem ismerik ki magukat.

• A fő navigációs sor kötelezően állandó elem (majdnem) minden oldalon.

• Fő- és aloldalak következetes megkülönböztetése

• „Hol vagyok?”

17/12

Fő navigációs sor (Őrangyal)

2009. Május 9. 38

Webmorzsák: Ön itt áll!

17/12

Fő navigációs sor (Őrangyal)

A fő menüsorom, állandó helyen van, következetes felépítésű, és használok webmorzsákat!

2009. Május 9. 39

17/13

Oldalon belüli navigáció

2009. Május 9. 40

• Egyszerűen fogalmazz: Óriásplakátra szövegezz, ne regényt írj!

Vegye fel a kapcsolatot munkatársunkkal online! >>

17/13

Oldalon belüli navigáció

Egyszerű és tömör az oldalon belüli navigáció a weboldalamon.

2009. Május 9. 41

17/14

Linkek

2009. Május 9. 42

• Aláhúzott és következetesen eltér a szöveg színétől. Link >>• A már egyszer meglátogatott oldal színe más színű Link >>

17/14

Linkek

2009. Május 9. 43

Véletlenek nincsenek:

17/14

Linkek

A linkek jól elkülönülnek a szövegtől, és a már meglátogatott linkek színe

eltér a többitől.

2009. Május 9. 44

17/15

Aki keres az talál!

2009. Május 9. 45

• Legyen keresés! (kivéve ha…)• A séma egyszerű: Kereső mező és egy gomb: „keresés”• Felesleges: „Írja be a keresett kifejezést”• A keresés működjön! Releváns találatokat adjon!•Az oldal jobb felső részében legyen állandó elemként.

17/15

Aki keres az talál!

Van keresés funkció a weboldalon, jobb felül található, és releváns

találatokat ad.

2009. Május 9. 46

17/16

Főcímek

2009. Május 9. 47

•A neten nem olvasunk, hanem ÁTOLVASUNK. (szkennelünk)•Legyen leíró, tartalmazza az adott aloldal főbb kulcsszavait•Logikusan látszódjon a hierarchia•Használj <H1>, <H2> elemeket

17/16

Főcímek

Jól látható a fő és alcímek közötti hierarchia, a címek tartalmazzák az adott aloldal főbb kulcsszavait, és a

forrásban vannak <H1> elemek.

2009. Május 9. 48

17/17

Csinos URL-ek

2009. Május 9. 49

http://www.valami.hu/index.php?id=46

VAGY

http://www.valami.hu/online-marketing/

17/17

Csinos URL-ek

A weboldalon csinos URL-eket használok.

2009. Május 9. 50

Nos? Mennyi az annyi?

2009. Május 9. 51

Eredmények

2009. Május 9. 52

17 pont?

Meglepetés

2009. Május 9. 53

Csak 10.000 Ft+Áfa!!

Meglepetés

2009. Május 9. 54

+ + +

20.000 Ft+Áfa

tényleg csak nektek: