Website ergonómia

1. Website ergonómia Hogyan tedd hatékonnyá weboldalad? Gombos Zsolt

2. 1. Megszokások

3. Mi az ergonómia? Kilincs magassága Szék magassága Autó műszerfala

4. 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

5. 2.ÖssznépiWebergonómia Teszt

6. 17/01 Az oldal letöltés sebessége Hidd el: a látogató mindig siet. Az oldal mérete: >100 kB de inkább >60 kB

7. 17/01 Az oldal letöltés sebessége http://tools.pingdom.com/

8. 17/01 Az oldal letöltés sebessége „Igen, de a sávszélességfolyamatosan nő! Hol vannak már azok a modemes idők?!”

9. 17/01 Az oldal letöltés sebessége A weboldalam 5 másodpercen belül betöltődik.

10. 17/02 Kontraszt

11. 17/02 Kontraszt A legjobb megoldás: Fehér alapon fekete szöveg

12. 17/02 Kontraszt A háttér és a szöveg között a megfelelő a kontraszt a weboldalamon.

13. 17/03 Betűk Betűtípus: Georgia Arial VerdanaTahomaCourier New TrebuchetMSImpactTimes New Roman

14. 17/03 Betűk Betűméret / betűköz: A felhasználó szabadon változtathassa!

15. 17/03 Betűk Az á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.

16. 17/04 Flash animációk „200 ezerér’ csináltattam az intrót a weboldal elé, az emberek várják csak ki!” Nem fogják kivárni.

17. 17/04 Flash animációk Sőt.

18. 17/04 Flash animációk A weboldalam nem tartalmazFELESLEGES Flash animációkat.

19. 17/05 Képek mérete + képaláírások Optimális esetben egy kép több méretben is elérhető: NÉZŐKÉP + KÖZEPES MÉRET + TELJES MÉRET

20. 17/05 Képek mérete + képaláírások

21. 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

22. 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.

23. 17/06 Hiba - 404?

24. 17/06 Hiba - 404? • Legyen hibaoldalad! • Segítsd a tájékozódást! • Értesülj róla!

25. 17/06 Hiba - 404? Van 404-es hibaoldalam,és van rajta a felhasználónak szánt értékes tartalom.

26. 17/07 Logó • Állandó, jól látható helyen legyen (BF) • Hivatkozzon a nyitóoldaladra • Véletlenek nincsenek:

27. 17/07 Logó

28. 17/07 Logó A logóm, a weboldal bal felső részében helyezkedik el, és linkel a nyitóoldalamra.

29. 17/08 Szlogen • 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:

30. 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.

31. 17/09 5 másodperces szabály 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

32. 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.

33. 17/10 Rólunk / Bemutatkozás • Unalmas menüpont, de fontos • Ne az első menüpont legyen! • De legyen ott a fő navigációban!

34. 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!

35. 17/11 Elérhetőség • 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

36. 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.

37. 17/12 Fő navigációs sor (Őrangyal) • 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?”

38. 17/12 Fő navigációs sor (Őrangyal) Webmorzsák: Ön itt áll!

39. 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!

40. 17/13 Oldalon belüli navigáció • Egyszerűen fogalmazz: Óriásplakátra szövegezz, ne regényt írj! Vegye fel a kapcsolatot munkatársunkkal online! >> helyett: Kapcsolatfelvétel >> Vegye fel a kapcsolatot munkatársunkkal online! >>

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

42. 17/14 Linkek • 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 >>

43. 17/14 Linkek Véletlenek nincsenek:

44. 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.

45. 17/15 Aki keres az talál! • 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.

46. 17/15 Aki keres az talál! Van keresés funkció a weboldalon, jobb felül található, és releváns találatokat ad.

47. 17/16 Főcímek • 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

48. 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.

49. 17/17 Csinos URL-ek http://www.valami.hu/index.php?id=46 VAGY http://www.valami.hu/online-marketing/

50. 17/17 Csinos URL-ek A weboldalon csinos URL-eket használok.