Projekt: eGov dizajn manuál

Ekosystém Slovensko.Digital
1

Tento nápad na projekt vznikol interne v Slovensko.Digital, v rámci transparentnosti a silnejšieho zapojenia komunity takéto projekty zverejňujeme pod tagom projekt.

Manažérske zhrnutie: Služby SD/egovu by mali vyzerať “rovnako”, potrebujeme vytvoriť dizajn manuál pre eGov ako aj pre služby SD. Cieľom je vytvoriť OS framework a tooling, ktorí zjednoduší vývoj tretím stranám ako aj nám interne.

Bližší popis: V SD aj v eGove riešime podobný problém. Máme rôzne služby, ale chceme, aby vyzerali rovnako. V SD je to zatiaľ lahké lebo máme interný tím, ale zmení sa to v momente akonáhle prídu aplikácie od komunity, ktoré zaradíme do ekosystému (áno, tak to chceme). Štandardne na celom svete (komerčne aj vo verejnej správe) sa to rieši dizajn manuálom resp. frontend frameworkom s popísanými a hotovými komponentami a vzormi pre rôzne situácie. Od vzniku tohto nápadu ubehla nejaká doba a vyzerá, že štátny dizajn manuál/framework bude postavený na forku toho z gov.uk. Od tohto nápadu uplynul už nejaký čas a aktívne sa ním zaoberajú aj na UPVII v skupinách štandardizacie.

Cieľová skupina: Interná potreba, vývojári eGov služieb.

Čo ďalej?

  1. @Ernest_Walzel už na tom pokiaľ viem aj niečo robí pre SUXA/UPVII/@michalblazej. Nech podajú status.
  2. Otázne je nakoľko chceme, aby ekosystém SD a oficiálne štátne weby vyzerali “takmer” rovnako.
  3. @filip to aj reálne už použil a možno by vedel napísať aj čo sa mu nepáčilo.
  4. Mapovať situáciu dnes asi nemá veľký zmysel (iné krajiny), kedže rozhodnutie (na strane štátu) už padlo. Jedine, že by sme v SD chceli používať niečo iné.
  5. Iné nápady, čo doplniť a čo chýba sú vítané.
2

Status je taky, ze pojdeme zajtra, verim, von :slight_smile: forkli sme gov.uk DM + mame prelozene a customizovane vsetky relevantne casti pre slovensky egov. Vsetko je to, samozrejme open source, takze to mozete vyuzivat. Skor by som bol rad, ze ak to chcete ako DM pre SK.Digital tak podme spolocne tvorit a zlepsovat jednu vec ako investovat 2 samostatne energie do 2 samostatnych DM. Moze to byt trebars len o vymene hlavicky / paticky pre svet Sk.Digital …

4 Likes
3

Jednotný dizajn manuál elektronických služieb verejnej správy
sprava:
https://www.vicepremier.gov.sk/index.php/informatizacia/legislativa/standardy-isvs/jednotny-dizajn-manual-elektronickych-sluzieb-verejnej-spravy/index.html
vlastne znenie:
https://idsk-elements.herokuapp.com/

5 Likes
4

Jeeeej, je to super!

5

https://www.gov.uk/service-manual

oni to skopírovali?

6

Samozrejme, to bol plan od zaciatku a ja za to velmi chvalim. Je to normalne fork, kde oni (UK) na to maju interny tim, co na tom denne maka. Nieco co tu musela hasit komunita a firmy (pokial viem) na vlastne naklady. Mne to pride uplne neskutocne, ze takuto dolezitu vec urad nedokaze nejako normalne obstarat, ale studie za 50k na blockchainy s tym neni problem.

Zdrojaky su na githube.

cc @ps-frontend

7

v pohode, je to určite krok vpred :slight_smile:

8

Tlieskam, som tym milo prekvapeny.

9

Ja som tuto velmi nepomahal, cele si to vybehal @michalblazej aj ked je pravda, ze som to na neho hodil ho pozitivne motivoval, ze by bolo vhodne to spravit.

1 Like
10

Plánujete spraviť aj nejaké fórum/sekciu pre záujemcov, ktorí by to chceli implementovať a majú praktické otázky alebo sa teoreticky môžu pýtať do tohto threadu?
Skúsim zatiaľ sem :slight_smile: .

Úvod:
Existujú viaceré druhy používateľov. Napr. bežný občan, ktorý sa chce dozvedieť nejakú základnú informáciu, vyplniť jednoduchú žiadosť a dostať jednoduchú odpoveď. Alebo potom expertný používateľ napr. novinár, štatista, ktorý chce mať k dispozícii BI nástroj a rozumie problematike (povedzme si narovinu, nech je BI tool akokoľvek jednoduchý a používateľsky prívetivý, pre bežného človeka, bez interpretácie výstupov, tabuliek a grafov je to iba hračka, pre interpretáciu je potrebný človek, čo rozumie problematike a doméne) alebo firma, ktorá je povinná posielať štatistické výkazy, kde sú rôzne štruktúrované informácie, ktoré sa ďalej v systémoch spracovávajú.

Pravdepodobne existuje viac “prototypov používateľov” a use casov pre používanie stránok, čo by mali tento dizajn manuál dodržiavať. Dizajn manuál obsahuje rozumné princípy, ktoré platia pre obidve skupiny, ale napr. pri formulároch sa podľa môjho názoru sústredí hlavne na prvú skupinu používateľov.

Keby som teda chcel dodržať tento dizajn manuál, ale mojím používateľom je “expert”, ktorý mi posiela štatistický výkaz (ktorý na 99% nebude posielať z mobilného telefónu). Tento výkaz obsahuje štruktúrované tabuľkové údaje, tak mi vznikne síce pekný formulár, ktorý sa bude ľahko vypĺňať človeku, čo ho prvý krát vidí, ale aj on sa skôr stratí pri vypĺňaní (na pozadí tabuliek) a na stránke formulárových políčiek vedľa seba alebo pod sebou.
Pozn: Je jasné, že vo veľa prípadoch sa dá tabuľkám vyhnúť a nie sú vhodné, o tom sa baviť nemusíme, povezdme, že existuje aspoň jeden prípad, kedy takto štruktúrované dáta od používateľa potrebujeme získať.

Konečne moja otázka: Ako by ste odporučili zadávanie tabuľkových “výkazových” hodnôt tak, aby spĺňal všetky princípy a prvky tohto dizajn manuálu a zároveň dodržiaval princíp kontextu a použiteľnosti pre “expertného” používateľa?

1 Like
11

Co ja viem, sedliacky rozum by som zapol. Ten dizajn manual predsa nema dat odpoved na uplne vsetko. Existuju urcite specificke pripady, kde to fakt nema zmysel robit takto. Asi by to chcelo konkretne rozobrat ten pripad, nech sa nebavime abstraktne.

12

Ahojte, v prvom rade pochvala. Super práca a je to určite posun dopredu.

Aké sú ďalšie kroky smerom k implementácií design systému? Je zabezpečené ďalšie rozširovanie alebo asistencia pri nasadzovaní? Je v pláne napríklad užívateľské testovanie alebo iná forma vyhodnocovania na už živých projektoch?

Pár poznámok k samotnej stránke na ktorej je zverejnený manuál:
https://id-sk.github.io/idsk_template/
Nešlo by takéto podstránky doplniť o navigáciu? Pomohla by hlavná navigácia v header alebo aspoň breadcrumbs navigation.

https://idsk-elements.herokuapp.com/form-elements/
Na podstránke s komponentami by bolo fajn trochu iným spôsobom riešiť navigáciu pomocou odkazov s kotvami. Lepšie riešenie je priamo na stránke https://www.gov.uk/service-manual/design/introduction-designing-government-services (podobne to má vyriešené aj bootstrap pri svojich komponentách).

2 Likes
13

Ďakujem, práve preto, že som zapol zdravý sedliacky rozum, tak mi to nesedelo a chcel som si to len potvrdiť, že teoreticky môže taký prípad nastať a poukázať na to, že existujú viaceré prípady. Keď možno niekto ďalší príde na taký prípad, aby sa nad tým zamyslel a prípadne sa nebál konzultovať. Ja som to pochopil tak, že dôležitá je tá filozofia a to nútenie sa nad vecami zamyslieť a urobiť to rozumne použiteľne a nie robiť bezhlavo podľa predlohy a vyhovárať sa na predlohu. Lebo nič nie je dokonalé (a nepokrýva celý priestor) a pri špeciálnych prípadoch nie je až tak dôležité to “ako”, ktoré v tom dizajne je, ale to “prečo” a ten cieľ, ktorý to má dosiahnuť a tie princípy, ktoré tam sú uvedené.
Medzi tým to už kolega rieši priamo s konkrétnym príkladom :slight_smile:

2 Likes
14

Je v pláne doplnenie metodických usmernení? Chcelo by to vzory, prílohy a napr. odkazy na to ako realizovať správne jednotlivé výskumné metódy. Je niekto, kto bude toto v budúcnosti kontrolovať pri realizácií projektov - či a ako bol realizovaný napríklad výskum zo strany dodávateľa?

Táto formulácia mi napovedá, že asi nie, alebo sa mýlim?
ID-SK nemá ambíciu nahradiť dizajnový proces. Je len predpisom pre zostavovanie používateľských rozhraní. …

15

Cau Filip,

v prvom rade – ano, dizajn manual sa primarne zameriava na skupinu pouzivatelov “obcan”, pretoze tam citime moznost najvacsieho dopadu. Nebolo nasou ambiciou pokryt use cases pouzitia pre expertne cielove skupiny a to najma preto, lebo to nema pokryte ani gov.uk :slight_smile:

Pri schvalovani DM na PS3 sa otvorila aj tema “tabulkovych / vykazovych” hodnot – ja som na to reagoval tak, ze je to v prvom rade o tom, aby si spravil dizajner dobru robotu a vykaz co najviac zjednodusil a v druhom rade pripravil taku komponentu, ktora tento vykaz prehladne zobrazi. My na to skutocne nemame momentalne komponenty pripravene. Z dobrych pouziti sa potom moze stat prax a mozeme to potom presunut do DM ako standard.

Ja vsak momentalne nemam info o tom, ci UVPII planuje investovat do ID-SK dalsie financie.

16

Ahoj,

vdaka za pochvalu. Skusim zareagovat:

Nešlo by takéto podstránky doplniť o navigáciu? Pomohla by hlavná navigácia v header alebo aspoň breadcrumbs navigation.

Primarne ma DM sluzit na odbavenie workflow-oriented elektronickych sluzieb, preto sme breadcrumb neriesili. Ale zakladna navigacia v menu je tu: ID-SK - Jednotný dizajn manuál elektronických služieb Slovenska

https://idsk-elements.herokuapp.com/form-elements/ 3
Na podstránke s komponentami by bolo fajn trochu iným spôsobom riešiť navigáciu pomocou odkazov s kotvami. Lepšie riešenie je priamo na stránke Designing good government services: an introduction - Service Manual - GOV.UK 4 (podobne to má vyriešené aj bootstrap pri svojich komponentách).

No to je ovela zlozitejsie ako sa zda :smiley: Takto – v prvom rade GDS robi na uplne novej verzii Elements sablony, cize tu by sme optimalne v buducnosti replacli za tuto hlupu verziu :slight_smile: V druhom rade – je to ovela zlozitejsie, ako som si myslel a sablonu, ktoru posielas sme v skutocnosti mali presne na tychto strankach pred tym aplikovanu, ale nakoniec sme ju museli kvoli konzistencii vratit, aby sme zabezpecili kompatibilitu s gov.uk – vid. aj oni to pouzivaju na tejto stranke: Form elements — GOV.UK elements

17

Uprimne, bol by som velmi stastny, keby sa na UPVII nasli financie na doplnanie ID-SK a dokonca je to imho nutnost. Ale… uvidime ci bude politicka vola, ze? :slight_smile:

Proste dnes to nie je dokonane a bolo by dobre na tom kontinualne pracovat.

1 Like
18

Nemôžme ten dizajn manuál budovať ako komunita ? Potrebujeme na to nejaké extra financie ? Ja narážam na čoraz viac problémov s tým dizajn manuálom a nemám problém robiť pull requesty. Ako kombinujem ten nový Gov.uk design system s tým, čo máme v id-sk, tak sa to nejako dá. V slovenskej verzii sú tam sem tam gramatické chyby, chyby v kóde (napr. pri radio buttonoch sú zlé IDečka), niekde by sa zišlo vymeniť obrázok lebo to mätie keď niekde na obrázkoch máme starú verziu checkboxov a človek sa dopátra na gov.uk githube, že sa to menilo a dôvody prečo.

Nemôžme spraviť dizajn manuál, ktorý chceme dodržiavať a potom ho nedopĺňať a neaktualizovať.

Stále je tam dlhý backlog: This page has been archived (archived) – GOV.UK Design System Pričom niekoľko z tých komponentov je úplne basic a core, bez ktorých tie stránky budú vyzerať dosť odlišne.
Nemám problém robiť contributions aj do gov.uk githubu ak budem mať istotu, že sa to dostane aj do id-sk.

19

Vedel by si tie problemy spisat? Nemozem hovorit za urad, ale osobne by som tiez siel cestou PR do gov.uk verzie a dufal ze to prebuble do id-sk.

20

Aktuálne problémy, ktoré som objavil v slovenskej verzii:

  1. Všeobecne je v hintoch “vy”, “vás” s malým v.
    Označte všetky možnosti, ktoré sú pre vás relevantné.

  2. Zle nastavené ID pre štvrtý radio button (Žijem mimo Slovenska) a tiež label for.
    https://idsk-elements.herokuapp.com/form-elements/ “V ktorej časti žijete”

  3. Nesedí dizajn radio buttonov s dizajn manuálom (ide o staršiu verziu radio buttonov)
    Príklad približných dátumov https://idsk-elements.herokuapp.com/vzory/datumy
    https://idsk-elements.herokuapp.com/vzory/platobna-stranka
    https://idsk-elements.herokuapp.com/vzory/stranky-so-spatnou-vazbou

  4. Logout button je nekonzistentný
    V príkladoch je niekde ako button niekde ako linka pod menom a priezviskom

  5. Nie sú tooltipy neodporúčané ?
    https://idsk-elements.herokuapp.com/vzory/struktura-formularov ukážka 3

Chápem, že väčšina z toho sú prkotiny, ale napr. tie radio buttony ma dosť poplietli.

Potom mi chýbajú základné komponenty ako search bar (našiel som ako proposed na gov.uk), panel / card (nie ten jumbotron čo tam je, niečo som našiel, ale nič moc zatiaľ), menu (toto je asi najvážnejší problém, to čo tam je, nie je použiteľné pre iné ako najjednoduchšie statické aplikácie - našťastie v gov.uk design systéme je horné/ľavé menu) , tabuľky s pagináciou, filtrovaním a sortovaním…

Všeobecne mám pocit (nie som sám s takým pocitom, ale to sa môžme zmeniť), že ten dizajn manuál je fajn pre statické jednoduché až banálne stránky max. nejaký formulárik. Čo taký informačný systém pre občanov alebo nástroje pre občanov, neviem si predstaviť napr. https://obcan.justice.sk/statistika v tomto štýle (a to už, je tá stránka silno zjednodušená oproti BI toolom). Možno mi chýba nejaká informácia o tom, že na aký typ stránok je to určené, kedy to chceme požadovať, kedy to chceme len odporúčať a kedy sa to vôbec nehodí. Ak sa niekomu podarí spraviť https://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html aspoň tento level, tak s tým budem spokojný :slight_smile:, (možno mám zlé a nesprávne očakávania).

To už nadväzujem na moje predchádzajúce pripomienky a proti filozofii a princípom naozaj nič nemám a páčia sa mi myšlienky, preto sa to snažím adpotovať, aby sme to vychytali a zistili, kedy je to dobré a kedy nie, aby sme neprišli do štádia, kedy to bude niekto bezhlavo požadovať a bude s tým každý bojovať a na to nadávať, pričom by to malo byť práve preto spravené, aby sme všetci ďakovali a boli radi, že to máme a že ako nám to pomáha.

Možno by malo zmysel spraviť community repo s componentami a example stránkami ?