Web - szerkeszt és módszertana

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

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

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

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/

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

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

7. Felhasználói élmény

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 rá Forrás: http://www.usability.gov/pdfs/guidelines.htm

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

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

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

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

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

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

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

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 A szöveg jobb oldali része levágásra kerül Forrás: http://www.usability.gov/pdfs/guidelines.htm

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

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

20. Hardver és szoftver

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

22. Ugyanazon weblap különböző platformokon megtekintve Forrás: http://www.usability.gov/pdfs/guidelines.htm

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

24. Kezdőlap szerepe

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

26. Kezdőlap • Minden fontos információ szerepeljen rajta • Nyugodtan lehet szelektálni az elérhető tartalmak között azok fontossága szerint Minden fő kategória szerepel a kezdőlapon Forrás: http://www.usability.gov/pdfs/guidelines.htm

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

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

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

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

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

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 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. Forrás: http://www.usability.gov/pdfs/guidelines.htm

33. Oldal szerkezete

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

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

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

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

38. Oldal szerkezet • Fontosság megkülönböztetése • Az elemeket fontosságuk sorrendjében kell elhelyezni (felül a legfontosabb) 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. Forrás: http://www.usability.gov/pdfs/guidelines.htm

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 Rossz példa Jó példa Forrás: http://www.usability.gov/pdfs/guidelines.htm

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

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 Úgy tűnik, az oldal tetején vagyunk Úgy tűnik, az oldal alján vagyunk Forrás: http://www.usability.gov/pdfs/guidelines.htm

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

43. Navigáció

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

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

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) Jó példa Rossz példák Forrás: http://www.usability.gov/pdfs/guidelines.htm

47. Listák

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 Ha U.S.A-beli látogatók vannak többségben, legyen az az első Forrás: http://www.usability.gov/pdfs/guidelines.htm

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

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