1 / 54

Website ergonómia

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

aderes
Download Presentation

Website ergonómia

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related