Bubble Assist Logo Bubble Assist Kontaktujte Nás
Návrh Tooltipů O Designu Nejčtenější Návody Jak Vytvářet Portfolio Služby Kontaktujte Nás

Petr Kučera

Senior Designer UI/UX a Lead Odborník na Interaktivní Komponenty

Bubble Assist s.r.o.

Petr Kučera, senior designer UI/UX specialista na tooltip a popover komponenty
O mně

Kdo jsem a co dělám

Pracuji v oboru webdesignu a frontend vývoje už čtrnáct let. Specializuji se na interaktivní komponenty a mikro-interakce — konkrétně na tooltip a popover prvky. Jde mi o to, aby tyto zdánlivě jednoduché komponenty fungovaly skvěle. Pozicování bez výstřihů okrajů, progresivní odhalování informací, vizuální lesk. To je to, čím se zabývám.

Kariéru jsem začal v agentuře Semantic v Brně, kde jsem řešil komplexní problémy s interaktivními prvky. Postupem času jsem si vytvořil vlastní systém pro automatické pozicování tooltip bublin s inteligentním detekováním okrajů viewportu. Ten se stal součástí interního design systému agentury. Teď vede tým designerů v Bubble Assist s.r.o., kde sdílím své znalosti prostřednictvím školení, dokumentace a tvorby reusable komponent.

Věřím, že dobrý design tooltipu není jen o estetice. Jde o tom, aby informace dosáhly uživatele přesně v okamžiku, kdy ji potřebují. Bez rozptylování, bez přeplnění interface. To je můj přístup.

Specialista

Moje oblasti expertise

Čtrnáct let vývoje a designu s fokusem na interaktivní prvky

Logika pozicování

Vím, jak positionovat tooltip bubliny tak, aby se nedostaly mimo obrazovku. Vyvinul jsem systém, který automaticky detekuje okraje viewportu a inteligentně mění pozici. Bez výstřihů, bez problémů.

Progresivní odhalení

Informace se mají objevovat postupně, bez přeplnění interface. Rozumím psychologickému aspektu — kdy ukazat co, aby to bylo užitečné, ale ne obtěžující.

Vizuální lesk

Styling šipek, stínů, animací. Vím, jak udělat tooltip prvek, který vypadá profesionálně a funguje elegantně. Nejde jen o funkci — jde o estetiku.

Implementace

Nejsem jen designér. Rozumím kódu — HTML, CSS, JavaScript. Umím navrhnout řešení, které se dá skutečně postavit. Oba světy znám.

Dokumentace

Vytvářím design systémy a interní dokumentaci. Chci, aby i další designéři a vývojáři věděli, jak s tooltip prvky pracovat. Sdílení znalostí je důležité.

Školení

Vedu školení pro designéry a vývojáře. Chci jim předat praktické znalosti z reálných projektů, nikoli jen teorii. Učit se od někoho, kdo to dělá — to má smysl.

Kariéra

Jak jsem se dostal sem

01

Začátky v CSS3 (2010–2012)

Do oboru webdesignu jsem se dostal na začátku 2010. let, kdy jsem začal experimentovat s CSS3 animacemi. Postupně se moje práce orientovala směrem k mikro-interakcím a progressivnímu odhalování informací. Tehdy jsem si uvědomil, že detail je to, co odděluje průměrný design od dobrého.

02

Semantic – brněnská agentura (2012–2019)

Během svého působení v agentuře Semantic se podílel jsem na desítkách projektů pro české i zahraniční klienty. Řešil jsem komplexní problémy s pozicováním a stylingem tooltip prvků. Klíčovým milníkem bylo vytvoření vlastního systému pro automatické pozicování tooltip bublin. Tohle řešení se stalo součástí interního design systému agentury a používaly ho všechny týmy.

03

Vzdělání – Západočeská univerzita (2008–2012)

Absolvoval jsem Fakultu aplikovaných věd Západočeské univerzity v Plzni. Obor byl zaměřen na aplikovanou informatiku a design. To mi dalo teoretické základy, které jsem pak v praxi rozšiřoval a aplikoval na konkrétní projekty. Vysoká škola mě naučila myslet systematicky.

04

Bubble Assist s.r.o. – vedení týmu (2019–2026)

V Bubble Assist s.r.o. vedu tým designerů a pokračuji v misi sdílení znalostí. Vytváříme reusable komponenty, školíme další designéry a vývojáře, a dokumentujeme best practices pro tooltip a popover prvky. Věřím, že znalosti mají smysl jen tehdy, když je dělíme.

Zaměření

Co mě zajímá

Tooltip a popover design patterns

Tooltip a popover prvky jsou zdánlivě jednoduché. Hovername se objeví, ukáže informaci, zmizí. Ale v praxi je to složitější. Jak se pozicují, aby se nedostaly mimo obrazovku? Jak animovat jejich příchod a odchod? Jak je navrhnout, aby byla informace jasná bez přeplnění interface?

Těmito otázkami se zabývám. Vím, že dobrý tooltip design není jen o estetice. Jde o psychologii — kdy ukazat co, aby to bylo užitečné a příjemné.

Pozicování bez výstřihů okrajů

Jeden z největších problémů s tooltip prvky je, když se objeví mimo obrazovku. Uživatel vidí jen část informace a musí se hýbat, aby ji přečetl. To je špatně. Vyvinul jsem logiku, která automaticky detekuje okraje viewportu a inteligentně mění pozici tooltip bubliny.

Teď to znám zpamětí. Jaké jsou všechny edge case? Jak to naprogramovat efektivně? Jak to pak stylovat, aby to vypadalo hezky? Vím na všechny tyto otázky odpovědi.

Progresivní odhalování informací

Ne všechny informace se mají objevovat najednou. Uživatele by to zavalilo. Lepší je, když se informace objevují postupně — nejdřív základní věc, pak detaily. To se jmenuje progresivní odhalování.

S tooltip prvky to funguje ideálně. Hovername se objeví, ukazuje krátkou, jednoduchou informaci. Pokud chce víc, klikne a otevře se popover s detaily. Nebo se chytí a táhne. Jde o to, aby interface zůstal čistý.

Styling šipek a stínů pro vizuální polep

Vizuální kvalita je důležitá. Malé detaily — jak vypadá šipka tooltip bubliny, jaký má stín, jak se animuje příchod — to je to, co dělá rozdíl mezi průměrným a dobrým designem.

Věřím, že designér by měl znát CSS natolik dobře, aby věděl, jak těchto efektů dosáhnout. Ne jen v Figmě — ale i v kódu. To je důležité.

Klíčová témata

Věci, kterými se zabývám každý den

tooltip návrh webdesign vyskakovací bublina logika pozicování progresivní odhalení šipka tooltip stín tooltip mikro-interakce design pattern interaktivní komponenty UI/UX design frontend vývoj CSS animace
Články

Poslední články na toto téma

Podrobné průvodce o tooltip a popover designu

Chceš se podělit o svou zkušenost?

Pokud máš otázky na tooltip a popover design, nebo chceš diskutovat o interaktivních komponentách, rád se potkám. Kontaktuj nás a domluvme si čas na pohovor nebo schulení.

Napsat zprávu Všechny články