30. března 2026
Základy designu radiálního menu
Jak navrhovat radiální menu, aby bylo intuitivní a přístupné. Zjistíte, jak rozmístit položky, jaké ikony používat a kdy je radiální menu správnou volbou.
Přečíst článekSpecialista na interaktivní design
Marek Svoboda
Senior specialista zaměřený na kruhové a radiální navigační systémy. Tvoří interaktivní rozhraní, která jsou stejně krásná jako funkční.
O autorovi
Cesta do světa interaktivního designu
Marek se do webového designu dostal během studií na Fakultě informačních technologií VUT v Brně. Už od začátku ho fascinovaly netradičně řešené problémy — zejména jak vytvořit navigaci, která není jen funkční, ale taky vizuálně zajímavá. Postupně se jeho práce zaměřila na kruhové a radiální menu systémy.
Během 14 let v tomto oboru pracoval pro desítky českých agentur a větších klientů. Vyvíjel komplexní interaktivní řešení, experimentoval s animacemi rozbalení a sbalení, navrhoval ikony s popisky, které jsou skutečně použitelné. Všechny jeho projekty mají jednu věc společnou — nikdy neobětuje přístupnost pro estetiku.
V Kolotoči Studio s.r.o., kde je od roku 2019, vede tým zaměřený na výzkum a praktickou implementaci radiálních navigačních systémů. Věří, že dobré navigační systémy by měly být testovány s reálnými uživateli a neustále se zlepšovat na základě jejich zpětné vazby. Passionuje ho hledání rovnováhy mezi tím, co je krásné a tím, co opravdu funguje.
Specialisace
Co Marek dělá
Kruhová navigace
Návrh menu položek rozmístěných kolem centrálního prvku v kole. Zkoumá, jak mohou být kruhové struktury intuitivnější pro určité typy aplikací a webů.
Radiální menu systémy
Tvorba a implementace radiálních menu s fokusem na logickou organizaci prvků. Každá úroveň je pečlivě navržena tak, aby se uživatelé orientovali bez chyb.
Animace a přechody
Navrhuje a implementuje animace rozbalení a sbalení, které jsou plynulé, jasné a nedestruktivní. Animace musí vysvětlit, co se děje — ne jen být efektní.
Design ikon a popisků
Tvorba ikon, které jsou jasné a jednoznačné i v malé velikosti. Vždy se zajímá, jak ikonou komunikovat s uživatelem bez textu — a kdy text opravdu potřebujete.
Lineární záložní navigace
Zajišťuje, že radiální menu má vždycky lineární záložní řešení. Ne každý se orientuje v kružnici — některým vyhovuje tradičnější seznam lépe.
Přístupnost a inkluze
Všechna řešení jsou navržena s ohledem na WCAG standardy. Radiální menu nesmí být jen hezké — musí být použitelné pro všechny.
Rozhovor
Otázky a odpovědi
Proč se zajímáš speciálně o radiální a kruhové menu?
Když jsem začínal, viděl jsem, že skoro všechny navigace jsou stejné — horizontální menu, vertikální menu, dropdown menu. Pořád totéž. Ale existují situace, kdy je kruhová struktura přirozená — třeba když vybíráte barvu, nebo když pracujete s mapou, nebo když chcete něco intuitivního v 3D prostředí. Zajímal mě ten prostor, který se všichni bojí použít, protože si mysleli, že je to moc neobvyklé. Teď víme, že když je to dobře uděláno, tak to není vůbec neobvyklé — je to jednoduché.
Jak přistupuješ k designu ikon pro radiální menu?
Ikona musí být jasná už při prvním pohledu. Když máte šest ikon rozmístěných v kruhu, uživatel by neměl přemýšlet — měl by vědět, na co klikne. Tím, že jsem pracoval s desítkami projektů, zjistil jsem, že je důležité konzistentní vizuální jazyk. Všechny ikony ve stejné tloušťce čáry, stejné vzdálenosti od středu, stejný styl. A pak je tu ta otázka — potřebuju text vedle ikony? Většinou ano, aspoň v tooltipech. Ikona sama je příliš riskantní.
Co je nejčastější chyba, kterou vidíš v radiálních menu?
Animace, která je moc pomalá nebo moc složitá. Uživatel otevře radiální menu a čeká — čeká a čeká. Nebo se animuje příliš mnoho věcí najednou a není jasné, co se vlastně děje. Druhá chyba — bez lineární záložní navigace. Někdo vám pošle odkaz, ale ty si neuvědomíte, že je tam i tradičnější menu. Třetí chyba — neotestovat to s reálnými lidmi. Když si myslíte, že je vaše radiální menu intuitivní, ale pak si jím hraje starší člověk, který normálně web nepoužívá — a je z toho ztracený. To vám otevře oči.
Jaký je tvůj přístup k přístupnosti u radiálních menu?
Přístupnost není extra vrstva, kterou přidáš na konci. Je to součást designu od začátku. Radiální menu musí být ovladatelné klávesnicí — každá položka musí mít jasný focus state. Musí fungovat se čtečkou obrazovky, i když to není ideální pro kruhové struktury — proto ta lineární záložní navigace. A barvy — musím si být jistý, že kontrast je dostatečný. Pamatuju si projekt, kde jsem měl ikony v bílé a šedé, a pak jsem zjistil, že nejsou dost kontrastní. Musel jsem vše přepracovat. Teď to vždycky kontroluji.
Jak se vyvíjely radiální menu za posledních pár let?
Hlavně kvůli mobilům. Když jsme začínali, radiální menu byla skoro jen na desktopu — bylo to zajímavé, ale praktické? Teď jsou telefony dost velké a touchové obrazovky jsou dost citlivé, že radiální menu dává smysl. Vidím to třeba v navigacích fotografických aplikací, nebo v kartách. Druhá věc — CSS animace se staly lepší. Dřív jste museli psát JavaScript pro každý pohyb. Teď můžete CSS animations a transitions vyřešit elegantně. A třetí věc — lidé se stali odvážnějšími. Není to už tak bráno jako exotické — je to prostě jeden z nástrojů v krabičce.
Co tě v práci motivuje?
Moment, kdy vidím, jak někdo poprvé interaguje s něčím, co jsem navrhoval. Obzvlášť když je to bez instrukcí — když uživatel prostě ví, co dělat. To je to, kvůli čemu to dělám. Ne proto, aby to vypadalo dobře — to je bonus. Ale aby to fungoval správně. A pak je tu i druhá věc — sdílení toho, co jsem se naučil. Věřím, že dobrý design by měl být dostupný a inspirovat další lidi. Proto píšu články, proto jsem otevřený na diskuse. Chci, aby víc lidí vědělo, jak vytvářet navigační systémy, které nejsou jen funkční, ale i krásné.
Vzdělání a certifikace
Kvalifikace
Vzdělání
2012
Bc. Informační technologie
Fakulta informačních technologií VUT v Brně, zaměření UX/UI design
2014
Mgr. Interaktivní design
VUT v Brně, diplomová práce na téma radiálních navigačních systémů
Certifikace a kurzy
2016
Certifikace WCAG 2.1 AA
International Web Accessibility Certification
2018
Advanced CSS & Animation Design
Frontend Masters, Animating CSS specialization
2021
User Testing & Research
Nielsen Norman Group, certifikace v UX research metodách
Publikace a příspěvky
2019
Radiální navigace v praxi
Článek v českém UX/UI magazínu Lupa.cz
2021
Animace a přístupnost v CSS
Série článků na Mediálnímu obsahu a Medium
2023
Testování radiálních menu s uživateli
Konferenční příspěvek na Webexpo Praha
Filosofie
Jak Marek přistupuje k designu
Uživatelé jsou středem
Každý projekt začíná otázkou — komu to děláme? Jaký má věk, zkušenost, jaký druh zařízení používá? Design se nevyrábí v prózu, vyrábí se na základě poznání lidí, kteří ho budou používat. A když je třeba, sednu si s nimi a ptám se — co vám na tom nejde?
Estetika a funkce spolu patří
Není to jedno nebo druhé. Dobré radiální menu je stejně krásné jako funkční. Když něco funguje, ale vypadá špatně, je to jen poloviční řešení. A když je krásné, ale nefunguje? To je ještě horší. Věřím na rovnováhu — design, který splní oba cíle bez kompromisu.
Experimentování bez strachu
Radiální menu nebyla běžná proto, že si ji každý bojoval použít. Ale když si ji správně otestuješ a vytvořiš ji se znalostí toho, co funguje a co ne, tak to náhle není rizikové — je to jen dobrý design. Nejsem bát se pokusit něco nového, ale vždycky to testuju a sleduji zpětnou vazbu.
Přístupnost není luxus
Každý má právo používat web. Bez ohledu na to, jestli je senior, má zrakové postižení, nebo prostě používá starší počítač. Přístupnost není příslušenství, které přidáte na konec. Je to součást designu od prvního kroku. A upřímně — když vytvoříš něco přístupné, je to pro všechny lepší.
Učení je průběžné
Web se mění. CSS se vyvíjí. Nové zařízení přichází. Browsers se aktualizují. Pokud si myslíte, že víte všechno, jste pozadu. Každý projekt mě učí něco nového. Snažím se být vždycky zvídavý — jaké jsou nové techniky, jak to dělají jiní, co se změnilo od poslední věci, kterou jsem dělal.
Sdílení znalostí
Weby nejsou lepší, když si všichni střežíme své triky. Píšu články, odpovídám na otázky, sdílím to, co vím. Když si někdo přečte můj článek o radiálních menu a vytvoří něco lepšího — to mě těší. Design roste, když se o něm všichni učíme dohromady.
Články a obsah
Publikace od Marka
Marek píše o radiálních menu, animacích, designu ikon a přístupnosti. Zde jsou jeho nejnovější články z posledních dnů.
26. března 2026
Animace rozbalení a sbalení v CSS
Praktický průvodce tvorbou plynulých animací pro radiální menu. Naučíte se, jak používat CSS transitions a keyframes, aby byly animace rychlé a jasné.
Přečíst článek
23. března 2026
Ikony a popisky v radiálním designu
Jak vytvářet ikony, které jsou jasné a jednoznačné. Zjistíte, kdy potřebujete text, jak formátovat popisky a jak testovat čitelnost ikon.
Přečíst článek
20. března 2026
Záložní lineární navigace pro všechny
Proč je důležitá lineární záložní navigace a jak ji správně implementovat. Každé radiální menu potřebuje plán B pro uživatele, kteří to preferují jinak.
Přečíst článekCo říkají ostatní
Zpětná vazba od kolegů a klientů
“Marek není jen designer — je to člověk, který se opravdu zajímá o to, aby věci fungovaly. Pracoval jsem s ním na jednom velkém projektu s radiálním menu a byl překvapený, jak moc času věnuje testování s reálnými uživateli. To je to, co ho odlišuje od ostatních.”
“Když jsme chtěli implementovat radiální menu, věděli jsme, že Marek je ten, komu se obrátit. Nejen že vytvořil krásný design, ale udělal ji i přístupnou. To, co nás překvapilo, bylo, jak jednoduše se to používá — nebyl potřeba žádný tutoriál.”
“Marek přednášel u nás na veletrhu webdesignu a jeho přístup k radiálním menu byl osvěžující. Nemluvil o tom, jak je to super — mluvil o tom, kdy to má smysl a kdy to nemá. Respektuji jeho upřímnost a jeho znalosti.”
Chcete se dozvědět víc?
Máte otázky na radiální menu, navigaci nebo design? Kontaktujte Marka nebo si přečtěte více z jeho článků o interaktivním designu.