1. Komponenty

Vyhledávání

angl. Search

Slouží k zadání slova nebo fráze a vyhledání příslušné části obsahu bez použití navigace.

Standardní globální vyhledávání v hlavičce webu



<div class="col-12 col-md-4">
    <div class="search">
        <div class="search__input-holder search--with-icon">
            <input type="text" class="form-control search__input" placeholder="Hledat">
            <button class="btn btn-primary search__button" type="button">
            <span class="pvs-theme-icon-search search__button--icon"></span>
            </button>
        </div>
    </div>
</div>

Responzivní (RWD) zobrazení

Slouží pro zobrazení na menších zařízeních (mobilech, tabletech).

Pro představu, jak se má komponenta chovat na jiném zařízení, lze náhled komponenty zmenšit podle potřeby. Ke zmenšení dojde stisknutím pravého okraje a potáhnutím doleva. Komponenta se automaticky přeskládá podle míry zmenšení.

Více o typech zařízení najdete na stránce Mřížka.

Použití

  • Vyhledávání se používá k vyhledání a zobrazení sady výsledků.
  • Vyhledávání lze použít jako primární prostředek pro hledání obsahu nebo jako filtr, který uživateli při hledání obsahu pomáhá.

Typy vyhledávacích polí

  • Pokud použijete vyhledávání, které se týká stránky nebo sekce, ve které se nachází vyhledávací pole, nastavte uživatelům kontext pro vyhledávání pomocí užitečného zástupného textu v poli hledání např. “Hledat dokumenty”.
  • Pokud jde o vyhledávání v globální hlavičce, použijte jako text v poli hledání pouze “Hledání”.

Specifické chování na hlavní stránce

Pokud je vyhledávač umístěn na hlavní stránce webu, měl by být mnohem mnohem výraznější. Takový vyhledávač obsahuje také výrazné tlačítko “Hledat”.

Vyhledávač na hlavní stránce

Upozornění: Příklad na obrázku zcela nesplňuje směrnici o přístupnosti webového obsahu WCAG 2.1. V budoucnu bude nahrazen adekvátním příkladem.

Takový vyhledávač je součástí komponenty Menu.

Výsledky vyhledávání

  • Výsledky zobrazujte s popisky nebo hlavičkami (např. Výsledky pro XY).
  • Pokud pocházejí výsledky vyhledávání z různých oblastí, kategorizujte je (např. dokumenty, služby, aplikace, výukové programy, blogy).
  • Umožněte uživatelům ovládat možnosti prohlížení a schopnost třídit výsledky (např. relevance, popularita, hodnocení, datum).
  • Informujte uživatele jasnými zprávami např. “Na hledaný výraz XY nebyly nalezeny žádné výsledky”.
  • Používejte inteligentní algoritmy, které mohou vyhledávat podobné výrazy nebo vyhledávají i s chybně napsanými slovy.
  • Uveďte u výsledků vyhledávání dostatečný popis, aby uživatelé mohli posoudit, zda a který výsledek je pro ně relevantní.
  • Pokud je to možné, hledaný výraz ve výsledcích vyhledávání zvýrazněte.

Užitečné odkazy