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:
-
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.
-
Nad nebo pod zkoumaným objektem
Uživatečli 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.
-
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ý).
-
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.).
-
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ý.
-
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ů.