Upload
aderes
View
36
Download
0
Embed Size (px)
DESCRIPTION
Website ergonómia. Hogyan tedd hatékonnyá weboldalad?. Gombos Zsolt. 1. Megszokások. Mi az ergonómia?. Kilincs magassága Szék magassága Autó műszerfala. Mi a website ergonómia?. A felhasználói kényelem speciálisan az internetes világra értelmezett formája Azaz: Használható Logikus - PowerPoint PPT Presentation
Citation preview
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: