MIRRI Pracovná skupina K9.5 Lepšie služby - Dizajn manuál

Áno, máš pravdu. Toto je veľmi dobrý spôsob fungovania, pretože to zvyšuje potenciál rastu a modernizácie dizajnového systému. Naráža to však na realitu, ktorú opisuješ. Presne preto tvrdím, že ID-SK je skôr striktný dizajnový systém, aspoň by bez patričného riadenia mal byť.

Uvediem príklad: Carbon mal interne v IBM niekoľko rôznych typov a adaptácii kariet. Hlavným dôvodom bolo, že tento komponent nebol špecificky zadefinovaný v prvých verziach. Napriek veľkému množstvu tímov, projektov a rozhodovacich pozícii som však nikdy nepostrehol, že by niekto drasticky predefinoval základný komponent, ako bola napríklad dátová tabuľka. Rozhodne prišli rôznorodé rozšírenia, ale nie zmena základného fungovania. Pri ID-SK sa presne toto deje napríklad s rázsectníkom. Pozri iba tie stránky čo sú tu vylistované o post vyššie.

Keď si budú stránky nekontrolovateľne robiť čo sa im zachce, hociaký dizajnový systém nám bude na dve veci.

Pani, este vam to tu upresnim. Pri priprave vyhlasky sme mali niekolko cielov:

  1. Konzistencia pouzivanych farieb - preto je vo vyhlaske definovana cela paleta a konkretne HEX kody. Paleta GDS nebola vhodna pre SK prostredie. Zatavatelia SK webov proste chceli aby ich weby vyzerali slovensky. Preto sme pridali primarnu modru a rozsirili paletu na zaklade GDS. Takze teraz si nikto nemoze vymysliet vlastnu modru, ani zelenu, cervenu, … proste toto je striktne definovane.

  2. Konzistencia typografie - preto su vo vyhlaske jasne definovane velkosti fontov pre nadpisy, texty, atd. Typografia vychadza z GDS. Nikto si nemoze vymysliet vlastne fonty. Toto je striktne dane!

  3. Konzistencia klucovych komponentov ako su hlavicka, paticka, formularove prvky, atd. Celkovo sme vytipovali myslim 14 komponentov. Iteraciami a testovanim sme zistili, ze aj tu plati klasicky paret - 20% komponentov staci na tvorbu 80% stranok, sluzieb, … . V podstate na tychto komponentoch je postavene aj nove slovensko.sk a vacsina sluzieb co sme kreslili. Tieto komponenty su jasne definovane v prilohe 12 a nikto ich nema co ohybat a pretvarat!

To je ta striktna cast. Zvysok je len na baze doporucenia - v podstate zachovavame sucasny stav. Aj ked to tak mozno vyzera, dnes nikde nie je dane, ze sa ma pouzit cokolvek z GDS. Ked neveris - precitaj si vyhlasky.

Preco tento pristup?

  • dobre sme si uvedomovali, ze stat nema na to aby obhospodaroval rozsiahli dizajn system
  • tento zaklad postacuje na 80% veci a jeho udrzba je pomerne jednoducha … dobry pomer cena/vykon
  • doplnili sme veci, ktore pouzivatelom chybali - a @michal_namesny pouzivatelom nie su bezny ludia - dizajn system je v podstate “B2B” produkt. Nasim pouzivatelom su urady a uradnici, dizajneri a developeri
  • vychadzame z GDS a do buducna dokazeme mnoho veci recyklovat
  • jednoduchost vnimame v pripade uradnikov skor za vyhodu ako nevyhodu
    Atd.

Ked to zhrniem … ID-SK 3 je dostatocne striktny na to co potrebujeme a na tolko striktny na kolko ako stat mame.

1 Like

Tomuto po pravde nerozumiem. U vas je za dizajn/UX zodpovedny vyvojar? Snad nie.

Vyvojar sa z mojej praxe riadi tym co doda dizajner. Casto krat chcu prave vyvojari detailne specifikacie, high-fidelity navrhy, popisy chovania do najmensieho detailu, …

Prave preto som presvedceny, ze pre dosiahnutie ciela - konzistencia - je primarne potrebne pracovat s dizajnermi. Pokial budu mat kvalitne nastroje, budu robit kvalitne navrhy a vyvojari sa budu moct sustredit na vyvoj samotny.

Tiene nie su vo vyhlaske. Vyhodte ich z figmy a problem vyrieseny. Tiene sme robili lebo sme nechceli aby si kazdy vymyslal vlastne. Nic to nemeni na kompatibilite s GDS

Takze ID-SK ma aj 5 aj 10, nie? Takze vsetko ok. Kde je problem? Zvysne spacingy sa pouzivaju ako tokeny napriklad na paddingy nadpisov. Ked to tam nechcete, vyhodte to. Nic sa nestane a kompatibilita s GDS bude zachovana.

Takze potrebujes len povedat, ktora seda z ID-SK je ktora v GDS?

Dark-gray je ta co pouzivame na secondary text
Mid-gray je ta co pouzivame na bordre
Light-gray je ta co je pouzita na backgroundy napr. v paticke

Mrkni na komponenty co su urobene, pozri ake tokeny tam pouzivame a hotovo.

Toto fakt nevyzeraju ako zlozite problemy. Vlastne hovoris, ze v ID-SK mame vsetko co GDS a dokonca nieco naviac. Skutocne nerozumiem kde je problem s kompatibilitou GDS.

Vyvojar / developer, nemal som na mysli konkretne programatora.

Podla mna sa malo pokracovat v rozbehnutej veci, doplnit par farbiciek a drzat sync s govuk. Nebolo to potrebne komplet prekopat este skor ako sa stihli implementovat prve sluzby.

Ja tiež nerozumiem, kde je problém s kompatibilitou s GDS. Hlavne keď od prvého nápadu, cez iterácie, dizajn, legislatívu atď. atď. nikdy neopustili kuchyňu SKITu. Až do momentu kedy sa začal riešiť soft fork. To bolo ako všetci vieme viac ako rok dozadu. Po tomto momente sa to zase plne vrátilo do SKITu a následne aj samotný vývoj ostal v tejto firme.
A aj napriek tomu dostávam od developerov zo SKITu otázky aké farby majú použiť, čo s tieňmi, aký má byť spacing okolo nadpisov…

Skutočne nerozumiem kde je problém s kompatibilitou…

1 Like

Pani, ktokolvek sa rozhodne robit nieco pre zlepsenie toho uboheho aktualneho stavu drzim mu palce a prajem vela trpezlivosti!

Mna by to NKU zaujimalo zosirsia nez len “dizajn manual”: IMHO “chlapci a dievcata uleteli”, lebo ked mam vypnuty JavaScript, tak tam nic nevidno, vid Pristupnost webov, JavaScript, atd .

Matne si pamatam, ze sa (tusim) v PS3 riesilo az prilis tvrde resp. uz prezite nariadenie v Standardoch, ze web musi byt plne funkcny aj bez JavaScript-u, vid 55/2014 Z.z. - Výnos Ministerstva financií Slovens... - SLOV-LEX . Nariadenie sa zmiernilo/vypustilo, lebo ano, na dnesnu dobu prilis tvrde opatrenie to bolo. (Tot konsenzus v PS, nie moj nazor.) Na stranu druhu, malo to stopnut “ulety leniveho web developmentu” typu “Nemas JavaScript? Ani len tlacovu spravu neuvidis!” (Ano, som expresivny, lebo ma to dost irituje.)

Blížime sa na štartovaciu čiaru
Posledné mesiace boli skutočne rušné a dlžíme vám update

Legislatíva

  • Zbierame podklady na možné budúce zmeny pre predpisy (aj) okolo IDSK. Už v samotnej prílohe 12 vyhlášky 78/2020 je pár drobných chýb. Niekde to je príliš komplikovaný text, niekde chýba stav komponentu alebo sa vyskytuje nevysvetlený vyraz
  • Tu chceme ísť štandardným procesom: spísanie materiálu, pracovná skupina a feedback, IPK, MPK. Nech to nejde “poza bučky”
  • Veľmi nám pomohla firma Archimetes (Robo Kuchár, Rasťo Rehák a ďalší), ktorí pri zapracovaní IDSK 3 do svojho frameworku spravili analýzu vyhláška vs Figma a bezplatne nám ju poskytli
  • Jano Suchal zase našiel chybu v platnej vyhláške, kde sa v tomto prechodnom období (1.4-30.6) odkazujeme na bod (označovanie povinných a nepovinných polí), ktorý nám v danej verzii prílohy 12 chýba. Vo verzii od 1.7 je už všetko ok.
  • Vysvetlenie pojmov a metodiky: tu dobiehame domáce úlohy z minulosti. Veľa z toho súvisí priamo s IDSK, zbytok sú skôr UX témy v rámci eGov (547), riadenia projektov (401) alebo hlavného Digi zákona (95). Máme pripravené definície ako prioritná služba, hlavné webové sídlo. Taktiež nás čakajú tie UX metodiky (tuším 4 , čiže písania bude dosť)
  • Tu postupne zisťujeme, čo všetko nám vo vyhláške 78 chýba, alebo je ťažko prispôsobiteľné. Pri diskusii s freevision sme napr. zistili, že portálové riešenia (client side) sa veľmi ťažko napasúvajú na požiadavky k webovým sídlam a väčšina pri takomto použití fakt nemá zmysel (nečakané…)
  • Jedno poobede som strávil googlením čohokoľvek v spojení IDSK a UX v rámci štátu a našiel som kopec checklistov, už postupov a pod. vychádzajúcich z legislatívy do roku 2022. Keďže viacero firiem a OVM sa v rámci konzultácii odkazujú na tieto verejné zdroje, musíme ich aktualizovať a držať platné.
  • Dávali sme pár dní dokopy dopytovú výzvu kde IDSK ale aj UX budú znova vecne dôležité témy. Budeme sa snažiť proaktívne supportovať projekty OVM už pred zapojením do výzvy aj vybrané projekty z pohľadu dizajnu, nech sa nemusíme hádať na konci projektov

Dizajn

  • V rámci tejto časti sme sa až tak veľmi neposunuli,.ale predsa pár drobností.
  • Vytvárame komunitný Figma profil pre mirri, kde chceme zverejňovať všetky potrebné projekty. Aby sme predišli zablokovaniu keď sa skit kompletne zruší.
  • Na tieto zmeny pripravujeme aj interné mirri prostredie figmy - čo budú zdrojové súbory a knižnice, kto má akú úroveň prístupu, manažment ľudí, manažment tímov, atď.
  • Keďže sa komunitne nedá vypublikovať knižnica, bude to fungovať tak ako doteraz na sťahovaní verzií (je ešte jeden spôsob, ale tam by ten manažment bol značne zložitejší a zároveň by to mohlo tvoriť náklady na figmu)
  • Čo sa týka komponentov, zoberieme dokument od Archimetes a následne si chceme vypýtať feedback z projektov, ktoré v IDSK3 už kreslili (napr. životné situácie, mUPVS a podobne). Zatiaľ ideme po vychytaní múch, neriešime rozvoj (príde neskôr)

Vývoj
Tu sa podarili 2 dôležité veci aby sme sa mohli postaviť na štart

  • SKIT dolaďuje posledné komponenty zo softforku. Podarilo sa im spracovať všetko, čo bolo v prílohe / vo figme a spraviť snippety rešpektujúce soft fork ako sa len dalo (t.j. stále sa držíme GDS). Veľmi by nám pomohlo, keby na to ľudia pozreli odborným okom a pomohli nám ešte vychytať muchy. Momentálne to máme v branchi develop na githube. Pracujeme na tom, aby sa to nasadilo priamo do zložky IDSK3 frontend
  • Podarilo sa vyriešiť aj problém s webom. Veľmi nám pomohol tím CSIRT. Postavili web na reactových komponentoch z projektu mUPVS a preklopili aj dokumentáciu SKITu. Riešime nasadenie do produkcie. Aby nám súbežne bežala IDSK2 aj IDSK3

Komunita

  • Dávame na poriadok komunikačné kanály. Okrem už existujúcich ( mail idsk, čoskoro web, brisk fb, idsk fb, GitHub diskusie pod issues a pod. Chceme ešte doplniť LinkedIn - výrazne vhodnejšia cieľovka pre nás. Dumàme nad tým, ktoré kanály budeme preferovať (hlavne fb) a do akej miery - brandová stratégia mirri-brisk-idsk, aby sme sa nekanibalizovali, a zároveň neinvestovali čas do 5 smerov s minimálnym impactom
  • Samoško tu na platforme updaty budem dávať podľa možnosti
  • Začínajú sa nám množiť otázky na IDSK3, k tomu chceme vytvoriť nejaký jednoduchý one-pager dokument, ideálne už s aktuálnymi linkami

Next steps

  • Po oficiálnom relase chceme držať vyšší štandard supportu aby OVM/ dodávatelia mali info ktoré potrebujú a nevnímali IDSK ako blocker
  • Dôležitý bod: keďže SKIT rozhodnutím vedenia mirri končí, potrebujeme nájsť firmu, ktorá s nami bude na IDSK ďalej pracovať. Budeme robiť VOčko, pred tým by sme radi išli aj do PTK, aby sme súťaž nastavili rozumne a vysúťažil dobru firmu. Ešte nejaký čas budeme potrebovať ale je to v procese
  • Ak sa predchádzajúce body podaria, ďalší blok budú hore spomínané vzory
5 Likes

Nazdar, vedel by si upresnit co znamena “pri zapracovani IDSK 3 do svojho frameworku”?

  • zapracovali odladene HTML komponenty GDS
  • zobrali ID-SK 3 figmu a cele si to na jej zaklade nakodovali

alebo co to vlastne znamena?

Možnosť B:
zobrali akékoľvek dostupné zdroje (napr. figma) a spravili z toho tému do liferay (celé si to nakódovali).
V tom čase SKIT ešte nekódil HTML GDS komponenty, takže viac ako figmu (prípadne reactové komponenty z mUPVS) sme nemohli poskytnúť.
Tu je public github k tomu:

Kukol som to repo, ale vyzera, ze tam sa najma prisposobila liferay hlavicka a paticka a zvysok ostal rovnaky, ci este nieco viac sa tam urobilo?

Keď som večer pozeral do toho githubu, tiež som tam viac nenašiel, ale približne pred mesiacom sme mali s Archimetes call, kde spravili showcase v podstate všetkých komponentov vo vyhláške a vyzeralo to dobre :slight_smile:

My sme to pojali čiastočne ako príspevok do komunity a čiastočne ako reklamu.
Čiže Theme je tam spravená, tú potrebuje každý kto chce implementovať ID-SK do LifeRay.
A tú sme dali aj na github ako príspevok do komunity, nech sa to prepoužije, nech nie je každý Liferay portál pre OVM robený úplne inak.
Ale jednotlivé GUI prvky čo sme predvádzali už berieme ako naše prvky, tam je to aj tak kombinácia zdrojákov, “zdrojákov” a klikania.
Čím chceme povedať, že ak by niekto potrebival ID-SK 3 do Liferay riešenia , tak to máme pripravené na použitie, vrátane konzultačných kapacít. Ak si niekto chce GUI prvky vyklikať sám, alebo chce iné, môže vziať len tú tému a vytvoriť si vlastnú implementáciu prvkov …

1 Like

Inak da sa pozriet niekde nejaka implementacia? Lebo teda som v tom, ze idsk je povinne len pre sluzby + webiky ministerstiev.

Zaroven som uplne presvedceny, ze ktokolvek sa chyti idsk3 (a vlastne akehokolvek dizajnu), tak ho zozeru na mirri v oddeleni pristupnosti. Toto fakt nie je sranda urobit dobre (a aj preto tak tlacime na pilku so soft-fork).

Neuveriteľné sa stáva skutočnosťou :tada:
Kolega Braňo neskutočne zabral a podarilo sa mu spolu s tímom ďalších ľudí (mirri, nases, všetci svätí…) vyriešiť obrovské množstvo problémov. Zároveň sa mu podarilo nasadiť web ID-SK3 https://idsk.gov.sk/

Uvedomujeme si, že to vôbec nie je dokonalé. Naopak, berieme to ako public betu.

Čo budeme riešiť v najbližších dňoch :
1. techniku v pozadí
Servery, domény atď… . niečo sa stihlo spraviť, niečo sa ešte rieši, nastavuje… To platí napríklad aj na prepojenie s githubom, miesto pre IDSK3, IDSK2 atď.

2. Github
mechanizmy práce s githubom, synchronizácia atď. Tu nás okrem technických vecí čaká ešte úprava obsahu (readme files a pod.) a zároveň organizačné nastavenia - včera som do IDSK3 repa doplnil Issues a diskusiu, pracujeme na textoch a mnoho ďalšieho

3. Práca na webe
Web má k dokonalosti ďaleko a my si to uvedomujeme.

  • V prvom kole chceme vyriešiť najväčšie chyby a doplniť prepojenia (veľa z nich sme nevedeli spraviť dopredu kvôli riešeniu hostovania.
  • Rozbilo nám kopu obrázkov, ktoré budeme musieť optimalizovať
  • ku komponentom chceme doplniť code blocks, následne aj playground element (niečo ako storybook, alebo klikateľný box s funkčným komponentom v ňom)
  • máme tam celé kategórie, kde ešte nemáme spracovaný obsah. Postupne budeme dopĺňať

4. veci okolo IDSK

  • dávame dokopy tlačovú správu, nech verejnosť aj OVM vedia, že už je (niečo) vonku
  • dávame dokopy podklady na verejné obstarávanie, aby sme získali firmu, ktorá sa do rozvoja IDSK pustí s nami

Linky:
web idsk3

Web IDSK 2
Dočasne sme ho presunuli pod vlastnú doménu. budeme riešiť optimalizáciu, prelinkovanie medzi 2 a 3 atď. nech to OVM nemusia prácne hľadať.
https://idsk2.gov.sk/

Komponenty IDSK3 (webové zobrazenie)
tu nastal v posledných hodinách nejaký problém a nechce to načítať komponenty priamo. Cez “Open this example in a new tab” ich zobrazí. Zisťujeme, čo sa pokazilo. Zároveň tu ešte potrebujeme prekopať texty z forku GDS, pracujeme na tom…
Ďakujeme SKITu za vytvorenie komponentov :slight_smile:
https://komponenty.idsk3.gov.sk/

Komponenty IDSK3 (Github)
Zatiaľ čo viem, sú dostupné v branchi develop. Tiež pracujeme na tom, aby sa spravil push (alebo pull? Stále ešte nie som v tých Git veciach úplne doma)

Kontakt na IDSK tím

  • tu na platforme
  • idsk@mirri.gov.sk
6 Likes