A leckében ismertetünk néhány nagyon fontos használhatósági irányelvet, külön kitérve a webshopok ergonómiájára és az ezzel kapcsolatos kutatásunk eredményére.
A hallgató ismerje meg a legfontosabb irányelveket, és legyen képes ezek alapján weboldalak használhatósági elemzésére.
A következőkben áttekintjük azt a szakirodalmat, amely az üzleti célú weboldalak használhatóságára vonatkozik.
Ma már közhelynek számít, hogy ahhoz, hogy egy weboldal sikeres legyen, egyedi, értékes tartalommal kell feltölteni, gyakran kell frissíteni, intuitív, egyszerűen használható felülettel kell rendelkeznie, és még sorolhatnánk. Az évek során számos olyan irányelv látott napvilágot, amelyek támpontot jelenthetnek abban, hogy mire kell figyelni a weblapok tervezésekor, megvalósításakor.
A téma sokat idézett kutatója, Jakob Nielsen 2001-ben publikálta a weblapok használhatóságára vonatkozó 113 irányelvét, amelyre ma is sokan hivatkoznak, bár hozzá kell tennünk, hogy 2001 óta sok minden változott, így ma már sok esetben az adott irányelvet pontosítani kell.
Ezért is ajánljuk tanulmányozásra a Webergonómia Jakob Nielsen nyomán című könyvet (Szerkesztő: Leiszter Attila, Typotex, 2011), amelyben Nielsen korábban megfogalmazott irányelveit hazai kutatók (Bővíz László, Rung András) értékes megjegyzésekkel látták el, így aktualizálták, árnyalták, pontosították azokat.
A Nielseni 113 irányelvet az egyszerűbb feldolgozhatóság miatt lefordítottuk. Érdemes ezeket áttekintenünk ahhoz, hogy képet kapjunk a különböző kategóriákba tartozó elvekről.
1. A cég nevét és/vagy logóját megfelelő méretben és észrevehető helyen helyezd el!
2. Legyen egy olyan szlogen az oldalon, amely jól összefoglalja, hogy a cég mivel foglalkozik!
3. Hangsúlyozd ki, hogy a webhely miért értékes a felhasználó szemszögéből, miben különbözik a versenytársakétól!
4. Emeld ki a legfontosabb (legmagasabb prioritású) feladatokat, hogy a felhasználók tiszta, egyértelmű kiindulási ponttal rendelkezhessenek!
5. A webhely egyik oldala egyértelműen legyen megjelölve a webhely hivatalos kezdőlapjaként!
6. A fő webhelyen ne a webhely szóval utalj a cég teljes webes megjelenésére, mert a felhasználók azt hihetik,hogy a különböző webhelyek különböző cégekhez tartoznak!
7. Úgy tervezd meg a kezdőlapot, hogy világosan megkülönböztethető legyen a webhely többi lapjától!
8. A céges információkat (Cégünkről, Befektetői kapcsolatok, Sajtó, stb.) egy jól elkülönített helyen csoportosítsd!
9. A kezdőlapon helyezz el egy a Rólunk (Cégünkről) szakaszra mutató linket, amely áttekintést ad a felhasználóknak a cég tevékenységérő és további linkeket tartalmaz a releváns termék leírásokra, üzleti adatokra, szolgáltatásokra, munkatársak adataira, és így tovább!
10. A cégről a sajtóban megjelent információkat, sajtóközleményeket a Sajtó (Sajtószoba) menüpontban helyezd el!
11. A cég egységes arcot mutasson a felhasználóknak, amelyben a website az egyik kapcsolódási felületet jelenti!
12. Helyezz el egy Kapcsolat linket a weboldalon, amely egy olyan oldalra visz, ahol minden kapcsolatfelvételi lehetőség ismertetve van!
13. Ha van visszajelzési lehetőség a weblapon, akkor meg kell adni annak a célját is, hogy egyértelmű legyen, hogy az üzenet a vevőszolgálatra, vagy éppen a webmesterhez továbbítódik!
14. Ne helyezz el belső (a munkatársaknak szóló) vállalati információkat a publikus webhelyen, ezeknek inkább az intranetes oldalon van a helyük!
15. Ha a webhelyen adatokat gyűjtesz a felhasználókról, helyezd el az adatkezelési szabályzatra mutató linket a kezdőlapon!
16. Ha nem magától értetődő, hogy a cég milyen módon jut pénzhez a webhely segítségével (értékesítés, reklámbevételek), akkor magyarázd el az üzleti modellt!
17. Használj vevőközpontú nyelvezetet!
18. Kerüld a redundáns tartalmakat!
19. Ne használj marketing nyelvezetet, fura frázisokat, amelyek megnehezítik a megértést!
20. Használj konzisztens formázásokat, stílusokat!
21. Ne láss el címkével olyan területeket az oldalon, amelyeknek egyértelmű a szerepük!
22. Kerüld az egy elemből álló kategóriákat és az egyelemű felsorolásokat, listákat!
23. Használj nem törhető szóközt ( ) azon kifejezéseknél, amelyeknél az érthetőség és a pásztázás miatt fontos, hogy a szavak együtt maradjanak!
24. Felszólító módot (pl. Adja meg az irányítószámot!) csak kötelező elemeknél használj, vagy fogalmazz egyértelműen! Például: Ha kíváncsi a helyi időjárásra, adja meg az irányítószámát!
25. A mozaikszavakat, rövidítéseket magyarázd meg az első előfordulásuknál, közvetlenül az adott rövidítés után!
26. Kerüld a felkiáltójeleket!
27. A csupa nagybetűs írásmódot kerüld, formázásként ne használd!
28. Ne használj kiemelésre szóközt, és központozást!
29. Inkább használj példákat a webhely tartalmának bemutatására, minthogy csak körülírnád a tartalmat. Például egy Aktuális hírek blokk az utolsó 5 hírre mutató hivatkozással sokkal kifejezőbb a felhasználók számára, mintha csak egy leírást találnának arról, hogy ide kattintva elérhetőek a friss hírek.
30. Minden példa esetén a hivatkozás az adott példa részletes adataira mutasson, ne pedig az adott elem kategóriájára! (Ha például egy filmfesztiválról szól a honlap, és látható egy képkocka egy adott filmből, akkor a link az adott film részletes adataira mutasson, ne egy általános kategóriára!).
31. Az adott példa mellett helyezz el olyan hivatkozást is, amely a bővebb kategóriára mutat!
32. Győződj meg arról, hogy egyértelműen kiderül-e, hogy mely linkek tartoznak szorosan az adott példához, illetve az adott kategória általános leírásához!
33. Tedd lehetővé, hogy minden nemrég (pl. két hete, 1 hónapon belül) publikált tartalom egyszerűen elérhető legyen az oldalon a friss változtatások listájának biztosításával, illetve azok archívumban történő szerepeltetésével!
34. Különítsd el a linkeket és tedd őket pásztázhatóvá! A hivatkozás kezdődjön az információt hordozó kulcsszóval, mivel a felhasználók gyakran csak a linkek első két szavát futják át, és az alapján hasonlítják össze a többivel!
35. Ne használj a linknevekben általános instrukciókat (pl. Kattints ide!)!
36. Ne használj általános linkeket (pl. Tovább ) a listák végén. Le kell írni, hogy miből fog többet látni a felhasználó, ha az adott linkre kattint!
37. A linkek színei mutassák, hogy az adott link még nem látogatott, vagy már látogatott állapotú!
38. Ne a Linkek szót használd az oldalon lévő linkekre való hivatkozásra! A linkek legyenek aláhúzva és kék színnel szerepeljenek!
39. Ha a hivatkozás nem egy másik weboldalra mutat (pl. PDF-állomány letöltése, videolejátszó indítása, email küldése, egyéb alkalmazás elindítása), győződj meg róla, hogy a link egyértelműen jelzi, hogy mi fog történni!
40. A fő navigációs területet jól észrevehető helyen helyezd el, közvetlenül az oldal fő tartalmi egysége mellett!
41. Csoportosítsd az elemeket a navigációs területen, hogy a hasonló elemek egymás közelébe kerüljenek!
42. Ne használj több navigációs területet az azonos típusú linkekhez!
43. Ne tegyél a kezdőlapra olyan linket, amely a kezdőlapra mutat!
44. Ne legyenek a kategóriák közti választási lehetőségek között nem szokványos, kitalált szavak!
45. Ha a webhelyen van on-line vásárlási lehetőség (kosár), a kezdőlapon legyen rá mutató hivatkozás!
46. A navigációban csak akkor használj ikont, ha az segíti a felhasználókat az adott elem azonnali felismerésében!
47. A kezdőlapon legyen egy beviteli mező a keresőkifejezések megadására, ne csak egy keresőre mutató hivatkozás legyen az oldalon!
48. A beviteli mezőnek elég szélesnek kell lenniük ahhoz, hogy a felhasználók lássák és szerkeszthessék a keresőkifejezéseket!
49. Ne címkézd fel a keresési területet, helyette használd a Keres gombot a beviteli mező jobb oldalán!
50. Bár a haladó keresés megléte elvárt a webhelyen, a kezdőlapon egyszerű keresési mezőt helyezz el és a haladó keresési lehetőségre mutasson inkább hivatkozás!
51. A keresésnek alapesetben a teljes webhelyen kell történnie!
52. A webhelyen történő keresés során ne adj lehetőséget a teljes weben történő keresés elindítására!
53. Biztosítani kell a legfontosabb feladatok direkt elérését a kezdőlapon!
54. Ne kínálj fel olyan eszközöket a felhasználóknak, amelyek nem állnak kapcsolatban azon feladatokkal, amelyek miatt a felhasználók meglátogatták a webhelyet!
55. Ne biztosíts olyan eszközöket, amelyek a böngészők funkcionalitását valósítják meg! (pl. hozzáadás a kedvencekhez stb.)
56. A grafikát arra használd, hogy valódi tartalmat mutass be, ne szolgáljon kizárólag dekorációs célokat!
57. Lásd el címkével azon grafikákat és fotókat, amelyeknél nem egyértelmű a tartalomban betöltött szerepük!
58. A megjelenítő méretéhez igazítva szerkeszd a fotókat és diagramokat!
59. Kerül a képek vízjellel való ellátását!
60. Ne használd az animációt csak azon célból, hogy valamire felhívd a figyelmet!
61. A fontos, kritikus elemeket (pl. logó, szlogen) soha ne animáld az oldalon!
62. Bízd rá a felhasználókra, hogy akarnak-e látni animált bevezetőket a webhelyen, ne tedd ezeket alapértelmezetté!
63. A betűstílusokat és más szövegformázásokat (betűméret, szín stb.) figyelmesen használd, mert a túldekoráltság miatt elveszhet a szavak jelentése!
64. Magas kontrasztú szöveg- és háttérbeállításokat használj, hogy a tartalom jól olvasható legyen!
65. Kerüld a vízszintes görgetést!
66. A legfontosabb elemeknek láthatóaknak kell lenniük gördítés nélkül is, a legelterjedtebb képernyő felbontásban (1024x768 – 2009-es adat)!
67. Használj folyékony arculatot, hogy a különböző felbontásokhoz igazodjon a honlap mérete!
68. Megfontoltan használd a logókat!
69. Ne használj olyan kiegészítőket, amelyekre nem akarod, hogy a felhasználók rákattintsanak! Ha például a szöveg mellett van egy grafikus jel, akkor erre is hivatkozást kell tenni, nem csak a szövegre!
70. Kerüld a kezdőlapon a többszörös adatbeviteli mezőket, főleg az oldal felső részén, ahol a felhasználók a keresési funkcióra számítanak!
71. Megfontoltan használd a legördülő menüket, főleg ha annak elemei nem elég beszédesek!
72. Az ablak címét úgy állítsd be, hogy az információt hordozó szóval kezdődjön, ami rendszerint a cég neve!
73. A legfelső szintű domén nevet (pl. .com) ne helyezd el az oldal címében, hacsak az nem szerepel magában a cég nevében is (pl. Amazon.com)!
74. Ne használd a honlap szót az oldal címében, mivel ennek nincs hozzáadott értéke!
75. Helyezz el egy rövid leírást a webhelyről az oldal címében!
76. Az oldal címét korlátozd úgy, hogy ne legyen több, mint 7-8 szó, és rövidebb legyen mint 64 karakter!
77. Üzleti weboldalaknál az URL a http://www.cegneve.com (illetve az adott országnak megfelelő felső szintű domén név) legyen!
78. Azon weboldalaknál, amelyek szorosan kapcsolódnak egy adott országhoz (ami nem az USA), használd az adott ország felső szintű domén nevét!
79. Ha lehetséges, regisztráld a domén nevet alternatív leírással, rövidítéssel, a tipikus elírásokkal stb.!
80. Ha alternatív kiejtése is van a domén névnek, akkor az egyiket válaszd ki hivatalosnak, és a többi változatott erre irányítsd át!
81. A főcímeknek tömöreknek de kifejezőeknek kell lenniük, hogy kevés szóval minél több információt hordozzanak!
82. Készíts összefoglalásokat a honlapon szereplő cikkekhez! (Pl. nem jó, ha a teljes cikkből annak csak az első bekezdése látszik, inkább a tartalmi összefoglalását kellene elhelyezni!)
83. A főcímek linkeljenek a teljes cikkre!
84. Amíg a megjelenő híreket azonos héten publikálták, nincs szükség a dátum és idő feltüntetésére, kivéve ha ezek valóban gyakran frissített hírek!
85. Amikor a felhasználok a webhely webcímét megadják, vagy rákattintanak, akkor a cég valódi honlapjára kerüljenek, ne egy bevezető képernyőre, hacsak nem olyan a tartalom jellege, amelyre muszáj figyelmeztetni a látogatókat!
86. Kerüld a felugró ablakok használatát!
87. Ha a weboldal nincs sok nyelvre lefordítva, akkor ne a felhasználók földrajzi helye alapján döntsd el, hogy milyen nyelvű oldalra kerülnek!
88. A céghez szorosan nem köthető reklámokat az oldal perifériáján helyezd el!
89. A külső (nem a saját cégre vonatkozó) reklámok a honlap fő részével összehasonlítva legyenek kisebb méretűek, diszkrétek!
90. Ha a hirdetéseket nem a szokványos bannerterületen helyezed el, címkézd fel őket, hogy egyértelműen kiderüljön, hogy ezek hirdetések, annak érdekében, hogy a felhasználók ne keverhessék össze az oldal tartalmával!
91. A webhely szokványos funkcióit ne formázd úgy, mintha hirdetések lennének!
92. Nem kell szó szerinti értelemben üdvözölni a felhasználókat az oldalon! Ehelyett inkább egy jól csengő szlogent lehet használni.
93. Ha a webhely bizonyos funkcionalitása nem működik, akkor ezt egyértelműen jelezni kell a kezdőlapon!
94. Vészhelyzet esetén legyen terv arra, hogy az adott helyzetet hogyan kell kommunikálni!
95. Nem kell feltétlenül feltüntetni az oldalon a kereső motor fajtáját, a tervező céget, illetve más háttér technológiákra vonatkozó információkat!
96. Ha a honlap esetleg díjakat nyert, erről is kellő önmérséklettel tájékoztassuk a látogatókat!
97. Ne frissítsd automatikusan az oldalt!
98. Ha frissítesz, csak azt a tartalmat kell frissíteni, amely tényleg megváltozott!
99. Ha a honlapnak vannak olyan részei, amelyek a felhasználók által testre szabott információkat tartalmaznak, akkor az elsőként oldalra látogatók ugyanitt ne általános információkat találjanak!
100. Szükségtelen annak biztosítása a felhasználók számára, hogy teljesen testre szabhassák a honlap kinézetét!
101. Ne csak egy linket tegyél a regisztrációs lehetőségre, emeld ki, hogy mik az előnyei annak, hogy valaki regisztrálja magát az oldalon!
102. Mielőtt a felhasználók e-mail címét elkéred, magyarázd meg, hogy ennek mi a haszna és hogy milyen gyakran számíthatnak e-mail üzenetekre!
103. Ha a felhasználói csoportok chat, vagy fórum támogatást kapnak, akkor ne csak egy linket biztosíts számukra ezen szolgáltatásokhoz, hanem listázd ki például az aktuális témákat!
104. Üzleti weboldalakon ne használj vendégkönyvet!
105. Dátumot és időt csak az időérzékeny információk esetén tüntess fel, mint például hírek, élő chat stb.!
106. Azt a dátumot mutasd utolsó módosítási dátumként, amikor a tartalom ténylegesen módosult, ne pedig az oldal generálásának idejét!
107. Az időzónát is tüntesd fel, amikor egy időpontra utalsz!
108. Használd a szabályos rövidítéseket az idő és dátum megadásnál!
109. A hónap neve legyen kiírva, ne csak a sorszáma legyen olvasható!
110. Add meg a változás százalékát, ne csak a növekmény/csökkenés mértékét!
111. A rövidítéseket fejtsd ki, hacsak nem egyértelműek!
112.Az ezres helyiértékeket megfelelő jellel válaszd el azon számoknál, amelyek több mint 5 számjegyből állnak!
113. A tizedespontot igazítsd, amikor számoszlopokat jelenítesz meg!
Nielsen 113 irányelve mellett természetesen sok más kutató által készített irányelv gyűjteményt is találhatunk. A http://www.userfocus.co.uk/resources/guidelines.html oldalon letölthetünk egy olyan Excel-táblázatot, amelyben több kutató által publikált irányelveket egyben tartalmazza. A 247 irányelv különböző kategóriákba (pl. kezdőlap, navigáció, űrlapok, megbízhatóság, oldaltervezés stb.) vannak rendezve. Ez a táblázat lehetővé teszi, hogy különböző weboldalakat egymással összehasonlíthassunk az irányelvek teljesítési arányát tekintve.
A lecke későbbi részében mi magunk is letölthetővé teszünk egy ilyen irányelv gyűjteményt, amelynek segítségével webáruházakat lehet elemezni
Források, kapcsolódó hivatkozások:
  |
 |
 |
A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.
