Általános info

• A gomb elnevezése és a céloldal/funkció között lehetőség szerint legyen kapcsolat. Tesztelj: a gombot látva milyen funkciót képzel el a felhasználó? Ha nagyon mást, mint ami a cél, módosíts az elnevezésen.

Hogyan használd

• Méretek:
  • Desktop méretben a Közepes méretű gombot használjuk alapértelmezettként.
  • Kis méretű gombokot csak abban az esetben használj, ha nagyon sok információnak kell kiférnie egy képernyőre.
  • Mobil eszközökön a legnagyobb méretű gombok használata ajánlott.
• Használj töltés indikátort, ha a mentés hosszabb ideig is eltarthat. A már megnyomott gomb legyen inaktív, megelőzve azt, hogy kétszer is el tudjon indítani egy folyamatot.
• Az egymás mellé helyezett beviteli mezők, gombok mindig legyenek azonos magasságúak.
• Csoportosítsd a gombokat: ha több funkciót kell egymás mellé kirakni, használjuk a gombcsoportokat a rendezettebb és kompaktabb megjelenítés érdekében.
• Egymás melletti gombok esetén alapértelmezettként használjuk a másodlagos színű gombokat, azonban ha van kiemelt funkció, azt kiemelhetjük elsődleges gombbal. Azonban kerüljük a túl sok egymás melletti elsődleges gombot.
• Sok egymás melletti gomb esetén használhatunk csak ikonos változatot. Ebben az esetben mindenképp ki kell egészíteni tooltip-pel.
• A ritkán használt funkciókat rejtsük el legördülő gombbal.

Mit kerülj el

• Ne használj feleslegesen túl sok gombot egy képernyőn.
• Ne használj különböző méretű gombokat egymás közelében.

Hogyan használd

• Az űrlapokat mindig rendezzük egy oszlopba, jobban áttekinthetővé válik, mint ha több oszlopban lennének és a szemnek ugrálnia kellene.
• A beviteli mezőkhöz mindig kapcsolódjon cimke, és ha szükséges, alatta egy egyértelműsítő mondat.
• Ha túl hosszú az űrlap, próbáld meg témakörökre bontani. (pl. Alapadatok, Elérhetőség)
  Ha szükséges, használj több oldalas űrlapot.
• Csak a valóban szükséges adatok legyenek kötelezőek. Adj lehetőséget, hogy a másodlagos információkat később töltsék ki.
• Mindig jelöld, melyik input tartalmaz hibát és adj pontos magyarázatot a hiba okáról.
• Ha lehet azonnal validáljuk a beírt adatot és jelezzük a hibát.
• Jelezd előre, ha a bevitt adatnak valamilyen szabálynak meg kell felelnie. (pl. nem lehet hosszabb mint…) Előzd meg, hogy mentés után derüljön ki a hiba. Ne akkor szólj, hogy túl nagy a file, amikor már egy perce tölti fel.
• Mindig jelöljük a kötelezően kitöltendő mezőket. Ha az űrlap többségében kötelező elemeket tartalmaz, elég csak az opcionális mezőket jelölni.
• Légy előrelátó, használj olyan alapértékeket, amelyek a legtöbb felhasználónak jók lesznek. Például országválasztásnál legyen alapértelmezett Magyarország.
• Ha több lapra van osztva az űrlap, jelezd, hogy mennyi lap van még hátra és éppen hányadikon áll.
• Adj lehetőséget Drag&Drop fájlfeltöltésre.
• Segítőszövegben mindig jelezd, ha van méretkorlát, formátum korlát.
• Ki/Be típusú válasznál használj kapcsolót.
• Egészítsd ki az inputot alapértelmezett értékekkel ott, ahol szükség van rá. (pl. http://, Ft)
• Ha ugyanazokat az adatokat szükséges újra megadni (pl. lakcím, személyes adatok), adj lehetőséget, a korábban megadott adatok átvételére.
• Ahol ésszerű, oldalbetöltéskor automatikusan legyen fókuszban az űrlap első eleme, hogy azonnal el lehessen kezdeni a kitöltést plusz kattintás nélkül.

Mit kerülj el

• A hibát ne csak egy általános hibaüzenettel jelezd.
• Ne használj legördülő menüt. ha kevés lehetőség közül lehet választani. Használj helyette radio gombokat, checkbox-ot, vagy kapcsolót.
• Ne ragaszkodj a kötött beviteli formátumokhoz, ha nem muszáj. Például dátum beírásánál fogadja el a különböző írásmódokat (2017-01-01 / 2017.01.01.). Ha mindenképp egy formátumra van szükség, a helytelent próbáljuk meg felismerni és automatikusan a szükséges formátumra konvertálni.

Mobil

• Input types: használjuk a html5-ös input típusokat, hogy mobilon a megfelelő billentyűzet jelenjen meg.

A visszajelzéseknek nagyon fontos szerepük van abban, hogy a felhasználók komfortosan érezzék magukat az oldal használata közben. Ezek az üzenetek nem feltétlen igényelnek felhasználói reakciót, de informálják őket a háttérben történő folyamatokról.

Hogyan használd

• A szöveg megfogalmazása legyen egyértelmű, hétköznapi nyelvezetű, minél jobban reagáljon az adott műveletre. Ne használj általános, átlagember számára értelmezhetetlen rendszerüzeneteket.
• Ha szükséges hibakódot megjeleníteni, mindig szerepeljen mellette az érthető magyarázat is.
• Használd a megfelelő színeket.
  • Zöld: Sikeres akciónál, vagy pozitív eseménynél.
  • Piros: Hiba, vagy sikertelen művelet esetén.
  • Sárga: Nincs hiba, de szeretnénk felhívni a felhasználó figyelmét valamire.
• Ha egy üzenet azonnali reakciót követel a felhasználótól, adj lehetőséget, hogy már az üzenet blokkon belül megtehesse azt. Például: Törlés visszavonás.
• Ahol van értelme, adjunk lehetőséget a legutóbbi művelet visszavonására.

Mit kerülj el

• Ne használj általános, semmitmondó hibaüzeneteket, amelyek nem reagálnak a kontextusra.

Progress bar-t olyan esetekben alkalmazzuk, amikor egy folyamat várhatóan hosszabb időt vesz igénybe, de mégis fontos, hogy a felhasználók számára jelezzük a háttérben zajló folyamatokat.

Milyen esetekben használd

• File feltöltés
• Várakozás adatok betöltésére. Helyettesíthető loader ikonnal.
• Egy folyamat állapotának jelzésekor.

Általános info

Felépítés

• Gombsor
• Táblázat
• Lapozó

Hogyan használd

• Témakörök szerint csoportosítsd a gombokat.
• Ha egy funkció csak akkor érhető el, ha egy (vagy több) elem ki van jelölve, akkor – helyszűke esetén – az adott gombokat el lehet rejteni és csak akkor kell megjeleníteni, ha megtörtént a kijelölés. Más esetekben az adott funkciógombokat elég letiltani.
• A ritkán használt funkciók elrejthetők egy legördülő menübe.
• Adj lehetőséget, hogy a felhasználó maga állítsa be a a táblázat megjelenését:
  • az egy oldalon megjelenített adatok számát, illetve
  • hogy mi szerint rendezze a sorokat.
• Hosszú táblázatok böngészését segíti, ha a táblázat fejléce scrollozás után is látható marad az oldal tetején. (Sticky header)

Lehetséges kiegészítések

• Ha szükséges, soron belül is emeld ki a legfontosabb információt. Legyen lehetőség a fontos információk kiemelésére (pl. feladó neve) vastagabb betűtípussal, hogy a táblázatok átláthatóbbak legyenek.
• Sormagasság állíthatósága. A lakossági oldalon lehet szellősebb a sorok megjelenése, mert kevesebb a tartalom, a hivatali oldalon viszont lényeges, hogy minél több sor megjelenhessen egyszerre a monitoron. Vagy alapból legyen más a térköz, vagy legyen állítható a felhasználók számára.
• Keresőmező, ami a táblázat teljes tartalmában keres. A keresőkifejezést beírva automatikusan történjen meg a tartalom szűrése és csak azok a táblázat sorok maradjanak láthatóak, amelyekben az szerepel. Amíg a szűrés megtörténik, fontos loader animációval jelezni, hogy a háttérben zajlik a keresés.
• Oszloponkénti keresőmezők. Ha gyakran használt funkció, akkor legyen folyamatosan látható, ha csak esetenként használják, elég gombnyomásra megjeleníteni.
• Sorok kijelölése checkbox-szal.
• Betekintő panel, a gyors információ megjelenítéshez. Sorra kattintva megjelenhet egy a képernyő jobb oldaláról becsúszó panel. Előnye, hogy nem igényel új oldalbetöltést, gyorsan böngészhetők az adatok. Betekintésre használható még felurgó ablak is.
• Táblázat típusától függően meg lehet különböztetni az olvasott/olvasatlan, újonnan érkezett/korábban érkezett bejegyzéseket.

Mobil

• Legyen lehetőség a táblázat oldalirányú scrollozására.

Mire figyelj

• Használd a HTML5 elemeket (header, nav, article, aside, h1,h2, label, stb.) és a szabványok szerint alkalmazd őket. Ezzel elősegíted, hogy az alternatív megjelenítő eszközökön is elérhetőek legyenen a weboldal tartalmai.
  https://www.w3.org/TR/WCAG10-HTML-TECHS/
• Használj egyszerű, közérthető nyelvezetet a bonyolult jogi szövegezés helyett.
• Tedd a szöveget átláthatóvá, kerüld az egybefüggő, tagolatlan szövegeket. Használj felsorolásokat, kiemeléseket, bontsd a szöveget fejezetekre.
• Ügyelj a kontrasztos megjelenítésre.
• Olyan gomb- és linkszövegeket használj, amelyek egyértelműen leírják az adott funkciót. Például: „Üzenet elküldése” a „Mehet” helyett.
• Egyszerű, konzisztens layout-okat használj.
• Videó, vagy hanganyagok esetében biztosíts lehetőséget a tartalom szöveges elérhetőségére. A videókhoz készíts feliratozást.
• A kapcsolatfelvételi lehetőségeket ne korlátozd egy elérési módra, engedd, hogy a felhasználók kiválasszák a számukra legmegfelelőbbet: Telefon, E-mail, SMS, VOIP, stb.
• Minden információ webes megjelenítésben legyen elérhető, ne kizárólag letölthető dokumentumok formájában. A webes tartalmat természetesen kiegészítheti a letölthető formátum.

Hogyan használd

• Használj auto-complete javaslatokat, a beírt keresőkifejezéshez javasolj témákat.
• Gépelési hibákat próbáljuk észrevenni és felajánlani a helyes kifejezést.
• Mentsük el a felhasználó korábbi keresési kifejezéseit, ezeket felkínálhatjuk, amikor újra a keresőmezőbe kattint.
• A listában találatok száma mindig jelenjen meg.
• Legyen lehetőség a találatok szűrésére.
• Találati listán ha nincs találat, mutass téma javaslatokat. Ehhez jó kiindulási alapot nyújtanak a Google Analytics adatai.
• Google Analytics integráció: ha nem kapcsolódik a kereséshez saját statisztikai modul, használd az Analytics megoldását, konfiguráld be, hogy rögzítse a felhasználók keresési viselkedéseit.