Jan Štráfelda - Průvodce internetovými projekty
celá ČR (přes video)  |  776 678 044  |  jan@strafelda.cz

Tooltip

Tooltip je stručná nápověda v podobě bubliny, která se uživateli zobrazí po kliknutí či tapnutí na určitý objekt na stránce. Takovým objektem typicky bývá ikonka, fráze, nějaký odkaz nebo složitější komponenta stránky. Někdy se také tooltip objeví po pouhém najetí kurzorem myši nad objektem, ani nemusíme klikat.

V naprosté většině případů se tooltip zobrazuje jako další vrstva nad stránkou. Obvykle se zobrazí těsně u zkoumaného objektu a mívá odlišnou barvu proti zbytku stránky.

Kde se tooltipy používají

Tooltipy určitě znáte třeba z prohlížeče Chrome. Najedete myší nad ikonku domečku a objeví se vám bublina s textem „Otevřít domovskou stránku“. To je příklad jednoho z osvědčených použití tooltipů – pomáhají uživatelům rychleji se zorientovat v jednotlivých funkcích aplikace.

Tooltipy se také používají v internetových formulářích jako lokální nápověda, která rychle poradí, co byste měli vyplnit do daného políčka. Většinou bývá popisek políčka doplněný ikonkou otazníčku, která tooltip zobrazuje.

Tooltipy se také skvěle hodí jako nápovědy k odborné terminologii, když nechceme, aby uživatel ze stránky odešel třeba do slovníčku pojmů. Dané klíčové slovo podtrhneme tečkovaně nebo čárkovaně a stručnou definici pojmu nad ním zobrazíme po kliknutí.

E-book za mail

Získejte podrobný návod Jak na e-mail marketing (52 stran). Více informací.

Žádný spam, jen užitečný obsah. Newsletter posílám cca 8× ročně. Odhlásíte se kdykoliv.

Jak na lepší tooltipy

Pokud přemýšlíte, jak zlepšit User Experience tooltipů, určitě si dejte pozor na následující rady:

  1. Text tooltipu

    Textový obsah tooltipu musí být relevantní k prvku, u kterého se ukazuje. A musí být co nejstručnější – rozhodně by neměl duplikovat informace, které už uživatel ví i bez tooltipu.

  2. Nad nebo pod zkoumaným objektem

    Uživateli musí být zřejmé, ke kterému objektu se daný tooltip vztahuje. Zároveň by však tooltip neměl daný prvek zakrývat, neboť k němu poskytuje rozšiřující informace.

  3. Barvy

    Uživatel musí tooltip snadno odlišit od zbytku stránky. Zajistěte proto, aby měl tooltip dostatečný kontrast proti obsahu stránky. Nejlépe fungují inverzní barvy. Zároveň musí být text tooltipu dostatečně kontrastní proti pozadí samotného tooltipu (aby byl dobře čitelný).

  4. Jen jeden tooltip

    Na stránce či v aplikaci by měl být viditelný pouze jediný tooltip. Tzn. při zobrazení dalšího bychom měli ten předchozí skrýt. Tooltip také skrýváme při dalších interakcích uživatele se stránkou (třeba při rozbalení menu apod.).

  5. Pozor na okraje stránky

    Tooltipy obvykle bývají vycentrované vzhledem k objektu, ke kterému se vztahují. Pokud se ale daný prvek nachází na okraji stránky, je vždy lepší tooltip mírně posunout, než ho zobrazit oříznutý.

  6. Skrytí tooltipu

    Tooltip obvykle zmizí sám po určité době od zobrazení (cca 1,5–2 sec). U obsáhlejších či agresivnějších typů tooltipů se však určitě vyplatí zajistit ještě další způsob, jakým může sám uživatel tooltip skrýt. Typicky to bývá křížek v pravém horním rohu či tlačítko „Zavřít“ pod textem.

Užitečné odkazy

  • Tooltips – srozumitelný popis použití, chování a specifikací tooltipů v design systému Material Design, který využívá Google ve svých aplikacích. Spousta obrázků.

O autorovi

Jsem Jan Štráfelda a působím jako průvodce online projekty. Potřebujete předělat web či e-shop? Nebo posunout internetový marketing? Poradím s obojím. 14 let budování vlastní digitální agentury mě skvěle vyškolilo – a rád se o zkušenosti podělím.

S čím také umím pomoci:

Své znalosti sdílím i na LinkedIn. Přidejte se k 3 004 marketérům, kteří z nich již pravidelně těží.