9 használhatósági aranyszabály

Ezelőtt 10 évvel, ha egy magyar IT szakember megpróbált volna használhatóságról beszélni egy weblap megrendelőnek, valószínűleg az ügyfél jóízűen nevetett volna és egy legyintéssel letudta volna a felhasználói felület használhatóságának problémáját. Ehez képest manapság, már egy átlagos vállalati weblapon is fontos, hogy a felhasználói felület úgy legyen kialakítva, hogy az egyszerűen használható, könnyen kezelhető legyen, sőt ennek a problémának a megoldására már egy külön üzletág és ezzel együtt egy külön szakma jött létre. Ebben a bejegyzésben a használhatóság legalapvetőbb aranyszabályait próbáltam összefoglalni. Lássuk, mire jutottam.

Kép forrása: www.uiweekly.com

Aranyszabályok:

1. A webdesign nem művészet, hanem tudományág. A weblap letisztult, fölösleges design elemektől mentes kell legyen, de ennek ellenére pozitív benyomást kell keltenie, esztétikus, kellemes megjelenésével. A színeket és árnyalatokat úgy kell használni, hogy azok a látogatót “vezessék” az oldalon. A fontos részeket ki kell emelni élénk színekkel, a kevésbé  fontos részeket pedig háttérbe kell szorítani halvány, “meglapuló” színekkel. 
2. Az oldal lényegi, tartalmi részének a háttere lehetőleg fehér legyen, a fehér háttérre pedig fekete betűkkel írjunk. A betűtípus képernyőről is jól olvasható legyen, lehetőleg ne “lábas” betűtípust válasszunk, mint például a Times New Roman, hanem díszítés nélkülit, mint például az Arial, vagy Verdana. A betűk méretét relatívan határozzuk meg (ne px -be, hanem em -be), mivel napjainkban már nem beszélhetünk egységes monitorméretről, az abszolút méretezés pedig egyes monitorokon kicsinek bizonyulhat.
3. A szöveges tartalomból a fontosabb kulcsszavakat bátran emeljük ki, mivel a felhasználók általában csak végigfutnak a szövegeken, nem olvassák el azokat. Ha kiemeljük a kulcsszavakat, akkor egy első “szkennelés” után tudni fogják, hogy érdemes -e végigolvasni az oldalt vagy sem.
4. A linkek legyenek jól megkülönböztethetőek a többi szöveges tartalomtól. Ajánlott sötétkék színnel jelölni őket, mivel kutatások azt bizonyítják, hogy ezt a színt a felhasználók a linkekkel azonosítják. Továbbá a linkeket aláhúzással is el lehet látni, valamint ha ez az arculatot pozitív irányba befolyásolja, beállíthatjuk, hogy ha az egeret a link fölé viszi a felhasználó, akkor a link szövegének színe megváltozzon (ajánlott szín a piros).
5. A navigáció (menü) jól látható helyen helyezkedjen el, a menüpontok neve tömör legyen, de beszédes. Amennyiben lehetséges használjunk olyan navigációs sávot, amely megmutatja, hogy a felhasználó éppen hol jár a weblapon (Kezdőlap – Rólunk – Munkatársaink – John Smith). A weblap logóját javasolt a főoldalra linkelni.
6. A weblap tartalommentes háttere sötét színnel legyen kitöltve, mivel a nagy méretű, élénk színű üres részek elvonják a látogató figyelmét a tartalomról. Kerüljük az olyan flash vagy gif animációkat, amelyek erőszakosan magukra vonják a figyelmet (villognak, gyorsan mozognak, egymással nagy kontrasztban álló színeket váltogatnak stb.). Az automatikusan elinduló videókat vagy zenéket kerüljük!
7. A képeket ne stíluskódokkal méretezzük át, hanem egyenesen akkora képeket mentsünk el, amekkorát be szeretnénk illeszteni az oldalba. A nagy méretű, css kóddal lekicsinyített képek  megnövelik a weblap betöltődési idejét, az internetfelhasználók pedig a technológiai fejlődéssel egyidőben egyre türelmetlenebbekké válnak. Ajánlott úgy megtervezni az oldalt, hogy maximum 3 másodperc alatt a lényeges tartalmi részek betöltődjenek.
8. Linkeknél, képeknél és mindenhol ahol szükséges lehet és technológiailag megoldható, javasolt a felugró “magyarázó buborékok” használata. Segítségükkel a felhasználók könnyebben megérthetik, hogy mit értünk mondjuk egy “Részletes keresés” menüpont alatt. Minden képnek állítsuk be az alt paraméterét, amelybe megmagyarázzuk, hogy mi látható a képen, arra az esetre ha valamilyen okból kifolyólag a kép elérhetetlenné válna, vagy a felhasználó szöveges böngészőt használ.
9. Napjainkban az internet már nem csak számítógépről, hanem különböző mobil platformokról (mobiltelefon, PDA, i-Phone, i-Pad, Android stb.) is elérhető, ezért amennyiben tehetjük készítsünk oldalunkról egy mobil változatot is, amelyet ezekre a készülékekre élezünk ki. Hogy milyen felületet érdemes ezen hardverekre fejleszteni, arra most nem kívánok részletesebben kitérni (vagy majd talán egy másik bejegyzésben, valamikor).

Tömören összefoglalva szerintem ez a modern webfejlesztés 9 alapvető használhatósági szabálya. Amennyiben ezeket a szabályokat betartod, valószínűleg sikerül egy használható weblapot összeállítanod. Sok cég fizet súlyos százezreket azért, hogy ezeket a dolgokat egy magát szakértőnek tituláló személy elmondja, úgyhogy remélem hasznosnak fogjátok tartani ezeket a sorokat. Várom az ötleteket, hogy mi lehetne a 10. szabály.