Petr Kubáň
Senior Expert na Navigační Struktury
Navigační Cesta s.r.o.
Navigační architektura je jeho vášeň
Petr má 14 let zkušeností s tím, jak přimět lidi, aby se na webu neztratili. Nejde jen o hezké tlačítko nebo šipku — jde o to pochopit, kde vlastně návštěvník je a kam chce jít. Tohle byl jeho první “aha!” moment v roce 2010, kdy pracoval na portálech s více než 500 podstránkami. Od té doby se věnuje primárně drobečkové navigaci, oddělovačům, responzivnímu chování na mobilech a kombinaci breadcrumbů se sidebarovou navigací.
Ústředním milníkem byla jeho práce na českém e-shopu Alza.cz v roce 2015. Nový koncept hierarchické navigace zvýšil průměrnou dobu seance o 23 % a snížil míru opuštění stránek o 18 %. To nebyla náhoda — to byl důkaz, že správně navržená navigace se chová jako neviditelný pomocník. Uživatelé ji nevnímají jako něco zvláštního, ale bez ní by se ztratili.
Věří, že správná navigace není o tom být chytrá. Je o tom být jasná. A když je navigace jasná, všechno ostatní funguje lépe.
Formální příprava a praxe
Fakulta informačních technologií, ČVUT Praha
Obor: Informační technologie a management. Zde se poprvé setkal s problematikou uživatelských rozhraní a začal chápat, proč některé weby fungují a jiné ne.
UX Design Course, Nielsen Norman Group, Kodaň
Intenzivní tříměsíční program zaměřený na user research, usability testing a information architecture. Zde se vracel k základům — jak se lidé skutečně chují na webu.
Certifikace: Accessibility Specialist, Web Accessibility Initiatives
Uznávaná certifikace zaměřená na WCAG standardy a dostupnost. Pro Petra bylo jasné, že dobrá navigace musí fungovat pro všechny, bez ohledu na to, jak přistupují k webu.
Od juniorního designera k vedení týmu
Junior Designer, Netis, Praha (2010–2012)
Začátek v pražské digitální agentuře. Poprvé se potýkal s navigací na velkých portálech. Řešil problémy, které se mu zdály neřešitelné — jak skrze 500 stránek vést uživatele logicky a intuitivně. Zde se zrodila jeho první myšlenka: navigace není součást designu, je součást architektury.
UX Designer & Information Architect, Alza.cz (2013–2017)
Klíčová role v největší české e-commerce společnosti. Vedl redesign navigačního systému pro více než 50 000 produktů. Nový koncept hierarchické navigace se strojovnou breadcrumbů zvýšil konverzi a snížil rate opuštění. To byla chvíle, kdy si Petr uvědomil — správná navigace má měřitelný dopad.
Senior Navigation Architect, Různé agentury (2017–2022)
Freelance a projektová práce pro více než 80 českých a mezinárodních webů. Každý projekt byl jiný — někdy portál s novinkami, jindy komplexní e-shop, někdy firemní intranet. Vždy stejný přístup: poslouchat uživatele, testovat, iterovat, měřit.
Zakladatel a vedoucí týmu, Navigační Cesta s.r.o. (2022–nyní)
Založil společnost věnovanou výhradně navigačním strukturám a hierarchiím obsahu. Vedení týmu tří designerů a jednoho vývojáře. Přispívá k open-source projektu A11y Navigation Patterns a pravidelně přednáší na WebExpo a FrontCon. Dnes už neřeší jen jednu navigaci — řeší Best Practices pro celý obor.
Kde se Petr orientuje nejlépe
Drobečková navigace (Breadcrumbs)
Návrhové principy, stylování oddělovačů, aktivní stavy, responzivní zkrácení. Víte, ty malé lístky na cestě? Petr je navrhuje tak, aby se cesta zdála přirozená.
Hierarchie obsahu
Jak strukturovat stovky nebo tisíce stránek tak, aby se v nich dalo logicky navigovat. Od pojmenování kategorií až po hloubku vnořování — všechno má svou roli.
Responzivní navigace
Jak se chová navigace na mobilu? Zkracování breadcrumbů, toggle menu, collapsible kategorie. Na malých obrazovkách je prostor vzácný a musí se využívat chytře.
Postranní navigace (Sidebar)
Kombinace breadcrumbů se sidebarovou navigací pro komplexní weby. Jak je umístit, aby se navzájem podporovaly a neuparentovaly uživatele volbou.
User Research
Testování s reálnými uživateli. Jak se skutečně chová člověk, když se ztrácí? Petr dělá usability testy a z nich čerpá poznatky pro design.
Dostupnost (Accessibility)
WCAG standardy, ARIA labely, klávesnicová navigace. Dobrá navigace funguje pro všechny — slabozraké, uživatele se sníženou motorikou, všechny bez výjimky.
Co právě řeší Petr
Breadcrumb Trail a Sekundární Navigace
Navigační struktura pro hlubokých hierarchií obsahu — to je Petrův domovský terén. Víte, co dělá navigaci na velkých webech tak obtížnou? Jsou tam tisíce způsobů, jak se na stránku dostat. Uživatel přijde z vyhledávače, z kategorie, z doporučení — a musí mít tušení, kde je.
Breadcrumby nejsou jen “Domů > Kategorie > Podkategorie > Stránka”. To je základ. Jde o to, aby ty drobečky vytvářely logickou cestu, aby se v ní dal uživatel orientovat, aby se na mobilu nezhroutily na jednotlivou linku a aby byly přístupné i těm, kteří nevidí dobře nebo používají čtečku obrazovky.
Responzivní Zkrácení a Oddělovače
Na mobilu není místo na “Domů > Kategorie > Podkategorie > Stránka > Podsekce”. Petr řeší, jak tu cestu zkrátit bez toho, aby uživatel přišel o orientaci. Jsou tu techniky — elipsis, dropdown menu, scroll — ale ne všechny fungují stejně dobře.
A pak ty oddělovače. Síla dělená lomítko? Šipka? Sčítací znaménko? Zdá se to jako detail, ale oddělovač určuje, jak člověk čte hierarchii. Petr se věnuje těmhle “maličkostem”, protože v navigaci nejsou žádné maličkosti — všechno má dopad.
Sdílení poznatků
Open Source: A11y Navigation Patterns
Petr je aktivním přispěvatelem do open-source projektu, který dokumentuje Best Practices pro dostupnou navigaci. Projekt má stovky vývojářů z celého světa a stává se standardem pro WCAG compliance.
Přednášky a Konference
Pravidelně přednáší na WebExpo (Praha), FrontCon (Kyjev), a na meetupech v České republice. Témata: “Breadcrumby v praxi”, “Jak testovat navigaci”, “Navigace na mobilech bez kompromisů”.
Články a Publikace
Přispívá do webových magazínů a blogů zaměřených na UX design. Nedávno napsal sérii článků “Anatomie kvalitní drobečkové navigace” na Navigační Cestě, která se stala malou příručkou pro designery.
Čtěte od Petra
Anatomie Kvalitní Drobečkové Navigace
Co dělá breadcrumby efektivní? Jak jsou postaveny, co se v nich děje a proč někdy selhávají. Praktický průvodce strukturou.
Číst článekResponzivní Zkrácení Breadcrumbů na Mobilech
Jak se chovat na malých obrazovkách? Techniky zkrácení, co funguje a co ne. Testování na reálných zařízeních.
Číst článekKombinace Breadcrumbů se Postranní Navigací
Nejsou konkurenti — jsou partnery. Jak je skombinovat tak, aby si nekonkurovaly a aby uživatel nebyl zmaten volbou.
Číst článekStylování Oddělováčů a Aktivních Stavů
Jak designovat vizuální stav “jsem zde”? Aktivní stav, barvy, typografie. Detaily, které mění všechno.
Číst článekChcete se ozvat?
Máte dotaz na navigační strukturu, breadcrumby nebo hierarchii obsahu? Petr vám rád poradí. Nebo si chcete přečíst více o tom, jak se navigace skutečně dělá.