facebook-pixel

Webalkalmazás komponensek definíciói

Bevezető

Weboldalak tesztelésénél fontos ismerni, hogy a dokumentációk milyen komponensekre hogyan hivatkoznak. Még tapasztalt tesztelőknél is hallottam, hogy beszélgetés közben abból adódott félreértés, hogy mást értettek egy-egy komponensnév alatt.

Ebben a cikkben ezeket a komponens elnevezéseket és leírásokat gyűjtöttük össze, hogy segítsük az ilyen félreértések elkerülését.

Avataravatar webalkalmazásA felhasználó grafikus ábrázolása: általában fénykép, illusztráció vagy iniciálé.
BreadcrumbsBreadcrumbs webalkalmazásA felhasználói felületeken használt navigációs eszköz, amely a kiinduló ponttól a felhasználó jelenlegi tartózkodási helyéig vezető utat mutatja.
Sidebar menuSidebar menu webalkalmazásEgy keskeny függőleges terület, amely a fő megjelenítési terület mellett található, és jellemzően kapcsolódó információkat vagy navigációs lehetőségeket tartalmaz.
Dropdown menuDropdown menu webalkalmazásÖsszetettebb típusú menü a nagy tartalommal rendelkező webhelyek számára; a további opciók listája lenyitható az elsődleges menüpont alatt.
Hamburger menuHamburger menuKülönböző oldalakra vagy szakaszokra mutató hivatkozások melyek egy vízszintes vonalakból álló hamburgerre emlékeztető gomb mögé vannak elrejtve.
Sticky heatherSticky heatherEgy olyan fejléc, amely nem tűnik el az oldal lefelé görgetésekor, hanem az oldal felső részéhez tapad. Ezzel az alapvető navigációs terület mindig elérhető marad, ami hasznos lehet a tartalomban gazdag, hosszú oldalak esetében.
Call to action button (CTA)Call to action button (CTA)Egy olyan gomb, amelynek célja, hogy a felhasználót egy bizonyos művelet megtételére ösztönözze. (például vásárlás, kapcsolatfelvétel, előfizetés stb.).
FooterFooterA lábléc a weboldal alsó része, amely általában a weblap végét jelzi. A lábléc teret biztosít a hasznos linkek és adatok számára, amelyek a felhasználókat esetleg érdekelhetik.
FormFormInteraktív elem, amely lehetővé teszi a felhasználók számára, hogy információkat küldjenek a rendszernek vagy a szervernek.
Cards (tiles)cardsA kártyák vagy csempék, olyan elrendezési elemek, amelyek segítik a homogén adatok vagy tartalmak elrendezését és megjelenítését. A kártyák általában egyfajta rácsba vannak rendezve, de minden kártya külön darabként látható.
TagstagsA címke gyakran megtalálható a nagy mennyiségű homogén tartalommal rendelkező blogokban és webhelyeken. A címke egy kulcs szóként jelenik meg, amely lehetővé teszi a felhasználók számára, hogy közvetlenül a vele megjelölt elemekre ugorjanak. A címkék valójában metaadatok darabjai, amelyek gyors hozzáférést biztosítanak bizonyos tartalom kategóriákhoz.
Dialog boxdialog boxA párbeszédpanel egy kis ablak formájában megjelenő grafikus vezérlőelem, ami a tartalom felett jelenik meg és információkat közöl a felhasználóval amire választ vár. Fajtái: Alert message: Egy olyan ablak, ami a felhasználót a fontos változásokról tájékoztatja, amit egy (általában OK) gombbal lehet jóváhagyni. Confirmation: Egy felugró ablak, ahol a megadott üzenetet OK és a Mégse gombokkal lehet jóváhagyni.
ButtonButtonA gombok műveleteket indítanak el, mint például egy űrlap elküldése vagy egy interfész-összetevő megjelenítése/elrejtése.
CheckboxcheckboxEgy jelölő négyzet az előre meghatározott lehetőségek közül való választáshoz. Önmagában használva bináris választási lehetőséget ad (bejelölve/nem bejelölve). Csoportban megadva lehetővé teszi a felhasználó számára, hogy több értéket válasszon ki a lehetőségek listájából.
Color pickercolor pickerEgy bemeneti érték, ami lehetővé teszi a szín kiválasztását.
Combobox (autocomplete, autosuggest)Combobox (autocomplete, autosuggest)Automatikus kiegészítés és javaslatok a szabadszavas kereső mezőhöz, amely részleges bemeneten alapuló kifejezést fejez be.
Date inputDate inputDátum beviteli eszköz – több egyedi mezőre osztva nap/hónap/év.
Datepicker (calendar)date pickerA dátumválasztó egy naptárnézet, amiben egy dátumot tudunk kiválasztani.
Drawer (Tray, Flyout) Drawer (Tray, Flyout)  Egy panel, amely kicsúszik a képernyő széléről.
HeaderheaderOlyan elem, amely egy webhely vagy alkalmazás összes oldalának tetején jelenik meg; általában tartalmazza a webhely nevét és a fő navigációt.
Hero (jumbotorn, banner)Hero (jumbotorn, banner)Az első dolog, amit az emberek látnak, amikor belépnek az oldalra, a hero szekció az a terület, amely azonnal megjelenik a képernyőn a logó és menü alatt. Általában egy teljes szélességű képet tartalmaz.
IconiconEgy weboldalon egy ikon egy másik weboldal témáját vagy információs kategóriáját jelöli. Az ikon gyakran egy hiperhivatkozás is egy másik oldalra.
Link (anchor, hyperlink)Link (anchor, hyperlink)Egy forrásra való hivatkozás. Ez lehet külső (például egy másik weboldal) vagy belső (például egy adott elem az aktuális dokumentumban).
Navigation (Nav, Menu)Navigation (Nav, Menu)Általában belső oldalakra mutató hivatkozások rendszerezett listája. A navigációs menük az oldalak fejléceiben vagy oldalsávjaiban jelennek meg, gyors elérhetőséget biztosítva az aloldalakhoz.
PaginationPaginationA lapozást biztosítja, amikor az információkat több oldalra osztják fel ahelyett, hogy az összeset egyetlen oldalon jelenítenék meg. A felhasználó kattinthat a „következő” vagy „előző” lehetőségre így navigálva az oldalak között.
Progress barprogress barVízszintes sáv, amely egy régóta futó feladat aktuális befejezési állapotát jelzi, és rendszerint a feladat előrehaladtával folyamatosan frissül.
Progress indicator (Progress tracker, Stepper, Steps, Meter)Progress indicator (Progress tracker, Stepper, Steps, Meter)A felhasználó előrehaladásának reprezentálása egy sor különálló lépésen keresztül.
Radio button (Radio, Radio group)radio buttonVálasztógombok, melyek lehetővé teszik a felhasználónak, hogy egyetlen opciót válasszon az előre meghatározott opciók listájából.
RatingratingA felhasználók csillagokat használva értékelést adhatnak egy termékhez vagy dologhoz.
Segmented control (toggle button group)Segmented control (toggle button group)Hibrid gombcsoport, ami a különböző lehetőségek vagy nézetek között vált.
Skip linkskip linkAz oldalon belüli hivatkozás egy másik szakaszra ugráshoz. Elsősorban a billentyűzet használatával navigáló felhasználók számára.
Slider (range input)Slider (range input)Egy olyan csúszka, ami segít kiválasztani egy meghatározott érték tartományon belüli értéket.
Stepper (nudger, quantity)Stepper (nudger, quantity)Vezérlő a numerikus érték szerkesztéséhez, csökkentő/növelő gombokkal.
Table tableNagy mennyiségű adat sorokban és oszlopokban történő megjelenítésére szolgáló komponens.
TabstabsEgy kattintható terület, amely egy másik oldalt vagy területet mutat. Ha egy tabra kattint, megjelenik a hozzá tartozó a lap tartalma, és minden más megnyitott lap eltűnik.
Toast (snackbar)Toast (snackbar)Rövid, ideiglenes értesítés, ami a tartalom felett helyezkedik el. Célja, hogy észrevehető legyen anélkül, hogy megzavarná a felhasználói élményt
Toggle (switch, lightswitch, toggle button)Toggle (switch, lightswitch, toggle button)Két állapot közötti váltáshoz használt vezérlő (leggyakrabban be/ki)
Tooltip (popover, toggletip)Tooltip (popover, toggletip)Egy elem leírásának vagy további információinak megjelenítésére szolgáló eszköz. Úgy jelenik meg ha a felhasználó az egeret az elem fölé húzza vagy rákattint.
Visually hidden (screenreader only)Visually hidden (screenreader only)Megjelenít vagy elrejt egy elemet anélkül, hogy megváltoztatná a dokumentum elrendezését.

Megosztás

Facebook
LinkedIn
Twitter

Nem szeretnél lemaradni az új bejegyzésekről?

Tartalomjegyzék

Érdekel a tesztelés világa?

Dolgozz velünk hazai és nemzetközi projekteken

egy csoport ember ül egy asztalnál laptopokkal

Várj, ne maradj le legújabb szakmai cikkeinkről

Iratkozz fel hírlevelünkre és minden hónapban elküldjük a legizgalmasabb cikkeket

egy laptop számítógépet tartó szemüveges férfi
egy süti csokireszelékkel
Tájékoztatjuk, hogy a honlap felhasználói élmény fokozásának érdekében sütiket alkalmazunk. A honlapunk használatával ön a tájékoztatásunkat tudomásul veszi.