Príklady dizajnu dashboardov: 14 rozložení a čo ich robí funkčnými

Dobrý dizajn dashboardu začína otázkou, nie grafom: kto sa na to pozerá, čo musí rozhodnúť a ako často? Najlepšie dashboardy dávajú hore pár hlavných čísel s kontextom, zmeny vysvetľujú grafmi nižšie, majú zreteľné filtre a umožňujú ľuďom konať podľa toho, čo vidia. Väčšina skutočných dashboardov je za prihlasovaním, preto nižšie uvádzame tri verejné príklady, ktoré sme overili v októbri 2026, potom jedenásť bežných rozložení opísaných bez uvedenia konkrétneho produktu. Nasleduje kontrolný zoznam dizajnu, chyby, ktorým sa treba vyhnúť, a ako postaviť vlastný.

Štrnásť príkladov na pohľad

Verejné príklady dashboardov

Tieto sú opísané k októbru 2026.

1. Živé demo Plausible

Plausible, webový analytický nástroj zameraný na súkromie, zverejňuje živé demo analytiky vlastnej stránky, ktoré si môže prezrieť ktokoľvek. Jeho dokumentácia opisuje reporty ako Top Pages, so zobrazeniami stránok, mierou odchodov, časom na stránke a hĺbkou scrollovania, plus vstupnými a výstupnými stránkami. Tlačidlo filtra umožňuje segmentovať podľa stránky pravidlami „je“, „nie je“ a „obsahuje“, a dokumentácia popisuje porovnávanie štatistík v čase.

Čo sa z neho dá naučiť: verejné demo s reálnymi dátami umožňuje ľuďom posúdiť dashboard ešte pred registráciou a malý počet prehľadných reportov s jedným systémom filtrov sa dá pochopiť aj bez zaučenia. Otvorte demo sami a všimnite si, ako sú reporty rozložené.

2. Stripe Dashboard

Dokumentácia Stripe opisuje domovskú stránku s analytikou a grafmi o výkone firmy, ktorá zároveň zobrazuje dôležité upozornenia, napríklad nevyriešené spory. Na prehľade si vyberiete, ktoré widgety sa zobrazia. Bočný panel vedie k zoznamom, s ktorými sa pracuje (zostatky, transakcie, zákazníci, katalóg produktov), každý s filtrami a exportom. Stlačením „?“ sa zobrazia klávesové skratky, sandboxy umožňujú testovať bez zásahu do živých dát a existuje mobilná aplikácia pre iOS a Android.

Čo sa z neho dá naučiť: spárujte pohľad „ako nám to ide?“ s upozorneniami „čo si vyžaduje moju pozornosť?“ a nechajte každého prispôsobiť si prehľad.

3. Grafana

Dokumentácia Grafana opisuje dashboardy postavené z panelov, pričom každý spúšťa dotaz na zdroj dát a sú usporiadané do riadkov alebo záložiek. Premenné umožňujú jednému dashboardu prepínať napríklad medzi servermi alebo prostrediami.

Čo sa z neho dá naučiť: premenné vám zabránia vytvárať desať kópií rovnakého dashboardu. Zoskupenie panelov do zbaliteľných riadkov udrží rozsiahle dashboardy čitateľné.

Rozloženia dashboardov, ktoré si môžete skopírovať

4. Dashboard metrík SaaS

Horný rad: mesačné opakované tržby, noví zákazníci, odídení zákazníci a aktívni používatelia, každý so zmenou oproti minulému mesiacu. Nižšie: trendová čiara MRR, rozpis podľa plánu a zoznam nedávnych registrácií. Náš návod k metrikám SaaS vysvetľuje každé číslo.

5. Dashboard obchodnej pipeline

Lievik alebo stĺpcový graf obchodov podľa fázy, hodnota pipeline podľa vlastníka, obchody uzatvárané tento mesiac a zoznam obchodov bez aktivity za týždeň. Kliknutím na obchod sa otvorí, takže dashboard je zároveň zoznamom úloh.

6. Administrácia e-shopu

Dnešné objednávky, tržby a priemerná hodnota objednávky hore; hlavnou sekciou je zoznam „nevybavených objednávok“; na boku nízke zásoby produktov a nedávne recenzie. Najčastejšia akcia, označenie objednávky ako odoslanej, by mala byť jedno kliknutie.

7. Dashboard podpory

Otvorené lístky, lístky čakajúce na váš tím, medián času prvej odpovede a lístky podľa značky. Nižšie živá fronta zoradená podľa veku. Zvýraznite všetko, čo prekračuje cieľ odpovede.

8. Dashboard skladu

Položky pod úrovňou doobjednania najprv, s akciou „doobjednať“. Potom hodnota zásob podľa kategórie, nedávne pohyby a položky bez predaja v zvolenom období. Pozrite si ako postaviť aplikáciu na správu skladu.

9. Dashboard projektov

Jeden riadok na projekt so stavom, vlastníkom, termínom a percentom dokončenia, plus zoznam meškajúcich úloh naprieč všetkými projektmi. Farbou označte iba výnimky (meškanie, blokovanie), aby vynikli.

10. Marketingový dashboard

Návštevníci, registrácie a miera konverzie podľa kanála v zvolenom období; graf registrácií v čase so vyznačenými spustenými kampaňami; najnavštevovanejšie vstupné stránky.

11. Finančný dashboard

Zostatok hotovosti, splatné a po splatnosti faktúry, výdavky tento mesiac v porovnaní s minulým a nadchádzajúce platby. Účtovnícke detaily nechajte v reportoch; dashboard slúži na prehľad.

12. Dashboard kliniky alebo rezervácií

Dnešné termíny na časovej osi, zrušenia a nedostavenia sa, voľné termíny a nové rezervácie. Dostatočne veľký, aby ho bolo z recepcie vidieť na prvý pohľad.

13. Dashboard osobného sledovania

Aktuálna séria, pokrok k niekoľkým cieľom a kalendárová teplotná mapa aktivity. Skôr motivačný než analytický, preto ho držte na jednej obrazovke.

14. Dashboard pre klientov

Každý klient sa prihlási a vidí iba svoje projekty, reporty alebo výsledky. Jasné popisky, žiadny interný žargón a tlačidlo exportu pre jeho vlastné záznamy. Toto vyžaduje správne prihlasovanie a oprávnenia; pozrite si riadenie prístupu podľa rolí.

Čo majú najlepšie dashboardy spoločné

• Pomenované publikum a účel. „Pre vedúcu podpory, kontrolovaný každé ráno.“
• Hlavné čísla hore, každé s kontextom: porovnaním, cieľom alebo trendom.
• Grafy zodpovedajúce otázke. Čiary pre trendy v čase, stĺpce na porovnanie kategórií, tabuľky pre presné hodnoty.
• Zreteľné filtre, najmä časové obdobie, uplatnené na všetko na stránke.
• Výnimky vynikajú. Farbu používajte na to, čo si vyžaduje pozornosť, nie na dekoráciu.
• Cesta k akcii. Kliknite na číslo, uvidíte riadky, ktoré ho tvoria, a potom konajte.
• Konzistentné definície. „Aktívny používateľ“ znamená všade to isté a definícia je zapísaná.
• Rýchlosť. Pomalé dashboardy sa prestanú otvárať.

Časté chyby

• Zobrazovať všetko, čo sa dá merať. Viac grafov znamená, že každý z nich upúta menej pozornosti.
• Čísla bez kontextu. „1 240“ veľa neznamená bez predchádzajúceho obdobia alebo cieľa.
• Koláčové grafy s mnohými výsekmi. Ťažko sa porovnávajú; zoradený stĺpcový graf je zvyčajne jasnejší.
• Príliš veľa farieb. Silné farby si nechajte na upozornenia a jednu zvýraznenú sériu.
• Zastarané dáta bez časovej pečiatky. Vždy ukážte, kedy boli dáta naposledy aktualizované.
• Chýbajúci mobilný pohľad pre dashboardy, ktoré ľudia kontrolujú cestou.
• Miešanie publika. Správa pre predstavenstvo a denný prevádzkový pohľad zriedka patria na tú istú stránku.

Ako postaviť vlastný dashboard

1. Napíšte otázky, na ktoré musí dashboard odpovedať, a kto ich kladie.
2. Vypíšte zdroje dát: databázu vašej aplikácie, tabuľku alebo API iného nástroja.
3. Načrtnite rozloženie: hlavné čísla, dva až štyri grafy, jeden zoznam úloh.
4. Postavte ho. S Mythex dashboard opíšete v chate a uvidíte, ako funguje v živom náhľade. Dokáže vytvoriť databázu, prihlasovanie a roly, ktoré dashboard potrebuje, a publikovať ho na URL jedným kliknutím. Pozrite si šablóny ako východiskový bod. Ak už vaše dáta sú v dátovom sklade a potrebujete ad hoc analýzu, nástroj BI vám môže lepšie vyhovovať; ak sú v tabuľke, pozrite si ako pripojiť Google Sheets k vašej aplikácii.
5. Otestujte so skutočným používateľom. Sledujte, ako ho týždeň používa, a odstráňte to, čo ignoruje.

Celý postup nájdete v návode ako vytvoriť dashboard.

Ako sme vybrali tieto príklady

Väčšina dashboardov je súkromná, preto sme uviedli iba produkty, ktorých dashboardy sú verejné alebo zdokumentované na ich vlastných stránkach, a opisujeme, čo tieto stránky uvádzali v októbri 2026. Ostatné rozloženia sú bežné vzory opísané všeobecne, nie kópie konkrétneho produktu.

Otázky